@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{
  --bg:#f5f7fa;--paper:#fff;--ink:#0f2238;--ink2:#2c3e54;--muted:#4a5b70;--line:#d3dbe5;
  --blue:#1b66b8;--c-blue:#2169b5;--c-yellow:#eda20f;--c-green:#2f9a63;--c-red:#d24a3f;
  --t-blue:#2169b5;--t-yellow:#a96f00;--t-green:#23794c;--t-red:#b93a30;
  --dark:#0f2238;--on-dark:#fff;--on-dark-muted:#b8c6d8;--accent-on-dark:#8cc0f4;
  --gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px));
  --max:1240px;--head-h:68px;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 8px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-weight:400;font-stretch:100%;hyphens:manual;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:2px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 64px);margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
@media(min-width:900px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
section{padding-block:clamp(60px,9vw,120px)}
h2{font-weight:340;font-stretch:112%;font-size:clamp(1.9rem,4vw,3.3rem);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.h-small{font-size:1.0625rem;font-weight:600;font-stretch:100%;letter-spacing:0;line-height:1.3}
p{text-wrap:pretty}
h3{font-weight:600;font-size:1.25rem;line-height:1.25;font-stretch:100%}

/* Header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(245,247,250,.96);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--head-h)}
.brand{display:block;flex:none;line-height:0}
.brand img{height:32px;width:auto}
.nav-desk{display:none}
.nav-desk ul{display:flex;gap:clamp(20px,2.4vw,40px)}
.nav-desk a,.mob-panel a{text-decoration:none;font-weight:500;font-size:1rem}
.nav-desk a{padding:10px 2px;border-bottom:2px solid transparent}
.nav-desk a:hover{border-bottom-color:var(--blue)}
.head-r{display:flex;align-items:center;gap:6px}
.lang{display:flex;align-items:center;font-size:.9375rem;font-weight:500}
.lang a,.lang>span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
.lang [aria-current]{font-weight:700;border-bottom:2px solid var(--blue)}
.lang a{color:var(--muted)}.lang a:hover{color:var(--ink)}
.lang--head{display:none}
.head-contact{display:none;align-items:center;min-height:44px;padding:0 18px;margin-left:8px;border:1.5px solid var(--ink);border-radius:2px;font-weight:600;text-decoration:none;font-size:.9375rem;transition:background .15s,color .15s}
.head-contact:hover{background:var(--ink);color:#fff}
.nav-mob summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:2px;cursor:pointer;font-weight:500}
.nav-mob summary::-webkit-details-marker{display:none}
.burger{width:18px;height:12px;position:relative;display:block}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .2s}
.burger::before{top:0}.burger::after{bottom:0}
.nav-mob[open] .burger::before{top:5px;transform:rotate(45deg)}
.nav-mob[open] .burger::after{bottom:5px;transform:rotate(-45deg)}
.mob-panel{position:fixed;left:0;right:0;top:calc(var(--head-h) + env(safe-area-inset-top,0px));bottom:0;background:var(--bg);padding:8px var(--gr) 24px var(--gl);overflow:auto;border-top:1px solid var(--line)}
.mob-panel li a{display:flex;align-items:center;min-height:56px;font-size:1.25rem;border-bottom:1px solid var(--line)}
.mob-panel .lang{margin-top:16px}
.mob-panel .lang a,.mob-panel .lang>span{min-width:56px}
@media(min-width:480px){.lang--head{display:flex}.mob-panel .lang{display:none}}
@media(min-width:1180px){.nav-desk{display:block}.nav-mob{display:none}.head-contact{display:inline-flex}.brand img{height:38px}}
@media(max-width:379px){.brand img{height:26px}.nav-mob summary{padding:0 10px;gap:8px}.head-in{gap:10px}}

/* Quad-Motiv */
.quad{display:flex;gap:4px;margin-bottom:22px}
.quad i{display:block;width:34px;height:6px;border-radius:1px}
.quad i:nth-child(1){background:var(--c-blue)}.quad i:nth-child(2){background:var(--c-yellow)}.quad i:nth-child(3){background:var(--c-green)}.quad i:nth-child(4){background:var(--c-red)}

/* Hero */
.hero{padding-top:clamp(18px,3.2vw,44px);padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(8px,2vw,20px)}
h1{font-weight:380;font-stretch:106%;line-height:1;letter-spacing:-.024em;font-size:clamp(2.2rem,12vw,3.6rem)}
h1 .l1,h1 .l2{display:block;white-space:nowrap}
h1 .run{color:var(--blue);font-weight:620;font-stretch:108%}
.sub{margin-top:clamp(16px,2.4vw,28px);font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:500;line-height:1.28;max-width:19em;text-wrap:balance}
.intro{margin-top:12px;color:var(--muted);max-width:28em}
.hero-obj{display:flex;justify-content:center}
.obj{position:relative;width:100%;max-width:820px;aspect-ratio:1120/820}
.obj canvas,.obj .fb{position:absolute;inset:0;width:100%;height:100%;display:block}
.obj canvas{opacity:0}
.gl-ready .obj canvas{opacity:1}
.anim .obj .fb{visibility:hidden}
.gl-fallback .obj .fb{visibility:visible}
.gl-ready .obj .fb{visibility:hidden}
.expline{margin-top:clamp(4px,1vw,12px);padding:16px 0 clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;gap:4px 0;font-weight:500}
.expline li{padding:0 22px;border-left:1px solid var(--line)}
.expline li:first-child{padding-left:0;border-left:0}
@media(max-width:599px){.hero{overflow-x:clip}.obj{width:106%;max-width:none;margin:-3% -3% -4%}.expline{flex-direction:column;gap:2px;padding-top:8px}.expline li{padding:0;border:0}}
@media(min-width:900px){
 .hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(12px,2.5vw,40px);align-items:center}
 h1{font-size:clamp(3rem,5.1vw,5.6rem)}
}

/* Wesentliches */
.essence{background:var(--paper);border-block:1px solid var(--line)}
.ess-grid{display:grid;gap:32px}
.essence h2{font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1.04}
.ess-text{max-width:36em}
.ess-text p:first-child{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.5;color:var(--ink)}
.ess-text p+p{margin-top:20px;color:var(--ink2)}
@media(min-width:900px){.ess-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,7vw,112px);align-items:end}}

