:root {
--nk-accent: #f36a21;
--nk-ink: #15181b;
--nk-muted: #666d72;
--nk-surface: #f4f5f3;
--nk-ease-out: cubic-bezier(.23, 1, .32, 1);
--nk-ease-move: cubic-bezier(.77, 0, .175, 1);
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
::selection {
color: #fff;
background: var(--nk-accent);
}
.nk-subpage {
padding-top: 0;
overflow: clip;
}
body:not([data-page="home"]) {
--nk-home-container: 1400px;
--nk-home-gutter: 48px;
--nk-home-edge: max(var(--nk-home-gutter), calc((100% - var(--nk-home-container)) / 2));
}
body:not([data-page="home"]) .nk-hero.nk-hero-rebuilt {
--nk-hero-orange: #f36a21;
position: relative;
width: 100%;
min-height: max(100svh, 860px);
overflow: hidden;
isolation: isolate;
background: linear-gradient(120deg, #cbd4d4 0%, #a8bdc1 45%, #759ca5 100%);
color: #fff;
font-family: var(--font-ui, "Montserrat", Arial, sans-serif);
}
body:not([data-page="home"]) .nk-hero.nk-hero-rebuilt::before {
content: "";
position: absolute;
z-index: -4;
inset: 0;
background: linear-gradient(90deg, rgba(5, 15, 20, .28), rgba(5, 15, 20, .03) 48%, rgba(5, 15, 20, .1));
animation: none;
}
.motion-v2 body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-title {
max-width: 760px;
margin: 0;
color: #fff;
font-size: var(--fs-h1);
font-weight: 600;
line-height: var(--lh-h1);
letter-spacing: var(--ls-h1);
text-wrap: initial;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-glass-card {
width: min(860px, 62vw);
padding: clamp(38px, 3.6vw, 58px);
}
body:not([data-page="home"]) .nk-hero-service-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 24px;
}
body:not([data-page="home"]) .nk-hero-service-links .nk-hero-button {
min-width: 0;
min-height: 46px;
gap: 12px;
padding: 7px 8px 7px 16px;
}
body:not([data-page="home"]) .nk-hero-service-links .nk-hero-button-arrow {
width: 30px;
height: 30px;
flex: 0 0 30px;
font-size: 13px;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-meta {
margin-top: 24px;
}
@media (max-width: 1100px) {
body:not([data-page="home"]) {
--nk-home-container: 1060px;
--nk-home-gutter: 32px;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-glass-card {
width: min(700px, 68vw);
}
.motion-v2 body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-title {
font-size: clamp(36px, 4vw, 48px);
}
}
@media (max-width: 780px) {
body:not([data-page="home"]) {
--nk-home-container: 100%;
--nk-home-gutter: 16px;
--nk-home-edge: 16px;
}
body:not([data-page="home"]) .nk-hero.nk-hero-rebuilt,
body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-stage {
min-height: auto;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-stage {
padding: 96px 0 48px;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-glass-card {
width: 100%;
padding: 28px 18px;
}
.motion-v2 body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-title {
font-size: clamp(42px, 12vw, 58px);
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-description {
margin-top: 18px;
}
body:not([data-page="home"]) .nk-hero-service-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin-top: 20px;
}
body:not([data-page="home"]) .nk-hero-service-links .nk-hero-button {
min-height: 44px;
padding-left: 12px;
font-size: 10px;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-meta {
margin-top: 20px;
}
body:not([data-page="home"]) .nk-hero-rebuilt .nk-hero-scroll {
display: none;
}
}
.nk-sub-hero-card h1,
.nk-sub-copy h2,
.nk-sub-service-copy h2,
.nk-sub-service-copy h3,
.nk-sub-head h2,
.nk-sub-contact h2,
.nk-sub-cta h2 {
text-wrap: balance;
}
.nk-sub-hero-card h1 {
max-width: 13ch;
}
.nk-sub-hero--about .nk-sub-hero-card h1 {
max-width: 18ch;
}
.nk-sub-lead {
max-width: 60ch;
text-wrap: pretty;
}
body:not([data-page="home"]) .toast:not(.show) {
opacity: 0;
pointer-events: none;
transform: translateY(110%);
}
body:not([data-page="home"]) .header,
body:not([data-page="home"]) .header.scrolled {
min-height: 0;
padding: 1.35rem 2rem 1.35rem max(3rem, calc((100% - 87.5rem) / 2));
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
} body:not([data-page="home"]) .header.scrolled {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
body:not([data-page="home"]) .brand-text,
body:not([data-page="home"]) .desktop-nav,
body:not([data-page="home"]) .request-btn {
display: none;
}
body:not([data-page="home"]) .header-actions {
justify-self: end;
}
body:not([data-page="home"]) .brand {
position: relative;
width: min(20.625rem, calc(100vw - 7.375rem));
height: 4.75rem;
min-width: 0;
padding: 0;
overflow: visible;
background: transparent;
box-shadow: none;
isolation: isolate;
}
body:not([data-page="home"]) .brand::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 auto 0 0;
width: 6.5rem;
border: 1px solid rgba(255, 255, 255, .76);
border-radius: 2px;
background: rgba(255, 255, 255, .98);
box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
transform-origin: left center;
transition: opacity 220ms ease, transform 520ms var(--nk-ease-out), visibility 0s linear;
}
body:not([data-page="home"]) .brand-logo-swap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
body:not([data-page="home"]) .brand-logo-swap img {
position: absolute;
margin: 0;
object-fit: contain;
transition: opacity 260ms ease, transform 520ms var(--nk-ease-out), visibility 0s linear;
will-change: transform, opacity;
}
body:not([data-page="home"]) .brand-logo-mark,
body:not([data-page="home"]) .header.scrolled .brand-logo-mark {
top: .5625rem;
left: .6875rem;
width: 5.125rem;
height: 3.625rem;
opacity: 1;
visibility: visible;
clip-path: inset(2px 4px round 8px);
transform: scale(1.38);
transform-origin: center;
}
body:not([data-page="home"]) .brand-logo-swap .brand-logo-wordmark,
body:not([data-page="home"]) .header.scrolled .brand-logo-swap .brand-logo-wordmark {
display: block;
top: 50%;
left: .8125rem;
width: 18.75rem;
height: auto;
opacity: 0;
visibility: hidden;
transform: translate3d(-14px, -50%, 0) scale(.965);
transform-origin: left center;
}
body:not([data-page="home"]) .header::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .70));
box-shadow: 0 18px 48px rgba(31, 36, 40, .10), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(255, 255, 255, .46);
backdrop-filter: blur(28px) saturate(178%) contrast(1.03);
-webkit-backdrop-filter: blur(28px) saturate(178%) contrast(1.03);
opacity: 0;
transform: translate3d(0, -16%, 0) scaleY(.97);
transform-origin: top center;
transition: opacity 220ms var(--nk-ease-out), transform 260ms var(--nk-ease-out);
}
body:not([data-page="home"]) .header.scrolled::before {
opacity: 1;
transform: translate3d(0, 0, 0) scaleY(1);
}
body:not([data-page="home"]) .header.scrolled .brand::before {
opacity: 0;
visibility: hidden;
transform: scaleX(1);
transition-delay: 0s, 0s, 220ms;
}
body:not([data-page="home"]) .header.scrolled .brand-logo-mark {
opacity: 0;
visibility: hidden;
transform: translate3d(12px, 0, 0) scale(1.24);
}
body:not([data-page="home"]) .header.scrolled .brand-logo-swap .brand-logo-wordmark {
opacity: 1;
visibility: visible;
transform: translate3d(0, -50%, 0) scale(1);
transition-delay: 90ms;
}
body:not([data-page="home"]) .mk-burger {
right: max(3rem, calc((100% - 87.5rem) / 2));
}
body:not([data-page="home"]) .mk-burger.active {
right: 1.5rem;
}
.motion-side-ready .nk-subpage .nk-side-reveal:not(.nk-side-visible) {
opacity: 0;
will-change: transform, opacity;
}
.motion-side-ready .nk-subpage .nk-side-reveal.nk-from-left:not(.nk-side-visible) {
transform: translate3d(-4rem, 0, 0) scale(.985);
}
.motion-side-ready .nk-subpage .nk-side-reveal.nk-from-right:not(.nk-side-visible) {
transform: translate3d(4rem, 0, 0) scale(.985);
}
.motion-side-ready .nk-subpage .nk-side-reveal.nk-side-visible {
opacity: 1;
transform: none;
will-change: auto;
transition: transform 700ms var(--nk-ease-out), opacity 550ms var(--nk-ease-out), filter 700ms var(--nk-ease-out);
}
.nk-sub-slide img {
transition: transform 700ms var(--nk-ease-out), filter 300ms var(--nk-ease-out);
}
.nk-detail-intro {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(3rem, 7vw, 7rem);
align-items: center;
}
.nk-detail-copy {
max-width: 42rem;
}
.nk-detail-icon {
display: grid;
place-items: center;
width: 4.5rem;
aspect-ratio: 1;
margin-bottom: 2rem;
border-radius: 1rem;
color: var(--nk-accent);
background: color-mix(in srgb, var(--nk-accent) 10%, white);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 42px rgba(44, 57, 63, .08);
}
.nk-detail-icon img {
width: 2.2rem;
height: 2.2rem;
object-fit: contain;
}
.nk-detail-copy>p {
max-width: 64ch;
color: var(--nk-muted);
line-height: 1.8;
}
.nk-detail-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem 2rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.nk-detail-points li {
position: relative;
padding: .85rem 0 .85rem 1.45rem;
color: var(--nk-ink);
border-bottom: 1px solid rgba(21, 24, 27, .1);
}
.nk-detail-points li::before {
content: "";
position: absolute;
left: 0;
top: 1.25rem;
width: .48rem;
height: .48rem;
border-radius: 50%;
background: var(--nk-accent);
}
.nk-detail-media-shell,
.nk-detail-slider-shell {
padding: .45rem;
border-radius: 80px;
background: rgba(21, 24, 27, .06);
box-shadow: 0 24px 70px rgba(30, 47, 56, .12);
}
.nk-detail-media-shell .nk-sub-media,
.nk-detail-slider-shell .nk-sub-slider {
border-radius: 80px;
overflow: hidden;
}
.nk-subpage .nk-sub-slider-track {
transition: transform 260ms var(--nk-ease-move);
}
.nk-detail-process {
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: clamp(3rem, 8vw, 8rem);
align-items: start;
}
.nk-detail-process-copy {
position: sticky;
top: 8.5rem;
}
.nk-detail-process-copy p {
max-width: 48ch;
color: var(--nk-muted);
line-height: 1.75;
}
.nk-detail-process-list {
display: grid;
}
.nk-detail-process-item {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 1.25rem;
padding: 1.65rem 0;
border-bottom: 1px solid rgba(21, 24, 27, .12);
}
.nk-detail-process-item:first-child {
padding-top: 0;
}
.nk-detail-process-item span {
color: var(--nk-accent);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.nk-detail-process-item h3 {
margin: 0 0 .45rem;
font-size: clamp(1.25rem, 2vw, 1.65rem);
}
.nk-detail-process-item p {
margin: 0;
color: var(--nk-muted);
line-height: 1.65;
}
.nk-related-services {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 2.5rem;
}
.nk-related-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 7.5rem;
padding: 1.5rem 1.75rem;
border-radius: 1rem;
color: var(--nk-ink);
background: #fff;
box-shadow: 0 20px 55px rgba(29, 46, 54, .08);
transition: transform 160ms var(--nk-ease-out);
}
.nk-related-link strong {
font-size: clamp(1.15rem, 2vw, 1.55rem);
}
.nk-related-link i {
color: var(--nk-accent);
font-size: 1.3rem;
}
.nk-related-link:active {
transform: scale(.98);
}
.nk-service-page-link {
display: inline-flex;
align-items: center;
gap: .65rem;
margin-top: 1.75rem;
color: var(--nk-ink);
font-weight: 700;
text-decoration: none;
}
.nk-service-page-link i {
color: var(--nk-accent);
transition: transform 180ms var(--nk-ease-out);
}
.nk-service-page-link:focus-visible,
.nk-related-link:focus-visible {
outline: 3px solid rgba(243, 106, 33, .45);
outline-offset: 4px;
}
.nk-service-anchor-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-top: clamp(2.5rem, 6vw, 5rem);
border: 1px solid rgba(21, 24, 27, .1);
border-radius: 1.5rem;
overflow: hidden;
background: rgba(21, 24, 27, .1);
box-shadow: 0 24px 70px rgba(30, 47, 56, .08);
}
.nk-service-anchor-nav a {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .8rem;
min-height: 6rem;
padding: 1.25rem;
color: var(--nk-ink);
background: #fff;
text-decoration: none;
}
.nk-service-anchor-nav span {
color: var(--nk-accent);
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
}
.nk-service-anchor-nav strong {
font-size: clamp(.88rem, 1.2vw, 1rem);
}
.nk-service-anchor-nav i {
color: var(--nk-accent);
}
.nk-service-anchor-nav a:focus-visible {
outline: 3px solid rgba(243, 106, 33, .45);
outline-offset: -4px;
}
.nk-sub-section[id] {
scroll-margin-top: 6.5rem;
}
.nk-services-intro-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(3rem, 7vw, 7rem);
align-items: center;
}
.nk-services-intro-copy {
max-width: none;
}
.nk-services-intro-copy h2 {
max-width: none;
font-size: clamp(2.4rem, 5vw, 5.7rem);
line-height: .94;
letter-spacing: -.06em;
font-weight: 500;
}
.nk-services-intro-copy h2 em {
font-weight: inherit;
}
body[data-page="ueber-uns"] .nk-sub-copy h2 {
line-height: .94;
letter-spacing: -.06em;
font-weight: 500;
}
.nk-services-intro-copy>p {
max-width: 62rem;
margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
font-size: clamp(1rem, 1.15vw, 1.12rem);
}
.nk-services-intro-media {
display: none;
min-height: clamp(30rem, 43vw, 45rem);
overflow: hidden;
border-radius: 2rem;
background: #ebe7e1;
box-shadow: 0 30px 80px rgba(29, 46, 54, .12);
}
.nk-services-intro-media img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
object-position: center;
transition: transform 700ms var(--nk-ease-out);
}
.nk-team-roster {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: stretch;
}
.nk-team-roster-media {
min-height: 36rem;
border-radius: 80px;
overflow: hidden;
}
.nk-team-roster-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nk-team-roster-copy {
align-self: center;
}
.nk-team-roster-copy p {
color: var(--nk-muted);
line-height: 1.8;
}
.nk-project-intro {
max-width: 52rem;
margin-bottom: clamp(3rem, 7vw, 6rem);
}
.nk-project-intro p {
max-width: 62ch;
color: var(--nk-muted);
line-height: 1.8;
}
.nk-form-status {
grid-column: 1 / -1;
min-height: 1.5rem;
margin: .5rem 0 0;
color: var(--nk-muted);
font-size: .9rem;
}
@media (hover: hover) and (pointer: fine) {
.nk-related-link:hover {
transform: translateY(-3px);
}
.nk-service-page-link:hover i {
transform: translateX(4px);
}
.nk-service-anchor-nav a:hover {
background: color-mix(in srgb, var(--nk-accent) 6%, white);
}
.nk-services-intro-media:hover img {
transform: scale(1.025);
}
.nk-detail-slider-shell:hover .nk-sub-slide img {
transform: scale(1.035);
}
}
@media (max-width: 1180px) {
body:not([data-page="home"]) .header,
body:not([data-page="home"]) .header.scrolled {
padding-left: max(2rem, calc((100% - 66.25rem) / 2));
}
body:not([data-page="home"]) .mk-burger {
right: max(2rem, calc((100% - 66.25rem) / 2));
}
}
@media (max-width: 920px) {
body:not([data-page="home"]) .header,
body:not([data-page="home"]) .header.scrolled {
padding-left: max(1.5rem, calc((100% - 47.5rem) / 2));
}
body:not([data-page="home"]) .mk-burger {
right: max(1.5rem, calc((100% - 47.5rem) / 2));
}
}
@media (max-width: 900px) {
.nk-detail-intro,
.nk-detail-process,
.nk-team-roster,
.nk-services-intro-layout,
.nk-sub-service-showcase--media-left {
grid-template-columns: 1fr;
}
.nk-services-intro-copy h2 {
max-width: none;
font-size: clamp(2.4rem, 5vw, 5.7rem);
}
.nk-services-intro-media {
min-height: clamp(27rem, 70vw, 38rem);
}
.nk-sub-service-showcase--media-left .nk-sub-service-copy {
order: 1;
}
.nk-sub-service-showcase--media-left .nk-detail-slider-shell {
order: 2;
}
.nk-service-anchor-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nk-detail-process-copy {
position: static;
}
.nk-team-roster-media {
min-height: 28rem;
}
}
@media (max-width: 640px) {
body:not([data-page="home"]) .header,
body:not([data-page="home"]) .header.scrolled {
padding-left: 1rem;
}
body:not([data-page="home"]) .mk-burger {
right: 1rem;
}
body:not([data-page="home"]) .brand {
width: min(14.875rem, calc(100vw - 5.125rem));
height: 3.1875rem;
}
body:not([data-page="home"]) .brand::before {
width: 4.5rem;
}
body:not([data-page="home"]) .brand-logo-mark,
body:not([data-page="home"]) .header.scrolled .brand-logo-mark {
top: .3125rem;
left: .4375rem;
width: 3.625rem;
height: 2.5rem;
transform: scale(1.42);
}
body:not([data-page="home"]) .brand-logo-swap .brand-logo-wordmark,
body:not([data-page="home"]) .header.scrolled .brand-logo-swap .brand-logo-wordmark {
left: .5625rem;
width: 13.5rem;
}
.nk-sub-hero--about .nk-sub-hero-card h1 {
max-width: 13ch;
}
.nk-detail-points,
.nk-related-services {
grid-template-columns: 1fr;
}
.nk-detail-media-shell,
.nk-detail-slider-shell {
border-radius: 80px;
}
.nk-detail-media-shell .nk-sub-media,
.nk-detail-slider-shell .nk-sub-slider {
border-radius: 80px;
}
.nk-team-roster-media {
min-height: 22rem;
border-radius: 80px;
}
.nk-services-intro-copy h2 {
font-size: clamp(2.4rem, 5vw, 5.7rem);
}
.nk-services-intro-media {
min-height: 22rem;
border-radius: 80px;
}
.nk-related-link {
min-height: 6rem;
}
.nk-service-anchor-nav {
grid-template-columns: 1fr;
}
.nk-service-anchor-nav a {
min-height: 4.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
body:not([data-page="home"]) .header::before,
body:not([data-page="home"]) .brand::before,
body:not([data-page="home"]) .brand-logo-swap img,
.motion-side-ready .nk-subpage .nk-side-reveal,
.nk-services-intro-media img,
.nk-sub-slide img {
transition: opacity 160ms var(--nk-ease-out) !important;
transform: none !important;
}
.nk-related-link,
.nk-service-page-link i {
transition-duration: 120ms;
transform: none !important;
}
} body:not([data-page="home"]) .nk-section-label,
body:not([data-page="home"]) .nk-sub-eyebrow {
position: relative;
display: flex;
align-items: center;
gap: 1.8rem;
margin: 0 0 var(--space-eyebrow-gap);
color: #f36a21;
font-size: var(--fs-eyebrow);
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
}
body:not([data-page="home"]) .nk-section-label::after,
body:not([data-page="home"]) .nk-sub-eyebrow::after {
content: "";
width: 7rem;
height: 1px;
background: rgba(243, 106, 33, .72);
}
@media (max-width: 780px) {
body:not([data-page="home"]) .nk-section-label,
body:not([data-page="home"]) .nk-sub-eyebrow {
margin-bottom: 2.2rem;
font-size: .68rem;
}
body:not([data-page="home"]) .nk-section-label::after,
body:not([data-page="home"]) .nk-sub-eyebrow::after {
width: 4rem;
}
.nk-team-grid-head .nk-section-label::before,
.nk-work-head-copy .nk-section-label::before {
width: 4rem;
}
}