/* One pen vocabulary. Complete static artwork is the default without JavaScript. */
[data-pen]{pointer-events:none}
[data-pen] path{stroke-dashoffset:0}
[data-pen] .pen-waiting{stroke-dasharray:var(--pen-length);stroke-dashoffset:var(--pen-length);stroke-opacity:0}
.scribble{height:14px;stroke-width:2.8}.scribble .pen-grain{stroke-width:1;opacity:.7}
.ink-label{display:inline-block;position:relative;padding-bottom:2px;max-width:100%}
.ink-link{text-decoration:none}
.text-ink,.nav-ink,.combination-ink,.expert-ink{position:absolute;left:0;bottom:-5px;width:100%;height:12px;fill:none;stroke:var(--yellow);stroke-width:2.4;stroke-linecap:round;overflow:visible}
.text-link{position:relative}
.nav-ink{bottom:4px}
.nav-ink path{opacity:.45}
.motion-prototype .nav a:last-child .nav-ink{left:15%;width:70%;bottom:5px}
.motion-prototype .mobile nav a{position:relative}
.motion-prototype .mobile .nav-ink{left:16px;width:150px;bottom:0}
.motion-prototype .header a:is(:focus-visible,[aria-current]) .nav-ink path{stroke-dashoffset:0;opacity:1}
.growth-stroke{position:absolute;left:0;bottom:-22px;width:100%;height:46px;fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;z-index:-1}
.combination{position:relative;border-bottom:0}.combination-ink{bottom:0;height:12px}
.hero-photo:before{content:none}.hero-photo{isolation:isolate}
.photo-outline{position:absolute;inset:-18px;width:calc(100% + 36px);max-width:none;height:calc(100% + 36px);fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;z-index:1;transform:rotate(-2deg)}
.bubble-outline{fill:none}.bubble-outline .pen-paper{fill:var(--soft);stroke:none}
.mobile-wire{display:none}
@media(hover:hover) and (pointer:fine){
 .nav a:hover .nav-ink{stroke:var(--ink)}
 .nav a:hover .nav-ink path{opacity:1}
 .combination:hover .combination-ink{stroke:var(--ink)}
 .text-link:hover .text-ink,.ink-link:hover .text-ink{stroke:var(--ink)}
 .why-item:hover .why-icon,.modes article:hover .service-icon,.audiences article:hover .service-icon{color:var(--muted)}
}
a:focus-visible [data-pen] path{stroke-dashoffset:0!important;stroke-opacity:1!important}
@media(max-width:600px){
 .growth-stroke{bottom:-18px;height:35px}
 .mobile-wire{display:block;position:absolute;left:-24px;top:0;width:24px;height:100%;overflow:visible;fill:none;stroke:var(--yellow);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;z-index:-2}
 .service-network:before,.service-node:before{content:none}
 .ink-label{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
 [data-pen] path{animation:none!important;transition:none!important}
 [data-pen] path{stroke-dashoffset:0!important;stroke-opacity:1!important}
}

.experts{position:relative;border-top:0}.expert-ink{top:0;bottom:auto;height:12px}

.quiet .text-ink{stroke:currentColor;stroke-width:1.4;opacity:.7;bottom:-3px;height:9px}
.profile-services>.text-link{margin-right:28px}

/* Short colour feedback; the hand-drawn geometry never moves on hover. */
.btn,.nav a:last-child{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn.dark:focus-visible,.btn.outline:focus-visible,.nav a:last-child:focus-visible{background:var(--yellow);color:var(--ink)}
.btn.dark:focus-visible .link-arrow{color:var(--ink)}
@media(hover:hover) and (pointer:fine){
 .btn.dark:hover,.btn.outline:hover,.nav a:last-child:hover{background:var(--yellow);color:var(--ink)}
 .btn.dark:hover .link-arrow{color:var(--ink)}
}
.hero-person,.why-section{position:relative}
.section-trail{position:absolute;bottom:-24px;left:calc(50% - 40px);width:80px;height:80px;fill:none;stroke:var(--yellow);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;z-index:2}
.home-cooperation>.wrap{position:relative}
.home-cooperation .section-trail{left:2px;bottom:auto;top:-78px;width:60px;height:60px;transform:rotate(10deg)}
@media(max-width:700px){
 .hero-person{padding-bottom:86px}
 .hero-person>.section-trail{bottom:-7px;left:auto;right:26px;width:58px;height:64px}
 .home-cooperation .section-trail{left:0;top:-55px;width:46px;height:46px}
}

.text-link[href$="/kontakt/"]{border-radius:10px 7px 11px 8px;padding-inline:12px;margin-inline:-12px;transition:background-color .18s ease,color .18s ease}
.text-link[href$="/kontakt/"]:focus-visible{background:var(--yellow);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.text-link[href$="/kontakt/"]:hover{background:var(--yellow);color:var(--ink)}}

/* Portraits are the deliberate hover-drawing exception; touch gets scroll drawing. */
.team-portrait{display:block;position:relative;isolation:isolate;border-radius:34px 58px 30px 45px}
.portrait-ink{position:absolute;inset:-10px;width:calc(100% + 20px);max-width:none;height:calc(100% + 20px);fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-2deg)}
@media(hover:hover) and (pointer:fine){
 .portrait-ink path{stroke-dasharray:var(--portrait-length,1);stroke-dashoffset:var(--portrait-length,1);transition:stroke-dashoffset .75s linear}
 .team-portrait:hover .portrait-ink path{stroke-dashoffset:0}
 .rates tbody tr:hover{background:var(--soft)}
}
.team-portrait:focus-visible .portrait-ink path{stroke-dashoffset:0;transition:none}
.rates tbody tr{transition:background-color .18s ease}
.rates tbody tr:focus-within{background:var(--soft)}
@media(max-width:540px){.team-portrait{width:min(220px,100%)}}
@media(max-width:700px){.team-photo>.photo-outline{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px)}}
/* A brief hand-drawn nudge towards the action, rather than a full connector. */
.cta-inner{position:relative}
.cta-doodle>.cta-arrow{display:block;position:absolute;inset:auto auto -12px -102px;width:110px;height:80px;overflow:visible;stroke-width:2.8}
@media(max-width:700px){
 .cta-inner{display:block}
 .cta-doodle{position:absolute;right:0;bottom:0;width:82px;margin:0}
 .cta .btn{font-size:13px;padding:15px 16px;gap:14px}
 .cta-doodle>.cta-arrow{inset:auto auto 5px -40px;width:42px;height:38px}
 .cta-doodle img{padding:8px;border-radius:17px 22px 18px 20px}
}
@media(max-width:359px){.cta-doodle>.cta-arrow{inset:auto auto -28px -30px;width:42px;height:42px;transform:rotate(-45deg)}.cta-doodle{width:72px;bottom:70px}.cta p{margin-bottom:76px}.cta .btn{font-size:12px;padding:14px 12px;gap:8px}}
@media(prefers-reduced-motion:reduce){.portrait-ink path,.rates tbody tr{transition:none!important}}