/* Kunden */
.customers{padding-block:clamp(44px,6vw,80px)}
.refs-list{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:30px 64px}
.refs-list img{height:var(--h);width:auto}
@media(max-width:600px){.refs-list{gap:24px 40px}.refs-list img{height:calc(var(--h)*.8)}}

/* Leistungen */
.services{background:var(--paper);border-block:1px solid var(--line)}
.svc-list{margin-top:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.svc-row{display:grid;gap:12px 24px;padding:30px 0;border-top:1px solid var(--line);transition:background .2s}
.svc-row:hover{background:var(--bg)}
.num{font-size:1.5rem;font-weight:300;font-stretch:112%;line-height:1;color:var(--t-blue)}
.num::before{content:"";display:block;width:32px;height:4px;margin-bottom:12px;background:currentColor;transition:width .25s}
.svc-row:hover .num::before{width:56px}
[data-c=yellow] .num{color:var(--t-yellow)}[data-c=green] .num{color:var(--t-green)}[data-c=red] .num{color:var(--t-red)}
.svc-t h3{font-weight:500;font-stretch:108%;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.005em}
.svc-row--lead .svc-t h3{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.tag{display:inline-block;margin-top:8px;font-size:.9375rem;font-weight:600;color:var(--blue)}
.svc-d p{max-width:34em;color:var(--ink2)}
.subs{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 12px}
.subs li{padding:2px 0 2px 10px;border-left:3px solid var(--c-blue);font-weight:600;font-size:.9375rem}
@media(min-width:900px){
 .svc-row{grid-template-columns:72px minmax(0,1fr) minmax(0,1.15fr);gap:0 clamp(24px,4vw,64px);padding:40px 0;align-items:start}
 .svc-row--lead{padding:56px 0}
}

/* Arbeitsweise */
.approach{background:var(--dark);color:var(--on-dark);position:relative}
.approach::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--c-blue) 0 25%,var(--c-yellow) 25% 50%,var(--c-green) 50% 75%,var(--c-red) 75% 100%)}
.app-head{display:grid;gap:14px;max-width:44em}
.app-head p{color:var(--on-dark-muted);font-size:1.125rem}
.ways{margin-top:clamp(40px,6vw,72px);display:grid;gap:36px}
.way{position:relative;border-top:2px solid rgba(255,255,255,.5);padding-top:24px}
.way::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--dark);border:2px solid var(--accent-on-dark)}
.way h3{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600}
.way p{margin-top:10px;color:var(--on-dark-muted);max-width:26em}
.js .way{transform:translateY(var(--o));transition:transform 1.3s cubic-bezier(.4,0,.2,1)}
.js .way.is-in{transform:none}
@media(min-width:900px){.ways{grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}.app-head{grid-template-columns:auto;}}

/* Person */
.person-grid{display:grid;gap:36px}
.portrait{position:relative;max-width:460px;background:#cfd9e6;border-radius:2px;overflow:hidden}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.big{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 20px;background:linear-gradient(to top,rgba(15,34,56,.82),rgba(15,34,56,0));color:#fff;display:flex;align-items:baseline;gap:12px}
.bn{font-size:clamp(3.2rem,8vw,4.6rem);font-weight:300;font-stretch:118%;line-height:1}
.bl{font-size:1.0625rem;font-weight:500}
.person h2{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.04}
.role{margin-top:12px;color:var(--muted);font-weight:500}
.person-text p:not(.role){margin-top:22px;max-width:32em;color:var(--ink2)}
.person-text .role+p{font-size:clamp(1.15rem,1.7vw,1.3rem);line-height:1.5;color:var(--ink);margin-top:28px}
@media(min-width:820px){.person-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,112px);align-items:center}}

/* Kontakt */
.contact{background:var(--dark);color:var(--on-dark)}
.contact-grid{display:grid;gap:36px}
.who{margin-top:18px;display:grid;font-size:1.125rem}
.who span{color:var(--on-dark-muted)}
.contact address{margin-top:26px;color:var(--on-dark-muted)}
.clinks{display:grid;border-top:1px solid rgba(255,255,255,.3);align-self:center}
.clinks a{display:grid;gap:4px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.3);text-decoration:none;position:relative;padding-right:36px;transition:color .15s}
.clinks a::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);transition:right .2s}
.clinks a:hover{color:var(--accent-on-dark)}.clinks a:hover::after{right:0}
.cl{color:var(--on-dark-muted);font-size:1rem;font-weight:500}
.cv{font-size:clamp(1.3rem,5.6vw,2.4rem);font-weight:380;font-stretch:108%;line-height:1.2;overflow-wrap:anywhere}
@media(min-width:820px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,112px)}}

/* Footer */
.site-foot{background:var(--dark);color:var(--on-dark-muted);border-top:1px solid rgba(255,255,255,.14);padding-block:26px calc(26px + env(safe-area-inset-bottom,0px));font-size:.9375rem}
.site-foot .wrap{display:grid;gap:6px}
.site-foot strong{color:#fff;font-weight:600}
@media(min-width:820px){.site-foot .wrap{grid-template-columns:1fr auto;align-items:end}}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .js .way{transform:none}
}

.nb{white-space:nowrap}
@media(max-width:899px){.obj{max-width:520px}}