/* Hero-Ideen /webdesign/ (22.10.2026) */
body{background:#eef2f8}
.wi-top{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:12px var(--pad);background:#012d5a;color:#fff;font:500 14px/1.3 var(--b)}
.wi-top a{color:#cfe6ff;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08)}
.wi-lab{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:40px var(--pad) 12px;scroll-margin-top:70px}
.wi-lab span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3b9bfa;color:#012d5a;font:700 16px/1 var(--b)}
.wi-lab b{font:700 24px/1.2 var(--b);color:#012d5a}.wi-lab small{flex-basis:100%;font:400 15px/1.5 var(--b);color:#4f6788;padding-left:46px}
.wi{position:relative;margin:0 var(--pad);border-radius:32px;overflow:hidden;color:#fff}
.wi .hx-head{padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.wi-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(30px,4vw,64px) clamp(20px,4vw,56px) clamp(56px,6vw,90px)}
.wi-bc{display:flex;flex-wrap:wrap;gap:8px;font:500 14px/1.4 var(--b);opacity:.9;margin-bottom:16px}.wi-bc a{text-decoration:underline;text-underline-offset:3px}.wi-bc span{opacity:.7}
.wi-eb{font:600 13px/1.3 var(--b);letter-spacing:.14em;text-transform:uppercase;color:#9fd0ff}
.wi-h1{margin-top:12px;font:700 clamp(32px,3.6vw,58px)/1.04 var(--d)!important;letter-spacing:-.035em;text-transform:uppercase}
.wi-lead{max-width:34em;margin-top:18px;font:400 clamp(16px,1.2vw,19px)/1.6 var(--b)}
.wi-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.wi-b1,.wi-b2{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--b);transition:transform .3s,background .3s}
.wi-b1{background:#fff;color:#012d5a}.wi-b1 svg{width:20px;height:20px}.wi-b1:hover{transform:translateY(-2px)}
.wi-b2{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.wi-pause{position:absolute;right:clamp(16px,3vw,40px);bottom:18px;z-index:5;padding:9px 16px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font:600 13px/1 var(--b);cursor:pointer}
.wi-note{margin-top:22px;padding-left:14px;border-left:3px solid #3b9bfa;font:400 14px/1.5 var(--b);color:#cfe6ff}
.wi-note b{color:#fff}
.xr-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#e9eef5}
.xr-bar i{width:10px;height:10px;border-radius:50%;background:#c6d0de}.xr-bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#fff;font:500 12px/1 var(--b);color:#4f6788}

/* A Roentgenblick */
.wi-a{background:linear-gradient(160deg,#0a3e7b 0%,#012d5a 60%,#011e3d 100%)}
.xr{margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.xr-v{position:relative;cursor:none;touch-action:pan-y}
.xr-v>img{display:block;width:100%;height:auto}
.xr-l{position:absolute;inset:0;background:#0b3666;--x:62%;--y:45%;--r:118px;
  -webkit-mask:radial-gradient(circle var(--r) at var(--x) var(--y),#000 calc(100% - 1px),transparent);mask:radial-gradient(circle var(--r) at var(--x) var(--y),#000 calc(100% - 1px),transparent)}
.xr-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(159,208,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(159,208,255,.12) 1px,transparent 1px);background-size:24px 24px}
.xr-b{position:absolute;border:1.5px dashed #9fd0ff;border-radius:6px;background:rgba(59,155,250,.08)}
.xr-b i{position:absolute;left:6px;top:4px;font:500 11px/1.2 'JetBrains Mono',ui-monospace,monospace;font-style:normal;color:#dcebff;white-space:nowrap}
.xr-m{position:absolute;padding:6px 10px;border-radius:8px;background:#3b9bfa;color:#012d5a;font:500 11px/1.2 var(--b)}.xr-m b{font-size:15px}
.xr-ring{position:absolute;left:var(--x);top:var(--y);width:calc(var(--r)*2);height:calc(var(--r)*2);margin:calc(var(--r)*-1) 0 0 calc(var(--r)*-1);border-radius:50%;box-shadow:0 0 0 3px #3b9bfa,0 18px 40px rgba(0,0,0,.35);pointer-events:none}
.xr figcaption{padding:10px 14px;background:#f4f7fb;font:400 12px/1.4 var(--b);color:#4f6788}

/* B Branchen-Weiche */
.wi-b{background:#012d5a}
.br-pick{margin-top:26px}.br-pick>p{font:600 14px/1.3 var(--b);color:#9fd0ff;margin-bottom:10px}
.br-cs{display:flex;flex-wrap:wrap;gap:8px}
.br-c{padding:11px 18px;border-radius:999px;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:600 15px/1 var(--b);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.br-c:hover{border-color:#fff}.br-c.on{background:#3b9bfa;border-color:#3b9bfa;color:#012d5a}
.br-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:600 15px/1 var(--b);color:#fff;text-decoration:underline;text-underline-offset:4px}.br-more svg{width:16px;height:16px}
.br-win{margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transform:rotate(1.2deg)}
.br-site{--bg:#f5f1ea;--ink:#1f3d3a;--acc:#2f6f68;--soft:#e4ddd0;--f:Georgia,'Times New Roman',serif;background:var(--bg);color:var(--ink);padding:18px 22px 22px;transition:background .5s,color .5s}
.br-site *{transition:background .5s,color .5s,border-color .5s,border-radius .5s}
.br-nav{display:flex;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--soft)}
.br-logo{font:700 16px/1 var(--f)}.br-links{display:flex;gap:12px;margin-left:auto;font:500 12px/1 var(--b)}.br-links i{font-style:normal;opacity:.8}
.br-cta{padding:8px 12px;border-radius:var(--rad,999px);background:var(--acc);color:#fff;font:600 12px/1 var(--b)}
.br-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:26px 0}
.br-hero small{font:600 11px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.br-h{margin:10px 0 12px;font:700 clamp(22px,2.2vw,32px)/1.12 var(--f);color:var(--ink)}
.br-hero p{height:8px;margin:7px 0;border-radius:4px;background:var(--soft)}.br-hero p.s{width:70%}
.br-btn{display:inline-block;margin-top:14px;padding:11px 16px;border-radius:var(--rad,999px);background:var(--acc);color:#fff;font:600 13px/1 var(--b)}
.br-img{position:relative;aspect-ratio:4/3;border-radius:var(--rad,18px);background:var(--soft);overflow:hidden}
.br-img span{position:absolute;border-radius:50%;background:var(--acc);opacity:.85;transition:all .6s cubic-bezier(.6,0,.2,1)}
.br-img span:nth-child(1){width:46%;aspect-ratio:1;left:10%;top:18%}.br-img span:nth-child(2){width:30%;aspect-ratio:1;right:12%;bottom:12%;opacity:.45}.br-img span:nth-child(3){width:16%;aspect-ratio:1;right:22%;top:14%;opacity:.25}
.br-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.br-cards div{height:64px;border-radius:var(--rad,14px);background:var(--soft)}
.br-win figcaption{padding:9px 14px;background:#f4f7fb;font:400 12px/1.4 var(--b);color:#4f6788}
.br-win[data-skin=handwerk] .br-site{--bg:#f4f4f2;--ink:#232323;--acc:#d9622b;--soft:#e2e0dc;--f:'DM Sans',sans-serif;--rad:4px}
.br-win[data-skin=handwerk] .br-img span{border-radius:4px;transform:rotate(8deg)}
.br-win[data-skin=kanzlei] .br-site{--bg:#0f2238;--ink:#f3efe6;--acc:#b8955a;--soft:#1f3754;--f:Georgia,'Times New Roman',serif;--rad:2px}
.br-win[data-skin=kanzlei] .br-img span{border-radius:2px}
.br-win[data-skin=industrie] .br-site{--bg:#ffffff;--ink:#1d1f22;--acc:#f2c200;--soft:#e9ebee;--f:'Syne',sans-serif;--rad:0}
.br-win[data-skin=industrie] .br-cta,.br-win[data-skin=industrie] .br-btn{color:#1d1f22}
.br-win[data-skin=industrie] .br-img span{border-radius:0;width:60%}
.br-win[data-skin=immo] .br-site{--bg:#fbf8f5;--ink:#2b2522;--acc:#b5543c;--soft:#ece4dc;--f:'DM Sans',sans-serif;--rad:22px}
.br-site.sw .br-h,.br-site.sw .br-logo,.br-site.sw .br-btn,.br-site.sw .br-cta,.br-site.sw .br-links{opacity:0;transform:translateY(6px)}
.br-h,.br-logo,.br-btn,.br-cta,.br-links{transition:opacity .25s,transform .25s}

/* C Responsive-Buehne */
.wi-c{background:linear-gradient(180deg,#1452a1,#0a3e7b)}
.rc-top{max-width:920px;margin:0 auto;padding:clamp(28px,3.4vw,52px) 20px 10px;text-align:center}
.rc-top .wi-bc,.rc-top .wi-btns{justify-content:center}.rc-top .wi-lead{margin-left:auto;margin-right:auto}
.rc-stage{position:relative;padding:20px clamp(16px,3vw,40px) 70px}
.rc-ruler{position:relative;width:var(--w,1200px);max-width:100%;height:30px;margin:10px auto 8px;transition:width 1.1s cubic-bezier(.65,0,.25,1);
  background:linear-gradient(90deg,#fff 1px,transparent 1px) 0 100%/20px 8px repeat-x,linear-gradient(90deg,#fff 1px,transparent 1px) 0 100%/100px 14px repeat-x;border-bottom:1px solid #fff}
.rc-px,.rc-dev{position:absolute;top:0;font:600 12px/1 'JetBrains Mono',ui-monospace,monospace}.rc-px{left:0}.rc-dev{right:0;color:#9fd0ff}
.rc-dev-btns{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.rc-dev-btns button{padding:8px 14px;border-radius:999px;border:0;background:rgba(255,255,255,.12);color:#fff;font:600 13px/1 var(--b);cursor:pointer}.rc-dev-btns button.on{background:#fff;color:#012d5a}
.rc-frame{width:var(--w,1200px);max-width:100%;margin:0 auto;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);transition:width 1.1s cubic-bezier(.65,0,.25,1);container-type:inline-size}
.rc-site{color:#012d5a;font-family:var(--b)}
.rc-nav{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid #e5ebf3}.rc-nav b{font:700 16px/1 var(--d)}
.rc-links{display:flex;gap:16px;margin-left:auto;font:500 13px/1 var(--b)}.rc-links i{font-style:normal}
.rc-burger{display:none;margin-left:auto;flex-direction:column;gap:4px}.rc-burger i{display:block;width:22px;height:2px;background:#012d5a}
.rc-hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:28px 22px}
.rc-hero small{font:600 11px/1 var(--b);letter-spacing:.12em;color:#1b6cd0}
.rc-hero h2{margin:10px 0;font:700 clamp(20px,3.2cqi,40px)/1.08 var(--d);text-transform:uppercase;letter-spacing:-.03em}
.rc-hero p{font:400 15px/1.55 var(--b);color:#3d5676}
.rc-btn{display:inline-block;margin-top:14px;padding:12px 18px;border-radius:999px;background:#012d5a;color:#fff;font:600 13px/1 var(--b)}
.rc-img img{display:block;width:100%;height:auto;border-radius:12px}
.rc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 24px}
.rc-cards div{padding:16px;border-radius:12px;background:#eef4fc}.rc-cards b{display:block;font:700 16px/1.2 var(--b)}.rc-cards span{font:400 13px/1.4 var(--b);color:#3d5676}
@container (max-width:820px){.rc-hero{grid-template-columns:1fr}.rc-img{order:-1}.rc-cards{grid-template-columns:1fr 1fr}.rc-links i:nth-child(n+3){display:none}}
@container (max-width:480px){.rc-links{display:none}.rc-burger{display:flex}.rc-cards{grid-template-columns:1fr}.rc-hero{padding:20px 16px}.rc-nav{padding:14px 16px}.rc-cards{padding:0 16px 18px}}
.rc-cap{margin-top:16px;text-align:center;font:400 13px/1.4 var(--b);color:#cfe6ff}

/* D Design-Leinwand */
.wi-d{background:#f2f5fa;color:#012d5a;--acc:#3B9BFA}
.wi-d .hx-nav a,.wi-d .hx-ddt{color:#012d5a}.wi-d .hx-cta{background:#012d5a;color:#fff}.wi-d .hx-burger{color:#012d5a}
.dc-canvas{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(40px,5vw,80px) clamp(20px,4vw,56px) clamp(70px,7vw,100px);
  background-image:radial-gradient(#c5d2e3 1.2px,transparent 1.3px);background-size:22px 22px}
.dc-cols{position:absolute;inset:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:repeat(12,1fr);gap:16px;opacity:0;transition:opacity .4s;pointer-events:none}
.dc-cols i{background:rgba(242,92,84,.09);border-left:1px solid rgba(242,92,84,.25);border-right:1px solid rgba(242,92,84,.25)}
.wi-d.cols .dc-cols{opacity:1}
.dc-sel{position:relative;padding:28px 32px 32px;outline:2px solid var(--acc);outline-offset:0;background:rgba(255,255,255,.75);transition:outline-color .4s}
.dc-h{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--acc);transition:border-color .4s}
.dc-h.tl{left:-7px;top:-7px}.dc-h.tr{right:-7px;top:-7px}.dc-h.bl{left:-7px;bottom:-7px}.dc-h.br{right:-7px;bottom:-7px}
.dc-tag{position:absolute;left:-2px;top:-30px;padding:5px 10px;background:var(--acc);color:#fff;font:600 12px/1 var(--b);border-radius:4px 4px 0 0;transition:background .4s}
.wi-d .wi-bc{color:#4f6788}.wi-d .wi-eb{color:var(--acc);transition:color .4s}
.wi-d .wi-h1{color:#012d5a}
.wi-d .wi-h1 .soft{color:var(--acc)}
.wi-d .wi-lead{color:#28476b}
.wi-d .wi-b1{background:var(--acc);color:#fff;transition:background .4s}.wi-d .wi-b2{color:#012d5a;box-shadow:inset 0 0 0 2px #012d5a}
.dc-meas{display:block;position:relative;height:0;margin:0}
.dc-meas i{position:absolute;left:-26px;top:-28px;height:26px;width:1px;background:#f25c54;font:600 10px/1 'JetBrains Mono',monospace;font-style:normal;color:#f25c54}
.dc-meas i::after{content:attr(data-v);position:absolute;left:5px;top:8px}
.dc-meas i{display:flex;align-items:center;padding-left:5px;width:auto;border-left:1px solid #f25c54;background:none;transition:opacity .3s}
.wi-d:not(.meas) .dc-meas i{opacity:0}
.dc-panel{position:relative;padding:18px;border-radius:14px;background:#fff;box-shadow:0 20px 50px -20px rgba(1,45,90,.35);font:400 13px/1.4 var(--b)}
.dc-pt{font:700 12px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#4f6788;margin-bottom:12px}
.dc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #e5ebf3}
.dc-row span{color:#4f6788}.dc-row b{font-weight:600}
.dc-sw{display:flex;gap:6px}.dc-sw button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px #c5d2e3;cursor:pointer}.dc-sw button.on{box-shadow:0 0 0 2px #012d5a}
.dc-tg{padding:6px 10px;border-radius:999px;border:1px solid #c5d2e3;background:#fff;color:#012d5a;font:600 12px/1 var(--b);cursor:pointer}.dc-tg.on{background:#012d5a;color:#fff;border-color:#012d5a}
.dc-pn{margin-top:12px;color:#4f6788;font-size:12px}
.dc-cur{position:absolute;left:0;top:0;z-index:4;display:flex;align-items:flex-start;gap:4px;pointer-events:none;transition:transform 1.2s cubic-bezier(.6,0,.2,1)}
.dc-cur svg{width:22px;height:22px;fill:#7A5AF8;stroke:#fff;stroke-width:1.5}
.dc-cur span{margin-top:16px;padding:4px 8px;border-radius:6px;background:#7A5AF8;color:#fff;font:600 11px/1 var(--b);white-space:nowrap}
.dc-cur.click svg{transform:scale(.85)}
.wi-d .wi-pause{background:#012d5a}

@media (max-width:980px){.wi-g,.dc-canvas{grid-template-columns:minmax(0,1fr)}.wi .hx-nav{display:none}.br-win{transform:none}.dc-cur{display:none}}
@media (max-width:600px){.br-hero{grid-template-columns:1fr}.br-img{display:none}.br-links{display:none}.xr-b i{font-size:9px}}

.wi-g .wi-h1{font-size:clamp(28px,2.9vw,46px)!important}
.rc-art{position:relative;aspect-ratio:16/10;border-radius:12px;background:linear-gradient(135deg,#dcebff,#b9d8fb);overflow:hidden}
.rc-art span{position:absolute;border-radius:12px;background:#3b9bfa}
.rc-art span:nth-child(1){left:8%;top:12%;width:56%;height:12%;background:#012d5a}
.rc-art span:nth-child(2){left:8%;top:30%;width:40%;height:7%;background:#fff}
.rc-art span:nth-child(3){left:8%;top:41%;width:32%;height:7%;background:#fff}
.rc-art span:nth-child(4){right:8%;bottom:12%;width:34%;height:46%;border-radius:50%}
.rc-art span:nth-child(5){left:8%;bottom:14%;width:22%;height:10%;border-radius:999px;background:#012d5a}

@media (max-width:600px){.dc-sel{padding:22px 16px 24px}.dc-sel .wi-h1{font-size:clamp(22px,6.4vw,30px)!important}.dc-canvas{padding-left:12px;padding-right:12px}.wi-g .wi-h1,.rc-top .wi-h1{font-size:clamp(24px,7.6vw,34px)!important}}

/* ===== Hero je Seite (22.10.2026) – nur transform/opacity animiert, .off = ausserhalb des Bildschirms ===== */
.wi-intro{margin:18px var(--pad) 0;padding:14px 18px;border-radius:14px;background:#fff;font:400 14px/1.55 var(--b);color:#28476b}
.wi-lab b em{font-style:normal;font-weight:500;color:#1b6cd0}
.wi-lab small a{color:#1b6cd0;text-decoration:underline}
.wi.off *,.wi.paused *{animation-play-state:paused!important}
.wi figure{margin:0}
.wi figcaption{font:400 12px/1.4 var(--b)}
.wi-g>figure,.wi-g>.lt-grid{contain:layout paint}

/* Leistungen: lebende Kacheln */
.wi-lt{background:linear-gradient(160deg,#0a3e7b,#012d5a 70%)}
.lt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lt-t{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;transition:background .3s,transform .3s}
.lt-t:hover{background:rgba(255,255,255,.13);transform:translateY(-3px)}
.lt-t::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 2px #3b9bfa;opacity:0;animation:lt-on 10s calc(var(--i)*2.5s) infinite}
@keyframes lt-on{0%,24%{opacity:1}26%,100%{opacity:0}}
.lt-t b{font:700 19px/1.2 var(--b);margin-top:12px}.lt-t small{font:400 14px/1.4 var(--b);color:#cfe6ff}
.lt-vis{position:relative;display:block;height:118px;border-radius:14px;background:#fff;overflow:hidden}
.mt-sel{position:absolute;left:14%;top:22%;width:60%;height:52%;outline:2px solid #3b9bfa}
.mt-sel i{position:absolute;left:10%;height:10%;border-radius:4px;background:#012d5a}.mt-sel i:nth-child(1){top:16%;width:70%}.mt-sel i:nth-child(2){top:40%;width:50%;background:#c5d2e3}.mt-sel i:nth-child(3){top:64%;width:30%;background:#3b9bfa;border-radius:99px}
.mt-sel::after{content:"";position:absolute;right:-26px;bottom:-14px;width:16px;height:16px;background:#7a5af8;clip-path:polygon(0 0,100% 60%,55% 65%,40% 100%);animation:mt-cur 4s ease-in-out infinite}
@keyframes mt-cur{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-30px)}}
.mt-sn{position:absolute;inset:16% 12%}.mt-sn b{display:block;height:12px;width:70%;border-radius:4px;background:#1b6cd0}.mt-sn i{display:block;height:7px;margin-top:9px;border-radius:4px;background:#d7e2f0}.mt-sn i+i{width:75%}
.mt-sn em{position:absolute;right:0;top:-6px;width:34px;height:34px;border:4px solid #012d5a;border-radius:50%;animation:mt-mag 5s ease-in-out infinite}
.mt-sn em::after{content:"";position:absolute;right:-12px;bottom:-10px;width:14px;height:4px;background:#012d5a;transform:rotate(45deg)}
@keyframes mt-mag{0%,100%{transform:translate(0,0)}50%{transform:translate(-90px,26px)}}
.mt-ph{position:absolute;left:50%;top:12%;width:58px;height:96px;margin-left:-29px;border-radius:12px;background:#012d5a;padding:6px}
.mt-ph i{display:block;height:58%;border-radius:6px;background:linear-gradient(135deg,#3b9bfa,#9fd0ff)}
.mt-ph b{position:absolute;left:8px;bottom:8px;color:#f25c54;font-size:15px;line-height:1;animation:mt-heart 1.6s ease-in-out infinite}
@keyframes mt-heart{0%,100%{transform:scale(1)}30%{transform:scale(1.35)}}
.mt-nw{position:absolute;inset:0}.mt-nw i{position:absolute;width:18px;height:18px;border-radius:50%;background:#012d5a}
.mt-nw i:nth-child(1){left:18%;top:42%}.mt-nw i:nth-child(2){left:47%;top:42%;background:#3b9bfa}.mt-nw i:nth-child(3){left:76%;top:42%}
.mt-nw::before{content:"";position:absolute;left:20%;right:20%;top:calc(42% + 8px);height:2px;background:#c5d2e3}
.mt-nw b{position:absolute;left:20%;right:20%;top:calc(42% + 5px);height:8px;animation:mt-pk 2.4s linear infinite}.mt-nw b::after{content:"";position:absolute;right:0;width:8px;height:8px;border-radius:50%;background:#3b9bfa}
@keyframes mt-pk{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}

/* Relaunch: Vorher/Nachher – Schnitt per Gegenbewegung zweier transforms (kein clip-path, kein Layout) */
.wi-rl{background:linear-gradient(160deg,#123f73,#012d5a)}
.rl-win{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.7);color:#1d1f22}
.rl-v{position:relative;aspect-ratio:16/10;overflow:hidden;touch-action:pan-y;cursor:ew-resize;--p:50%}
.rl-old,.rl-new{position:absolute;inset:0}
.rl-old{background:#d9d9d9;font-family:'Times New Roman',serif;padding:0}
.ro-top{display:flex;flex-direction:column;gap:6px;padding:10px 14px;background:linear-gradient(#5f7ea8,#33506f);color:#fff}.ro-top b{font:700 20px/1 'Times New Roman',serif}.ro-top span{font:400 12px/1 Arial,sans-serif;color:#e6eefc;text-decoration:underline}
.ro-body{padding:14px;background:#f2f2e6;height:100%}.ro-body h2{font:700 clamp(15px,1.6vw,20px)/1.2 'Comic Sans MS','Times New Roman',serif;color:#b00}
.ro-body p{margin-top:8px;font:400 13px/1.35 'Times New Roman',serif;color:#222;max-width:30em}
.ro-cols{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:10px}.ro-cols span{height:60px;background:repeating-linear-gradient(45deg,#ccc 0 6px,#bbb 6px 12px);border:2px outset #eee}
.ro-body small{display:block;margin-top:10px;font:400 11px/1 Arial,sans-serif;color:#666}
.rl-cut{position:absolute;inset:0;overflow:hidden;transform:translateX(var(--p));will-change:transform}
.rl-new{transform:translateX(calc(var(--p) * -1));will-change:transform;background:#f6f8fb;padding:14px 18px}
.rl-v.auto .rl-cut{animation:rl-a 9s ease-in-out infinite}.rl-v.auto .rl-new{animation:rl-b 9s ease-in-out infinite}.rl-v.auto .rl-knob{animation:rl-a 9s ease-in-out infinite}
@keyframes rl-a{0%,100%{transform:translateX(78%)}50%{transform:translateX(22%)}}
@keyframes rl-b{0%,100%{transform:translateX(-78%)}50%{transform:translateX(-22%)}}
.rn-nav{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid #e1e7ef}.rn-nav b{font:700 15px/1 var(--d);color:#012d5a}
.rn-nav span{display:flex;gap:12px;margin-left:auto;font:500 12px/1 var(--b);color:#3d5676}.rn-nav span i{font-style:normal}
.rn-nav em{padding:7px 12px;border-radius:99px;background:#1b6cd0;color:#fff;font:600 12px/1 var(--b);font-style:normal}
.rn-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center;padding:18px 0}
.rn-hero small{font:600 10px/1 var(--b);letter-spacing:.12em;color:#1b6cd0}.rn-hero h2{margin:8px 0;font:700 clamp(18px,2vw,28px)/1.08 var(--d);color:#012d5a;text-transform:uppercase;letter-spacing:-.03em}
.rn-hero p{height:7px;margin:6px 0;border-radius:4px;background:#dde5ef}.rn-hero p.s{width:65%}
.rn-hero em{display:inline-block;margin-top:10px;padding:9px 14px;border-radius:99px;background:#012d5a;color:#fff;font:600 12px/1 var(--b);font-style:normal}
.rn-img{position:relative;aspect-ratio:4/3;border-radius:14px;background:linear-gradient(135deg,#dcebff,#b9d8fb);overflow:hidden}
.rn-img span{position:absolute;border-radius:50%;background:#3b9bfa}.rn-img span:nth-child(1){width:50%;aspect-ratio:1;right:10%;bottom:10%}.rn-img span:nth-child(2){width:22%;aspect-ratio:1;left:12%;top:14%;background:#012d5a}
.rn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.rn-cards div{height:44px;border-radius:10px;background:#e7eef7}
.rl-knob{position:absolute;inset:0;transform:translateX(var(--p));will-change:transform;pointer-events:none}
.rl-knob i{position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(1,45,90,.3)}
.rl-knob i::after{content:"\2194";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#012d5a;font:700 18px/1 var(--b);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.rl-knob span{position:absolute;top:10px;padding:4px 9px;border-radius:99px;background:rgba(1,45,90,.85);color:#fff;font:600 11px/1 var(--b)}.rl-knob span:first-of-type{right:calc(100% + 10px)}.rl-knob span:last-of-type{left:10px}
.rl-urls{display:grid;gap:6px;padding:14px 16px;background:#f4f7fb;border-top:1px solid #e1e7ef}
.rl-urls p{font:600 12px/1.3 var(--b);color:#4f6788;letter-spacing:.04em;text-transform:uppercase}
.rl-urls div{display:flex;align-items:center;gap:8px;font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;color:#012d5a}
.rl-urls code{padding:4px 7px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #dbe4ef}.rl-urls i{font-style:normal;color:#4f6788}
.rl-urls b{margin-left:auto;padding:3px 8px;border-radius:99px;background:#e3effd;color:#1b6cd0;font:700 11px/1 var(--b)}
.rl-win figcaption{padding:9px 14px;background:#f4f7fb;color:#4f6788}

/* SEO: Snippet-Werkstatt */
.wi-seo{background:linear-gradient(160deg,#0d4a8a,#012d5a 75%)}
.sn-win{border-radius:18px;overflow:hidden;background:#fff;color:#202124;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.sn-q{display:flex;align-items:center;gap:10px;margin:16px 16px 6px;padding:10px 12px 10px 16px;border-radius:999px;box-shadow:0 1px 6px rgba(32,33,36,.2);font:400 15px/1 Arial,sans-serif}
.sn-q svg{width:18px;height:18px;color:#5f6368}.sn-tg{display:flex;gap:4px;margin-left:auto;padding:3px;border-radius:99px;background:#eef2f8}
.sn-tg button{padding:7px 12px;border-radius:99px;border:0;background:transparent;color:#4f6788;font:600 12px/1 var(--b);cursor:pointer}.sn-tg button.on{background:#012d5a;color:#fff}
.sn-list{padding:6px 22px 4px}
.sn-ph{padding:10px 0}.sn-ph i{display:block;height:8px;margin:7px 0;border-radius:4px;background:#eceff3}.sn-ph i:nth-child(1){width:38%}.sn-ph i:nth-child(2){width:62%;height:12px;background:#e3e8f2}.sn-ph i:nth-child(3){width:88%}
.sn-card{position:relative;display:grid;margin:4px -10px;padding:12px 10px;border-radius:12px;background:#f5f9ff;box-shadow:inset 0 0 0 2px #3b9bfa}
.sn-a,.sn-b{grid-area:1/1;transition:opacity .45s,transform .45s}
.sn-card small{display:block;font:400 12px/1.3 Arial,sans-serif;color:#4d5156}
.sn-card b{display:block;margin:4px 0;font:400 19px/1.3 Arial,sans-serif;color:#1a0dab}
.sn-card p{font:400 13px/1.5 Arial,sans-serif;color:#4d5156}
.sn-sl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.sn-sl i{padding:5px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px #dadce0;font:400 12px/1 Arial,sans-serif;font-style:normal;color:#1a0dab}
.sn-win[data-state="0"] .sn-b,.sn-win[data-state="1"] .sn-a{opacity:0;transform:translateY(6px)}
.sn-chk{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:12px 18px 14px;border-top:1px solid #e8edf3;list-style:none}
.sn-chk li{display:flex;align-items:center;gap:8px;font:500 13px/1.3 var(--b);color:#9aa8bb;transition:color .4s}
.sn-chk svg{flex:none;width:18px;height:18px;padding:2px;border-radius:50%;background:#e8edf3;color:#fff;transition:background .4s}
.sn-win[data-state="1"] .sn-chk li{color:#012d5a;transition-delay:calc(var(--i)*.35s)}.sn-win[data-state="1"] .sn-chk svg{background:#3b9bfa;transition-delay:calc(var(--i)*.35s)}
.sn-win figcaption{padding:9px 14px;background:#f4f7fb;color:#4f6788}

/* IT-Service: Netzwerk-Plan */
.wi-it{background:#011e3d}
.nw-win{border-radius:18px;overflow:hidden;background:#06284d;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(159,208,255,.15)}
.nw-map{position:relative;aspect-ratio:16/11;margin:10px 18px 0;background-image:radial-gradient(rgba(159,208,255,.18) 1px,transparent 1.2px);background-size:20px 20px}
.nw-l{position:absolute;display:block;background:rgba(159,208,255,.35)}
.nw-v{width:2px;margin-left:-1px}.nw-h{height:2px;margin-top:-1px}
.nw-l b{position:absolute;inset:0;display:block;animation:nw-v 2.6s linear var(--d) infinite}
.nw-h b{animation-name:nw-h}
.nw-l b::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#3b9bfa;box-shadow:0 0 0 3px rgba(59,155,250,.3)}
.nw-v b::after{left:-3px;bottom:0}.nw-h b::after{right:0;top:-3px}
@keyframes nw-v{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes nw-h{0%{transform:translateX(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(0);opacity:0}}
.nw-n{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-50%);padding:0;border:0;background:none;color:#cfe6ff;cursor:pointer;font:600 12px/1.15 var(--b);text-align:center}
.nw-n svg{width:46px;height:46px;padding:10px;border-radius:14px;background:#0b3b6e;box-shadow:inset 0 0 0 1.5px rgba(159,208,255,.35);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:background .3s,box-shadow .3s}
.nw-n span{white-space:nowrap;padding:2px 6px;border-radius:6px;background:rgba(1,30,61,.7)}
.nw-n.on svg,.nw-n:hover svg{background:#3b9bfa;box-shadow:0 0 0 6px rgba(59,155,250,.2)}
.nw-info{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:12px 18px 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);font:400 14px/1.45 var(--b);color:#cfe6ff;min-height:66px}
.nw-info b{color:#fff;font-weight:700}
.nw-st{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px}
.nw-st span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:rgba(59,155,250,.14);color:#cfe6ff;font:600 12px/1 var(--b);animation:nw-ok 6s calc(var(--i)*1.2s) infinite}
.nw-st svg{width:14px;height:14px}
@keyframes nw-ok{0%,100%{opacity:.45}20%,60%{opacity:1}}
.nw-win figcaption{padding:0 18px 14px;color:#9fb8d6}

/* Social Media: ein Beitrag, jedes Format */
.wi-sm{background:linear-gradient(160deg,#1452a1,#012d5a 75%)}
.sm-win{display:grid;justify-items:center;gap:14px}
.sm-cs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sm-c{padding:8px 13px;border-radius:99px;border:0;background:rgba(255,255,255,.12);color:#fff;font:600 13px/1 var(--b);cursor:pointer}.sm-c small{opacity:.7;font-weight:500}.sm-c.on{background:#fff;color:#012d5a}
.sm-ph{width:min(300px,78vw);padding:12px 12px 14px;border-radius:34px;background:#fff;color:#111;box-shadow:0 0 0 8px #0b2747,0 40px 80px -30px rgba(0,0,0,.8)}
.sm-bar{display:flex;align-items:center;gap:8px;padding:4px 4px 10px;font:600 13px/1 var(--b)}.sm-bar span{margin-left:auto;color:#888}
.sm-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#012d5a;color:#fff;font:700 9px/1 var(--b);font-style:normal;box-shadow:0 0 0 2px #fff,0 0 0 4px #e1306c}
.sm-stage{position:relative;aspect-ratio:9/16;max-height:360px;width:100%;display:grid;place-items:center}
.sm-card{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);max-height:100%;transform:translate(-50%,-50%) scale(.92);opacity:0;transition:opacity .5s,transform .5s}
.sm-card.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sm-stage{aspect-ratio:auto;height:350px}
.sm-card{height:auto;aspect-ratio:var(--ar,4/5)}
.sm-ig{--ar:4/5;width:100%}.sm-kv{--ar:9/16;width:62%}.sm-fb{--ar:1/1;width:100%}.sm-li{--ar:1.91/1;width:100%}.sm-x{--ar:16/9;width:100%}
.sm-art{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10px;padding:10%;background:linear-gradient(150deg,#012d5a,#1b6cd0);color:#fff}
.sm-art small{font:700 10px/1 var(--b);letter-spacing:.14em;color:#9fd0ff}
.sm-art b{display:block;margin-top:8px;font:700 clamp(15px,1.4vw,19px)/1.1 var(--d);text-transform:uppercase;letter-spacing:-.02em}
.sm-art span{position:absolute;border-radius:50%;background:#3b9bfa;opacity:.6}.sm-art span:nth-of-type(1){width:46%;aspect-ratio:1;right:-8%;bottom:-8%}.sm-art span:nth-of-type(2){width:18%;aspect-ratio:1;right:30%;bottom:28%;background:#9fd0ff;opacity:.9}
.sm-li .sm-art,.sm-x .sm-art{padding:6% 8%}.sm-li .sm-art b,.sm-x .sm-art b{font-size:15px}
.sm-play{position:absolute;left:50%;top:55%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.9)}
.sm-play::after{content:"";position:absolute;left:15px;top:12px;border-left:14px solid #012d5a;border-top:8px solid transparent;border-bottom:8px solid transparent}
.sm-act{display:flex;gap:10px;align-items:center;padding:10px 4px 4px}.sm-act i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 2px #222}
.sm-heart{color:#e0245e;font-size:22px;line-height:1;animation:mt-heart 2.4s ease-in-out infinite}
.sm-cap{font:400 12px/1.4 var(--b);color:#333}
.sm-win figcaption{color:#cfe6ff}

/* Referenzen: Projektwand */
.wi-pw{background:#012d5a}
.pw-win{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:min(560px,70vh);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.pw-col{overflow:hidden}.pw-run{display:grid;gap:14px;will-change:transform}
.pw-col.up .pw-run{animation:pw-up 48s linear infinite}.pw-col.dn .pw-run{animation:pw-dn 48s linear infinite}
.pw-win:hover .pw-run{animation-play-state:paused}
@keyframes pw-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes pw-dn{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}
.pw-i{display:block;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.7);transition:transform .3s}
.pw-i:hover{transform:scale(1.02)}.pw-i .xr-bar{height:20px}.pw-i .xr-bar i{width:7px;height:7px}
.pw-i img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;background:#e9eef5}

/* Projektseite */
.wi-pj{background:linear-gradient(160deg,#0a3e7b,#012d5a)}
.pj-win{display:grid;gap:14px;justify-items:center}
.pj-tg{display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(255,255,255,.12)}.pj-tg button{padding:8px 14px;border-radius:99px;border:0;background:none;color:#fff;font:600 13px/1 var(--b);cursor:pointer}.pj-tg button.on{background:#fff;color:#012d5a}
.pj-st{position:relative;display:grid;width:100%;place-items:center}
.pj-d,.pj-m{grid-area:1/1;transition:opacity .6s,transform .6s}
.pj-d{width:100%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}.pj-d img{display:block;width:100%;height:auto}
.pj-m{width:min(220px,46%);padding:8px;border-radius:30px;background:#0b2747;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}.pj-m img{display:block;width:100%;height:auto;border-radius:22px}
.pj-win[data-v=d] .pj-m,.pj-win[data-v=m] .pj-d{opacity:0;transform:scale(.94)}
.pj-win figcaption{color:#cfe6ff}

/* Ueber uns: Online-Zusammenarbeit */
.wi-ub{background:linear-gradient(160deg,#103f72,#012d5a 70%)}
.ub-win{display:grid;gap:14px}
.ub-call{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:20px;background:#071f3b;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.ub-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px 14px;border-radius:14px;background:linear-gradient(160deg,#164a84,#0b3463);text-align:center}
.ub-tile.k{background:linear-gradient(160deg,#2a3f5c,#16273d)}
.ub-av{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#3b9bfa;color:#012d5a;font:700 20px/1 var(--b)}.ub-tile.k .ub-av{background:#9fd0ff}
.ub-tile b{font:700 15px/1.2 var(--b)}.ub-tile small{font:400 12px/1.35 var(--b);color:#cfe6ff}.ub-tile time{font-weight:700;color:#fff}
.ub-wave{position:absolute;right:12px;top:12px;display:flex;gap:3px;align-items:flex-end;height:14px}
.ub-wave i{width:3px;height:100%;border-radius:2px;background:#3b9bfa;transform-origin:bottom;animation:ub-w 1s ease-in-out infinite}
.ub-wave i:nth-child(2){animation-delay:.2s}.ub-wave i:nth-child(3){animation-delay:.4s}.ub-wave i:nth-child(4){animation-delay:.1s}
@keyframes ub-w{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.ub-share{grid-column:1/-1;border-radius:12px;overflow:hidden;background:#fff}.ub-share .xr-bar{height:24px}
.ub-share>div{position:relative;padding:14px 16px 18px}.ub-share p{height:9px;margin:7px 0;border-radius:4px;background:#e1e8f1;width:80%}.ub-share p:first-child{height:14px;width:55%;background:#012d5a}.ub-share p.s{width:62%}
.ub-cur{position:absolute;left:40%;top:30%;width:16px;height:16px;background:#9fd0ff;clip-path:polygon(0 0,100% 60%,55% 65%,40% 100%);animation:ub-c 6s ease-in-out infinite}
@keyframes ub-c{0%,100%{transform:translate(0,0)}33%{transform:translate(90px,10px)}66%{transform:translate(-40px,18px)}}
.ub-line{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ub-line span{padding:12px;border-radius:12px;background:rgba(255,255,255,.07);font:400 13px/1.4 var(--b);color:#cfe6ff;animation:ub-on 7.5s calc(var(--i)*2.5s) infinite}
.ub-line b{display:block;font:700 16px/1.2 var(--b);color:#fff}
@keyframes ub-on{0%,30%{background:rgba(59,155,250,.28)}34%,100%{background:rgba(255,255,255,.07)}}
.ub-win figcaption{color:#cfe6ff}

/* Blog: Wissensregal */
.wi-bl{background:linear-gradient(160deg,#0d4a8a,#012d5a 70%)}
.bl-win{display:grid;gap:14px}
.bl-cs{display:flex;gap:6px;flex-wrap:wrap}.bl-c{padding:9px 16px;border-radius:99px;border:2px solid rgba(255,255,255,.35);background:none;color:#fff;font:600 14px/1 var(--b);cursor:pointer}.bl-c.on{background:#3b9bfa;border-color:#3b9bfa;color:#012d5a}
.bl-st{display:grid;gap:10px}
.bl-k{display:grid;gap:6px;padding:16px 18px;border-radius:16px;background:#fff;color:#012d5a;box-shadow:0 20px 40px -24px rgba(0,0,0,.6);transition:opacity .35s,transform .35s;transition-delay:calc(var(--i)*.06s)}
.bl-k small{font:700 11px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#1b6cd0}.bl-k b{font:700 17px/1.3 var(--b)}
.bl-k span{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--b);color:#1b6cd0}.bl-k svg{width:14px;height:14px}
.bl-k:hover{transform:translateX(4px)}
.bl-st.sw .bl-k{opacity:0;transform:translateY(8px)}
.bl-win figcaption{color:#cfe6ff}

/* Kontakt: so geht es weiter */
.wi-ko{background:linear-gradient(160deg,#1452a1,#012d5a 75%)}
.ko-win{display:grid;gap:16px}
.ko-path{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:44px}
.ko-path::before{content:"";position:absolute;left:8%;right:8%;top:18px;border-top:2px dashed rgba(255,255,255,.4)}
.ko-trk{position:absolute;left:8%;right:8%;top:4px;height:30px}.ko-run{position:absolute;inset:0;animation:ko-fly 7.5s ease-in-out infinite}
.ko-plane{position:absolute;right:-15px;top:0;width:30px;height:30px;color:#9fd0ff;transform:rotate(10deg)}
.ko-plane svg{width:100%;height:100%}
@keyframes ko-fly{0%{transform:translateX(-100%)}35%,50%{transform:translateX(-50%)}85%,100%{transform:translateX(0)}}
.ko-s{display:grid;gap:4px;padding:14px;border-radius:14px;background:rgba(255,255,255,.07);animation:ko-on 7.5s calc(var(--i)*2.5s) infinite}
.ko-s b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#012d5a;font:700 14px/1 var(--b)}
.ko-s span{font:700 15px/1.25 var(--b)}.ko-s small{font:400 13px/1.35 var(--b);color:#cfe6ff}
@keyframes ko-on{0%,30%{background:rgba(59,155,250,.3)}34%,100%{background:rgba(255,255,255,.07)}}
.ko-mail{border-radius:14px;overflow:hidden;background:#fff;color:#012d5a;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}.ko-mail .xr-bar{height:26px}
.ko-mail>div{display:grid;gap:10px;padding:14px 16px 16px}.ko-mail p{display:grid;gap:6px}.ko-mail small{font:600 11px/1 var(--b);color:#4f6788;letter-spacing:.06em;text-transform:uppercase}
.ko-mail em{justify-self:start;padding:6px 12px;border-radius:99px;background:#e7f1fe;color:#1b6cd0;font:600 13px/1 var(--b);font-style:normal}
.ko-mail i{display:block;height:9px;border-radius:4px;background:#e1e8f1}.ko-mail i.s{width:60%}
.ko-win figcaption{color:#cfe6ff}

/* Blogbeitrag: ruhig */
.wi-po{background:#012d5a}
.po-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(30px,4vw,60px) clamp(20px,4vw,56px) clamp(40px,5vw,70px)}
.po-h1{text-transform:none!important;font-family:var(--b)!important;letter-spacing:-.02em!important}
.po-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font:500 14px/1.3 var(--b);color:#cfe6ff}
.po-art{position:relative;aspect-ratio:1;max-width:320px;justify-self:end;width:100%}
.po-web i{position:absolute;border-radius:14px;background:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.po-web i::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;border-radius:14px 14px 0 0;background:#e9eef5}
.po-web i:nth-child(1){left:0;top:12%;width:70%;height:58%;opacity:.35}.po-web i:nth-child(2){left:16%;top:26%;width:70%;height:58%;opacity:.65}.po-web i:nth-child(3){left:30%;top:40%;width:70%;height:58%}
.po-web b{position:absolute;left:42%;top:60%;width:34%;height:9%;border-radius:99px;background:#3b9bfa}

@media (max-width:980px){.lt-grid{grid-template-columns:1fr 1fr}.pw-win{height:420px}.po-g{grid-template-columns:1fr}.po-art{display:none}}
@media (max-width:600px){.lt-grid{grid-template-columns:1fr}.lt-vis{height:96px}.sn-chk{grid-template-columns:1fr}.ub-line{grid-template-columns:1fr}.ko-path{grid-template-columns:1fr;padding-top:0}.ko-path::before,.ko-trk{display:none}
  .nw-n span{font-size:10px}.nw-n svg{width:36px;height:36px;padding:7px}.rn-hero{grid-template-columns:1fr}.rn-img{display:none}.ro-cols{display:none}.rl-urls code{font-size:10px}}

/* ===== Runde 2 (22.10.2026) ===== */
.wi-g>.lt-bento,.wi-g>figure{align-self:stretch}
/* 1 Leistungen: Collage */
.lt-bento{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.15fr 1fr;grid-template-areas:"web web soc" "seo it soc";gap:12px;min-height:420px;contain:layout paint}.lt-web{grid-area:web}.lt-seo{grid-area:seo}.lt-it{grid-area:it}.lt-soc{grid-area:soc}
.lt-k{position:relative;display:block;overflow:hidden;border-radius:18px;background:#0b3b6e;box-shadow:0 24px 50px -30px rgba(0,0,0,.8);transition:transform .35s}
.lt-k:hover{transform:translateY(-3px)}
.lt-k::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 3px #3b9bfa;opacity:0;animation:lt-on 10s calc(var(--i)*2.5s) infinite}
.lt-k>img,.lt-ph img{display:block;width:100%;height:100%;object-fit:cover}
.lt-k b{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(1,45,90,.88);color:#fff;font:600 14px/1 var(--b)}
.lt-web{background:#e9eef5}.lt-win{display:block;height:100%}.lt-win img{display:block;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top}
.lt-soc{display:flex;flex-direction:column;gap:8px;padding:10px 10px 40px;background:linear-gradient(160deg,#1452a1,#0a3e7b)}
.lt-ph{flex:1;min-height:0;border-radius:12px;overflow:hidden}.lt-ph img{object-position:top}
/* 2 Webdesign: dunkelblau */
.wi-d{background:#012d5a;color:#fff;--acc:#3B9BFA}
.wi-d .dc-canvas{background-image:radial-gradient(rgba(159,208,255,.22) 1.2px,transparent 1.3px)}
.wi-d .dc-cols i{background:rgba(59,155,250,.1);border-color:rgba(159,208,255,.3)}
.wi-d .dc-sel{background:rgba(255,255,255,.04)}
.wi-d .wi-bc{color:#cfe6ff}.wi-d .wi-h1{color:#fff}.wi-d .wi-lead{color:#cfe6ff}
.wi-d .wi-b1{background:var(--acc);color:#012d5a}.wi-d .wi-b2{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.wi-d .dc-tag{color:#012d5a}.wi-d .dc-meas i,.wi-d .dc-meas i::after{color:#9fd0ff;border-color:#9fd0ff}
.wi-d .dc-cur svg{fill:#9fd0ff;stroke:#012d5a}.wi-d .dc-cur span{background:#9fd0ff;color:#012d5a}
.wi-d .wi-pause{background:rgba(255,255,255,.14)}
.wi-d .dc-sw button{border-color:#012d5a}
.wi-d .hx-nav a,.wi-d .hx-ddt{color:#fff}.wi-d .hx-burger{color:#012d5a}.wi-d .hx-cta{background:#fff;color:#012d5a}
/* 3/4 Branchen: Bild-Mockups */
.br-win2{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);align-self:center!important}
.br-st{position:relative;display:grid;aspect-ratio:8/5}
.br-shot{grid-area:1/1;opacity:0;transform:scale(1.02);transition:opacity .6s,transform .6s}.br-shot.on{opacity:1;transform:none}
.br-shot img{display:block;width:100%;height:100%;object-fit:cover}
.br-win2 figcaption{padding:8px 14px;background:#f4f7fb;color:#4f6788}
.wi-brx .br-pick{margin:18px 0 0}.wi-brx .wi-btns{margin-top:22px}
/* 5 Ort: zweispaltig */
.rc2{display:flex;flex-direction:column;gap:10px;align-items:center;--w:100}
.rc2 .rc-dev-btns{margin:0}
.rc2 .rc-frame{width:calc(var(--w)*1%);max-width:100%;margin:0;transition:width .9s cubic-bezier(.65,0,.25,1);contain:layout paint}
.rc2 .rc-hero{grid-template-columns:1.1fr .9fr;padding:20px 18px;gap:16px}.rc2 .rc-hero h2{font-size:clamp(16px,6cqi,30px)}.rc2 .rc-hero p{font-size:13px}
.rc2 .rc-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.rc2 .rc-cards{padding:0 18px 18px;gap:8px}.rc2 .rc-cards div{padding:10px}.rc2 .rc-nav{padding:12px 18px}
.rc2 figcaption{color:#cfe6ff}
@container (max-width:520px){.rc2 .rc-hero{grid-template-columns:1fr}.rc2 .rc-img{order:-1}.rc2 .rc-links i:nth-child(n+3){display:none}}
@container (max-width:300px){.rc2 .rc-links{display:none}.rc2 .rc-burger{display:flex}.rc2 .rc-cards{grid-template-columns:1fr}}
/* 6 Relaunch: scrollbar, Hoehe = Textspalte */
.wi-rl2 .rl-win{display:flex;flex-direction:column;align-self:stretch;max-height:560px}
.wi-rl2 .rl-v{flex:1;min-height:300px;aspect-ratio:auto;cursor:ew-resize}
.rl-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.rl-in{position:relative;min-height:100%}.rl-sc .rl-old{position:relative;inset:auto;min-height:100%}
.rl-sc .rl-cut{position:absolute;left:0;right:0;top:0;bottom:0}
.rl-sc .rl-new{position:absolute;inset:0;min-height:100%}
.ro-body h3{margin-top:14px;font:700 15px/1.2 'Times New Roman',serif;color:#003399;text-decoration:underline}
.ro-body{height:auto}
.rn-hero .t{height:auto;background:none;font:400 13px/1.45 var(--b);color:#3d5676}
.rn-img img{display:block;width:100%;height:100%;object-fit:cover}
.rn-cards div{height:auto;padding:10px}.rn-cards b{display:block;font:700 13px/1.2 var(--b);color:#012d5a}.rn-cards span{font:400 12px/1.3 var(--b);color:#3d5676}
.rn-sec{margin-top:20px;padding-top:16px;border-top:1px solid #e1e7ef}.rn-sec small{font:600 10px/1 var(--b);letter-spacing:.12em;color:#1b6cd0}
.rn-sec h3{margin:6px 0 10px;font:700 18px/1.15 var(--d);text-transform:uppercase;color:#012d5a}
.rn-sec em{display:inline-block;padding:9px 14px;border-radius:99px;background:#012d5a;color:#fff;font:600 12px/1 var(--b);font-style:normal}
.rn-pj{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rn-pj span{height:70px;border-radius:10px;background:linear-gradient(135deg,#dcebff,#9fc9f5)}
.wi-rl2 .rl-urls{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;font:500 11px/1.3 'JetBrains Mono',ui-monospace,monospace;color:#012d5a}
.wi-rl2 .rl-urls b{margin-left:auto;font-family:var(--b)}
/* 7 SEO: echter Text */
.sn-r{padding:9px 0}.sn-r small{display:block;font:400 12px/1.3 Arial,sans-serif;color:#4d5156}.sn-r b{display:block;margin:3px 0;font:400 17px/1.3 Arial,sans-serif;color:#1a0dab}
.sn-r p{font:400 13px/1.45 Arial,sans-serif;color:#4d5156}
.sn-list{padding:4px 20px 2px}.sn-q{margin:14px 14px 4px}.sn-card{margin:2px -10px}.sn-chk{padding:10px 16px 12px}
/* 8 IT: kompakt */
.nw-map{aspect-ratio:16/8.5;margin:6px 16px 0}
.nw-n svg{width:40px;height:40px;padding:8px;border-radius:12px}.nw-n{font-size:11px}
.nw-info{margin:8px 16px 16px;min-height:0;padding:10px 12px;font-size:13px}
/* 9 Social: Handy-Faecher */
.wi-sm2{background:linear-gradient(160deg,#1452a1,#012d5a 75%)}
.sm-pl{margin-top:16px;font:600 14px/1.4 var(--b);color:#9fd0ff}
.sf-win{display:grid;gap:12px;justify-items:center}
.sf-fan{position:relative;width:100%;height:440px}
.sf-ph{position:absolute;left:50%;top:50%;width:190px;aspect-ratio:9/16;margin:-169px 0 0 -95px;padding:6px;border-radius:26px;background:#0b2747;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .8s;will-change:transform}
.sf-ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px}
.sf-ph[data-p="0"]{transform:translateX(0) scale(1.06);z-index:4}
.sf-ph[data-p="1"]{transform:translateX(118px) rotate(7deg) scale(.9);z-index:3}
.sf-ph[data-p="2"]{transform:translateX(0) scale(.8);opacity:0;z-index:1}
.sf-ph[data-p="3"]{transform:translateX(-118px) rotate(-7deg) scale(.9);z-index:3}
.sf-win figcaption{color:#cfe6ff;text-align:center}
/* 10 Referenzen: Rampenlicht */
.wi-sp{background:linear-gradient(160deg,#0a3e7b,#012d5a)}
.sp-win{display:grid;gap:14px}
.sp-st{position:relative;display:grid}
.sp-s{grid-area:1/1;position:relative;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;pointer-events:none}.sp-s.on{opacity:1;transform:none;pointer-events:auto}
.sp-d{display:block;width:88%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}.sp-d img{display:block;width:100%;height:auto}
.sp-m{position:absolute;right:0;bottom:-14px;width:24%;padding:5px;border-radius:20px;background:#0b2747;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}.sp-m img{display:block;width:100%;height:auto;border-radius:15px}
.sp-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.sp-t{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;transition:background .3s}
.sp-t b{font:700 14px/1.2 var(--b)}.sp-t small{font:400 12px/1.3 var(--b);color:#cfe6ff}.sp-t.on,.sp-t:hover{background:rgba(59,155,250,.32)}
/* 12 Ueber uns */
.wi-ub2{background:linear-gradient(160deg,#103f72,#012d5a 70%)}
.ub2{position:relative;padding:18px 18px 34px}
.ub2-ph{display:block;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}.ub2-ph img{display:block;width:100%;height:auto}
.ub2-f{position:absolute;display:grid;gap:2px;padding:12px 16px;border-radius:14px;background:#fff;color:#012d5a;font:400 13px/1.35 var(--b);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:ub2-fl 6s ease-in-out infinite}
.ub2-f b{font:700 18px/1.1 var(--b);color:#1b6cd0}
.ub2-f.f1{left:0;top:0}.ub2-f.f2{right:0;top:38%;animation-delay:-2s}.ub2-f.f3{left:8%;bottom:0;animation-delay:-4s}
@keyframes ub2-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* 13 Blog mit Bildern */
.bl-st{grid-template-columns:1fr 1fr;gap:10px}
.bl-k{padding:0;overflow:hidden;gap:0}.bl-k.bl-big{grid-column:1/-1}
.bl-im{display:block;aspect-ratio:900/325;background:#e9eef5}.bl-k:not(.bl-big) .bl-im{aspect-ratio:16/7}.bl-im img{display:block;width:100%;height:100%;object-fit:cover}
.bl-k .bl-tx{display:grid;gap:5px;padding:12px 14px 14px;font:inherit;color:#012d5a}.bl-k .bl-im{display:block}.bl-k:not(.bl-big) b{font-size:15px}
.bl-k:hover{transform:translateY(-3px)}
/* 14 Blogbeitrag */
.po-img{justify-self:end;width:100%;max-width:520px;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}.po-img img{display:block;width:100%;height:auto}
/* 15 Kontakt: direkte Wege */
.ko-direct{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ko-direct a{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(159,208,255,.3);color:#fff;transition:background .3s}
.ko-direct a:hover{background:rgba(59,155,250,.3)}.ko-direct small{font:600 11px/1 var(--b);letter-spacing:.1em;text-transform:uppercase;color:#9fd0ff}.ko-direct b{font:700 16px/1.2 var(--b)}
@media (max-width:980px){.lt-bento{min-height:340px}.wi-rl2 .rl-win{max-height:none;height:440px}.sf-fan{height:400px}}
@media (max-width:600px){.lt-bento{grid-template-columns:1fr 1fr;grid-template-areas:"web web" "seo soc" "it soc";min-height:420px}.sp-tabs{grid-template-columns:1fr 1fr}.bl-st{grid-template-columns:1fr}.ko-direct{grid-template-columns:1fr}
  .sf-ph{width:150px;margin:-133px 0 0 -75px}.sf-ph[data-p="1"]{transform:translateX(80px) rotate(7deg) scale(.88)}.sf-ph[data-p="3"]{transform:translateX(-80px) rotate(-7deg) scale(.88)}.sf-fan{height:330px}
  .ub2-f{font-size:12px;padding:9px 12px}.ub2-f b{font-size:15px}}

/* ===== Runde 3 (23.10.2026): einheitliche Hero-Hoehe =====
   Desktop: Bildspalte fest --hv, gleiche Abstaende -> alle Heros gleich hoch.
   Handy: Bild fest --hvm, damit kein Hero extrem lang wird. */
.wi{--hv:460px;--hvm:300px}
.br-vis{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.br-vis .br-pick{margin:0}.br-vis .br-pick>p{margin-bottom:8px}
.br-vis .br-c{padding:8px 13px;font-size:14px}
.br-vis .br-win2{flex:1;min-height:0}.br-vis .br-st{flex:1;min-height:0;aspect-ratio:auto}
.wi-brx .br-more{margin:16px 0 0}
.bl-win{grid-template-rows:auto minmax(0,1fr);min-height:0}.bl-st{min-height:0}
@media (min-width:981px){
  .wi-g,.po-g,.wi-d .dc-canvas{padding-top:36px;padding-bottom:64px;min-height:calc(var(--hv) + 100px);align-items:center}
  .wi-g>:nth-child(2){height:var(--hv);max-height:var(--hv);min-height:0;align-self:center}
  .wi-d .dc-sel{padding:20px 28px 24px}.wi-d .dc-sel .wi-h1{font-size:clamp(28px,2.6vw,42px)!important}
  .wi-g .wi-h1{font-size:clamp(28px,2.6vw,42px)!important}
  .wi-g .wi-lead{margin-top:14px;font-size:16px;line-height:1.55}
}
@media (max-width:980px){
  .wi-g>:nth-child(2){height:var(--hvm);max-height:var(--hvm);min-height:0}
  .wi-brx .wi-g>:nth-child(2){height:auto;max-height:none}.wi-brx .br-st{flex:none;aspect-ratio:8/5}
  .wi-g{padding-bottom:64px}
}
/* Runde 3: Inhalte passen sich der festen Hoehe an statt abgeschnitten zu werden */
.sn-win{display:flex;flex-direction:column}.sn-list{flex:1;min-height:0;overflow:hidden;-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.bl-st{grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}.bl-k{display:flex;flex-direction:column;min-height:0}.bl-k .bl-im,.bl-k:not(.bl-big) .bl-im{flex:1;min-height:0;aspect-ratio:auto}
.sf-win{grid-template-rows:minmax(0,1fr) auto}.sf-win .sf-fan{height:100%;max-height:100%}
.wi-ko .wi-g>:nth-child(2){height:auto}
@media (min-width:981px){.po-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.po-img{max-width:none}}
/* Runde 3: Inhalte passen sich der festen Hoehe an statt abgeschnitten zu werden */
.sn-win{display:flex;flex-direction:column}.sn-list{flex:1;min-height:0;overflow:hidden;-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.bl-st{grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}.bl-k{display:flex;flex-direction:column;min-height:0}.bl-k .bl-im,.bl-k:not(.bl-big) .bl-im{flex:1;min-height:0;aspect-ratio:auto}
.sf-win{grid-template-rows:minmax(0,1fr) auto}.sf-win .sf-fan{height:100%;max-height:100%}
.wi-ko .wi-g>:nth-child(2){height:auto}
@media (min-width:981px){.po-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.po-img{max-width:none}}
@media (min-width:981px) and (max-width:1366px){.wi-g .wi-h1{font-size:clamp(26px,2.5vw,32px)!important}.wi-g .wi-lead{font-size:15px}}
@media (min-width:981px) and (max-width:1366px){.wi-brx .wi-g,.wi-rl2 .wi-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ===== Runde 4 (23.10.2026) ===== */
.wi.wi:not(.wi-d){background:linear-gradient(160deg,#0a3e7b,#012d5a 72%)}
/* 1 Leistungen: 3D-Motiv + Liste */
.lt3{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:0}
.lt3-st{position:relative;width:100%;aspect-ratio:1;max-height:100%;display:grid;place-items:center}
.lt3-st::before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,rgba(59,155,250,.38),transparent 70%)}
.lt3-ring{position:absolute;inset:6%;border-radius:50%;border:2px dashed rgba(159,208,255,.32);animation:lt3-rot 40s linear infinite}
.lt3-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#9fd0ff;animation:lt3-pu 2.6s ease-in-out infinite}.lt3-dot.d1{left:10%;top:22%}.lt3-dot.d2{right:8%;bottom:24%;animation-delay:-1.3s}
.lt3-im{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.86) translateY(12px);transition:opacity .6s,transform .6s}
.lt3-im.on{opacity:1;transform:none}.lt3-im img{display:block;width:108%;max-width:none;height:auto;animation:lt3-fl 5s ease-in-out infinite}
.lt3-list{display:grid;gap:8px}
.lt3-r{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:13px 16px;border-radius:16px;color:#fff;background:rgba(255,255,255,.07);transition:background .35s,color .35s}
.lt3-r small{grid-row:1/3;font:700 12px/1.6 var(--b);color:#9fd0ff}.lt3-r b{font:700 18px/1.3 var(--b)}
.lt3-r>span{font:400 14px/1.45 var(--b);color:#cfe6ff}
.lt3-r em{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-style:normal;font-weight:600;color:#1b6cd0;opacity:0;transition:opacity .35s}.lt3-r em svg{width:14px;height:14px}
.lt3-r.on{background:#fff;color:#012d5a}.lt3-r.on>span{color:#28476b}.lt3-r.on small{color:#1b6cd0}.lt3-r.on em{opacity:1}
@keyframes lt3-rot{to{transform:rotate(360deg)}}@keyframes lt3-fl{50%{transform:translateY(-10px)}}@keyframes lt3-pu{50%{transform:scale(1.7);opacity:.35}}
@media (max-width:980px){.wi-lt .wi-g>.lt3{height:auto;max-height:none}.lt3{grid-template-columns:1fr}.lt3-st{width:min(100%,260px);justify-self:center}}
/* 2 Webdesign: Erklaerung */
.dc-pi{margin:-2px 0 14px;font:400 13px/1.45 var(--b);color:#4f6788}
/* 3/4 Branchen: mittig, Seite scrollt im Fenster */
.br-vis .br-pick{text-align:center}.br-vis .br-cs{justify-content:center}
.br-st{container-type:size;overflow:hidden}
.br-shot{position:absolute;inset:0}
.br-shot img{height:auto!important;object-fit:fill!important}
.br-shot.on img{animation:br-pan 6.5s ease-in-out .9s both}
.br-win2[data-auto="0"] .br-shot.on img{animation:br-pan 9s ease-in-out 1.2s infinite alternate}
@keyframes br-pan{to{transform:translateY(calc(-100% + 100cqh))}}
/* 5 Ort: lebendigere Beispielseite */
.rc2 .rc-frame{flex:1;min-height:0}
.rc-v2 .rc-nav b{display:flex;gap:8px;align-items:center;text-transform:none}.rc-v2 .rc-nav b i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#1b6cd0;color:#fff;font:700 13px/1 var(--b);font-style:normal}
.rc-cta{padding:8px 14px;border-radius:999px;background:#1b6cd0;color:#fff;font:600 12px/1 var(--b)}
.rc-hero2{position:relative;display:flex;align-items:flex-end;min-height:clamp(170px,40cqi,290px);padding:clamp(16px,4cqi,30px);color:#fff;overflow:hidden}
.rc-hero2>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-hero2::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(1,24,48,.88),rgba(1,24,48,.15))}
.rc-hx{position:relative;z-index:2;max-width:30em}
.rc-hx small{display:flex;gap:6px;align-items:center;font:700 11px/1 var(--b);letter-spacing:.12em;color:#9fd0ff}.rc-hx small svg{width:14px;height:14px;color:#3b9bfa}
.rc-hx h2{margin:8px 0;font:700 clamp(18px,5.2cqi,34px)/1.05 var(--d);text-transform:uppercase;letter-spacing:-.02em;color:#fff}
.rc-hx p{font:400 clamp(12px,2cqi,15px)/1.5 var(--b);color:#dbe9f8}
.rc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.rc-v2 .rc-btn{margin:0;background:#3b9bfa}.rc-btn2{padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #fff;font:600 13px/1 var(--b)}
.rc-rate{position:absolute;z-index:2;right:clamp(10px,3cqi,22px);top:clamp(10px,3cqi,22px);display:grid;gap:3px;padding:8px 12px;border-radius:12px;background:#fff;color:#012d5a;font:600 11px/1.2 var(--b);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.rc-rate span{display:flex;gap:1px;color:#3b9bfa}.rc-rate svg{width:13px;height:13px}
.rc-v2 .rc-cards{padding-top:14px}
@container (max-width:520px){.rc-btn2{display:none}}
@container (max-width:300px){.rc-cta,.rc-rate{display:none}}
/* 6 Relaunch: ganze Seiten als Bild */
.rl-sc .rl-old img,.rl-sc .rl-new img{display:block;width:100%;height:auto}
.rl-sc .rl-new{padding:0;background:#101418}.rl-sc .rl-old{background:#c9d3de}
/* 7 SEO: Kartenansicht + Unternehmensprofil */
.sn2 .lp{margin:4px 14px 0;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #e3e8ef;flex:none}
.lp-map{display:block;width:100%;height:78px}.lp-map .pn{fill:#8aa4c2}
.lp-map .pm{fill:#1a73e8;opacity:0;transform-origin:300px 52px;transform:scale(.4);transition:opacity .5s,transform .5s}.sn2[data-state="1"] .lp-map .pm{opacity:1;transform:none}
.lp-l{display:grid}.lp-l>div{grid-area:1/1;transition:opacity .45s,transform .45s}
.lp-r{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:6px 12px;border-top:1px solid #eef1f5;font:400 12px/1.35 Arial,sans-serif;color:#4d5156}
.lp-r b{font:400 15px/1.3 Arial,sans-serif;color:#1a0dab}.lp-r small{font-size:12px}
.lp-s{display:flex;align-items:center;gap:2px}.lp-s i{display:flex;color:#4e86e8}.lp-s i.e{color:#c9d3e0}.lp-s svg{width:12px;height:12px}.lp-s em{margin-left:3px;font-style:normal}
.lp-act{grid-column:2;grid-row:1/4;display:flex;gap:6px;align-items:center}.lp-act i{padding:6px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px #dadce0;color:#1a73e8;font:500 12px/1 Arial,sans-serif;font-style:normal}
.lp-r.me{background:#f2f7ff;box-shadow:inset 3px 0 0 #1a73e8}
.sn2 .sn-list{padding-top:2px}
/* 8 IT: Foto + Statuskarten */
.it2{position:relative;display:grid;place-items:center;padding:20px 10px}
.it2-ph{display:block;width:84%;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}.it2-ph img{display:block;width:100%;height:auto}
.it2-c{position:absolute;display:flex;gap:10px;align-items:center;max-width:250px;padding:10px 14px;border-radius:14px;background:#fff;color:#4f6788;font:400 12.5px/1.35 var(--b);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:ub2-fl 6s ease-in-out infinite}
.it2-c b{display:block;font:700 15px/1.2 var(--b);color:#012d5a}
.it2-c i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#e3eefb;color:#9aa8bb;transition:background .4s,color .4s,transform .4s}.it2-c i svg{width:16px;height:16px}
.it2-c.on i{background:#3b9bfa;color:#fff;transform:scale(1.15)}
.it2-c.c0{left:0;top:8%}.it2-c.c1{right:0;top:22%;animation-delay:-1.5s}.it2-c.c2{left:2%;bottom:14%;animation-delay:-3s}.it2-c.c3{right:2%;bottom:4%;animation-delay:-4.5s}
@media (max-width:600px){.it2-c{max-width:170px;padding:8px 10px;font-size:11px}.it2-c b{font-size:13px}.it2-ph{width:100%}}
/* 9 Social: alle Kanaele */
.sf3{grid-template-rows:minmax(0,1fr) auto auto;gap:10px}
.sf3 .sf-ph[data-p="0"]{transform:scale(1.03);z-index:5;opacity:1}
.sf3 .sf-ph[data-p="1"]{transform:translateX(112px) rotate(6deg) scale(.86);z-index:4;opacity:1}
.sf3 .sf-ph[data-p="m1"]{transform:translateX(-112px) rotate(-6deg) scale(.86);z-index:4}
.sf3 .sf-ph[data-p="2"]{transform:translateX(205px) rotate(11deg) scale(.72);z-index:3;opacity:.75}
.sf3 .sf-ph[data-p="m2"]{transform:translateX(-205px) rotate(-11deg) scale(.72);z-index:3;opacity:.75}
.pf{overflow:hidden}.pf-tiktok,.pf-x{background:#000}
.pf-top{position:absolute;left:6px;right:6px;top:6px;z-index:2;display:flex;gap:6px;align-items:center;padding:11px 11px 20px;border-radius:20px 20px 0 0;background:linear-gradient(rgba(0,0,0,.6),transparent);color:#fff;font:600 11px/1.15 var(--b);white-space:nowrap}
.pf-top svg{flex:none;width:18px;height:18px}.pf-top small{opacity:.7;font-weight:400;overflow:hidden;text-overflow:ellipsis}
.pf-bot{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;display:flex;gap:12px;padding:18px 12px 12px;border-radius:0 0 20px 20px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff}.pf-bot svg{width:18px;height:18px}
.pf-facebook .pf-top,.pf-linkedin .pf-top{background:#fff;color:#1c1e21;padding-bottom:11px}.pf-facebook .pf-bot,.pf-linkedin .pf-bot{background:#fff;color:#65676b;padding-top:11px}
.pf-txt{justify-content:space-around;font:600 10px/1 var(--b)}.pf-txt i{font-style:normal}
.pf-side{position:absolute;right:14px;bottom:70px;z-index:2;display:grid;gap:14px;color:#fff}.pf-side svg{width:22px;height:22px}
.pf-cap{position:absolute;left:16px;bottom:18px;z-index:2;display:flex;gap:6px;align-items:center;color:#fff;font:600 11px/1 var(--b)}.pf-cap svg{width:18px;height:18px}
.sf-pls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sf-pl{display:flex;gap:6px;align-items:center;padding:7px 12px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;font:600 13px/1 var(--b);cursor:pointer;transition:background .3s,color .3s}
.sf-pl svg{width:16px;height:16px}.sf-pl.on{background:#fff;color:#012d5a}.sf-pl.on path[fill="#fff"]{fill:#000}
@media (max-width:600px){.sf3 .sf-ph[data-p="1"]{transform:translateX(76px) rotate(6deg) scale(.84)}.sf3 .sf-ph[data-p="m1"]{transform:translateX(-76px) rotate(-6deg) scale(.84)}
  .sf3 .sf-ph[data-p="2"]{transform:translateX(130px) rotate(11deg) scale(.7);opacity:.5}.sf3 .sf-ph[data-p="m2"]{transform:translateX(-130px) rotate(-11deg) scale(.7);opacity:.5}.sf-pl span{display:none}}
@media (max-width:980px){.wi-sm2 .wi-g>.sf3{height:auto;max-height:none}.sf3 .sf-fan{height:360px}}
/* 13 Blog: Aufmacher + Liste */
.bl2{display:flex;flex-direction:column;gap:12px}
.bl2 .bl-st{display:flex;flex-direction:column;gap:8px;min-height:0}.bl2 .bl-st>*{transition:opacity .35s}.bl2 .bl-st.sw>*{opacity:0}
.bl2-top{display:block;flex:none;border-radius:16px;overflow:hidden;background:#fff;color:#012d5a;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.bl2-im{display:block;aspect-ratio:900/325;background:#e9eef5}.bl2-im img{display:block;width:100%;height:100%;object-fit:cover}
.bl2-tx{display:grid;gap:5px;padding:12px 16px 14px}.bl2-tx b{font:700 18px/1.3 var(--b)}
.bl2-tx small,.bl2-r small{font:700 11px/1 var(--b);letter-spacing:.1em;text-transform:uppercase;color:#1b6cd0}
.bl2-l{display:grid;gap:8px}
.bl2-r{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:5px;align-items:center;padding:11px 16px;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;transition:background .3s}
.bl2-r small{color:#9fd0ff}.bl2-r b{grid-column:1;font:600 15px/1.35 var(--b)}.bl2-r svg{grid-column:2;grid-row:1/3;width:18px;height:18px}.bl2-r:hover{background:rgba(255,255,255,.15)}
@media (max-width:980px){.wi-bl .wi-g>.bl2{height:auto;max-height:none}}
/* 14 Blogbeitrag: Artikelkopf + grosses Titelbild */
.wi.wi.wi-po2{background:linear-gradient(160deg,#0a3e7b,#012d5a) top/100% 58% no-repeat,#f4f7fb}
.po2-in{max-width:980px;margin:0 auto;padding:28px clamp(20px,4vw,56px) 0;text-align:center}.po2-in .wi-bc{justify-content:center}
.po2-in .po-h1{margin-top:10px;font-size:clamp(30px,3.6vw,52px)!important}.po2-in .po-meta{justify-content:center}
.po2-img{max-width:1100px;margin:28px auto 0;padding:0 clamp(16px,3vw,40px)}.po2-img img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 40px 80px -40px rgba(1,45,90,.7)}
.po2-body{max-width:760px;margin:0 auto;padding:28px 20px 40px;color:#28476b;font:400 17px/1.7 var(--b)}.po2-body em{color:#7d93ad}
/* 15 Kontakt: Beispiel-Chat */
.ko2{display:flex;flex-direction:column;gap:10px;min-height:0}
.ko2-win{flex:1;min-height:260px;display:flex;flex-direction:column;border-radius:20px;background:#eef3f9;color:#012d5a;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.ko2-hd{display:flex;gap:12px;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e3e9f1}
.ko2-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#012d5a;color:#fff;font:700 12px/1 var(--b)}.ko2-hd b{display:block;font:700 15px/1.2 var(--b)}.ko2-hd small{color:#4f6788;font-size:12.5px}
.ko2-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px 16px}
.ko2 .m{max-width:82%;padding:10px 14px;border-radius:16px;font:400 14px/1.45 var(--b);opacity:0;animation:14s ease infinite both}
.ko2 .m.u{align-self:flex-end;background:#3b9bfa;color:#fff;border-bottom-right-radius:4px}
.ko2 .m.h{align-self:flex-start;background:#fff;color:#012d5a;border-bottom-left-radius:4px;box-shadow:0 6px 16px -10px rgba(1,45,90,.4)}
.ko2 .m[style*="--i:0"]{animation-name:ko2-0}.ko2 .m[style*="--i:1"]{animation-name:ko2-1}.ko2 .m[style*="--i:2"]{animation-name:ko2-2}.ko2 .m[style*="--i:3"]{animation-name:ko2-3}
.ko2-t{display:grid;gap:3px;box-shadow:inset 0 0 0 2px #3b9bfa!important}.ko2-t b{font-size:15px}.ko2-t span{color:#4f6788;font-size:13px}.ko2-t em{font-style:normal;font-weight:700;color:#1b6cd0;font-size:13px}
@keyframes ko2-0{0%{opacity:0;transform:translateY(10px)}4%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ko2-1{0%,14%{opacity:0;transform:translateY(10px)}18%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ko2-2{0%,30%{opacity:0;transform:translateY(10px)}34%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ko2-3{0%,46%{opacity:0;transform:translateY(10px) scale(.96)}51%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
.ko2 figcaption{color:#cfe6ff;text-align:center}
@media (min-width:981px){.wi-ko .wi-g>.ko2{height:var(--hv)}}
.br-vis .br-win2{align-self:stretch!important;width:100%}
@media (max-width:980px){.wi-ko .wi-g>.ko2{height:auto;max-height:none}}

/* Einbau in die Seiten: globaler Pause-Knopf (html.anim-off) haelt auch die Heros an */
html.anim-off .wi *{animation-play-state:paused!important}
.wi .po2-img{margin-left:auto!important;margin-right:auto!important;width:100%}

/* ===== 16 Impressum: Visitenkarte (23.10.2026) ===== */
.lg2{display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:0}
.lg2-sc{perspective:1400px;display:grid;place-items:center}
.lg2-card{position:relative;width:min(100%,460px);aspect-ratio:1.7;transform-style:preserve-3d;animation:lg2-flip 12s cubic-bezier(.65,0,.35,1) infinite}
.lg2-card:hover{animation-play-state:paused}
.lg2-f,.lg2-b{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:28px 32px;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 40px 80px -36px rgba(0,0,0,.85)}
.lg2-f{background:#fff;color:#28476b;font:400 14px/1.45 var(--b)}
.lg2-f img{width:118px;height:auto;margin-bottom:6px}.lg2-l{width:44px;height:3px;margin:4px 0 8px;border-radius:2px;background:#3b9bfa}
.lg2-f b{font:700 19px/1.25 var(--b);color:#012d5a}
.lg2-f small,.lg2-b small{position:absolute;right:22px;top:20px;font:600 11px/1 var(--b);letter-spacing:.12em;color:#7d93ad}
.lg2-b{transform:rotateY(180deg);background:linear-gradient(150deg,#1b6cd0,#012d5a);color:#fff}
.lg2-b small{position:static;margin-top:10px;color:#9fd0ff;letter-spacing:.04em}
.lg2-t{font:700 12px/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:#9fd0ff;margin-bottom:8px}
.lg2-b dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font:400 15px/1.35 var(--b)}.lg2-b dt{color:#9fd0ff}.lg2-b dd{margin:0;font-weight:600}
@keyframes lg2-flip{0%,38%{transform:rotateY(0) translateY(0)}20%{transform:rotateY(0) translateY(-8px)}50%,88%{transform:rotateY(180deg)}70%{transform:rotateY(180deg) translateY(-8px)}100%{transform:rotateY(360deg)}}
.lg2-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.lg2-nav span{flex-basis:100%;text-align:center;font:600 12px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff;margin-bottom:4px}
.lg2-nav a{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:600 13px/1 var(--b);transition:background .25s,color .25s}.lg2-nav a:hover,.lg2-nav a:focus-visible{background:#fff;color:#012d5a}
@media (max-width:600px){.lg2-f,.lg2-b{padding:20px 22px}.lg2-f b{font-size:16px}.lg2-f{font-size:12.5px}.lg2-b dl{font-size:13px}.lg2-f img{width:90px}}
@media (max-width:980px){.wi-lg .wi-g>.lg2{height:auto;max-height:none}}
/* ===== 17 Datenschutz: auf einen Blick ===== */
.ds2{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}
.ds2-win{border-radius:20px;background:#fff;color:#012d5a;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.ds2-hd{display:flex;gap:14px;align-items:center;padding:16px 20px;background:#f2f7fd;border-bottom:1px solid #e3e9f1}
.ds2-hd b{display:block;font:700 17px/1.25 var(--b)}.ds2-hd small{color:#4f6788;font-size:13px}
.ds2-sh{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:#3b9bfa;color:#fff}.ds2-sh svg{width:28px;height:28px}
.ds2-sh i{position:absolute;inset:-6px;border-radius:18px;border:2px solid #3b9bfa;animation:ds2-ring 2.8s ease-out infinite}
.ds2-l{list-style:none;margin:0;padding:8px 10px 10px}
.ds2-r{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;color:#012d5a;transition:background .35s}
.ds2-r>i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef4fb;color:#1b6cd0}.ds2-r>i svg{width:18px;height:18px}
.ds2-r b{font:600 15px/1.3 var(--b)}
.ds2-r em{display:flex;align-items:center;gap:6px;font:600 13px/1.2 var(--b);font-style:normal;color:#1b6cd0;text-align:right}
.ds2-r em svg{flex:none;width:18px;height:18px;padding:2px;border-radius:50%;background:#dfeafa;color:#fff;transition:background .35s,transform .35s}
.ds2-r.on{background:#eef5ff}.ds2-r.on em svg{background:#3b9bfa;transform:scale(1.15)}
.ds2-r:hover{background:#f2f7fd}
.ds2 figcaption{color:#cfe6ff;text-align:center}
@keyframes ds2-ring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
@media (max-width:600px){.ds2-r{grid-template-columns:auto 1fr;row-gap:2px}.ds2-r em{grid-column:2;justify-content:flex-start;text-align:left}.ds2-r>i{grid-row:1/3}}
@media (max-width:980px){.wi-ds .wi-g>.ds2{height:auto;max-height:none}}
.pg-legal h2[id]{scroll-margin-top:110px}

/* ===== Runde 6 (23.10.2026) ===== */
/* Hero so breit wie die Abschnitte darunter (gleicher Rand, gleiche Rundung wie .card) */
.pg .wi{margin:0 0 var(--fr);border-radius:var(--r)}
/* 16 Impressum: Standort-Karte statt Visitenkarte */
.lg3{display:flex;flex-direction:column;gap:14px;min-height:0}
.lg3-st{position:relative;flex:1;min-height:260px;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.lg3-map{position:absolute;inset:0;width:100%;height:100%;animation:lg3-drift 24s ease-in-out infinite alternate}
@keyframes lg3-drift{to{transform:scale(1.08) translate(-1.5%,1%)}}
.lg3-pin{position:absolute;left:54%;top:42%;width:44px;height:44px;margin:-44px 0 0 -22px}
.lg3-pin svg{position:relative;width:44px;height:44px;filter:drop-shadow(0 8px 10px rgba(1,45,90,.35));animation:lg3-bob 3s ease-in-out infinite}
.lg3-pin i{position:absolute;left:50%;bottom:-6px;width:60px;height:22px;margin-left:-30px;border-radius:50%;border:2px solid #1b6cd0;opacity:0;animation:lg3-ring 2.6s ease-out infinite}
.lg3-pin i+i{animation-delay:-1.3s}
@keyframes lg3-bob{50%{transform:translateY(-6px)}}
@keyframes lg3-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.lg3-city{position:absolute;left:54%;top:42%;transform:translate(-50%,10px);padding:6px 12px;border-radius:999px;background:#012d5a;color:#fff;font:600 12px/1 var(--b);white-space:nowrap}
.lg3-card{position:absolute;left:16px;bottom:16px;display:grid;gap:2px;max-width:290px;padding:16px 18px;border-radius:16px;background:#fff;color:#28476b;font:400 13px/1.45 var(--b);box-shadow:0 20px 40px -18px rgba(1,45,90,.55)}
.lg3-card img{width:92px;height:auto;margin-bottom:6px}.lg3-card b{font:700 16px/1.25 var(--b);color:#012d5a}
.lg3-ct{position:absolute;right:16px;top:16px;display:grid;gap:8px;padding:12px 16px;border-radius:14px;background:rgba(1,45,90,.92);color:#fff;font:600 13px/1.3 var(--b)}
.lg3-ct small{display:block;font:600 10px/1.2 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#9fd0ff}
.lg3 .lg2-nav{flex:none}
@media (max-width:980px){.wi-lg .wi-g>.lg3{height:auto;max-height:none}.lg3-st{height:340px;flex:none}}
@media (max-width:600px){.lg3-ct{display:none}.lg3-card{left:10px;right:10px;bottom:10px;max-width:none}.lg3-pin,.lg3-city{top:30%}}
/* Impressum wie Datenschutz: Werte statt Haken */
.im2 .ds2-r em{color:#012d5a;font-weight:600}
.im2 .ds2-r.on em{color:#1b6cd0}
.im2 .ds2-r{padding:8px 12px}
.im2 .ds2-r{padding:6px 12px}.im2 .ds2-hd{padding:12px 18px}.im2 .ds2-l{padding:6px 10px 8px}.im2 .ds2-r>i{width:30px;height:30px}
@media (max-width:980px){.wi-lg .wi-g>.ds2{height:auto;max-height:none}}

/* ===== Sprungmarken aus dem Hero-Bild (23.10.2026) ===== */
.hs{display:flex;align-items:center;gap:4px;width:max-content;margin-top:5px;font:600 12px/1.2 var(--b);color:#1b6cd0}
.hs svg,.hs-i svg,.hp svg{flex:none;width:12px;height:12px}
.hs::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hs:hover,.hs:focus-visible{text-decoration:underline;text-underline-offset:3px}
.it2-c:has(.hs:hover),.ub2-f:has(.hs:hover){box-shadow:0 0 0 2px #3b9bfa,0 20px 40px -20px rgba(0,0,0,.6)}
.hs-i{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.hs-i svg{color:#3b9bfa}.hs-i:hover{color:#1b6cd0}
.hp-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;flex:none}
.hp{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 13px/1 var(--b);transition:background .25s,color .25s}
.hp:hover,.hp:focus-visible{background:#fff;color:#012d5a}
.dc-panel .hp-row{justify-content:flex-start;margin:12px 0 4px}.dc-panel .hp{background:#eef4fb;color:#1b6cd0}.dc-panel .hp:hover{background:#1b6cd0;color:#fff}
.rl-win .hp-row{padding:10px 12px;background:#f4f7fb}.rl-win .hp{background:#e3edf8;color:#012d5a}.rl-win .hp:hover{background:#012d5a;color:#fff}
.sf3{grid-template-rows:minmax(0,1fr) auto auto}
[id^="s"][id$="-h"]{scroll-margin-top:100px}

/* 26.10.: Logo-Design-Projekt – vier Logos im Raster, gleiche Bildhoehe wie alle Heros */
.lgd-win{display:grid;place-items:center}
.lgd-g{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:100%}
.lgd-c{border-radius:14px;overflow:hidden;background:#0a3e7b;box-shadow:0 30px 60px -36px rgba(0,0,0,.7)}
.lgd-c img{display:block;width:100%;height:100%;object-fit:cover}

/* Runde 5: Social Media A (vier echte Profile) */
.wi-g>figure figcaption{font:500 12px/1.3 var(--b);color:#9fc2e8;text-align:center}
.rs5{display:flex;flex-direction:column;gap:12px;min-height:0}
.rs5-fan{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center}
.rs5-ph{position:relative;display:block;height:100%;aspect-ratio:9/19;border-radius:30px;padding:8px;background:#0b1626;box-shadow:0 40px 70px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.12)}
.rs5-ph::after{content:none}   /* 24.10.: Pille (Kamera-Aussparung) oben am Handy auf Inhaberwunsch entfernt */
.rs5-fan .rs5-ph{position:absolute;height:92%}
.rs5-fan .p1,.rs5-fan .p2{height:100%}.rs5-fan .p1{z-index:3}.rs5-fan .p2{z-index:2}
.rs5-fan .p1{transform:translateX(-36%) rotate(-3deg)}.rs5-fan .p2{transform:translateX(36%) rotate(3deg)}
.rs5-fan .p0{transform:translateX(-100%) rotate(-8deg) scale(.8)}.rs5-fan .p3{transform:translateX(100%) rotate(8deg) scale(.8)}
.rs5-sc{position:absolute;inset:8px;border-radius:23px;overflow:hidden;background:#000}
.rs5-sc img{display:block;width:100%;height:auto;animation:rs5-s 26s ease-in-out infinite alternate}
.rs5-sc img{--k:calc(1 - (19 / 9) * 480 / var(--h))}
.rs5-sc{--h:1315}
@keyframes rs5-s{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(var(--k) * -100%))}}
.rs5-fan .rs5-sc img,.rs5b .rs5-sc img{--k:calc(302 / var(--h));animation-duration:9s}
.rs5-ln{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rs5-ln a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:600 13px/1 var(--b);transition:background .25s,color .25s}
.rs5-ln a:hover{background:#fff;color:#012d5a}.rs5-ln svg{width:16px;height:16px}.rs5-ln .rs5-x{width:12px;height:12px;opacity:.7}

/* ===== Webdesign-Hero Runde 6 (23.10.2026): Beispiel-Website entsteht, in Alltagssprache ===== */
.w6{display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0}
.w6-win{align-self:center;width:min(100%,calc((var(--hv) - 120px) * 1.5625))}
.w6a .w6-win{width:min(100%,calc((var(--hv) - 175px) * 1.5625))}
.w6-win{;border-radius:14px;overflow:hidden;background:#0b1626;box-shadow:0 40px 80px -40px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1)}
.w6-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#1a2433;font:500 12px/1 var(--b);color:#9fc2e8}
.w6-bar i{width:9px;height:9px;border-radius:50%;background:#3a4a60}.w6-bar span{margin-left:10px;padding:5px 10px;border-radius:8px;background:#0b1626}
.w6-vp{position:relative;aspect-ratio:800/512;overflow:hidden;background:#f3f7fd;touch-action:pan-y}
/* Skizze: gestrichelte Kaesten mit Namen in Alltagssprache */
.w6-sk{position:absolute;inset:0;font:600 clamp(9px,.85vw,12px)/1.2 var(--b);color:#5b7598}
.w6-sk i{font-style:normal;display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed #9fbfe6;border-radius:6px;background:rgba(255,255,255,.7)}
.sk-kopf{position:absolute;left:0;right:0;top:0;height:12.89%;display:flex;align-items:center;gap:3%;padding:0 4%;border-bottom:1.5px dashed #c5d8f1}
.sk-logo{width:16%;height:56%}.sk-menu{margin-left:auto;width:34%;height:46%}.sk-btn{width:15%;height:56%}
.sk-hero{position:absolute;left:0;right:0;top:12.89%;height:73.05%}
.w6-sk .sk-bild{position:absolute;inset:6% 4% 6% 52%;align-items:flex-end;padding-bottom:6px;background:repeating-linear-gradient(135deg,rgba(159,191,230,.2) 0 10px,transparent 10px 20px)}
.sk-h{position:absolute;left:4%;top:22%;width:44%;height:24%;font-size:1.05em}
.w6-sk .sk-l{position:absolute;left:4%;top:52%;width:40%;height:5%;border:0;background:#dfe9f6}
.w6-sk .sk-l.s{top:60%;width:30%}
.w6-sk .sk-k{position:absolute;left:4%;top:72%;width:22%;height:12%;background:#e3efff}
.sk-leist{position:absolute;left:4%;right:4%;top:86%;height:12%;display:flex;gap:2%}.sk-leist i{flex:1}
/* fertige Teile der Beispiel-Website, Ausschnitt per margin-top in % (bezieht sich auf die Breite) */
.w6-p{position:absolute;left:0;right:0;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.w6-p img{display:block;width:100%;height:auto}
.w6-p.on{opacity:1;transform:none}
/* A: Schritte darunter */
.w6-st{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.w6-st li{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:12px;background:rgba(255,255,255,.07);color:#cfe2f7;transition:background .4s,color .4s}
.w6-st b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);font:700 12px/1 var(--b);color:#fff}
.w6-st span{display:block;font:400 12px/1.35 var(--b)}.w6-st strong{display:block;margin-bottom:2px;font:600 13px/1.25 var(--b);color:#fff}
.w6-st li.on{background:#fff;color:#3d5677}.w6-st li.on strong{color:#012d5a}.w6-st li.on b{background:#3b9bfa}
.w6-st li.done b{background:#3b9bfa}
/* B: Regler (nur transform) */
.w6-rv{position:absolute;inset:0;overflow:hidden;transform:translateX(50%);animation:w6-r 10s ease-in-out infinite alternate}
.w6-rv-in{position:absolute;inset:0;transform:translateX(-50%);animation:w6-ri 10s ease-in-out infinite alternate}
.w6-rv-in img{display:block;width:100%;height:auto}
.w6-hd{position:absolute;inset:0;pointer-events:none;transform:translateX(50%);animation:w6-r 10s ease-in-out infinite alternate}
.w6-hd i{position:absolute;left:-1.5px;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(1,45,90,.25)}
.w6-hd i::after{content:"\2039\00a0\203A";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;color:#012d5a;display:grid;place-items:center;font:700 15px/1 var(--b);box-shadow:0 6px 16px rgba(1,25,55,.35)}
.w6-hd b{position:absolute;top:10px;padding:4px 9px;border-radius:999px;font:600 11px/1 var(--b);white-space:nowrap}
.w6-hd b:first-of-type{right:calc(100% + 10px);background:#fff;color:#012d5a;box-shadow:0 2px 8px rgba(1,25,55,.2)}.w6-hd b:last-of-type{left:10px;background:#3b9bfa;color:#fff}
@keyframes w6-r{0%,8%{transform:translateX(88%)}92%,100%{transform:translateX(12%)}}
@keyframes w6-ri{0%,8%{transform:translateX(-88%)}92%,100%{transform:translateX(-12%)}}
.w6b.drag .w6-rv,.w6b.drag .w6-rv-in,.w6b.drag .w6-hd{animation:none}
.w6b .w6-vp{cursor:ew-resize}
.wi .w6-cap{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font:400 13px/1.3 var(--b);color:#cfe2f7}.w6-cap b{color:#fff}
/* C: Bausteine links, wandern in die Seite */
.w6c{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:22px}
.w6c .w6-win{width:min(100%,calc((var(--hv) - 80px) * 1.5625))}
.w6-in{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.w6-in li{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.08);color:#cfe2f7;font:600 13px/1.25 var(--b);transition:background .4s,color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.w6-in svg{flex:none;width:20px;height:20px;color:#9fc2e8}
.w6-in li.on{background:#fff;color:#012d5a;transform:translateX(10px)}.w6-in li.on svg{color:#3b9bfa}
.w6-in li.on::after{content:"";position:absolute;right:-16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#3b9bfa;animation:w6-fly 1.2s ease-out infinite}
.w6-in li.done{color:#fff}.w6-in li.done svg{color:#3b9bfa}
@keyframes w6-fly{0%{transform:translateX(0);opacity:1}100%{transform:translateX(34px);opacity:0}}
.w6-ok{position:absolute;right:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:#3b9bfa;color:#fff;font:700 13px/1 var(--b);opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.w6c.done .w6-ok{opacity:1;transform:none}
.w6-row{grid-column:1/-1;margin-top:10px}
.w6-say{grid-column:1/-1;margin:14px 0 0;text-align:center;font:400 14px/1.4 var(--b);color:#cfe2f7}.w6-say b{color:#fff}
@media (max-width:980px){
  .wi-w6 .wi-g>:nth-child(2){height:auto;max-height:none}
  .w6-win,.w6c .w6-win{width:100%}
  .w6-st{grid-template-columns:1fr 1fr}
  .w6c{grid-template-columns:1fr}.w6-in{grid-template-columns:1fr 1fr;margin-bottom:14px}.w6-in li.on{transform:none}.w6-in li.on::after{display:none}
}

/* ===== IT-Service-Hero Runde 8 (23.10.2026): bildstark und bewegt ===== */
.i8a,.i8b,.i8c{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}
.wi-it8 figcaption{text-align:center;color:#9fc2e8}
.i8c figcaption{text-align:left;padding-left:2%}
/* A: Buero in 3D mit Punkten */
.i8a-st{position:relative;align-self:center;width:min(100%,calc((var(--hv) - 30px) * 1.2862))}
.i8a-st>img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,10,40,.45));animation:i8-fl2 7s ease-in-out infinite alternate}
.i8a-glow{position:absolute;left:12%;right:12%;top:18%;bottom:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(59,155,250,.45),transparent);animation:i8-gl 5s ease-in-out infinite alternate}
@keyframes i8-fl2{to{transform:translateY(-8px)}}
@keyframes i8-gl{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.i8-sp{position:absolute;z-index:2;width:0;height:0}
.i8-sp>i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(59,155,250,.55),0 0 18px rgba(159,208,255,.9);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.i8-sp>i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(159,208,255,.8);animation:i8-ping 1.8s ease-out infinite}
@keyframes i8-ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.i8-sp>b{position:absolute;top:-17px;display:flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 12px;border-radius:999px;background:#fff;color:#012d5a;font:600 13px/1 var(--b);
  box-shadow:0 10px 26px -8px rgba(0,10,40,.6);opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.i8-sp>b svg{width:16px;height:16px;color:#3b9bfa}
.i8-sp.r>b{left:16px}.i8-sp.l>b{right:16px}
.i8-sp.on>i{opacity:1;transform:none}
.i8a-now{display:none;align-self:center;align-items:center;gap:7px;min-height:34px;margin:0;padding:8px 14px;border-radius:999px;background:#fff;color:#012d5a;font:600 13px/1 var(--b)}.i8a-now:empty{visibility:hidden}.i8a-now svg{width:16px;height:16px;color:#3b9bfa}.i8-sp.on>b{opacity:1;transform:none}
/* B: Alles verbunden */
.i8b-st{position:relative;width:100%;aspect-ratio:677/420}
.i8-ln{position:absolute;left:50%;top:50%;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(159,208,255,.12),rgba(159,208,255,.55))}
.i8-ln>span{position:absolute;inset:0;animation:i8-mv 2.6s linear infinite;animation-delay:var(--d)}
.i8-ln i{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:#cfe8ff;box-shadow:0 0 12px 2px #3b9bfa}
@keyframes i8-mv{0%{transform:translateX(100%);opacity:0}12%,85%{opacity:1}100%{transform:translateX(0);opacity:0}}
.i8b-c{position:absolute;z-index:2;left:50%;top:50%;width:44%;transform:translate(-50%,-50%)}
.i8b-c img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 34px rgba(0,10,40,.55));animation:i8-fl2 6s ease-in-out infinite alternate}
.i8b-ring{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;border:2px solid rgba(159,208,255,.35);animation:i8-rg 4s ease-out infinite}
.i8b-ring.r2{animation-delay:2s}
@keyframes i8-rg{from{transform:scale(.6);opacity:.9}to{transform:scale(1.25);opacity:0}}
.i8b-n{position:absolute;z-index:3;display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;padding:8px 13px 8px 8px;border-radius:14px;background:#fff;
  box-shadow:0 14px 30px -12px rgba(0,10,40,.65);transform:translate(-50%,-50%);animation:i8-nf 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.9s)}
.i8b-n>svg{grid-row:1/3;flex:none;min-width:34px;width:34px;height:34px;padding:8px;border-radius:10px;background:#3b9bfa;color:#fff}
.i8b-n b{font:600 13px/1.2 var(--b);color:#012d5a;white-space:nowrap}
.i8b-n em{display:flex;align-items:center;gap:3px;font:500 11.5px/1.2 var(--b);font-style:normal;color:#1b6cd0}.i8b-n em svg{width:12px;height:12px}
@keyframes i8-nf{from{transform:translate(-50%,-50%)}to{transform:translate(-50%,calc(-50% - 7px))}}
/* C: Fernwartung live */
.i8c{position:relative}
.i8c-lap{width:78%;margin-left:3%;filter:drop-shadow(0 30px 40px rgba(0,10,40,.5))}
.i8c-scr{display:flex;flex-direction:column;aspect-ratio:16/10;overflow:hidden;border:10px solid #0d1b33;border-bottom-width:14px;border-radius:16px 16px 4px 4px;background:linear-gradient(160deg,#0b1d3a,#07142a)}
.i8c-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#13284a;font:500 12px/1 var(--b);color:#9fc2e8}
.i8c-bar i{width:9px;height:9px;border-radius:50%;background:#2c4670}.i8c-bar span{margin-left:8px}
.i8c-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px 15% 14px 18px}
.i8c-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.i8c-l li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;opacity:.35;transition:opacity .4s}
.i8c-i{width:32px;height:32px;padding:7px;border-radius:9px;background:rgba(159,208,255,.12);color:#9fd0ff}
.i8c-l b{display:block;margin-bottom:6px;font:500 14px/1.2 var(--b);color:#e6f1ff}
.i8c-l u{display:block;height:5px;border-radius:3px;background:rgba(159,208,255,.15);overflow:hidden;text-decoration:none}
.i8c-l s{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#3b9bfa,#9fd0ff);transform:scaleX(0);transform-origin:0 50%}
.i8c-l em{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3b9bfa;color:#fff;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}
.i8c-l em svg{width:14px;height:14px}
.i8c-l li.run,.i8c-l li.ok{opacity:1}
.i8c-l li.run s{transform:scaleX(1);transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.i8c-l li.ok s{transform:scaleX(1)}
.i8c-l li.ok em{opacity:1;transform:none}
.i8c-gr{display:flex;align-items:flex-end;gap:5px;height:38px}
.i8c-gr i{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(0deg,rgba(59,155,250,.25),rgba(159,208,255,.75));transform:scaleY(var(--h));transform-origin:50% 100%;animation:i8-gb 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.3s)}
@keyframes i8-gb{from{transform:scaleY(calc(var(--h) * .55))}to{transform:scaleY(var(--h))}}
.i8c-base{height:14px;width:112%;margin-left:-6%;border-radius:0 0 18px 18px;background:linear-gradient(#e3e8f0,#b5c0d0)}
.i8c-ph{position:absolute;right:0;bottom:44px;width:23%;max-width:170px;aspect-ratio:9/19;padding:6px;border-radius:26px;background:#0d1b33;box-shadow:0 30px 50px -20px rgba(0,10,40,.8),inset 0 0 0 1px rgba(255,255,255,.12);transform:rotate(4deg)}
.i8c-ph-in{position:relative;height:100%;border-radius:20px;overflow:hidden;background:linear-gradient(170deg,#3b9bfa,#012d5a 75%)}
.i8c-time{position:absolute;left:0;right:0;top:14%;text-align:center;font:600 30px/1 var(--b);color:#fff}
.i8c-note{position:absolute;left:6px;right:6px;top:36%;display:flex;gap:7px;padding:8px;border-radius:12px;background:rgba(255,255,255,.92);opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.i8c-note i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#012d5a;color:#fff;font:700 10px/1 var(--b);font-style:normal}
.i8c-note span{font:400 10.5px/1.3 var(--b);color:#12345c}.i8c-note b{display:block;font:600 10.5px/1.2 var(--b);color:#012d5a}
.i8c.done .i8c-note{opacity:1;transform:none}
@media (max-width:980px){
  .wi-it8 .wi-g>:nth-child(2){height:auto;max-height:none}
  .i8b-n{padding:6px 9px 6px 6px}.i8b-n>svg{width:28px;height:28px;padding:6px}.i8b-n em{display:none}.i8b-n b{font-size:12px}
  .i8c-lap{width:100%}.i8c-ph{width:30%;bottom:-10px;right:-4px}
  .i8-sp>b{font-size:11px;padding:6px 9px}
}
@media (max-width:600px){.i8-sp>b{display:none}.i8a-now{display:flex}.i8c-l b{font-size:12px}.i8c-body{padding:10px}.i8c-l{gap:7px}.i8c-gr{display:none}.i8b-n b{display:none}.i8b-n{grid-template-columns:auto}}

/* ===== Referenzen-Hero Runde 11 (24.10.2026): allgemein, ohne Kundendaten ===== */
.r11a,.r11b,.r11c,.r11d{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0;margin:0}
.wi-r11 figcaption{text-align:center;font:500 13px/1.4 var(--b);color:#9fc2e8}
/* abstrakte Website-Skizze (keine echte Seite) */
.sk{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;padding:0 0 14px;border-radius:16px;background:#fff;overflow:hidden}
.sk-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#e9f1fb}
.sk-bar i{width:8px;height:8px;border-radius:50%;background:#bcd3ec}
.sk-bar b{flex:1;height:10px;margin-left:10px;border-radius:6px;background:#fff}
.sk-nav{display:flex;align-items:center;gap:10px;padding:0 16px}
.sk-nav i{width:34px;height:7px;border-radius:4px;background:#d7e4f3}
.sk-nav i.lg{width:46px;height:14px;margin-right:auto;background:#012d5a}
.sk-nav i.bt{width:46px;height:16px;border-radius:999px;background:#3b9bfa}
.sk-hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:8px 14px;flex:1;margin:0 16px;padding:16px;border-radius:12px;background:#012d5a}
.sk-t1,.sk-t2,.sk-btn{grid-column:1;display:block;border-radius:4px;background:rgba(255,255,255,.85)}
.sk-t1{height:14px;width:90%}.sk-t2{height:8px;width:70%;background:rgba(159,208,255,.6)}
.sk-btn{width:44%;height:16px;border-radius:999px;background:#3b9bfa}
.sk-im{grid-column:2;grid-row:1/5;border-radius:10px;background:linear-gradient(135deg,#3b9bfa,#9fd0ff)}
.sk-h{grid-column:1;height:8px;width:40%;border-radius:4px;background:#9fd0ff}
.sk-h.c{grid-column:1/3;justify-self:center}
.sk1 .sk-hero{grid-template-columns:1fr;text-align:center;justify-items:center;background:linear-gradient(160deg,#012d5a,#0a4a8a)}
.sk1 .sk-t1,.sk1 .sk-t2,.sk1 .sk-btn{grid-column:1;justify-self:center}
.sk-im.w{grid-column:1/3;grid-row:1;height:52px}
.sk2 .sk-t1,.sk2 .sk-t2,.sk2 .sk-btn{grid-column:1/3}
.sk-ph{grid-column:2;grid-row:1/5;justify-self:center;width:46%;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 4px #3b9bfa}
.sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
.sk-row i{height:34px;border-radius:8px;background:#e9f1fb}
/* A: Projektstapel */
.r11a-st{position:relative;flex:1;min-height:0;margin:10px 40px 0 0}
.r11a-c{--p:var(--n);position:absolute;left:0;top:0;width:86%;height:86%;display:block;transform:translate(calc(var(--p) * 22px),calc(var(--p) * 20px)) scale(calc(1 - var(--p) * .04));transform-origin:top left;
  transition:transform .9s var(--ease,ease),opacity .6s;filter:drop-shadow(0 30px 40px rgba(0,10,40,.45))}
.r11a-c::after{content:"";position:absolute;inset:0;border-radius:16px;background:#012d5a;opacity:calc(var(--p) * .25);transition:opacity .9s;pointer-events:none}
.r11a-c em{position:absolute;left:16px;bottom:-14px;padding:7px 14px;border-radius:999px;background:#3b9bfa;color:#fff;font:600 13px/1 var(--b);font-style:normal;opacity:0;transition:opacity .5s}
.r11a-c.top em{opacity:1}
.r11a-c.out{transform:translate(-30px,40px) rotate(-6deg) scale(.96);opacity:0}
/* B: Unsere Bereiche */
.r11b-st{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
.r11b-k{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;border-radius:24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(159,208,255,.22);overflow:hidden}
.r11b-k img{width:auto;height:84%;max-width:92%;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,10,40,.45));animation:r11-fl 6s ease-in-out infinite alternate}
.r11b-k.k1 img{animation-delay:-1.5s}.r11b-k.k2 img{animation-delay:-3s}.r11b-k.k3 img{animation-delay:-4.5s}
.r11b-k em{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;background:#fff;color:#012d5a;font:600 13px/1 var(--b);font-style:normal}
.r11b-k em svg{width:16px;height:16px;color:#3b9bfa}
@keyframes r11-fl{from{transform:translateY(4px)}to{transform:translateY(-8px)}}
/* C: Vom Gespraech zum Ergebnis */
.r11c-st{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(18px,3vw,40px);flex:1;min-height:0}
.r11c-ring{position:relative;width:clamp(150px,15vw,210px);aspect-ratio:1;display:grid;place-items:center;text-align:center}
.r11c-ring svg{position:absolute;inset:0;width:100%;height:100%}
.r11c-ring circle{fill:none;stroke:rgba(159,208,255,.2);stroke-width:6}
.r11c-ring b{font:600 15px/1.3 var(--b);color:#fff}
.r11c-seg{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#3b9bfa;box-shadow:0 0 0 5px rgba(59,155,250,.25);
  transform:rotate(calc(var(--i) * 72deg - 90deg)) translateX(calc(clamp(150px,15vw,210px) * .433)) scale(.55);opacity:.3;transition:opacity .5s,transform .5s}
.r11c-seg.on{opacity:1;transform:rotate(calc(var(--i) * 72deg - 90deg)) translateX(calc(clamp(150px,15vw,210px) * .433)) scale(1)}
.r11c-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.r11c-l li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.07);color:#cfe3f7;font:500 13px/1.3 var(--b);opacity:.45;transform:translateX(0);transition:opacity .5s,transform .5s,background-color .5s}
.r11c-l li b{display:block;font:600 16px/1.2 var(--b);color:#fff}
.r11c-l li.on{opacity:1;transform:translateX(6px);background-color:rgba(59,155,250,.28)}
.r11c-i{flex:none;width:38px;height:38px;padding:9px;border-radius:12px;background:#fff;color:#012d5a}
/* D: Arbeitsplatte */
.r11d-st{position:relative;flex:1;min-height:0}
.r11d-mon{position:absolute;left:0;top:4%;width:72%;height:70%;padding:10px;border-radius:20px;background:#0b1626;box-shadow:0 40px 70px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.12)}
.r11d-mon .sk,.r11d-ph .sk{border-radius:12px}
.r11d-ph{position:absolute;right:16%;bottom:2%;width:20%;height:62%;padding:7px;border-radius:22px;background:#0b1626;box-shadow:0 30px 50px -20px rgba(0,0,0,.85);animation:r11-fl 6s ease-in-out infinite alternate}
.r11d-ph .sk-hero{grid-template-columns:1fr;padding:10px}.r11d-ph .sk-ph{display:none}.r11d-ph .sk-row{grid-template-columns:1fr}.r11d-ph .sk-row i:nth-child(n+2){display:none}.r11d-ph .sk-nav i:not(.lg){display:none}
.r11d-logo{position:absolute;right:0;top:0;width:24%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:22px;background:#fff;color:#012d5a;box-shadow:0 24px 40px -20px rgba(0,0,0,.7);transform:rotate(4deg);animation:r11-fl 7s ease-in-out infinite alternate-reverse}
.r11d-logo i{width:38%;aspect-ratio:1;border-radius:50%;border:5px solid #012d5a;box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 30px #3b9bfa}
.r11d-logo b{font:700 13px/1 var(--d);letter-spacing:.08em}
.r11d-logo small{font:500 11px/1 var(--b);color:#4a6788}
.r11d-pal{position:absolute;left:8%;bottom:4%;display:flex;gap:6px;padding:8px;border-radius:999px;background:#fff;box-shadow:0 16px 30px -14px rgba(0,0,0,.7)}
.r11d-pal i{width:24px;height:24px;border-radius:50%;background:#012d5a}.r11d-pal i:nth-child(2){background:#3b9bfa}.r11d-pal i:nth-child(3){background:#9fd0ff}.r11d-pal i:nth-child(4){background:#e9f1fb;box-shadow:inset 0 0 0 1px #bcd3ec}
.r11d-ok{position:absolute;right:0;top:44%;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;color:#012d5a;font:600 13px/1 var(--b);box-shadow:0 16px 30px -14px rgba(0,0,0,.7);animation:r11-ok 6s ease-in-out infinite}
.r11d-ok svg{width:18px;height:18px;color:#3b9bfa}
@keyframes r11-ok{0%,15%{opacity:0;transform:translateY(10px)}25%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.wi.paused .r11b-k img,.wi.paused .r11d-ph,.wi.paused .r11d-logo,.wi.paused .r11d-ok,.anim-off .r11b-k img,.anim-off .r11d-ph,.anim-off .r11d-logo,.anim-off .r11d-ok{animation-play-state:paused}
@media (max-width:980px){
  .wi-r11 .wi-g>:nth-child(2){height:auto;max-height:none}
  .r11a-st,.r11b-st,.r11d-st{flex:none}
  .r11a-st{height:300px;margin-right:60px}.r11b-st{height:340px}.r11d-st{height:320px}
  .r11c-st{grid-template-columns:minmax(0,1fr);justify-items:center}.r11c-l{width:100%}
}
@media (max-width:600px){.r11a-st{height:240px}.r11b-k em{font-size:12px}.sk-row i{height:22px}.r11d-logo b{font-size:10px}.r11d-ok{font-size:12px}}

/* ===== Hero Runde 12 (24.10.2026): Ueber uns + Blog, je 5 Varianten ===== */
.u12a,.u12b,.u12c,.u12d,.u12e,.b12a,.b12b,.b12c,.b12d,.b12e{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0;margin:0}
.wi-r12 figcaption{text-align:center;font:500 13px/1.4 var(--b);color:#9fc2e8}
.r12-logo{display:block;width:150px;height:auto}
/* U-A Visitenkarte (dreht per transform, Rueckseite per backface) */
.u12a-st{flex:1;min-height:0;display:grid;place-items:center;perspective:1400px}
.u12a-card{position:relative;width:min(100%,460px);aspect-ratio:1.7;transform-style:preserve-3d;animation:u12-flip 12s ease-in-out infinite}
.u12a-f,.u12a-b{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.u12a-f{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#fff}
.u12a-f small{font:600 12px/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:#4a6788}
.u12a-b{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:28px 32px;background:linear-gradient(135deg,#0a4a8a,#012d5a);color:#fff;transform:rotateY(180deg)}
.u12a-b b{font:700 clamp(22px,2.2vw,30px)/1.1 var(--d)}
.u12a-b>span{font:500 14px/1.3 var(--b);color:#9fc2e8}
.u12a-b ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px;font:500 14px/1.2 var(--b)}
.u12a-b li{display:flex;align-items:center;gap:8px}.u12a-b li svg{width:16px;height:16px;color:#3b9bfa}
.u12a-b em{position:absolute;right:22px;top:22px;padding:6px 12px;border-radius:999px;background:#3b9bfa;font:600 12px/1 var(--b);font-style:normal}
@keyframes u12-flip{0%,38%{transform:rotateY(-8deg)}50%,88%{transform:rotateY(172deg)}100%{transform:rotateY(352deg)}}
/* U-B Zeitstrahl */
.u12b-l{position:relative;list-style:none;margin:0;padding:0 0 0 46px;display:grid;gap:18px}
.u12b-ln{position:absolute;left:17px;top:10px;bottom:10px;width:3px;border-radius:2px;background:rgba(159,208,255,.25);overflow:hidden}
.u12b-ln i{position:absolute;left:-4px;top:0;width:11px;height:11px;border-radius:50%;background:#9fd0ff;box-shadow:0 0 14px #3b9bfa;animation:u12-run 6s ease-in-out infinite}
@keyframes u12-run{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1;transform:translateY(calc(var(--hv) - 150px))}100%{opacity:0;transform:translateY(calc(var(--hv) - 150px))}}
.u12b-l li{position:relative;display:grid;grid-template-columns:92px 1fr;align-items:center;gap:18px;padding:20px 22px;border-radius:22px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(159,208,255,.22);color:#cfe3f7;font:500 14px/1.4 var(--b);
  opacity:0;transform:translateX(14px);animation:u12-in .7s ease forwards;animation-delay:calc(var(--i) * .25s)}
.u12b-l li::before{content:"";position:absolute;left:-36px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:#3b9bfa;box-shadow:0 0 0 5px rgba(59,155,250,.25)}
.u12b-l li b{font:700 clamp(22px,2.2vw,30px)/1 var(--d);color:#fff}
.u12b-l li strong{display:block;margin-bottom:3px;font:600 16px/1.2 var(--b);color:#fff}
.u12b-l li:last-child{background:#fff;color:#4a6788}.u12b-l li:last-child b,.u12b-l li:last-child strong{color:#012d5a}
@keyframes u12-in{to{opacity:1;transform:none}}
/* U-C Arbeitsweise-Karten */
.u12c-st{position:relative;flex:1;min-height:0;margin:0 46px 24px 0}
.u12c-k{--p:var(--n);position:absolute;inset:0 0 auto 0;height:72%;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:30px;border-radius:26px;background:#fff;color:#4a6788;font:500 16px/1.45 var(--b);
  box-shadow:0 30px 50px -30px rgba(0,0,0,.8);transform:translate(calc(var(--p) * 16px),calc(var(--p) * 22px)) scale(calc(1 - var(--p) * .04));transform-origin:top left;transition:transform .9s var(--ease,ease),opacity .6s}
.u12c-k::after{content:"";position:absolute;inset:0;border-radius:26px;background:#012d5a;opacity:calc(var(--p) * .22);transition:opacity .9s;pointer-events:none}
.u12c-k b{font:700 clamp(22px,2.2vw,30px)/1.15 var(--d);color:#012d5a}
.u12c-i{width:52px;height:52px;padding:13px;margin-bottom:auto;border-radius:16px;background:#e6f1fd;color:#012d5a}
.u12c-k.out{transform:translate(-26px,30px) rotate(-5deg) scale(.96);opacity:0}
/* U-D Esslingen und weltweit */
.u12d-st{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.u12d-g{position:relative;width:min(78%,calc(var(--hv) - 70px));aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#0a4a8a,#012d5a 70%);box-shadow:inset -20px -30px 60px rgba(0,0,0,.4),0 40px 80px -40px rgba(0,0,0,.8)}
.u12d-dots{position:absolute;top:0;left:0;width:200%;height:100%;background:radial-gradient(circle,rgba(159,208,255,.55) 1.4px,transparent 1.8px) 0 0/14px 14px;animation:u12-spin 40s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 22% 30% at 20% 35%,#000 60%,transparent 62%),radial-gradient(ellipse 14% 22% at 30% 70%,#000 60%,transparent 62%),radial-gradient(ellipse 18% 16% at 55% 30%,#000 60%,transparent 62%),radial-gradient(ellipse 22% 26% at 75% 55%,#000 60%,transparent 62%),radial-gradient(ellipse 12% 12% at 90% 25%,#000 60%,transparent 62%);
  mask-image:radial-gradient(ellipse 22% 30% at 20% 35%,#000 60%,transparent 62%),radial-gradient(ellipse 14% 22% at 30% 70%,#000 60%,transparent 62%),radial-gradient(ellipse 18% 16% at 55% 30%,#000 60%,transparent 62%),radial-gradient(ellipse 22% 26% at 75% 55%,#000 60%,transparent 62%),radial-gradient(ellipse 12% 12% at 90% 25%,#000 60%,transparent 62%)}
.u12d-dots.d2{left:100%}
@keyframes u12-spin{to{transform:translateX(-50%)}}
.u12d-ring{position:absolute;width:min(78%,calc(var(--hv) - 70px));aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(159,208,255,.35);animation:u12-rot 30s linear infinite}
.u12d-ring.r2{width:min(96%,calc(var(--hv) + 10px));animation-duration:46s;animation-direction:reverse;border-style:dotted}
@keyframes u12-rot{to{transform:rotate(360deg)}}
.u12d-pin{position:absolute;left:44%;top:40%;display:flex;align-items:center;gap:8px}
.u12d-pin>svg{width:34px;height:34px;padding:7px;border-radius:50%;background:#fff;color:#012d5a;animation:u12-pu 2.4s ease-out infinite}
@keyframes u12-pu{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%,100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.u12d-pin b{display:flex;flex-direction:column;gap:3px;padding:8px 14px;border-radius:14px;background:#fff;color:#012d5a;font:600 14px/1.15 var(--b);white-space:nowrap}
.u12d-pin small{font:500 12px/1 var(--b);color:#4a6788}
.u12d-tag{position:absolute;display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(159,208,255,.3);color:#fff;font:600 13px/1 var(--b);animation:u12-fl 6s ease-in-out infinite alternate}
.u12d-tag svg{width:16px;height:16px;color:#9fd0ff}
.u12d-tag.t1{left:2%;top:14%}.u12d-tag.t2{right:2%;top:24%;animation-delay:-2s}.u12d-tag.t3{right:6%;bottom:12%;animation-delay:-4s}
@keyframes u12-fl{from{transform:translateY(5px)}to{transform:translateY(-7px)}}
/* U-E Ein Ansprechpartner, vier Bereiche */
.u12e-st{--ow:min(400px,calc(var(--hv) - 40px));position:relative;flex:1;min-height:0;display:grid;place-items:center}
.u12e-c{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 34px;border-radius:50%;aspect-ratio:1;justify-content:center;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.u12e-c small{font:600 12px/1 var(--b);letter-spacing:.08em;text-transform:uppercase;color:#4a6788}
.u12e-orbit{position:absolute;width:var(--ow);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(159,208,255,.35)}
.u12e-arm{position:absolute;inset:0;animation:u12-rot 36s linear infinite}
.u12e-n{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(calc(var(--i) * 90deg)) translateY(calc(var(--ow) * -.5))}
.u12e-n>span{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#3b9bfa;color:#fff;font:600 14px/1 var(--b);white-space:nowrap;transform:translate(-50%,-50%) rotate(calc(var(--i) * -90deg));animation:u12-counter 36s linear infinite}
.u12e-n>span svg{width:18px;height:18px}
@keyframes u12-counter{from{transform:translate(-50%,-50%) rotate(calc(var(--i) * -90deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--i) * -90deg - 360deg))}}
/* B-A Magazin-Stapel */
.b12a-st{position:relative;flex:1;min-height:0;margin:0 40px 30px 0}
.b12a-c{--p:var(--n);position:absolute;left:0;top:0;width:88%;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;color:#012d5a;text-decoration:none;box-shadow:0 30px 50px -30px rgba(0,0,0,.85);
  transform:translate(calc(var(--p) * 22px),calc(var(--p) * 26px)) scale(calc(1 - var(--p) * .04));transform-origin:top left;transition:transform .9s var(--ease,ease),opacity .6s}
.b12a-c::after{content:"";position:absolute;inset:0;background:#012d5a;opacity:calc(var(--p) * .25);transition:opacity .9s;pointer-events:none}
.b12a-c img{display:block;width:100%;height:auto;aspect-ratio:900/325}
.b12a-c>span{display:flex;flex-direction:column;gap:6px;padding:16px 20px 20px}
.b12a-c small{font:600 12px/1 var(--b);letter-spacing:.06em;text-transform:uppercase;color:#3b9bfa}
.b12a-c b{font:700 18px/1.3 var(--b)}
.b12a-c.out{transform:translate(-26px,40px) rotate(-5deg) scale(.96);opacity:0}
/* B-B Inhaltsverzeichnis */
.b12b-st{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:26px;background:#fff;box-shadow:0 40px 70px -40px rgba(0,0,0,.85)}
.b12b-h{display:flex;align-items:center;gap:10px;margin:0 0 4px;font:700 13px/1 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#3b9bfa}
.b12b-h svg{width:18px;height:18px}
.b12b-st ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.b12b-st a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:11px 14px;border-radius:16px;color:#012d5a;text-decoration:none;transition:background-color .5s,transform .5s}
.b12b-st li.on a,.b12b-st a:hover{background:#e6f1fd;transform:translateX(4px)}
.b12b-st em{font:700 20px/1 var(--d);font-style:normal;color:#9fb9d8}
.b12b-st li.on em{color:#3b9bfa}
.b12b-st b{display:block;font:600 15px/1.3 var(--b)}
.b12b-st small{font:500 12px/1.2 var(--b);color:#4a6788}
.b12b-st a>svg{width:18px;height:18px;opacity:.35}
/* B-C Themen-Kacheln */
.b12c-st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;flex:1;min-height:0}
.b12c-k{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(159,208,255,.22);color:#fff;text-decoration:none;transition:transform .4s,background-color .4s;animation:u12-fl 7s ease-in-out infinite alternate}
.b12c-k.k1{animation-delay:-2s}.b12c-k.k2{animation-delay:-4s}.b12c-k.k3{animation-delay:-6s}
.b12c-k:hover{background:rgba(59,155,250,.28)}
.b12c-k svg{width:40px;height:40px;padding:9px;margin-bottom:auto;border-radius:12px;background:#fff;color:#012d5a}
.b12c-k b{font:700 clamp(20px,1.9vw,26px)/1.1 var(--d)}
.b12c-k em{font:600 13px/1 var(--b);font-style:normal;color:#9fd0ff}
.b12c-k small{font:500 12.5px/1.35 var(--b);color:#cfe3f7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b12c-k.k0{background:#fff;color:#012d5a}.b12c-k.k0 em{color:#3b9bfa}.b12c-k.k0 small{color:#4a6788}.b12c-k.k0 svg{background:#e6f1fd}
/* B-D Fragen */
.b12d-st{display:flex;flex-direction:column;gap:12px}
.b12d-q{display:flex;flex-direction:column;gap:6px;max-width:88%;text-decoration:none;opacity:.35;transform:translateY(6px);transition:opacity .6s,transform .6s}
.b12d-q:nth-child(even){align-self:flex-end;align-items:flex-end}
.b12d-q.on{opacity:1;transform:none}
.b12d-b{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:20px 20px 20px 6px;background:#fff;color:#012d5a;font:600 15px/1.35 var(--b);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.b12d-q:nth-child(even) .b12d-b{border-radius:20px 20px 6px 20px;background:#3b9bfa;color:#fff}
.b12d-b svg{flex:none;width:20px;height:20px;margin-top:1px}
.b12d-a{display:flex;align-items:center;gap:6px;padding:0 8px;font:600 13px/1 var(--b);color:#9fd0ff}
.b12d-a svg{width:14px;height:14px}
/* B-E Laptop */
.b12e{align-items:center}
.b12e-lap{display:block;width:min(100%,calc((var(--hv) - 70px) * 1.5));text-decoration:none;filter:drop-shadow(0 30px 40px rgba(0,10,40,.55))}
.b12e-scr{display:block;aspect-ratio:16/10;padding:10px;border-radius:18px 18px 4px 4px;background:#0b1626;overflow:hidden}
.b12e-in{display:flex;flex-direction:column;gap:10px;height:180%;padding-bottom:16px;border-radius:8px;background:#fff;color:#012d5a;animation:b12-scroll 14s ease-in-out infinite alternate}
.b12e-bar{display:flex;gap:5px;padding:8px 10px;background:#e9f1fb}.b12e-bar i{width:8px;height:8px;border-radius:50%;background:#bcd3ec}
.b12e-in img{display:block;width:calc(100% - 28px);height:auto;margin:0 14px;border-radius:8px}
.b12e-in small{padding:0 14px;font:600 11px/1 var(--b);letter-spacing:.06em;text-transform:uppercase;color:#3b9bfa}
.b12e-in b{padding:0 14px;font:700 clamp(15px,1.4vw,20px)/1.25 var(--b)}
.b12e-p{display:grid;gap:8px;padding:4px 14px}.b12e-p i{height:7px;border-radius:4px;background:#e2ebf6}.b12e-p i:nth-child(3n){width:70%}
@keyframes b12-scroll{0%,15%{transform:translateY(0)}85%,100%{transform:translateY(-38%)}}
.b12e-base{display:block;height:14px;width:112%;margin-left:-6%;border-radius:0 0 16px 16px;background:linear-gradient(#c9d6e6,#8ea4bf)}
.wi.paused .wi-r12 *,.wi-r12.paused *,.anim-off .wi-r12 *{animation-play-state:paused!important}
@media (max-width:980px){
  .wi-r12 .wi-g>:nth-child(2){height:auto;max-height:none}
  .u12a-st,.u12c-st,.u12d-st,.u12e-st,.b12a-st,.b12c-st{flex:none}
  .u12a-st{height:260px}.u12c-st{height:300px}.u12d-st{height:320px}.u12e-st{height:320px}.b12a-st{height:300px}.b12c-st{height:auto}
  .u12d-g,.u12d-ring{width:240px}.u12d-ring.r2{width:290px}.u12e-st{--ow:230px}.u12e-c{padding:22px 24px}.u12e-c .r12-logo{width:110px}
  .u12b-ln i{animation:none;opacity:0}.b12e-lap{width:100%}
}
@media (max-width:600px){.u12a-b{padding:20px 22px}.u12a-b ul{font-size:12.5px}.u12d-pin b{font-size:12px}.u12d-tag{font-size:11px;padding:6px 10px}.u12e-n>span{font-size:12px;padding:8px 12px}.b12c-st{grid-template-columns:1fr}.b12d-q{max-width:100%}}

/* Kontakt-Hero Runde 13 (24.10.2026), schlanke Entwuerfe */
.k13a,.k13b,.k13c,.k13d,.k13e{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:0;min-height:0;position:relative}
.wi-k13 figcaption{font:500 13px/1.4 var(--b);color:#9fc2e8}
/* A: 3D-Umschlag, Brief faehrt heraus (nur transform/opacity) */
.k13a-st{position:relative;width:min(100%,calc((var(--hv) - 40px) * 1.05));aspect-ratio:900/888}
.k13a-glow{position:absolute;inset:10% 6% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(59,155,250,.45),transparent);animation:k13-gl 6s ease-in-out infinite alternate}
.k13a-env,.k13a-fr{position:absolute;left:0;top:0;width:100%;height:auto;z-index:1}
.k13a-fr{z-index:3}
.k13a-let{position:absolute;left:31%;top:30%;width:38%;height:auto;z-index:2;animation:k13-let 7s cubic-bezier(.45,0,.2,1) infinite}
.k13a-st{animation:k13-fl 7s ease-in-out infinite alternate}
@keyframes k13-let{0%,12%{transform:translateY(18%) rotate(0)}38%,80%{transform:translateY(-62%) rotate(-4deg)}100%{transform:translateY(18%) rotate(0)}}
@keyframes k13-fl{from{transform:translateY(4px)}to{transform:translateY(-8px)}}
@keyframes k13-gl{from{opacity:.6;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.k13a-tag{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;color:#012d5a;font:600 13px/1 var(--b);box-shadow:0 16px 30px -14px rgba(0,10,40,.7);animation:k13-tag 7s ease-in-out infinite}
.k13a-tag svg{width:18px;height:18px;color:#3b9bfa}
.k13a-tag.t1{left:-4%;top:46%}.k13a-tag.t2{right:-6%;top:64%;animation-delay:.4s}
@keyframes k13-tag{0%,30%{opacity:0;transform:translateY(8px)}42%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
.wi.paused .k13a-st,.wi.paused .k13a-st *,.anim-off .k13a-st,.anim-off .k13a-st *{animation-play-state:paused}
.k13b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%}
.k13b-k{display:flex;flex-direction:column;gap:6px;padding:26px 22px;border-radius:24px;background:#fff;color:#012d5a;text-decoration:none;box-shadow:0 30px 50px -30px rgba(0,0,0,.8);transition:transform .3s}
.k13b-k:hover{transform:translateY(-6px)}
.k13b-k svg{width:46px;height:46px;padding:11px;margin-bottom:28px;border-radius:14px;background:#e6f1fd}
.k13b-k small{font:600 12px/1 var(--b);letter-spacing:.08em;text-transform:uppercase;color:#3b9bfa}
.k13b-k b{font:700 16px/1.25 var(--b);word-break:break-word}
.k13c-ph{position:relative;width:220px;height:calc(var(--hv) - 60px);max-height:420px;border-radius:34px;padding:9px;background:#0b1626;box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.k13c-ph::before{content:"";position:absolute;inset:9px;border-radius:26px;background:linear-gradient(160deg,#3b9bfa,#012d5a)}
.k13c-t{position:absolute;left:0;right:0;top:16%;text-align:center;font:300 46px/1 var(--b);color:#fff}
.k13c-n{position:absolute;left:16px;right:16px;top:42%;display:flex;gap:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.92);color:#12345c;font:400 12px/1.35 var(--b);animation:k13-note 5s ease-in-out infinite}
.k13c-n i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#012d5a;color:#fff;font:700 14px/1 var(--b);font-style:normal}
.k13c-n b{display:block;color:#012d5a;font-weight:600}
@keyframes k13-note{0%,10%{opacity:0;transform:translateY(-14px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
.k13d-cal{width:min(100%,400px);padding:22px;border-radius:24px;background:#fff;color:#012d5a;box-shadow:0 40px 70px -40px rgba(0,0,0,.85)}
.k13d-cal p{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:700 16px/1 var(--b)}.k13d-cal p svg{width:20px;height:20px;color:#3b9bfa}
.k13d-cal p small{margin-left:auto;padding:4px 10px;border-radius:999px;background:#e6f1fd;font:600 11px/1 var(--b)}
.k13d-g{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.k13d-g i{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:#f2f6fb;font:500 13px/1 var(--b);font-style:normal}
.k13d-g i.on{background:#3b9bfa;color:#fff;animation:k13-pop 3s ease-in-out infinite}
@keyframes k13-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.k13d-ok{display:flex;align-items:center;gap:8px;margin-top:14px;font:600 13px/1.3 var(--b);color:#3b9bfa}.k13d-ok svg{width:18px;height:18px}
.k13e{width:100%;height:100%}
.k13e-path{width:100%;max-width:480px;height:auto}.k13e-path path{fill:none;stroke:rgba(159,208,255,.5);stroke-width:2.5;stroke-dasharray:6 8}
.k13e-pl{position:absolute;left:8%;bottom:16%;width:48px;height:48px;padding:11px;border-radius:50%;background:#fff;color:#012d5a;animation:k13-fly 5s ease-in-out infinite}
.k13e-pl svg{width:100%;height:100%}
@keyframes k13-fly{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(150px,-150px)}90%{opacity:1;transform:translate(300px,-200px)}100%{opacity:0;transform:translate(300px,-200px)}}
.k13e-box{position:absolute;right:4%;top:6%;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:16px;background:#3b9bfa;color:#fff;font:600 14px/1 var(--b)}.k13e-box svg{width:20px;height:20px}
@media (max-width:980px){.wi-k13 .wi-g>:nth-child(2){height:auto;max-height:none}.k13b{grid-template-columns:1fr}.k13b-k svg{margin-bottom:10px}.k13c-ph{height:380px}.k13e{height:260px}}
@media (max-width:980px){.k13a-st{width:min(100%,340px)}.k13a-tag{font-size:12px;padding:8px 11px}.k13a-tag.t1{left:0}.k13a-tag.t2{right:0}}

/* ===== Galerie-Hero (27.10.2026, hero_gal.py) ===== */
.wi.gh{position:relative;overflow:hidden;background:#020c22;color:#fff;min-height:clamp(720px,46vw,800px);display:flex;flex-direction:column;isolation:isolate}
.gh-st{position:absolute;top:64px;right:0;height:calc(100% - 64px);aspect-ratio:1672/941;container-type:size;z-index:0;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%),linear-gradient(180deg,transparent 0,#000 7%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 10%),linear-gradient(180deg,transparent 0,#000 7%);mask-composite:intersect}
.gh-st>img{position:absolute;inset:0;width:100%;height:100%}
.wi.gh::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#020c22 0,#020c22 18%,rgba(2,12,34,.6) 38%,transparent 55%),linear-gradient(0deg,rgba(2,12,34,.85),transparent 26%)}
.gh-tiles{position:absolute;inset:0;z-index:2}
.gh-cb{position:absolute;display:block;background:url(/assets/img/real/g_leistungen6.webp) no-repeat;background-size:100cqw 100cqh;-webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;container-type:inline-size;text-decoration:none;animation:gh-fl 6s ease-in-out infinite;
 transition:filter 1.2s ease,scale 1.4s cubic-bezier(.33,.8,.3,1)}
@keyframes gh-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2cqh)}}
.gh-cb.on{scale:1.12;filter:brightness(1.25) saturate(1.1);z-index:3}
.gh-nm{position:absolute;white-space:nowrap;text-align:center;color:rgba(234,244,255,.78);font:700 6.4cqw/1.1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
 text-shadow:0 0 1.6cqw rgba(59,155,250,.95),0 0 .3cqw rgba(159,208,255,.9);transition:color 1.2s}
.gh-nm em{display:block;height:0;overflow:hidden;opacity:0;font:600 5cqw/1.2 'DM Sans',sans-serif;letter-spacing:.04em;text-transform:none;color:#9fd0ff;transition:opacity 1.2s,height 1.2s,margin 1.2s}
.gh-cb.on .gh-nm{color:#fff}.gh-cb.on .gh-nm em{opacity:1;height:1.3em;margin-top:2.4cqw}
.gh-leds{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.gh-leds circle{fill:#eaf5ff;filter:drop-shadow(0 0 4px #3B9BFA) drop-shadow(0 0 12px #3B9BFA);transform-box:fill-box;transform-origin:center;opacity:.08;animation:gh-led 3.2s linear infinite}
@keyframes gh-led{0%{opacity:.08;transform:scale(.6)}4%{opacity:1;transform:scale(1.25)}16%{opacity:.35;transform:scale(.9)}30%,100%{opacity:.08;transform:scale(.6)}}
.gh-ped{position:absolute;left:48.7%;top:75.5%;width:42.8%;height:12.7%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,180,255,.55),transparent);mix-blend-mode:screen;animation:gh-pu 3.2s ease-in-out infinite;z-index:1}
@keyframes gh-pu{0%,100%{opacity:.25}50%{opacity:.9}}
.wi.gh>.hx-nav,.wi.gh>nav:first-child,.wi.gh>.hx-head{position:relative;z-index:5}
.wi.gh>.hx-head{padding-left:64px!important;padding-right:64px!important}
.gh-tx{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:624px;padding:32px 40px 24px 64px}
.gh-eb{color:#3B9BFA}.gh-h1{color:#fff}.gh-lead{font-size:18px;line-height:1.55;color:#c9d8ee;margin:0 0 30px;max-width:540px}
.gh-bar{position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 64px;padding:22px 0 28px;border-top:1px solid rgba(159,208,255,.16)}
.gh-bar a{display:flex;align-items:center;gap:12px;color:#dce8f7;text-decoration:none;font-size:14px;font-weight:600}.gh-bar a:hover{color:#fff}
.gh-bar svg{width:26px;height:26px;flex:none;fill:none;stroke:#3B9BFA;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Überschrift wie im freigegebenen Entwurf: DM Sans fett, normale Schreibung */
.wi.gh .gh-h1{font-family:'DM Sans',sans-serif!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.02em!important;line-height:1.08!important;margin:0 0 20px!important}
/* Webdesign: Mauszeiger klickt „Projekt anfragen“, Handy meldet die Anfrage (8 s Schleife) */
.gw-cur{position:absolute;z-index:3;left:70.6%;top:47.8%;width:1.5cqw;animation:gw-cur 8s ease-in-out infinite;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.6))}
.gw-cur svg{display:block;width:100%;fill:#fff;stroke:#012d5a;stroke-width:1.4;stroke-linejoin:round}
@keyframes gw-cur{0%,6%{opacity:0;left:70.6%;top:47.8%;scale:1}12%{opacity:1}38%{left:58.9%;top:57.4%;scale:1}42%{scale:.8}46%{scale:1}62%{opacity:1;left:58.9%;top:57.4%}72%,100%{opacity:0;left:60%;top:60%}}
.gw-rip{position:absolute;z-index:3;left:58.9%;top:57.4%;width:3cqw;aspect-ratio:1;margin:-1.5cqw 0 0 -1.5cqw;border-radius:50%;border:.25cqw solid #9fd0ff;opacity:0;animation:gw-rip 8s ease-out infinite}
@keyframes gw-rip{0%,41%{opacity:0;transform:scale(.3)}43%{opacity:1}56%,100%{opacity:0;transform:scale(1.6)}}
.gw-toast{position:absolute;z-index:3;left:88%;top:50.8%;width:5.4cqw;padding:.4cqw .45cqw;border-radius:.6cqw;background:rgba(255,255,255,.96);color:#012d5a;transform:translateY(-.6cqw) rotate(4deg);opacity:0;
 box-shadow:0 .4cqw 1cqw rgba(0,0,0,.4);animation:gw-toast 8s ease-in-out infinite;font:.52cqw/1.25 'DM Sans',sans-serif}
.gw-toast b{display:block;font-weight:700;font-size:.6cqw;white-space:nowrap}.gw-toast b::before{content:"";display:inline-block;width:.5cqw;height:.5cqw;margin-right:.3cqw;border-radius:50%;background:#1aa35a;vertical-align:middle}
.gw-toast span{color:#3f5a7e}
@keyframes gw-toast{0%,50%{opacity:0;transform:translateY(-.6cqw) rotate(4deg)}55%,88%{opacity:1;transform:translateY(0) rotate(4deg)}94%,100%{opacity:0;transform:translateY(0) rotate(4deg)}}
/* Webdesign: Entstehungs-Video über dem Foto, Ränder weich, damit keine Kante zum Foto sichtbar ist */
.gw-vid{position:absolute;z-index:2;height:auto;aspect-ratio:800/580;opacity:0;transition:opacity .4s;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.gw-vid.on{opacity:1}
/* SEO: echte Google-Optik auf dem Foto; JS setzt zoom (echte Anzeigegröße → scharf) und matrix3d auf die Ecken */
.gs-sc{position:absolute;inset:0;z-index:2;pointer-events:none}
.gs-scr{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.gs-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,12,40,.06),rgba(0,12,40,.06)),linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,10,40,.18));pointer-events:none}
.gs-in{position:relative;font-family:Roboto,Arial,sans-serif;color:#e3e3e3;background:#1f1f1f}
.gs-lap .gs-in{width:680px;height:420px;padding:0 22px;box-sizing:border-box}
.gs-top{display:flex;align-items:center;gap:18px;height:54px}
.gg{font:400 26px/1 'Product Sans',Arial,sans-serif;letter-spacing:-.5px;color:#e3e3e3}
.gs-sb{flex:1;display:flex;align-items:center;gap:12px;height:36px;padding:0 16px;border-radius:18px;background:#303134;border:1px solid #5f6368;font-size:15px;color:#e8eaed}
.gs-sb span{margin-left:auto;color:#e8eaed;font-size:18px;padding-right:6px;border-right:1px solid #5f6368}
.gs-sb svg{width:17px;height:17px;fill:none;stroke:#e8eaed;stroke-width:2}
.gs-av{width:26px;height:26px;border-radius:50%;background:#1a73e8;font:500 14px/26px Arial;text-align:center;font-style:normal;color:#fff}
.gs-tb{display:flex;gap:20px;font-size:13px;color:#bdc1c6;border-bottom:1px solid #3c4043}
.gs-tb span{padding:7px 0 9px}.gs-tb .on{color:#fff;font-weight:600;border-bottom:3px solid #fff;padding-bottom:6px}
.gs-loc{font-size:12px;color:#bdc1c6;margin:9px 0 4px}.gs-loc b{color:#e3e3e3}.gs-loc span{color:#99c3ff}
.gs-lt{font-size:19px;color:#e3e3e3;padding:4px 0 8px;border-bottom:1px solid #3c4043;margin-bottom:8px}.gs-lt i{font-style:normal;color:#9aa0a6;font-size:15px;margin-left:6px}
.gs-mp{display:block;width:100%;height:86px;border-radius:10px}
.gs-mp .lb{font:600 11px Arial;fill:#c8d2dc}.gs-mp .lb text:nth-child(2){font-size:13px;fill:#fff}
.gs-mp .pn rect{fill:#3c4043;stroke:#5f6368}.gs-mp .pn .pc{fill:#f28b82}.gs-mp .pn text{font:600 11px Arial;fill:#fff}
.gs-ls{position:relative;height:200px;margin-top:6px}
.gs-e{position:absolute;left:-8px;right:-8px;height:72px;padding:6px 8px;box-sizing:border-box;border-radius:10px;display:flex;align-items:center;gap:14px;
 border-bottom:1px solid #3c4043;transition:top .9s cubic-bezier(.4,0,.2,1),background .6s}
.gs-e img{flex:none;width:96px;height:58px;object-fit:cover;object-position:top;border-radius:8px}
.gs-e>div{flex:1}.gs-ls.nt .gs-e{transition:none}
.gs-e b{display:block;font-size:16px;font-weight:400;color:#e3e3e3;margin-bottom:3px}.gs-e span{display:block;font-size:12.5px;color:#bfbfbf;line-height:1.45}
.gs-e i{font-style:normal;color:#fbbc04;letter-spacing:-1px}.gs-e u{text-decoration:none;color:#81c995}
.gs-me.top{background:rgba(138,180,248,.13)}
.gs-ph .gs-in{width:200px;height:470px;color:#e3e3e3;background:#1f1f1f}
.gs-sbar{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 16px;font-size:11px;font-weight:600}
.gs-sbar i{position:absolute;left:50%;top:7px;width:58px;height:17px;margin-left:-29px;border-radius:9px;background:#000}
.gs-pp{padding:6px 14px}.gs-pp>span{display:block;font-size:11px;color:#9aa0a6}.gs-pp>b{display:block;font-size:16px;font-weight:600;margin:2px 0 8px;line-height:1.2}
.gs-pp em{display:inline-block;font-style:normal;font-size:11px;font-weight:600;color:#a8c7fa;background:#28354a;border-radius:12px;padding:4px 10px;margin-bottom:10px}
.gs-pp strong{display:block;font-size:36px;font-weight:600;letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums}
.gs-pp u{display:block;text-decoration:none;font-size:11px;font-weight:600;color:#81c995;margin-bottom:10px}
.gs-br{display:flex;align-items:flex-end;gap:8px;height:96px;border-bottom:1px solid #3c4043;padding:0 2px}
.gs-br i{flex:1;height:calc(var(--h) * var(--p,1));background:#8ab4f8;border-radius:4px 4px 0 0}
.gs-kv{margin-top:8px}.gs-kv div{display:flex;justify-content:space-between;font-size:12px;padding:7px 0;border-bottom:1px solid #303134}
.gs-kv b{font-weight:600;font-variant-numeric:tabular-nums}
.gs-ntf{position:absolute;left:8px;right:8px;top:30px;display:flex;gap:9px;align-items:center;padding:10px 11px;border-radius:16px;background:rgba(48,49,52,.97);color:#e8eaed;
 box-shadow:0 6px 20px rgba(0,0,0,.25);transform:translateY(-130%);opacity:0;transition:transform .6s cubic-bezier(.3,.9,.3,1),opacity .4s}
.gs-ntf.on{transform:none;opacity:1}
.gs-ntf>i{flex:none;width:28px;height:28px;border-radius:8px;background:#fff;font:700 17px/28px Arial;text-align:center;font-style:normal;color:#4285f4}
.gs-ntf b{display:block;font-size:13px;font-weight:600}.gs-ntf span{display:block;font-size:11px;color:#bdc1c6}
@media(max-width:900px){.wi.gh-seo .gh-st{width:200%;margin-left:-96%}.wi.gh-seo .gs-bsp{right:3%;bottom:4%;font-size:1.3cqw}}
.gs-bsp{position:absolute;right:1.4cqw;bottom:21%;font:500 .75cqw/1 'DM Sans',sans-serif;color:rgba(201,216,238,.55);letter-spacing:.04em}
/* IT-Service: LEDs im Serverschrank blinken (Lage im Foto erkannt), Glas-Statuskarte wie die Würfel bei Leistungen, hakt nacheinander ab (12 s, JS) */
.gi-sc{position:absolute;inset:0;z-index:2;pointer-events:none}
.gi-l{position:absolute;width:calc(.36cqw * var(--s));aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:.15;animation:gi-bl 2.6s steps(1) infinite}
.gi-g{background:#d8ffe4;box-shadow:0 0 .4cqw #3cff8a,0 0 .9cqw rgba(60,255,138,.6)}.gi-b{background:#eaf5ff;box-shadow:0 0 .5cqw #3B9BFA,0 0 1.1cqw rgba(59,155,250,.6)}
@keyframes gi-bl{0%{opacity:1}12%{opacity:.15}20%{opacity:1}48%{opacity:.2}60%,100%{opacity:1}}
.gi-t{position:absolute;display:flex;align-items:center;gap:.9cqw;width:23cqw;padding:.9cqw 1.1cqw;border-radius:1cqw;color:#eaf4ff;font:1cqw/1.25 'DM Sans',sans-serif;
 background:linear-gradient(150deg,rgba(70,130,220,.42),rgba(8,30,80,.55) 45%,rgba(40,110,220,.45));-webkit-backdrop-filter:blur(1cqw) saturate(1.4);backdrop-filter:blur(1cqw) saturate(1.4);
 border:1px solid rgba(159,208,255,.6);box-shadow:inset 0 0 1.2cqw rgba(59,155,250,.3),inset 0 1px 0 rgba(255,255,255,.35),0 0 1.8cqw rgba(59,155,250,.25),0 1cqw 2.6cqw rgba(0,6,24,.5);
 opacity:.75;translate:0 .4cqw;transition:opacity .6s,translate .6s,border-color .6s}
.gi-t.ok{opacity:1;translate:0 0}
.gi-t svg{flex:none;width:2.2cqw;height:2.2cqw;padding:.5cqw;border-radius:.6cqw;background:rgba(59,155,250,.18);border:1px solid rgba(159,208,255,.3);fill:none;stroke:#9fd0ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gi-t div{flex:1;min-width:0}.gi-t b{display:block;white-space:nowrap;font-size:1.2cqw;color:#fff;text-shadow:0 0 .8cqw rgba(59,155,250,.8)}.gi-t span{display:block;color:#cfe2f7;font-size:.95cqw;white-space:nowrap}
.gi-t em{flex:none;font-style:normal;font-size:.88cqw;font-weight:700;padding:.25cqw .55cqw;border-radius:2cqw;color:#c3d2e4;background:rgba(255,255,255,.12);transition:color .4s,background .4s}
.gi-t.ok em{color:#a6ffc9;background:rgba(26,200,100,.3);box-shadow:0 0 .6cqw rgba(60,255,138,.25)}
.gi-t em::before{content:"…";margin-right:.2cqw}.gi-t.ok em::before{content:"✓"}
.gi-bsp{bottom:21%}
@media(max-width:900px){.wi.gh-it .gh-st{width:170%;margin-left:-62%}}
/* Social Media: Instagram-Feed im Handy (JS legt den Bildschirm per matrix auf die Ecken), Glas-Kacheln rechts (Stil .gi-t) */
.gm-in{position:relative;width:390px;height:844px;background:#000;color:#f5f5f5;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;overflow:hidden}
.gm-sb{display:flex;justify-content:space-between;align-items:center;height:47px;padding:0 30px;font-size:15px;font-weight:600}
.gm-sb i{position:absolute;left:50%;top:11px;width:120px;height:34px;margin-left:-60px;border-radius:18px;background:#000}
.gm-fd{position:absolute;top:95px;left:0;right:0;height:693px;overflow:hidden}
.gm-tr{animation:gm-sc 16s cubic-bezier(.6,0,.3,1) infinite}
@keyframes gm-sc{0%,18.75%{transform:translateY(0)}25%,43.75%{transform:translateY(-693px)}50%,68.75%{transform:translateY(-1386px)}75%,93.75%{transform:translateY(-2079px)}100%{transform:translateY(-2772px)}}
.gm-po{position:relative;height:693px}
.gm-im{display:block;width:390px;height:693px}
.gm-tb{height:48px;display:flex;align-items:center;padding:0 16px;border:0}.gm-tb b{font-size:22px;font-weight:700}
.gm-ra{position:absolute;right:10px;bottom:120px;display:flex;flex-direction:column;gap:22px}
.gm-ra svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.gm-ra>svg:first-child{animation:gm-lk 16s infinite;animation-delay:calc(var(--i) * 4s - 16s);transform-origin:center}
@keyframes gm-lk{0%,7%{fill:none;stroke:#fff;transform:scale(1)}9%{fill:#ff3040;stroke:#ff3040;transform:scale(1.3)}11%,30%{fill:#ff3040;stroke:#ff3040;transform:scale(1)}31%,100%{fill:none;stroke:#fff}}
.gm-cp{position:absolute;left:0;right:0;bottom:0;padding:40px 60px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.gm-ph{display:flex;align-items:center;gap:9px}.gm-ph b{font-size:14px}
.gm-ph u{text-decoration:none;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.8);border-radius:8px;padding:3px 9px}
.gm-av{flex:none;width:30px;height:30px;border-radius:50%;background:#012d5a;display:grid;place-items:center;font-style:normal}.gm-av img{width:21px}
.gm-cp p{margin:7px 0 0;font-size:13px;line-height:1.35}
.gm-nv{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #262626;background:#000}
.gm-nv svg{width:26px;height:26px;fill:none;stroke:#f5f5f5;stroke-width:1.9;stroke-linejoin:round}
.gm-sc .gm-t{pointer-events:auto;text-decoration:none;width:14.5cqw;opacity:.85}
.gm-t.ok,.gm-t:hover{opacity:1;border-color:rgba(159,208,255,.9)}
.gm-t svg.gm-br{fill:#fff;stroke:none;padding:.4cqw;width:2.4cqw;height:2.4cqw}
.gm-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-sc .gs-bsp{bottom:5%}
@media(max-width:900px){.wi.gh-sm .gh-st{width:160%;margin-left:-50%}}
/* 30.10.: Überblend-Heros (Logo & Druck, Referenzen): Standbilder wechseln, Glas-Kachel nennt Beispiel/Projekt */
.gx{position:absolute;inset:0;z-index:1}.gx-i{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}.gx-i.on{opacity:1}
.gx-sc .gx-t{width:21cqw;opacity:0;translate:0 .6cqw;transition:opacity .8s,translate .8s;pointer-events:none;text-decoration:none}
.gx-sc .gx-t.on{opacity:1;translate:0 0;pointer-events:auto}
.gx-t .gx-eb{color:#9fd0ff;font-size:.78cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2cqw}
.gx-t b{font-size:1.45cqw!important}.gx-t span{white-space:normal!important}
.gx-t em{flex:none;align-self:flex-end;font-style:normal;font-size:.85cqw;font-weight:700;color:#cfe6ff;white-space:nowrap}
.gx-t:hover em{color:#fff}
.gx-t em::before{content:none!important}
.gx-d{position:absolute;display:flex;gap:.5cqw}.gx-d i{width:.55cqw;height:.55cqw;border-radius:50%;background:rgba(159,208,255,.35);transition:background .4s,width .4s}
.gx-d i.on{background:#9fd0ff;width:1.6cqw;border-radius:.3cqw}
/* Über uns: Projektboard auf dem Monitor (12 s), Spalten werden nacheinander erledigt */
.gu-in{position:relative;width:960px;height:540px;background:#f5f7fa;color:#0d1b2e;font-family:'DM Sans',sans-serif;padding:22px 26px;box-sizing:border-box}
.gu-top{display:flex;align-items:center;gap:22px;margin-bottom:18px}.gu-top>div:first-child span{display:block;font-size:16px;color:#5d6f86}
.gu-top>div:first-child b{display:block;font-size:30px;letter-spacing:-.01em}
.gu-pr{flex:1;height:14px;border-radius:7px;background:#e3e9f1;overflow:hidden}.gu-pr i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:#1f6fd1;border-radius:7px;transition:width .8s}
.gu-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#012d5a;color:#fff;font-size:22px;font-weight:700;text-decoration:none}
.gu-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gu-c{background:#e9eef5;border-radius:14px;padding:12px;min-height:392px;transition:background .6s,box-shadow .6s}
.gu-c.cur{background:#dcebfd;box-shadow:inset 0 0 0 3px #1f6fd1}
.gu-ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.gu-ch b{font-size:24px}.gu-ch i{font-style:normal;font-size:18px;color:#5d6f86;background:#fff;border-radius:12px;padding:2px 12px}
.gu-k{background:#fff;border-radius:12px;padding:13px;margin-bottom:12px;box-shadow:0 2px 6px rgba(13,27,46,.08)}
.gu-k span{display:block;font-size:21px;font-weight:600;line-height:1.25;margin-bottom:12px}
.gu-k em{display:flex;justify-content:space-between;align-items:center;font-style:normal}
.gu-k u{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#012d5a;color:#fff;font-size:15px;font-weight:700;text-decoration:none}
.gu-k s{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eef2f7;color:transparent;text-decoration:none;font-size:22px;font-weight:700;transition:background .4s,color .4s}
.gu-k.ok s{background:#1aa35a;color:#fff}
.gu-sc .gu-t{width:18.5cqw}
/* Blog: Ratgeber-Ansicht auf dem Laptop, aktiver Beitrag wechselt (JS), Kachel verlinkt ihn */
.gb-in{position:relative;width:960px;height:580px;background:#f5f7fa;color:#0d1b2e;font-family:'DM Sans',sans-serif;overflow:hidden}
.gb-top{display:flex;align-items:center;gap:22px;height:58px;padding:0 26px;background:#012d5a;color:#cfe0f5;font-size:17px}.gb-top b{color:#fff;font-size:22px;margin-right:12px}
.gb-body{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;padding:20px 24px}
.gb-big{position:relative;height:480px}
.gb-a{position:absolute;inset:0;opacity:0;transition:opacity .8s}.gb-a.on{opacity:1}
.gb-a img{display:block;width:100%;height:220px;object-fit:cover;border-radius:12px}
.gb-a em,.gb-li em{display:block;font-style:normal;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1f6fd1;margin:14px 0 6px}
.gb-a b{display:block;font-size:28px;line-height:1.2;letter-spacing:-.01em}.gb-a p{font-size:17px;line-height:1.5;color:#3f5a7e;margin:10px 0 0}
.gb-ls u{display:block;text-decoration:none;font-size:15px;font-weight:700;color:#5d6f86;margin-bottom:10px}
.gb-li{display:flex;gap:12px;padding:10px;border-radius:12px;margin-bottom:8px;transition:background .5s,box-shadow .5s}
.gb-li.on{background:#fff;box-shadow:0 2px 10px rgba(13,27,46,.1),inset 3px 0 0 #1f6fd1}
.gb-li img{flex:none;width:96px;height:72px;object-fit:cover;border-radius:8px}.gb-li em{margin:0 0 3px;font-size:12px}
.gb-li b{display:block;font-size:16px;line-height:1.25}.gb-li span{display:block;font-size:13px;color:#5d6f86;margin-top:3px}
.gb-sc .gb-t{width:25cqw;opacity:0;translate:0 .6cqw;transition:opacity .8s,translate .8s;pointer-events:none;text-decoration:none}
.gb-sc .gb-t.on{opacity:1;translate:0 0;pointer-events:auto}
.gb-sc .gb-t b{white-space:normal!important;font-size:1.25cqw!important;line-height:1.25}
/* Kontakt: Formular wird getippt und gesendet, Handy meldet die Anfrage (14 s) */
.gk-in{position:relative;width:780px;height:487px;overflow:hidden;background:#f5f7fa;color:#0d1b2e;font-family:'DM Sans',sans-serif}
.gk-top{display:flex;align-items:baseline;gap:18px;height:52px;padding:0 24px;background:#012d5a;color:#cfe0f5;font-size:16px}.gk-top b{color:#fff;font-size:22px;line-height:52px}
.gk-f{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:14px 24px}
.gk-f label{display:block;font-size:16px;font-weight:700;color:#3f5a7e}.gk-w{grid-column:1/-1}
.gk-f label>span{display:block;margin-top:6px;min-height:42px;padding:9px 12px;box-sizing:border-box;border:2px solid #d5dde8;border-radius:10px;background:#fff;font-size:19px;font-weight:500;color:#0d1b2e;transition:border-color .3s}
.gk-f label>span.typ{border-color:#1f6fd1}.gk-f label>span.typ::after{content:"";display:inline-block;width:2px;height:20px;margin-left:2px;background:#1f6fd1;vertical-align:-3px;animation:gk-c 1s steps(1) infinite}
@keyframes gk-c{50%{opacity:0}}
.gk-f .gk-ta{min-height:80px;line-height:1.35}
.gk-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.gk-ch i{font-style:normal;font-size:15px;font-weight:600;padding:5px 11px;border-radius:20px;border:2px solid #d5dde8;background:#fff;color:#3f5a7e;transition:all .3s}
.gk-ch i.gk-on.sel{background:#012d5a;border-color:#012d5a;color:#fff}
.gk-bt{display:flex;align-items:center;gap:18px}.gk-bt u{text-decoration:none;font-size:18px;font-weight:700;color:#fff;background:#1f6fd1;border-radius:24px;padding:12px 26px;transition:transform .2s,background .3s}
.gk-bt u.pr{transform:scale(.94);background:#0d4fa8}.gk-bt em{font-style:normal;font-size:18px;font-weight:700;color:#137a43;opacity:0;transition:opacity .4s}.gk-bt em.on{opacity:1}
.gk-pin{position:relative;width:300px;height:650px;background:linear-gradient(160deg,#1a3a66,#06142b);color:#fff;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;overflow:hidden}
.gk-sb{display:flex;justify-content:space-between;height:40px;padding:12px 26px 0;font-size:13px;font-weight:600;box-sizing:border-box}.gk-sb i{position:absolute;left:50%;top:9px;width:90px;height:26px;margin-left:-45px;border-radius:13px;background:#000}
.gk-clk{text-align:center;margin-top:46px}.gk-clk b{display:block;font-size:66px;font-weight:600;letter-spacing:-1px}.gk-clk span{font-size:16px;opacity:.85}
.gk-n{position:absolute;left:12px;right:12px;top:250px;display:flex;gap:10px;align-items:center;padding:12px;border-radius:18px;background:rgba(255,255,255,.92);color:#0d1b2e;
 transform:translateY(-40px);opacity:0;transition:transform .6s cubic-bezier(.3,.9,.3,1),opacity .4s}
.gk-n.on{transform:none;opacity:1}.gk-n>i{flex:none;width:36px;height:36px;border-radius:9px;background:#1f6fd1;color:#fff;font-style:normal;font-size:19px;display:grid;place-items:center}
.gk-n b{display:block;font-size:15px}.gk-n span{display:block;font-size:13px;color:#3f5a7e}
.gk-sc .gu-t{width:18.5cqw;text-decoration:none}.gk-sc a.gu-t{pointer-events:auto}
@media(max-width:900px){.wi.gh-xf .gh-st,.wi.gh-ub .gh-st,.wi.gh-bl .gh-st,.wi.gh-ko .gh-st{width:190%;margin-left:-88%}}
/* Kontakt 02.11.: größere Schrift (Grundfläche 640×400), Datenschutz-Haken, Handy 220×476 ohne eigene Kamera-Aussparung */
.gk-in{width:640px;height:400px}.gk-top{height:44px;padding:0 18px}.gk-top b{font-size:20px;line-height:44px}
.gk-f{gap:6px 14px;padding:10px 18px}.gk-f label{font-size:14px}.gk-f label>span{margin-top:4px;min-height:34px;padding:6px 10px;font-size:16px}
.gk-f .gk-ta{min-height:54px;line-height:1.3}.gk-ch{gap:6px;margin-top:5px}.gk-ch i{font-size:13px;padding:3px 9px}
.gk-cs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#3f5a7e}.gk-cs u{color:#1f6fd1}
.gk-cs i{flex:none;display:grid;place-items:center;width:18px;height:18px;border:2px solid #b9c6d6;border-radius:5px;background:#fff;color:transparent;font-style:normal;font-size:12px;font-weight:700;transition:all .25s}
.gk-cs.on i{background:#1f6fd1;border-color:#1f6fd1;color:#fff}
.gk-bt u{font-size:15px;padding:8px 20px}.gk-bt em{font-size:15px}
.gk-pin{width:220px;height:476px;background:linear-gradient(165deg,#4a8fe0,#123a75 70%)}
.gk-clk{margin-top:62px}.gk-clk b{font-size:56px}.gk-clk span{font-size:15px}
.gk-n{left:8px;right:8px;top:190px;padding:11px;gap:9px;border-radius:16px;background:#fff}.gk-n>i{width:32px;height:32px;font-size:17px}.gk-n b{font-size:15px}.gk-n span{font-size:12px}   /* Handy: rechter Bildteil (Motiv) groß */
html.anim-off .wi.gh *{animation-play-state:paused!important}
@media(max-width:900px){.wi.gh{min-height:0}.gh-tx{padding:24px 20px;justify-content:flex-start}.gh-bar{grid-template-columns:1fr 1fr;margin:0 20px}
 .gh-st{position:relative;height:auto;width:100%;order:3;margin:0 0 8px}.wi.gh::after{background:linear-gradient(180deg,#020c22 0,transparent 30%)}}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/fraunces-700-italic.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-600-normal.woff2) format('woff2')}

/* ===== Glas-Heros (02.11.2026, hero_glass.py) ===== */
.t-st{background:radial-gradient(60% 70% at 62% 48%,rgba(59,155,250,.22),transparent 70%),radial-gradient(30% 40% at 85% 20%,rgba(159,208,255,.12),transparent 70%)}
.t-st::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(159,208,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,208,255,.07) 1px,transparent 1px);
 background-size:4cqw 4cqw;-webkit-mask-image:radial-gradient(55% 60% at 60% 50%,#000,transparent);mask-image:radial-gradient(55% 60% at 60% 50%,#000,transparent)}
.t-in{position:absolute;left:0;top:0;width:1672px;height:941px}
.t-g{position:absolute;border-radius:22px;color:#eaf4ff;font-family:'DM Sans',sans-serif;
 background:linear-gradient(150deg,rgba(70,130,220,.38),rgba(8,30,80,.6) 45%,rgba(40,110,220,.4));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
 border:1px solid rgba(159,208,255,.55);box-shadow:inset 0 0 22px rgba(59,155,250,.25),inset 0 1px 0 rgba(255,255,255,.35),0 0 34px rgba(59,155,250,.22),0 22px 50px rgba(0,6,24,.55)}
.t-fl{animation:t-fl 7s ease-in-out infinite}.t-fl2{animation:t-fl 8s ease-in-out -3s infinite}
@keyframes t-fl{0%,100%{translate:0 0}50%{translate:0 -10px}}
.t-eb{display:block;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fd0ff}
.t-bsp{position:absolute;right:30px;bottom:200px;font:500 13px/1 'DM Sans',sans-serif;color:rgba(201,216,238,.55);letter-spacing:.04em}
@media(max-width:900px){.wi.gh .t-st{width:180%;margin-left:-80%}}
/* Blog: Themenbereiche + Checkliste */
.bl-c{display:flex;align-items:center;gap:16px;width:330px;padding:20px 22px}
.bl-c svg{flex:none;width:46px;height:46px;padding:11px;border-radius:12px;background:rgba(59,155,250,.18);border:1px solid rgba(159,208,255,.3);fill:none;stroke:#9fd0ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bl-c b{display:block;font-size:21px;color:#fff}.bl-c span{display:block;font-size:15px;color:#cfe2f7;margin-top:3px}
.bl-k{left:1010px;top:250px;width:430px;padding:26px 28px;z-index:2}
.bl-k>b{display:block;font-size:24px;color:#fff;margin:8px 0 14px;line-height:1.2}
.bl-k p{display:flex;gap:12px;align-items:center;margin:0;padding:10px 0;border-top:1px solid rgba(159,208,255,.18);font-size:17px}
.bl-k p i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:2px solid rgba(159,208,255,.5);font-style:normal;font-size:14px;font-weight:700;color:transparent;
 animation:bl-ck 10s infinite;animation-delay:calc(var(--i) * .9s)}
@keyframes bl-ck{0%,8%{background:none;color:transparent;border-color:rgba(159,208,255,.5)}12%,85%{background:#1aa35a;border-color:#1aa35a;color:#fff}95%,100%{background:none;color:transparent}}
.bl-k u{display:block;text-decoration:none;font-size:14px;color:#9fd0ff;margin-top:12px}
/* SEO: Google-Suche mit Kartenbereich in echter (heller) Google-Optik */
.se-m{position:absolute;left:770px;top:96px;width:720px;padding:0 0 10px;border-radius:18px;overflow:hidden;background:#fff;color:#202124;font-family:Roboto,Arial,sans-serif;
 box-shadow:0 30px 70px rgba(0,6,24,.6),0 0 40px rgba(59,155,250,.25);transform:perspective(1800px) rotateY(-12deg) rotateX(4deg);transform-origin:left center}
.se-top{display:flex;align-items:center;gap:18px;padding:16px 20px 10px}
.se-gl{font:500 30px/1 'Product Sans',Arial,sans-serif;letter-spacing:-1px}.se-gl i{font-style:normal}
.se-q{flex:1;display:flex;align-items:center;gap:12px;height:44px;padding:0 18px;border-radius:22px;border:1px solid #dfe1e5;box-shadow:0 1px 6px rgba(32,33,36,.18);font-size:17px}
.se-q svg{width:20px;height:20px;fill:none;stroke:#4285f4;stroke-width:2.2;margin-left:auto}
.se-tb{display:flex;gap:22px;padding:0 20px 8px 20px;border-bottom:1px solid #ebebeb;font-size:14px;color:#5f6368}.se-tb b{color:#1a0dab;font-weight:500;border-bottom:3px solid #1a73e8;padding-bottom:6px}
.se-map{display:block;width:100%;height:110px}
.se-pin{animation:se-p 2.4s ease-in-out infinite}@keyframes se-p{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.se-ls{position:relative;height:276px;margin:6px 12px 0}
.se-e{position:absolute;left:0;right:0;height:88px;display:flex;align-items:center;gap:14px;padding:0 12px;border-radius:12px;border-bottom:1px solid #ebebeb;transition:top .9s cubic-bezier(.4,0,.2,1),background .6s}
.se-e b{display:block;font-size:22px;font-weight:400;color:#1a0dab}.se-e span{display:block;font-size:15.5px;color:#4d5156;line-height:1.5}.se-e em{font-style:normal;color:#fbbc04;letter-spacing:-1px}
.se-e u{text-decoration:none;color:#188038}.se-e>div{flex:1}
.se-e s{flex:none;text-decoration:none;font-size:13px;font-weight:500;color:#1a73e8;border:1px solid #dadce0;border-radius:18px;padding:7px 14px}
.se-e.me{background:#e8f0fe}
.se-b{position:absolute;z-index:3;left:440px;top:500px;width:270px;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:#fff;color:#202124;font-family:Roboto,Arial,sans-serif;
 box-shadow:0 18px 40px rgba(0,6,24,.5);opacity:0;transform:translateY(-14px);transition:opacity .6s,transform .6s}.se-b.on{opacity:1;transform:none}
.se-b>i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);font:700 22px Arial;font-style:normal;color:#4285f4}
.se-b b{display:block;font-size:16px;font-weight:500}.se-b span{display:block;font-size:13px;color:#5f6368}
.se-r{left:600px;top:620px;width:200px;padding:18px 20px}.se-n{display:block;font:700 64px/1 'DM Sans',sans-serif;color:#fff}
/* Referenzen: Browserfenster-Stapel aus der Projektliste */
.rf-stk{position:absolute;left:800px;top:150px;width:760px;height:500px}
.rf-w{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;background:#0d1b2e;border:1px solid rgba(159,208,255,.4);
 box-shadow:0 30px 70px rgba(0,6,24,.6),0 0 40px rgba(59,155,250,.18);transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity 1.1s,filter 1.1s;
 transform:translate(90px,-60px) scale(.84);opacity:0;z-index:1}
.rf-w.on{transform:none;opacity:1;filter:none;z-index:3}
.rf-w.nx{transform:translate(45px,-30px) scale(.92);opacity:1;filter:brightness(.45);z-index:2}
.rf-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;background:#1b2a40}.rf-bar i{width:11px;height:11px;border-radius:50%;background:#3c5170}
.rf-bar span{margin-left:14px;flex:1;max-width:340px;height:24px;border-radius:12px;background:#0f1d30;color:#9fb6d3;font:500 13px/24px 'DM Sans',sans-serif;padding:0 14px}
.rf-w img{display:block;width:100%;height:calc(100% - 38px);object-fit:cover;object-position:top}
/* Logo & Druck: drei Beispielmarken auf den Druckflächen */
.lg-st{background:none}.lg-st::before{content:none}
.lg-m{position:absolute;inset:0;-webkit-mask:url(/assets/img/real/g_logo_mask.png) 0 0/100% 100%;mask:url(/assets/img/real/g_logo_mask.png) 0 0/100% 100%}
.lg-b{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}.lg-b.on{opacity:1}
.lg-s{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;mix-blend-mode:multiply}
.lg-tl{position:absolute;left:26%;top:34%;width:20cqw;height:9cqw;z-index:3}
.lg-t{left:0;top:0;width:100%!important;opacity:0!important;transition:opacity .8s!important}.lg-t.on{opacity:1!important}
.lg-t b{font-size:1.5cqw!important}.lg-t span{white-space:normal!important}.lg-t .t-eb{font-size:.8cqw}
.lg-d{position:absolute;left:26%;top:31%;display:flex;gap:.5cqw;z-index:3}.lg-d i{width:.55cqw;height:.55cqw;border-radius:50%;background:rgba(159,208,255,.35);transition:all .4s}
.lg-d i.on{background:#9fd0ff;width:1.6cqw;border-radius:.3cqw}
html.anim-off .t-st *{animation-play-state:paused!important}
@font-face{font-family:Caveat;src:url(/assets/fonts/caveat.woff2) format('woff2');font-display:swap}
.q-st{background:none}.q-st::before{content:none}
.q-m{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.q-s{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;font-family:'DM Sans',sans-serif}.q-p{mix-blend-mode:multiply}
.cy{position:absolute;inset:0}.cy>*{position:absolute;inset:0;opacity:0;transition:opacity 1.1s}.cy>.on{opacity:1}
.nb{display:grid;grid-template-columns:1fr 1fr;height:100%;font-family:Caveat,cursive;color:#1b3558}
.nb>div{padding:80px 70px}.nb h3{font-size:92px;margin:0;line-height:1}.nb small{display:block;font-size:46px;color:#5b7397;margin:4px 0 30px}
.nb-l p{display:flex;align-items:center;gap:22px;font-size:50px;margin:0 0 26px;line-height:1.05}
.nb-l i{flex:none;width:44px;height:44px;border:4px solid #1b3558;border-radius:6px;position:relative}
.nb-l i::after{content:"";position:absolute;left:8px;top:-6px;width:16px;height:32px;border:solid #1f6fd1;border-width:0 7px 7px 0;transform:rotate(40deg);opacity:0;animation:ck 10s infinite;animation-delay:calc(var(--i) * .9s)}
@keyframes ck{0%,8%{opacity:0}12%,85%{opacity:1}95%,100%{opacity:0}}
.nb-r p{font-size:48px;line-height:1.15;margin:30px 0}
.nb-b{margin-bottom:44px}.nb-b h3{font-size:86px;margin:0 0 16px;color:#1f6fd1}
.nb-l p{font-size:62px;margin:0 0 20px}.nb-l i{width:50px;height:50px}
.nb-sk{margin-top:30px}
.nb-sk{display:flex;align-items:center;gap:30px}.nb-sk span{font-size:44px;color:#1f6fd1}
.nb .ph{width:150px;height:260px;border:5px solid #1b3558;border-radius:22px;padding:18px 14px;box-sizing:border-box}.nb .ph b{display:block;height:16px;background:#1b3558;border-radius:4px;margin-bottom:18px}
.nb .ph i{display:block;height:9px;background:#9fb3cc;border-radius:4px;margin-bottom:12px}.nb .ph u{display:block;height:34px;border:4px solid #1f6fd1;border-radius:18px;margin-top:30px}
.nb-c{height:100%;background:#eaf3ff;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:12px;padding:40px 50px;font-family:Caveat,cursive;font-size:56px;color:#1b3558}
.nb-c span{display:flex;align-items:center;gap:14px}

.gu-in{width:760px;height:427px;padding:16px 18px}.gu-top{gap:16px;margin-bottom:12px}.gu-top>div:first-child span{font-size:14px}.gu-top>div:first-child b{font-size:26px}
.gu-av{width:38px;height:38px;font-size:17px}.gu-cols{gap:10px}.gu-c{min-height:320px;padding:10px;border-radius:12px}.gu-ch{margin-bottom:8px}.gu-ch b{font-size:20px}.gu-ch i{font-size:15px}
.gu-k{padding:10px;margin-bottom:8px}.gu-k span{font-size:17px;margin-bottom:8px}.gu-k u,.gu-k s{width:30px;height:30px;font-size:13px}.gu-k s{font-size:18px}
.gm-sc .gm-t{width:17.5cqw}.gm-t b{font-size:1.45cqw!important}.gm-t span{font-size:1.1cqw!important}.gm-t svg.gm-br{width:2.9cqw;height:2.9cqw}

.wi.gh>.gh-st.gh-dyn{right:auto;aspect-ratio:auto}
.wi.gh>.gh-st.gh-rf{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 92%,transparent),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent);
 mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 92%,transparent),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent)}

@media(min-width:901px){html:is(.js,.rm) .wi.gh>.gh-st:not(.gh-ok),html:is(.js,.rm) .wi.gh>.gt-sc:not(.gh-ok){visibility:hidden;animation:gh-show 0s 2.5s forwards}
 .wi.gh>.gh-st.gh-ok,.wi.gh>.gt-sc.gh-ok{animation:gh-in .35s ease-out both}}
@keyframes gh-show{to{visibility:visible}}@keyframes gh-in{from{opacity:0}to{opacity:1}}

.wi.gh>.gh-st.gh-dyn{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 6%,#000 16%),linear-gradient(180deg,transparent 0,#000 8%);
 mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 6%,#000 16%),linear-gradient(180deg,transparent 0,#000 8%)}
.wi.gh>.gh-st.gh-rf{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 6%,#000 16%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent);
 mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 6%,#000 16%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent)}
.t-bg{position:absolute;inset:0;width:100%;height:100%}
.t-pool,.gp-pool{position:absolute;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(110,180,255,.6),rgba(59,155,250,.18) 60%,transparent);mix-blend-mode:screen;animation:gh-pu 3.2s ease-in-out infinite;pointer-events:none}
.gp-pool{height:7%}
/* Leucht-Glas wie die Leistungen-Würfel: heller Rand, Leuchten nach innen und außen, Lichtkante oben links, schwebt leicht */
.gi-t,.t-g{border:1px solid rgba(178,220,255,.9);
 background:linear-gradient(150deg,rgba(80,145,235,.42),rgba(8,30,80,.58) 45%,rgba(40,115,230,.46));
 box-shadow:inset 0 0 1.4cqw rgba(59,155,250,.45),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(159,208,255,.35),
  0 0 0 1px rgba(59,155,250,.3),0 0 1.2cqw rgba(59,155,250,.6),0 0 3.6cqw rgba(59,155,250,.3),0 1cqw 2.6cqw rgba(0,6,24,.5)}
.t-g{box-shadow:inset 0 0 22px rgba(59,155,250,.45),inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(59,155,250,.3),0 0 20px rgba(59,155,250,.6),0 0 60px rgba(59,155,250,.3),0 22px 50px rgba(0,6,24,.55)}
.gi-t::before,.t-g::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(118deg,rgba(255,255,255,.22),rgba(255,255,255,0) 34%),linear-gradient(118deg,transparent 40%,rgba(190,225,255,.16) 50%,transparent 60%) no-repeat;
 background-size:100% 100%,250% 100%;animation:gl-sw 7s ease-in-out infinite}
@keyframes gl-sw{0%,55%{background-position:0 0,140% 0}100%{background-position:0 0,-40% 0}}
.gi-t{animation:gl-fl 6s ease-in-out infinite}.gi-t:nth-child(2n){animation-delay:-2.5s}
@keyframes gl-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5cqw)}}
.gs-sc a.gi-t{pointer-events:auto;text-decoration:none}
/* Fenster (Google, Browser) mit Leuchtrahmen */
.se-m{box-shadow:0 0 0 1px rgba(178,220,255,.95),0 0 0 6px rgba(59,155,250,.16),0 0 26px rgba(59,155,250,.7),0 0 90px rgba(59,155,250,.32),0 30px 70px rgba(0,6,24,.6)}
.rf-w{border-color:rgba(178,220,255,.9);box-shadow:0 0 0 6px rgba(59,155,250,.14),0 0 26px rgba(59,155,250,.6),0 0 90px rgba(59,155,250,.28),0 30px 70px rgba(0,6,24,.6)}
.se-b{background:linear-gradient(150deg,rgba(80,145,235,.5),rgba(8,30,80,.7) 50%,rgba(40,115,230,.5));color:#fff;border:1px solid rgba(178,220,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 box-shadow:inset 0 0 20px rgba(59,155,250,.45),0 0 20px rgba(59,155,250,.6),0 18px 40px rgba(0,6,24,.5)}.se-b span{color:#cfe2f7}
/* Social Media: freistehendes Handy */
.gp-fl{position:absolute;inset:0;animation:gl-fl 7s ease-in-out infinite}
.gp-dev{position:absolute;border-radius:3.1cqw;background:#05070b;
 box-shadow:inset 0 0 0 .1cqw #3a4659,0 0 0 .14cqw #6f7f96,0 0 0 .26cqw #141b26,0 0 0 .32cqw rgba(178,220,255,.5),0 0 1.6cqw rgba(59,155,250,.65),0 0 5cqw rgba(59,155,250,.3),0 2cqw 4cqw rgba(0,6,24,.6)}
.gp-dev::before,.gp-dev::after{content:"";position:absolute;right:-.36cqw;width:.22cqw;border-radius:.1cqw;background:#4b5a70}
.gp-dev::before{top:18%;height:9%}.gp-dev::after{top:30%;height:5%}
.gp-gl{position:absolute;border-radius:2.1cqw;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,0) 32%)}
.gm-scr{z-index:1}
@media(max-width:900px){.wi.gh-sm .gh-st{width:150%;margin-left:-44%}}
/* Kontakt: Mitteilung als Glas-Kachel, Foto-Handy leuchtet dabei auf */
.gw-t{width:19cqw}.gu-sc .gu-t{width:17cqw}.rf-tl a{text-decoration:none}.rf-tl .gi-t{pointer-events:none}.rf-tl .gi-t.on{pointer-events:auto}
.gk-nt{width:19cqw;opacity:0!important;translate:0 1cqw!important;transition:opacity .6s,translate .6s cubic-bezier(.3,.9,.3,1)}
.gk-nt.on{opacity:1!important;translate:0 0!important}
.gk-nt em{color:#a6ffc9!important;background:rgba(26,200,100,.3)!important}.gk-nt em::before{content:none!important}
.gk-pg{position:absolute;left:81.5%;top:41%;width:9%;height:26%;border-radius:30%;background:radial-gradient(closest-side,rgba(120,190,255,.75),rgba(59,155,250,.25) 60%,transparent);
 mix-blend-mode:screen;opacity:0;transition:opacity .6s;pointer-events:none}
.gk-nt.on~.gk-pg{opacity:1}
/* Blog: Kachel „Neu im Ratgeber“ */
.gb-nw{width:25cqw}.gb-nw .gx-eb{display:block;color:#9fd0ff;font-size:.78cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25cqw}.gb-nw b{white-space:normal!important;font-size:1.2cqw!important;line-height:1.25}.gb-nw em::before{content:none!important}
html.anim-off .wi.gh .gi-t,html.anim-off .wi.gh .gp-fl{animation-play-state:paused}
/* 03.11.: einheitliche Kachelspalte (Aufbau/Größe wie IT-Service), alte Einzelkacheln aus */
.wi.gh>.gt-sc{inset:auto;top:104px;bottom:96px;width:max-content;display:flex;flex-direction:column;justify-content:center;gap:22px}
.wi.gh>.gt-sc .gi-t{position:relative;left:auto!important;top:auto!important}.wi.gh>.gt-sc .gi-t:nth-child(2n){margin-left:30px}
.wi.gh>.gt-sc.gt-off{display:none}.wi.gh>.gt-sc{gap:40px}.wi.gh>.gt-soc{gap:26px}
.gt-soc a.gi-t{pointer-events:auto;text-decoration:none;transition:border-color .3s,filter .3s}.gt-soc a.gi-t:hover,.gt-soc a.gi-t:focus-visible{filter:brightness(1.2);border-color:#fff}
.gt-soc .gi-t svg.gm-br{fill:#fff;stroke:none}.gt-soc .gi-t em::before{content:"↗"!important}
.gt-sc{z-index:6}.gt-sc .gi-t{width:max-content;min-width:250px;gap:12px;padding:11px 14px;border-radius:14px;font-size:14px}.gt-sc .gi-t>div{min-width:auto;margin-right:6px}
.gt-sc .gi-t svg{width:34px;height:34px;padding:8px;border-radius:9px}
.gt-sc .gi-t b{font-size:16px;text-shadow:0 0 10px rgba(59,155,250,.8)}.gt-sc .gi-t span{font-size:13px}
.gt-sc .gi-t em{font-size:12px;padding:4px 9px;border-radius:20px}.gt-sc .gi-t em::before{margin-right:3px}
@keyframes gl-fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.gt-sc .gi-t{animation-name:gl-fl2}
@media(max-width:900px){.gt-sc .gi-t{min-width:0;gap:7px;padding:6px 8px;border-radius:10px}.gt-sc .gi-t svg{width:22px;height:22px;padding:4px}
 .gt-sc .gi-t:nth-of-type(n+3){display:none}.gt-sc .gi-t b{font-size:11.5px}.gt-sc .gi-t span{display:none}.gt-sc .gi-t em{font-size:9px;padding:2px 6px}}
.gh-xf .lg-tl,.gh-xf .lg-d,.gh-seo2 .se-b{display:none}
/* Handy: Kacheln stehen links im Bild → weniger stark vergrößern, damit sie sichtbar bleiben (Leistungen ausgenommen) */
@media(max-width:900px){.wi.gh[class*="gh-"]>.gh-st{width:150%!important;margin-left:-40%!important}}

@media(min-width:2041px){.wi.gh>.gh-tx{max-width:none;width:calc(624px + (100vw - 2040px) * .45);padding-left:calc(64px + (100vw - 2040px) * .06)}
 .wi.gh .gh-h1{font-size:calc(58px + (100vw - 2040px) * .025)!important}.wi.gh .gh-lead{font-size:calc(18px + (100vw - 2040px) * .006);max-width:calc(540px + (100vw - 2040px) * .35)}
 .wi.gh>.gh-bar{margin-left:calc(64px + (100vw - 2040px) * .06)}.wi.gh>.hx-head{padding-left:calc(64px + (100vw - 2040px) * .06)!important}}
.se-fk{left:770px;right:auto;top:668px;bottom:auto;font-size:15px;color:rgba(201,216,238,.8)}

@media(max-width:900px){
 .wi.gh-web{background:radial-gradient(120% 60% at 100% 0,rgba(59,155,250,.20),transparent 60%),radial-gradient(90% 50% at 0 100%,rgba(1,45,90,.55),transparent 70%),#020c22!important}
 .wi.gh-web::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:none;
  background-image:linear-gradient(rgba(159,208,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(159,208,255,.05) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 55% at 80% 10%,#000,transparent 75%);mask-image:radial-gradient(90% 55% at 80% 10%,#000,transparent 75%)}
 .wi.gh-web>.gh-st,.wi.gh-web>.gt-sc,.wi.gh-web .gw-vid{display:none!important}
 .wi.gh-web .gh-tx{padding:40px 24px 0}
 .wi.gh-web .gh-eb{margin-bottom:18px}
 .wi.gh-web .gh-h1{font-size:clamp(38px,11vw,48px)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin:0 0 22px!important}
 .wi.gh-web .gh-lead{font-size:17px;line-height:1.65;color:#b9c9df;margin:0 0 36px}
 .wi.gh-web .wi-btns{display:flex;flex-direction:column;gap:12px}
 .wi.gh-web .wi-btns a{display:flex;justify-content:center;width:100%;box-sizing:border-box;margin:0}
 .wi.gh-web .gh-bar{display:block;margin:48px 24px 0;padding:0 0 28px;border-top:0}
 .wi.gh-web .gh-bar a{padding:18px 2px;border-top:1px solid rgba(159,208,255,.14);font-size:16px;font-weight:600;color:#eaf2fc}
 .wi.gh-web .gh-bar a:last-child{border-bottom:1px solid rgba(159,208,255,.14)}
 .wi.gh-web .gh-bar a::after{content:"→";margin-left:auto;color:#3B9BFA;font-weight:500}
 .wi.gh-web .gh-bar svg{width:22px;height:22px}
}

@media(max-width:900px){.wi.gh>.hx-head{padding-left:20px!important;padding-right:20px!important}.wi.gh>.hx-head .hx-burger{margin-left:auto}}

.gw-grid{display:none}
@media(max-width:900px){
 .wi.gh .gw-grid{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(90% 55% at 80% 10%,#000,transparent 75%);mask-image:radial-gradient(90% 55% at 80% 10%,#000,transparent 75%)}
 .wi.gh .gw-grid i{position:absolute;width:43px;height:43px;margin:1px 0 0 1px;background:rgba(59,155,250,.22);
  box-shadow:inset 0 0 0 1px rgba(159,208,255,.45),0 0 18px rgba(59,155,250,.45);opacity:0;transform:scale(.86);animation:gw-cell 6s ease-in-out infinite}
 @keyframes gw-cell{0%,100%{opacity:0;transform:scale(.86)}18%{opacity:1;transform:scale(1)}42%{opacity:.15;transform:scale(1)}60%{opacity:0;transform:scale(.86)}}
}

@media(max-width:900px){
 .wi.gh-web .gh-bar{display:none!important}
 .wi.gh-web .gh-tx{padding-bottom:56px}
 .wi.gh-web::after{-webkit-mask-image:radial-gradient(120% 75% at 70% 30%,#000 30%,transparent 85%)!important;mask-image:radial-gradient(120% 75% at 70% 30%,#000 30%,transparent 85%)!important}
 .wi.gh .gw-grid .gw-orb{position:absolute;left:30%;top:6%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(59,155,250,.38),rgba(59,155,250,.12) 55%,transparent);animation:gw-orb 16s ease-in-out infinite alternate}
 @keyframes gw-orb{0%{transform:translate(0,0) scale(1)}33%{transform:translate(160px,120px) scale(1.15)}66%{transform:translate(40px,330px) scale(.9)}100%{transform:translate(190px,470px) scale(1.1)}}
 .wi.gh .gw-grid i{animation-duration:5s}
 .wi.gh .gw-grid b{position:absolute;display:block;opacity:0;animation:gw-bh 6s linear infinite}
 .wi.gh .gw-grid .gw-h{left:0;width:90px;height:1px;margin-top:0;background:linear-gradient(90deg,transparent,#9fd0ff 70%,#fff);
  box-shadow:0 0 8px rgba(59,155,250,.9);animation-name:gw-bh}
 .wi.gh .gw-grid .gw-v{top:0;width:1px;height:90px;background:linear-gradient(180deg,transparent,#9fd0ff 70%,#fff);box-shadow:0 0 8px rgba(59,155,250,.9);animation-name:gw-bv}
 @keyframes gw-bh{0%{opacity:0;transform:translateX(-100px)}8%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(420px)}}
 @keyframes gw-bv{0%{opacity:0;transform:translateY(-100px)}8%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(700px)}}
}

@media(min-width:901px){.wi.gh>.gh-bar{display:flex;justify-content:space-between;gap:24px}.wi.gh>.gh-bar a{flex:none}}

@media(max-width:900px){.wi.gh-seo2>.gh-st,.wi.gh-seo2>.gt-sc{display:none!important}.wi.gh-seo2 .gh-tx{padding-bottom:40px}}

@media(max-width:900px){.wi.gh:not(.gh-rl)>.gh-st,.wi.gh:not(.gh-rl)>.gt-sc{display:none!important}.wi.gh:not(.gh-web) .gh-tx{padding-bottom:40px}}

/* Relaunch: Vorher/Nachher-Regler als Glasfenster in der Bühne */
.lp-st .lp-rl{position:absolute;left:770px;top:100px;width:830px;height:560px;display:flex;flex-direction:column;border-radius:18px;
 box-shadow:0 0 0 1px rgba(178,220,255,.9),0 0 0 6px rgba(59,155,250,.14),0 0 26px rgba(59,155,250,.6),0 0 90px rgba(59,155,250,.28),0 30px 70px rgba(0,6,24,.6)}
.lp-rl .rl-v{flex:1;min-height:0;aspect-ratio:auto}
.lp-bsp2{top:676px}
.lp-rl-m{display:none}
@media(max-width:900px){.wi.gh-rl .lp-rl-m{display:block;position:relative;z-index:5;padding:0 24px 40px}
 .wi.gh-rl .lp-rl-m .lp-rl{position:relative;left:auto;top:auto;width:100%;height:auto}
 .wi.gh-rl .lp-rl-m .rl-v{flex:none;height:360px}}
/* ===== 03.11.2026 hero_more.py: Landing-, Projekt- und Rechtsseiten im Galerie-Stil ===== */
.lp-st .rf-stk.lp-one .rf-w{transform:none;opacity:1;z-index:3}
.lp-ph{position:absolute;left:1400px;top:290px;width:205px;aspect-ratio:520/1013;border-radius:28px;overflow:hidden;border:6px solid #0b1220;background:#0b1220;z-index:4;   /* 03.11.: Format = Handy-Screenshot (520×1013), nichts abgeschnitten */
 box-shadow:0 0 0 1px rgba(178,220,255,.6),0 0 26px rgba(59,155,250,.55),0 24px 44px rgba(0,6,24,.6)}
.lp-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:22px}
.lp-bsp{left:800px;right:auto;top:668px;bottom:auto;font-size:15px;color:rgba(201,216,238,.8)}
.rf-w img{object-position:top}
/* Rechtsseiten: rein typografisch, Raster mit leuchtenden Feldern auch am Desktop */
.wi.gh-lg{min-height:0!important;padding-bottom:64px;background:radial-gradient(70% 90% at 100% 0,rgba(59,155,250,.22),transparent 60%),#020c22!important}
.wi.gh-lg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(159,208,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(159,208,255,.05) 1px,transparent 1px);
 background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 90% at 85% 10%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 85% 10%,#000,transparent 75%)}
.wi.gh-lg .gh-bar{display:none}
@media(min-width:901px){
 .wi.gh-lg .gh-tx{max-width:820px;padding-top:56px}
 .wi.gh-lg .gw-grid{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(60% 90% at 85% 10%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 90% at 85% 10%,#000 30%,transparent 80%)}
 .wi.gh-lg .gw-grid i{position:absolute;width:43px;height:43px;margin:1px 0 0 1px;background:rgba(59,155,250,.22);
  box-shadow:inset 0 0 0 1px rgba(159,208,255,.45),0 0 18px rgba(59,155,250,.45);opacity:0;animation:gw-cell 5s ease-in-out infinite}
 .wi.gh-lg .gw-grid i{transform:translateX(calc(100vw - 560px))}
 .wi.gh-lg .gw-grid b,.wi.gh-lg .gw-grid .gw-orb{display:none}
}
@keyframes gw-cell{0%,100%{opacity:0}18%{opacity:1}42%{opacity:.15}60%{opacity:0}}