@font-face{font-family:'Geist';src:url(/assets/fonts/geist-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/fonts/geist-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/fonts/geist-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF}
a{color:#084AF3}a:hover{color:#11225A}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.g-hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:end}
.g-img{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.cell+.cell{border-left:1px solid #E3E7F0}
.dcell+.dcell{border-left:1px solid rgba(255,255,255,.14)}
.pline{display:block}
@media (max-width:960px){
.g-hero,.g-2{grid-template-columns:1fr;gap:32px}
.g-img{grid-template-columns:1fr}
.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:1fr}
.cell+.cell,.dcell+.dcell{border-left:0}
.g-3 .cell+.cell{border-top:1px solid #E3E7F0}
.pline{display:none}
}
@media (max-width:640px){.g-4{grid-template-columns:1fr}}
.btn-p{transition:background .2s}
.btn-p:hover{background:#11225A !important;color:#FFFFFF !important}
.btn-p .arr{transition:transform .25s}
.btn-p:hover .arr{transform:translateX(3px)}
.btn-g:hover{border-color:#11225A !important}
.prow{transition:background .25s}
.prow:hover{background:#F5F7FB}
.prow .arr{transition:transform .25s,background .25s,color .25s}
.prow:hover .arr{transform:translateX(4px);background:#084AF3 !important;color:#FFFFFF !important}
/* Animationen – bewusst zurückhaltend */
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fu{animation:fu .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.3s}.d4{animation-delay:.45s}.d5{animation-delay:.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bob{animation:bob 6s ease-in-out infinite}.bob2{animation-delay:1.5s}
@keyframes run{from{left:0%}to{left:100%}}
.dot{animation:run 7s linear infinite}
/* Hero-Kacheln */
@keyframes tin{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
.tin{animation:tin 1.1s cubic-bezier(.2,.7,.2,1) both}
.t1{animation-delay:.45s}.t2{animation-delay:.65s}.t3{animation-delay:.85s}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.card1{animation:pop .7s cubic-bezier(.2,.9,.3,1.2) 1.3s both,bob 6s ease-in-out 2s infinite}
.card2{animation:pop .7s cubic-bezier(.2,.9,.3,1.2) 1.7s both,bob 6s ease-in-out 2.4s infinite}
@keyframes chipf{0%,30%,100%{background:rgba(255,255,255,0);border-color:rgba(255,255,255,.22)}6%,24%{background:#084AF3;border-color:#084AF3}}
.ch{animation:chipf 4.5s ease-in-out infinite}.ch2{animation-delay:1.5s}.ch3{animation-delay:3s}
@keyframes fill{from{width:0}to{width:100%}}
.fillbar{animation:fill 4.5s linear infinite}
@keyframes chk{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.chk{animation:chk 2.4s ease-in-out 2.2s infinite}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.cnt{counter-reset:n var(--n)}
.cnt::after{content:counter(n)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@supports (animation-timeline: view()){
@keyframes rv{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
@keyframes cnt{from{--n:0}}
.cnt{animation:cnt linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* Inhaltsbreite: max. 80 % */
.wrap{width:80%;max-width:1600px;margin-left:auto;margin-right:auto;box-sizing:border-box}
@media (max-width:1100px){.wrap{width:auto;padding-left:24px;padding-right:24px}}
/* Kundenlogos */
.g-5{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
.logo{display:block;max-height:44px;max-width:150px;width:auto;height:auto;filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s}
.lcell:hover .logo{filter:none;opacity:1}
@media (max-width:960px){.g-5{grid-template-columns:1fr 1fr}.g-5>.cell:first-child{grid-column:1/-1}.g-5 .cell{border-left:0 !important;border-top:1px solid #E3E7F0}}
/* Rechtstexte */
.legal{max-width:760px}
.legal h2{margin:56px 0 14px;font-size:22px;font-weight:600;letter-spacing:-0.01em;color:#11225A}
.legal h3{margin:28px 0 8px;font-size:17px;font-weight:600;color:#11225A}
.legal p,.legal li{font-size:16px;line-height:1.7;color:#4A5470}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal address{font-style:normal;font-size:16px;line-height:1.7;color:#11225A}
.ph{background:#FFF1C2;color:#5A4300;border-radius:4px;padding:1px 6px;font-weight:500}

/* Mobil: Navigation ausblenden, CTA bleibt */
@media (max-width:760px){header nav{display:none !important}}

/* Netzwerk im Hero-Hintergrund */
.hero-net{position:absolute;left:0;right:0;top:83px;height:820px;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 92%)}
.hero-net canvas{display:block;width:100%;height:100%}
@media (max-width:760px){.hero-net{height:560px;opacity:.6}}

/* Vertriebs-Inbox im Hero */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex-grow:1;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.fi{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.fi>.fi-in{overflow:hidden;min-height:0}
.fi.enter{grid-template-rows:0fr;opacity:0;transform:translateY(-8px) scale(.98)}
.fi.leave{grid-template-rows:0fr;opacity:0}
.fcard{margin-bottom:10px;display:flex;align-items:center;gap:12px;background:#FFFFFF;border:1px solid #E3E7F0;border-radius:14px;padding:12px 14px;box-shadow:0 6px 18px rgba(17,34,90,.06);transition:border-color 1s,box-shadow 1s}
.fcard.new{border-color:#7BAFFA;box-shadow:0 0 0 4px rgba(65,117,252,.12),0 6px 18px rgba(17,34,90,.08)}
.ficon{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:#EAF1FF;color:#084AF3;display:flex;align-items:center;justify-content:center}
.ficon.hot{background:#084AF3;color:#FFFFFF}
.ftxt{display:flex;flex-direction:column;gap:2px;min-width:0;flex-grow:1}
.ft{font-size:14px;font-weight:600;color:#11225A}
.fs{font-size:12.5px;color:#5B6787;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftime{flex-shrink:0;font-size:11px;color:#5B6787}
.livedot{width:7px;height:7px;border-radius:50%;background:#084AF3;animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(8,74,243,.5)}100%{box-shadow:0 0 0 8px rgba(8,74,243,0)}}

/* Netzwerk in Sektionen */
.net-fill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.has-net>*:not(.net-fill){position:relative;z-index:1}

/* Mobil: kein horizontales Scrollen */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.logo{max-width:100%}
@media (max-width:960px){.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}.g-5 .lcell{padding:22px 12px !important}}

/* Pipeline: auf dem Handy als kompakte Zeitleiste */
.vline{display:none}
@keyframes vrun{from{top:0%}to{top:100%}}
@media (max-width:760px){
.pipecard{padding:24px 20px !important}
.pipecard>p.mono{margin-bottom:24px !important}
.pipe{display:flex !important;flex-direction:column;gap:22px !important}
.pipe>li{display:grid !important;grid-template-columns:44px 1fr;column-gap:16px;row-gap:2px;align-items:start}
.pipe>li>span[aria-hidden]{grid-row:1/4;width:44px !important;height:44px !important;border-radius:12px !important}
.pipe>li>span[aria-hidden] svg{width:18px;height:18px}
.pipe>li>.mono{font-size:11px !important;line-height:1;padding-top:4px}
.pipe>li>h3{font-size:18px !important}
.pipe>li>p{font-size:14px !important;line-height:1.5 !important}
.vline{display:block;position:absolute;left:22px;top:22px;bottom:22px;width:1px;background:#CDD5E4}
.vdot{position:absolute;left:-4px;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:#084AF3;box-shadow:0 0 0 4px rgba(8,74,243,.15);animation:vrun 5s linear infinite}
}
@media (max-width:760px){
.pipe>li{position:relative}
.pipe>li:last-child::after{content:"";position:absolute;left:20px;top:46px;bottom:-40px;width:5px;background:#F5F7FB}
}

/* Vorteile (Leistungen) */
.bicon{width:40px;height:40px;border-radius:12px;background:#EAF1FF;color:#084AF3;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
@media (max-width:760px){
.ben{display:grid !important;grid-template-columns:40px 1fr;column-gap:14px;row-gap:4px !important;padding:20px !important;align-items:start}
.ben>.bicon{grid-row:1/3;margin:0}
.ben>h3{font-size:17px !important;line-height:1.3;padding-top:1px}
.ben>p{font-size:14px !important;line-height:1.5 !important}
}

/* Mobil: Kontaktblock randlos über die volle Breite */
@media (max-width:760px){
#kontakt{padding-bottom:0 !important}
.bleed{margin-left:-24px;margin-right:-24px;border-radius:0 !important;padding:64px 24px 56px !important}
.bleed a[href^="mailto"].btn-p,.bleed a[href^="tel"]{width:100%;box-sizing:border-box;justify-content:center}
.bleed a.btn-p{justify-content:flex-start !important}
#kontakt+footer{border-top:0 !important;background:#0C1A47}
#kontakt+footer span,#kontakt+footer a{color:#AFC2F0 !important}
}

/* Mobil: Hero-Video vorerst ausblenden */
@media (max-width:760px){.hero-video{display:none !important}}

/* Mobil: Kundenlogos als Laufband */
.lmq{display:none}
@keyframes lmq{to{transform:translateX(-50%)}}
@media (max-width:960px){
.g-5{grid-template-columns:1fr !important}
.g-5>.lcell{display:none !important}
.g-5>.cell:first-child{padding:20px 0 4px !important}
.lmq{display:block;overflow:hidden;padding:22px 0 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lmq-track{display:flex;width:max-content;animation:lmq 18s linear infinite}
.lmq-set{display:flex;align-items:center;gap:48px;padding-right:48px}
.lmq .logo{max-height:34px;max-width:130px}
}

/* Einheitliche Abstände zwischen den Sektionen */
:root{--sec:120px}
@media (max-width:760px){:root{--sec:72px}}
section.wrap:not(#top){padding-top:var(--sec) !important;padding-bottom:0 !important}
#kontakt{padding-bottom:var(--sec) !important}
@media (max-width:760px){#kontakt{padding-bottom:0 !important}}

/* Zähler früher starten, damit nie „0“ zu sehen ist */
@supports (animation-timeline: view()){.cnt{animation-range:entry 0% entry 90% !important}}

/* Mobil: Kennzahlen als kompakte Liste */
@media (max-width:760px){
.stats{display:flex !important;flex-direction:column;padding:28px 22px 12px !important}
.stats>.dcell{padding:0 !important;border-left:0 !important}
.stats>.dcell:first-of-type{gap:8px !important;padding-bottom:18px !important}
.stats>.dcell+.dcell{flex-direction:row !important;align-items:center !important;justify-content:space-between;gap:16px !important;padding:16px 0 !important;border-top:1px solid rgba(255,255,255,.14) !important}
.stats>.dcell+.dcell>span:first-child{font-size:44px !important}
.stats>.dcell+.dcell>span:last-child{text-align:right;font-size:14px !important}
}

/* Grauer Headline-Teil: wandernder Lichtstreifen in Markenblau */
@keyframes hlsweep{0%{background-position:100% 0}40%{background-position:0% 0}100%{background-position:0% 0}}
.hl{background-image:linear-gradient(90deg,#8A93AD 0%,#8A93AD 38%,#4175FC 46%,#084AF3 50%,#4175FC 54%,#8A93AD 62%,#8A93AD 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent !important;-webkit-text-fill-color:transparent;animation:hlsweep 7s cubic-bezier(.45,0,.25,1) 1.2s infinite}
.hl-hero{animation-delay:.9s;animation-duration:6s}
.hl-dark{background-image:linear-gradient(90deg,#8FA3D6 0%,#8FA3D6 38%,#7BAFFA 46%,#FFFFFF 50%,#7BAFFA 54%,#8FA3D6 62%,#8FA3D6 100%)}
@media (prefers-reduced-motion:reduce){.hl{background-position:100% 0}}

/* Sticky Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s,background .3s}
.site-header.scrolled{background:rgba(255,255,255,.92);box-shadow:0 8px 30px rgba(17,34,90,.08)}
section[id],main{scroll-margin-top:96px}

/* Kein Überscrollen/Nachfedern über Seitenanfang und -ende hinaus */
html,body{overscroll-behavior-y:none}
html{background:#FFFFFF}

/* Vier Leistungs-Chips im Hero (Cold Calling → Mailing → Setting → Closing) */
.ch{animation-duration:6s !important}.ch2{animation-delay:1.5s}.ch3{animation-delay:3s}.ch4{animation-delay:4.5s}
.fillbar{animation-duration:6s !important}
/* Karriere kompakt */
@media (max-width:960px){.kar{grid-template-columns:1fr !important}.kar-img{min-height:240px !important}}
.t3 .ch{padding:5px 10px !important;font-size:13px;white-space:nowrap}
.t3>span:nth-child(2){gap:6px !important}
.t3>span:nth-child(2){display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important}
.t3>span:nth-child(2)>span[aria-hidden]{display:none}
.t3 .ch{text-align:center;padding:7px 10px !important}

/* Referenz-Logos: Laufband jetzt auch am Desktop */
.g-5{grid-template-columns:280px minmax(0,1fr)}
.lmq{display:block;overflow:hidden;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lmq-track{display:flex;width:max-content;animation:lmq 32s linear infinite}
.lmq:hover .lmq-track{animation-play-state:paused}
.lmq-set{display:flex;align-items:center;gap:64px;padding-right:64px}
.lmq .logo{height:var(--h);width:auto;max-height:none;max-width:none}
.lmq .logo:hover{filter:none;opacity:1}
@media (max-width:960px){.lmq .logo{height:calc(var(--h) * .82)}.lmq-set{gap:44px;padding-right:44px}.lmq-track{animation-duration:24s}}

/* Kundenprojekte: Logos statt Namen */
.plogo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:260px}
.plg{display:block;width:auto;max-width:260px;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.prow:hover .plg{filter:none;opacity:1}
.pname{font-size:13px;font-weight:500;color:#5B6787;letter-spacing:.01em}
@media (max-width:760px){.plogo{min-width:0}.plg{max-width:200px}}

/* Kundenprojekte: Leistungs-Tags */
.pdesc{display:flex;flex-direction:column;gap:10px;max-width:440px;font-size:16px;line-height:1.6;color:#4A5470}
.ptags{display:flex;flex-wrap:wrap;gap:6px}
.ptag{font-family:'Geist Mono',ui-monospace,monospace;font-size:11.5px;font-weight:500;letter-spacing:.02em;color:#084AF3;background:#EAF1FF;border-radius:999px;padding:4px 10px;line-height:1.3}
.prow:hover .ptag{background:#DCE7FF}
@media (max-width:760px){.pdesc{font-size:15px}}
@media (min-width:761px){.pdesc{width:440px}}