main > .breadcrumbs,
.service-hero__crumbs,
main > section > .container {
padding-inline: calc(var(--container-padding) + var(--content-inset));
}
main h2 {
font-size: clamp(2rem, 0.4rem + 3.7vw, 3.75rem);
font-weight: var(--font-weight-regular);
}
.section__intro {
max-width: none;
}
.section__intro > p {
max-width: 42rem;
margin-top: var(--space-4);
}
.service-faq .section__intro,
.sk-faq .section__intro {
text-align: center;
}
.service-hero__lead,
.service-hero__point,
.section__intro > p,
.service-risk__text,
.service-risk__outro,
.service-contrast__problem,
.service-contrast__side--new p,
.service-flow__step > p,
.service-flow__step h3,
.service-highlight > p,
.service-compare__answer,
.service-panel__fact dd,
.service-decision__text > p,
.service-cases__card p,
.service-cases__proof-text,
.service-konzept__text,
.service-konzept__proof,
.service-price__factors li,
.service-price__hint,
.service-contact__body,
.service-contact__certs-list li {
-webkit-hyphens: none;
hyphens: none;
}
.service-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 500;
text-decoration: none;
color: var(--color-accent);
}
.service-link__label {
border-bottom: 1px solid rgb(61 154 211 / 0.4);
padding-bottom: 2px;
}
.service-link__arrow {
width: 0.85em;
height: 0.85em;
fill: none;
stroke: currentColor;
transition: transform var(--duration-base) var(--easing-premium);
}
.service-link:hover,
.service-link:focus-visible {
color: var(--color-white);
}
.service-link:hover .service-link__label,
.service-link:focus-visible .service-link__label {
border-bottom-color: var(--color-white);
}
.service-link:hover .service-link__arrow,
.service-link:focus-visible .service-link__arrow {
transform: rotate(45deg);
}
.service-hero {
position: relative;
overflow: hidden;
padding-block: var(--space-8) var(--space-9);
}
.service-hero--bleed {
--service-hero-overlap: 6rem;
--service-hero-header-h: 5rem;
--service-hero-band-h: 200px;
--service-hero-screen-h: calc(
100svh + var(--service-hero-overlap) - var(--service-hero-header-h)
);
--service-hero-tall-h: calc(
max(var(--service-hero-screen-h), calc(100vw * 1118 / 1621)) +
var(--service-hero-band-h)
);
min-height: calc(
(var(--service-hero-screen-h) + var(--service-hero-tall-h)) / 2
);
margin-top: calc(-1 * var(--service-hero-overlap));
padding-block: calc(var(--space-8) + var(--service-hero-overlap)) var(--space-9);
}
@media (max-width: 767.98px) {
.service-hero--bleed {
padding-top: calc(var(--space-7) + var(--service-hero-overlap));
}
.service-hero--bleed .service-hero__crumbs + .service-hero__grid {
margin-top: var(--space-10);
}
}
.service-hero__crumbs {
position: relative;
z-index: 1;
}
.service-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.service-hero__bg picture {
display: block;
width: 100%;
height: 100%;
}
.service-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 55% 42%;
}
.service-hero__bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(
to right,
rgb(1 1 1 / 0.86) 0%,
rgb(1 1 1 / 0.64) 34%,
rgb(1 1 1 / 0.16) 68%,
rgb(1 1 1 / 0) 100%
),
linear-gradient(
to bottom,
rgb(1 1 1 / 0.22) 0%,
rgb(1 1 1 / 0) 16%,
rgb(1 1 1 / 0) 74%,
rgb(1 1 1 / 0.4) 100%
);
}
.service-hero--bleed .service-hero__bg::after {
background-image:
linear-gradient(
to right,
rgb(1 1 1 / 0.86) 0%,
rgb(1 1 1 / 0.64) 34%,
rgb(1 1 1 / 0.16) 68%,
rgb(1 1 1 / 0) 100%
),
linear-gradient(
to bottom,
rgb(1 1 1 / 0) 74%,
rgb(1 1 1 / 0.4) 100%
),
linear-gradient(
to bottom,
rgb(1 1 1 / 0.62) 0,
rgb(1 1 1 / 0.28) var(--service-hero-overlap),
rgb(1 1 1 / 0) calc(var(--service-hero-overlap) * 2)
);
}
.service-hero__grid {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-8);
align-items: center;
}
.service-hero__content {
max-width: 44rem;
}
.service-hero h1 {
font-size: clamp(2rem, 1.6rem + 2.2vw, 3.25rem);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
}
.service-hero__lead {
margin-top: var(--space-5);
max-width: 32rem;
font-size: var(--font-size-md);
color: rgb(255 255 255 / 0.82);
line-height: 1.5;
}
.service-hero__points {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-5);
padding: 0;
font-size: var(--font-size-sm);
color: var(--color-white);
}
.service-hero__point {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.service-hero__point-icon,
.service-scope__tick,
.service-price__tick {
flex-shrink: 0;
width: 1.05em;
height: 1.05em;
margin-top: 0.25em;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-hero__point-icon {
width: 1.125rem;
height: 1.125rem;
margin-top: 0;
color: var(--color-blue-light);
stroke-width: 2.25;
}
.service-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-6);
}
.service-hero__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-5);
margin-top: var(--space-6);
}
.service-hero__badges {
display: flex;
align-items: center;
gap: var(--space-4);
}
.service-hero__seal {
height: 2.75rem;
width: auto;
}
.service-flow__frame picture {
display: block;
width: 100%;
height: 100%;
}
@media (min-width: 1024px) {
.service-hero {
min-height: calc(100svh - 8rem);
padding-block: var(--space-7);
display: grid;
align-content: center;
}
.service-hero--bleed {
min-height: calc(
(var(--service-hero-screen-h) + var(--service-hero-tall-h)) / 2
);
padding-block: calc(var(--space-3) + var(--service-hero-overlap)) var(--space-7);
display: grid;
grid-template-rows: auto 1fr;
align-content: stretch;
}
.service-hero--bleed .service-hero__grid {
align-self: start;
min-height: calc(var(--service-hero-screen-h) - 11rem);
align-content: center;
}
.service-hero__grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 1023.98px) {
.service-hero--bleed {
display: grid;
grid-template-rows: auto 1fr;
align-content: stretch;
}
.service-hero--bleed .service-hero__grid {
align-self: end;
margin-bottom: var(--service-hero-band-h);
}
}
.service-risk {
--nav-surface: var(--surface-navy);
background-color: var(--surface-navy);
background-image:
linear-gradient(
to bottom,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 150px,
rgb(61 154 211 / 0) 340px
),
linear-gradient(
to top,
rgb(61 154 211 / 0.38) 0,
rgb(61 154 211 / 0.16) 150px,
rgb(61 154 211 / 0) 340px
);
color: var(--color-white);
}
.service-risk__lede {
margin-top: var(--space-4);
}
.service-risk__grid {
list-style: none;
display: grid;
gap: var(--space-5);
}
.service-risk__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"num title"
"art art"
"text text";
align-items: center;
gap: 0 var(--space-4);
padding: var(--space-5);
background-color: var(--surface-navy);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.service-risk__num {
grid-area: num;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--color-border);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
color: var(--color-accent);
}
.service-risk__title {
grid-area: title;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.service-risk__art {
grid-area: art;
margin: var(--space-5) 0 0;
padding-block: var(--space-4);
padding-inline: var(--space-6);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.rz-art {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 16 / 10;
}
.rz-line {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.rz-accent {
fill: none;
stroke: var(--color-accent);
stroke-width: 1.7;
stroke-linejoin: round;
stroke-linecap: round;
}
.rz-guide {
fill: none;
stroke: var(--color-border-strong);
stroke-width: 1;
stroke-dasharray: 5 6;
}
.bs-vergleich {
display: grid;
gap: var(--space-5);
margin-top: var(--space-7);
text-align: start;
}
@media (min-width: 700px) {
.bs-vergleich {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
}
.bs-karte {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: var(--space-6);
overflow: hidden;
border-radius: var(--radius-xl);
border: 1px solid rgb(1 1 1 / 0.07);
background-color: var(--color-white);
box-shadow: 0 18px 48px rgb(1 1 1 / 0.07), 0 2px 6px rgb(1 1 1 / 0.04);
}
.bs-karte--wir::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background-color: var(--color-accent);
}
.bs-karte__icon {
width: 2.5rem;
height: 2.5rem;
margin-bottom: var(--space-5);
fill: none;
stroke: currentColor;
stroke-width: 1.05;
stroke-linecap: round;
stroke-linejoin: round;
}
.bs-karte--wir .bs-karte__icon {
color: var(--color-accent);
}
.bs-karte--nicht .bs-karte__icon {
color: var(--color-text-muted);
}
.bs-karte__label {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
-webkit-hyphens: manual;
hyphens: manual;
}
.bs-karte__these {
margin: var(--space-2) 0 0;
font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
font-weight: var(--font-weight-regular);
line-height: 1.1;
letter-spacing: -0.01em;
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.bs-karte--nicht .bs-karte__these {
color: var(--color-text);
}
.bs-karte__liste {
margin: var(--space-5) 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-3);
}
.bs-karte__liste li {
position: relative;
padding-left: var(--space-5);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
-webkit-hyphens: none;
hyphens: none;
}
.bs-karte--wir .bs-karte__liste li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 0.55rem;
height: 0.3rem;
border-left: 2px solid var(--color-accent);
border-bottom: 2px solid var(--color-accent);
transform: rotate(-45deg);
}
.bs-karte--nicht .bs-karte__liste li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 0.6rem;
height: 1px;
background-color: var(--color-border-strong);
}
.bs-karte__fuss {
margin: auto 0 0;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
-webkit-hyphens: manual;
hyphens: manual;
}
.bs-karte--nicht .bs-karte__fuss {
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
}
.rz-art--supplied {
display: block;
width: 100%;
height: 100%;
}
.rz-art--supplied--inset {
transform: scale(0.74);
}
.service-risk__text {
grid-area: text;
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.service-risk__outro {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
max-width: 46rem;
font-size: var(--font-size-md);
}
@media (min-width: 900px) {
.service-risk__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.service-risk__item {
padding: var(--space-6);
}
}
.service-contrast__intro {
max-width: none;
margin-bottom: 2.5rem;
}
.service-contrast__intro h2 {
font-size: clamp(1.75rem, 0.7rem + 2.4vw, 3rem);
max-width: 30ch;
text-wrap: balance;
}
.service-contrast__intro > p {
max-width: 40rem;
color: rgb(255 255 255 / 0.82);
}
.service-contrast {
--contrast-panel-lead: 1.25rem;
--contrast-frame-box: 1px;
--contrast-frame-w: 0.5px;
}
.service-contrast__set {
display: flex;
flex-direction: column;
gap: 0;
}
.service-contrast__head {
display: none;
}
.service-contrast__module {
position: relative;
display: grid;
gap: var(--space-4);
padding-block: 2.5rem;
border-top: 1px solid var(--color-border);
}
.service-contrast__topic {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin-bottom: 1.25rem;
}
.service-contrast__num {
font-size: clamp(1.125rem, 0.9rem + 0.4vw, 1.375rem);
font-weight: var(--font-weight-medium, 500);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--color-accent);
}
.service-contrast__topic-label {
font-size: clamp(0.9375rem, 0.82rem + 0.22vw, 1.0625rem);
font-weight: var(--font-weight-medium, 500);
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgb(255 255 255 / 0.95);
}
.service-contrast__label,
.service-contrast__head-cell {
font-size: clamp(1.25rem, 1rem + 0.62vw, 1.5625rem);
font-weight: var(--font-weight-medium, 500);
letter-spacing: 0.005em;
line-height: 1.3;
margin-bottom: var(--space-3);
}
.service-contrast__head--masked .service-contrast__head-cell {
overflow: hidden;
padding-bottom: 0.12em;
}
.service-contrast__head-inner {
display: block;
will-change: transform;
}
.service-contrast__label--old,
.service-contrast__head-cell--old {
color: rgb(255 255 255 / 0.78);
}
.service-contrast__label--new,
.service-contrast__head-cell--new {
color: var(--color-accent);
}
.service-contrast__problem {
color: rgb(255 255 255 / 0.86);
font-size: clamp(1.0625rem, 0.9rem + 0.28vw, 1.1875rem);
line-height: 1.5;
}
.service-contrast__cue {
display: flex;
align-items: center;
justify-content: center;
min-height: 3.5rem;
}
.service-contrast__arrow {
width: 3.5rem;
height: auto;
overflow: visible;
stroke: var(--color-accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(90deg);
}
.service-contrast__side--new {
position: relative;
padding: 1rem var(--contrast-panel-lead);
border: var(--contrast-frame-box) solid var(--color-accent);
border-radius: var(--radius-md);
background-color: rgb(255 255 255 / 0.035);
}
.service-contrast__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
overflow: visible;
pointer-events: none;
}
.service-contrast__frame rect {
fill: none;
stroke: var(--color-accent);
stroke-width: var(--contrast-frame-w);
stroke-linejoin: round;
}
.service-contrast__side--new h3 {
font-size: clamp(0.9375rem, 0.82rem + 0.22vw, 1.0625rem);
font-weight: var(--font-weight-medium, 500);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
color: var(--color-accent);
margin-bottom: 0.75rem;
max-width: 56ch;
}
.service-contrast__side--new > p:last-child {
color: rgb(255 255 255 / 0.9);
font-size: clamp(1.0625rem, 0.88rem + 0.32vw, 1.1875rem);
line-height: 1.55;
max-width: 56ch;
}
.service-contrast__mark {
background-image: linear-gradient(
color-mix(in srgb, var(--color-blue-dark) 85%, var(--color-logo-black)),
color-mix(in srgb, var(--color-blue-dark) 85%, var(--color-logo-black))
);
background-repeat: no-repeat;
background-position: left center;
background-size: 100% 100%;
padding-inline: 0.14em;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: var(--color-white);
}
.service-contrast--live .service-contrast__mark {
background-size: calc(var(--mark, 0) * 100%) 100%;
}
.service-contrast--live .service-contrast__side--new {
border-color: transparent;
}
.service-contrast--live .service-contrast__module {
opacity: 0;
transform: translateY(16px);
transition:
opacity var(--duration-slow) var(--easing-premium),
transform var(--duration-slow) var(--easing-premium);
}
.service-contrast--live .service-contrast__module.is-in {
opacity: 1;
transform: none;
}
@media (min-width: 900px) {
.service-contrast__head,
.service-contrast__module {
grid-template-columns: minmax(0, 33fr) minmax(0, 8fr) minmax(0, 59fr);
}
.service-contrast__head {
display: grid;
column-gap: var(--space-5);
align-items: end;
padding-bottom: var(--space-4);
}
.service-contrast__head-cell {
margin-bottom: 0;
}
.service-contrast__head-cell--old { grid-column: 1; }
.service-contrast__head-cell--new {
grid-column: 3;
padding-left: calc(var(--contrast-frame-box) + var(--contrast-panel-lead));
}
.service-contrast__module {
column-gap: var(--space-5);
align-items: center;
padding-block: 2.125rem;
}
.service-contrast__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.service-contrast__arrow {
width: min(100%, 6rem);
transform: none;
}
.service-contrast__cue {
min-height: 0;
}
}
.service-flow {
display: grid;
gap: var(--space-7);
--flow-page-lead: calc(
max(var(--container-padding), (100% - var(--container-max-width)) / 2 + var(--container-padding))
+ var(--content-inset)
);
padding-inline: var(--flow-page-lead);
}
.service-flow__col,
.service-flow__steps,
.service-flow__steps-inner,
.service-flow__media {
display: contents;
}
.service-flow__intro {
margin-bottom: 0;
}
.service-flow__step {
max-width: 34rem;
}
.service-flow__step h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
}
.service-flow__step > p:last-child {
margin-top: var(--space-3);
color: var(--color-text-muted);
}
.service-flow__outline {
display: none;
}
.service-flow__frame {
margin: 0;
overflow: hidden;
background-color: var(--color-bg-subtle);
aspect-ratio: 3 / 2;
max-width: 40rem;
}
.service-flow__frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.service-flow__step:nth-child(1) { order: 1; }
.service-flow__media > :nth-child(1) { order: 2; }
.service-flow__step:nth-child(2) { order: 3; }
.service-flow__media > :nth-child(2) { order: 4; }
.service-flow__step:nth-child(3) { order: 5; }
.service-flow__media > :nth-child(3) { order: 6; }
.service-flow__step:nth-child(4) { order: 7; }
.service-flow__media > :nth-child(4) { order: 8; }
.service-flow__step:nth-child(5) { order: 9; }
.service-flow__media > :nth-child(5) { order: 10; }
.service-flow__step:nth-child(6) { order: 11; }
.service-flow__media > :nth-child(6) { order: 12; }
@media (min-width: 1152px) and (prefers-reduced-motion: no-preference) {
.service-flow--stepped {
padding-inline: 0;
grid-template-columns: var(--flow-page-lead) minmax(0, 1fr) 50%;
gap: 0;
align-items: start;
--flow-top: 5rem;
--flow-h: calc(100svh - var(--flow-top));
--flow-step-scroll: 72svh;
min-height: calc(6 * var(--flow-step-scroll) + var(--flow-h));
}
.service-flow--stepped .service-flow__col,
.service-flow--stepped .service-flow__steps,
.service-flow--stepped .service-flow__steps-inner,
.service-flow--stepped .service-flow__media {
display: block;
}
.service-flow--stepped .service-flow__col {
grid-column: 2;
position: sticky;
top: var(--flow-top);
height: var(--flow-h);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-inline-end: clamp(2.5rem, 4.5vw, 5rem);
padding-block: clamp(1.75rem, 4vh, 3.25rem);
}
.service-flow--stepped .service-flow__intro {
margin-bottom: clamp(1rem, 2.2vh, 1.75rem);
flex: 0 0 auto;
}
.service-flow--stepped .service-flow__intro h2 {
font-size: clamp(1.6rem, 0.55rem + 1.55vw, 2.5rem);
max-width: 22ch;
}
.service-flow--stepped .service-flow__steps {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.service-flow--stepped .service-flow__steps-inner {
transition: transform var(--duration-slower) var(--easing-premium);
}
.service-flow--stepped .service-flow__steps.is-shifted {
mask-image: linear-gradient(to bottom, transparent 0, #000 2.25rem, #000 100%);
}
.service-flow--stepped .service-flow__step {
min-height: 0;
max-width: 34rem;
padding: clamp(0.55rem, 1.15vh, 0.9rem) var(--space-4);
border-radius: var(--radius-md);
background-color: var(--color-white);
box-shadow: 0 10px 26px rgb(1 1 1 / 0.06), 0 1px 3px rgb(1 1 1 / 0.04);
position: relative;
transition:
opacity var(--duration-slow) var(--easing-premium),
transform var(--duration-slow) var(--easing-premium),
box-shadow var(--duration-base) var(--easing-premium),
color var(--duration-base) var(--easing-standard);
}
.service-flow--stepped .service-flow__steps-inner {
display: grid;
gap: var(--space-3);
}
.service-flow--stepped .service-flow__outline {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
.service-flow--stepped .service-flow__outline rect {
x: 0.5px;
y: 0.5px;
width: calc(100% - 1px);
height: calc(100% - 1px);
rx: var(--radius-md);
fill: none;
stroke: var(--color-blue-light);
stroke-width: 1;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.65s var(--easing-standard);
}
.service-flow--stepped .service-flow__step h3 {
font-size: 1.5rem;
color: var(--color-text);
display: block;
transition: color var(--duration-base) var(--easing-standard);
}
.service-flow--stepped .service-flow__step-title {
background-image: linear-gradient(
var(--color-blue-light),
var(--color-blue-light)
);
background-repeat: no-repeat;
background-position: left center;
background-size: 0 100%;
padding-inline: 0.22em;
margin-inline: -0.22em;
border-radius: var(--radius-sm);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition:
background-size var(--duration-base) var(--easing-premium),
color 60ms var(--easing-standard) 0s;
}
.service-flow--stepped .service-flow__step > p:last-child {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.service-flow--stepped .service-flow__step {
opacity: 0.18;
transform: translateY(14px);
}
.service-flow--stepped .service-flow__step.is-past {
opacity: 0.72;
transform: none;
}
.service-flow--stepped .service-flow__step.is-active {
opacity: 1;
transform: none;
box-shadow: 0 16px 36px rgb(1 1 1 / 0.10), 0 2px 6px rgb(1 1 1 / 0.05);
}
.service-flow--stepped .service-flow__step.is-active .service-flow__step-title {
background-size: 100% 100%;
color: var(--color-white);
transition-delay: 0s, 150ms;
}
.service-flow--stepped .service-flow__step.is-active .service-flow__outline rect {
stroke-dashoffset: 0;
}
.service-flow--stepped .service-flow__media {
grid-column: 3;
position: sticky;
top: var(--flow-top);
height: var(--flow-h);
}
.service-flow--stepped .service-flow__frame {
position: absolute;
inset: clamp(1.25rem, 3vh, 2rem) clamp(2rem, 4.5vw, 4.5rem)
clamp(1.25rem, 3vh, 2rem) clamp(1.25rem, 2.5vw, 2.5rem);
aspect-ratio: auto;
max-width: none;
}
.service-flow--stepped .service-flow__media > :nth-child(1) { z-index: 6; }
.service-flow--stepped .service-flow__media > :nth-child(2) { z-index: 5; }
.service-flow--stepped .service-flow__media > :nth-child(3) { z-index: 4; }
.service-flow--stepped .service-flow__media > :nth-child(4) { z-index: 3; }
.service-flow--stepped .service-flow__media > :nth-child(5) { z-index: 2; }
.service-flow--stepped .service-flow__media > :nth-child(6) { z-index: 1; }
}
.service-compare .section__intro {
max-width: 52rem;
margin-inline: auto;
text-align: center;
}
.service-compare__answer {
max-width: 36rem;
margin-inline: auto;
}
.service-compare__panels {
display: grid;
gap: var(--space-5);
max-width: 68rem;
margin-inline: auto;
}
.service-panel {
display: flex;
flex-direction: column;
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.service-panel--primary {
background-color: var(--color-bg-subtle);
border-color: rgb(61 154 211 / 0.35);
border-top: 2px solid var(--color-accent);
}
.service-panel--secondary {
background-color: transparent;
}
.service-panel__label {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.service-panel--primary .service-panel__label {
color: var(--color-accent);
}
.service-panel__icon {
width: 1.15rem;
height: 1.15rem;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-panel__title {
margin-top: var(--space-4);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-regular);
}
.service-panel__facts {
margin: var(--space-5) 0 0;
border-top: 1px solid var(--color-border);
}
.service-panel__fact {
display: grid;
gap: var(--space-1);
padding-block: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.service-panel__fact dt {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgb(255 255 255 / 0.5);
}
.service-panel__fact dd {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text);
}
.service-panel__cta {
margin-top: auto;
align-self: start;
}
.service-panel .service-panel__cta {
margin-top: var(--space-6);
}
.service-panel__cta--quiet {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid var(--color-border-strong);
padding-bottom: 2px;
}
.service-panel__cta-arrow {
width: 0.85em;
height: 0.85em;
transition: transform var(--duration-base) var(--easing-premium);
}
.service-panel__cta--quiet:hover,
.service-panel__cta--quiet:focus-visible {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.service-panel__cta--quiet:hover .service-panel__cta-arrow,
.service-panel__cta--quiet:focus-visible .service-panel__cta-arrow {
transform: rotate(45deg);
}
.service-decision {
display: grid;
gap: var(--space-5);
max-width: 68rem;
margin-inline: auto;
margin-top: var(--space-7);
padding: var(--space-6);
border: 1px solid rgb(61 154 211 / 0.3);
border-radius: var(--radius-md);
background-color: var(--color-accent-subtle);
}
.service-decision__heading {
font-size: var(--font-size-md);
}
.service-decision__text > p {
margin-top: var(--space-2);
max-width: 40rem;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.service-decision__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-6);
}
.service-decision__link {
font-size: var(--font-size-sm);
}
@media (min-width: 900px) {
.service-compare__panels {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.service-panel {
padding: var(--space-7);
}
.service-decision {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-7);
padding: var(--space-6) var(--space-7);
}
.service-decision__actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
}
.service-cases .section__intro {
max-width: 52rem;
margin-inline: auto;
text-align: center;
}
.service-cases__grid {
list-style: none;
display: grid;
gap: var(--space-6);
}
.service-cases__card {
display: grid;
gap: var(--space-5);
align-content: start;
padding: var(--space-6);
border-radius: var(--radius-xl);
border: 1px solid rgb(1 1 1 / 0.07);
background-color: var(--color-white);
transform: translateY(var(--card-y, 0px)) scale(var(--card-s, 1));
box-shadow: 0 18px 48px rgb(1 1 1 / 0.07), 0 2px 6px rgb(1 1 1 / 0.04);
transition: transform var(--duration-base) var(--easing-premium),
box-shadow var(--duration-base) var(--easing-premium),
border-color var(--duration-base) var(--easing-premium);
}
.service-cases__art {
height: clamp(10rem, 17vw, 15.5rem);
}
.service-cases__scene {
display: block;
width: 100%;
height: 100%;
color: rgb(1 1 1 / 0.82);
}
.service-cases__scene :is(path, rect, circle, ellipse, line, polyline, polygon) {
stroke-width: 4;
}
.service-cases__text {
display: grid;
}
.service-cases__number {
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium, 500);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
color: var(--color-blue-light);
}
.service-cases__card h3 {
font-size: clamp(1.375rem, 1.05rem + 0.65vw, 1.75rem);
font-weight: var(--font-weight-medium, 500);
line-height: 1.25;
}
.service-cases__card p {
margin-top: var(--space-3);
color: var(--color-text-muted);
font-size: var(--font-size-base);
line-height: 1.6;
}
.service-cases__grid--live .service-cases__card {
opacity: 0;
}
@media (min-width: 900px) {
.service-cases__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-7) var(--space-6);
}
.service-cases__card {
padding: var(--space-7);
}
.service-cases__card:nth-child(even) {
transform: translateY(calc(28px + var(--card-y, 0px))) scale(var(--card-s, 1));
}
.service-cases__card:hover {
transform: translateY(calc(-5px + var(--card-y, 0px))) scale(var(--card-s, 1));
border-color: rgb(61 154 211 / 0.35);
box-shadow: 0 24px 60px rgb(1 1 1 / 0.10), 0 3px 10px rgb(1 1 1 / 0.05);
}
.service-cases__card:nth-child(even):hover {
transform: translateY(calc(23px + var(--card-y, 0px))) scale(var(--card-s, 1));
}
}
@media (min-width: 1100px) {
.service-cases__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.service-cases__card {
padding: var(--space-5);
}
.service-cases__card:nth-child(even),
.service-cases__card {
transform: translateY(var(--card-y, 0px)) scale(var(--card-s, 1));
}
.service-cases__card:hover,
.service-cases__card:nth-child(even):hover {
transform: translateY(calc(-5px + var(--card-y, 0px))) scale(var(--card-s, 1));
}
.service-cases__art {
height: clamp(7.5rem, 11vw, 11rem);
}
.service-cases__card h3 {
font-size: clamp(1.0625rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 1.3;
}
.service-cases__card p {
font-size: var(--font-size-sm);
line-height: 1.55;
}
}
.service-cases__proof {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5) var(--space-8);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.service-cases__proof-text {
flex: 1 1 22rem;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.service-cases__logos {
display: flex;
align-items: center;
gap: var(--space-6);
}
.service-cases__logo {
height: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
max-width: 8.5rem;
width: auto;
object-fit: contain;
opacity: 0.85;
}
.service-konzept__inner {
text-align: center;
}
.service-konzept__intro {
margin-inline: auto;
margin-bottom: var(--space-8);
}
.service-konzept__intro h2 {
max-width: 24ch;
margin-inline: auto;
text-wrap: balance;
}
.service-konzept .section__intro > p {
max-width: 60ch;
margin-inline: auto;
color: rgb(255 255 255 / 0.82);
}
.service-konzept__steps {
list-style: none;
padding: 0;
margin: 0 0 var(--space-8);
display: grid;
gap: var(--space-7);
position: relative;
}
.service-konzept__step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-5);
}
.service-konzept__step::before {
content: "";
position: absolute;
top: 0;
width: 8px;
height: 8px;
border-radius: 0;
background-color: var(--color-accent);
box-shadow: 0 0 0 5px var(--color-bg);
opacity: var(--step-node, 1);
transform: scale(var(--step-node, 1));
}
.service-konzept__step:not(:last-child)::after {
content: "";
position: absolute;
left: 50%;
bottom: calc(-1 * var(--space-7));
width: 1px;
height: var(--space-7);
background-color: var(--color-accent);
transform: scaleY(var(--step-line, 1));
transform-origin: top center;
}
.service-konzept__num {
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
letter-spacing: 0.12em;
color: var(--color-accent);
}
.service-konzept__art {
display: block;
width: 5rem;
height: 5rem;
color: rgb(255 255 255 / 0.92);
}
.service-konzept__text {
max-width: 26ch;
font-size: var(--font-size-base);
line-height: 1.5;
color: rgb(255 255 255 / 0.88);
}
.service-konzept__proof {
max-width: 56ch;
text-wrap: balance;
margin: 0 auto var(--space-8);
padding-block: var(--space-6);
border-block: 1px solid var(--color-border);
font-size: var(--font-size-md);
line-height: 1.65;
color: rgb(255 255 255 / 0.88);
-webkit-hyphens: none;
hyphens: none;
}
.service-konzept__proof-text {
margin: 0;
}
.service-konzept__proof-link {
display: inline-flex;
margin-top: var(--space-4);
}
.service-konzept__proof:has(.service-konzept__proof-link) {
display: flex;
flex-direction: column;
align-items: center;
}
.service-konzept__figure {
color: var(--color-accent);
white-space: nowrap;
}
.service-konzept__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
@media (min-width: 700px) {
.service-konzept__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
--konzept-col-gap: clamp(var(--space-5), 4vw, var(--space-7));
column-gap: var(--konzept-col-gap);
}
.service-konzept__steps::before {
content: none;
}
.service-konzept__step:not(:last-child)::after {
content: "";
top: 4px;
bottom: auto;
left: calc(50% + 12px);
right: calc(-1 * (var(--konzept-col-gap) + 50% - 12px));
width: auto;
height: 1px;
transform: scaleX(var(--step-line, 1));
transform-origin: left center;
}
.service-konzept__actions {
flex-direction: row;
justify-content: center;
gap: var(--space-6);
}
}
.service-price__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
.service-price__intro {
margin-bottom: 0;
}
.service-price__answer {
margin-top: var(--space-3);
}
.service-price__factors {
list-style: none;
display: flex;
flex-direction: column;
}
.service-price__factors li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-2);
padding-block: var(--space-3);
border-top: 1px solid var(--color-border);
color: var(--color-gray);
font-size: var(--font-size-base);
line-height: 1.45;
}
.service-price__factors li::before {
content: "+";
color: var(--color-accent);
font-size: var(--font-size-md);
line-height: 1.1;
}
.service-price__factors li:last-child {
border-bottom: 1px solid var(--color-border);
}
.service-price__box {
position: relative;
overflow: hidden;
padding: var(--space-6) var(--space-5);
border-radius: var(--radius-xl);
background-color: var(--color-logo-black);
background-image: linear-gradient(
155deg,
rgb(255 255 255 / 0.07) 0%,
rgb(255 255 255 / 0.02) 45%,
rgb(255 255 255 / 0) 70%
);
box-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 0.16);
color: rgb(255 255 255 / 0.85);
}
.service-price__box::after {
content: "";
position: absolute;
top: -60%;
bottom: -60%;
left: 0;
width: 38%;
background: linear-gradient(
100deg,
transparent 0%,
rgb(255 255 255 / 0.22) 50%,
transparent 100%
);
transform: translateX(-140%) rotate(8deg);
animation: btn-shine 5s ease-in-out infinite;
pointer-events: none;
}
.service-price__box > * {
position: relative;
z-index: 1;
}
@keyframes service-price-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
.service-price__box-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgb(255 255 255 / 0.6);
}
.service-price__box-value {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: clamp(2.5rem, 1.7rem + 3vw, 3.75rem);
line-height: 1;
color: var(--color-white);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.service-price__box-unit {
font-size: 0.3em;
letter-spacing: 0.02em;
color: rgb(255 255 255 / 0.75);
}
.service-price__box-note {
margin-top: var(--space-4);
font-size: var(--font-size-sm);
color: rgb(255 255 255 / 0.7);
}
.service-price__box-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-7);
padding-top: var(--space-7);
border-top: 1px solid rgb(255 255 255 / 0.2);
font-size: var(--font-size-sm);
}
.service-price__box-list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.service-price__box-list .service-price__tick {
color: var(--color-white);
}
.service-price__cta {
margin-top: var(--space-7);
width: 100%;
justify-content: center;
white-space: normal;
}
@media (min-width: 640px) {
.service-price__cta {
max-width: 22.5rem;
}
}
.service-price__hint {
display: flex;
align-items: flex-start;
gap: var(--space-3);
max-width: 62rem;
margin-top: var(--space-4);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: 1.55;
}
.service-price__hint-icon {
width: 1.15rem;
height: 1.15rem;
flex-shrink: 0;
margin-top: 0.2em;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.service-price__hint strong {
color: var(--color-text);
font-weight: 500;
}
@media (min-width: 640px) {
.service-price__box {
padding: 3.25rem 2.25rem;
}
}
@media (min-width: 900px) {
.service-price__layout {
grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
grid-template-rows: auto auto 1fr;
column-gap: clamp(3rem, 4.5vw, 5rem);
row-gap: var(--space-5);
}
.service-price__intro { grid-column: 1; }
.service-price__factors { grid-column: 1; }
.service-price__box {
grid-column: 2;
grid-row: 1 / -1;
align-self: start;
width: 100%;
max-width: 27rem;
justify-self: center;
animation: service-price-float 7s ease-in-out 1s infinite;
}
.service-price__box:hover,
.service-price__box:focus-within {
animation-play-state: paused;
}
.service-price__hint {
grid-column: 1;
grid-row: 3;
align-self: start;
}
}
@media (min-width: 1200px) {
.service-price__layout {
column-gap: var(--space-8);
}
}
.service-contact__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"intro"
"photo"
"person"
"certs";
gap: var(--space-6);
align-items: start;
}
.service-contact__intro   { grid-area: intro; margin-bottom: 0; }
.service-contact__portrait { grid-area: photo; }
.service-contact__person  { grid-area: person; }
.service-contact__certs   { grid-area: certs; }
.service-contact__portrait {
margin: 0;
aspect-ratio: 4 / 5;
background-color: var(--color-bg);
position: relative;
}
.photo-fade-bottom {
position: relative;
}
.service-contact__portrait::after,
.uu-lead__photo::after,
.photo-fade-bottom::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
to bottom,
color-mix(in srgb, var(--color-bg) 0%, transparent) 58%,
color-mix(in srgb, var(--color-bg) 35%, transparent) 78%,
color-mix(in srgb, var(--color-bg) 80%, transparent) 92%,
var(--color-bg) 100%
);
}
.service-contact__portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.service-contact__name {
font-size: var(--font-size-xl);
}
.service-contact__role {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-accent);
}
.service-contact__body {
margin-top: var(--space-4);
max-width: 34rem;
color: var(--color-text-muted);
}
.service-contact__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-5);
margin-top: var(--space-6);
}
.service-contact__action {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--color-text);
transition:
background-color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard),
color var(--duration-base) var(--easing-standard);
}
.service-contact__action .icon {
width: 1.15em;
height: 1.15em;
flex-shrink: 0;
color: var(--color-accent);
}
.service-contact__action--phone .icon {
fill: currentColor;
stroke: none;
}
.service-contact__action--mail .icon {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linejoin: round;
stroke-linecap: round;
}
.service-contact__action--phone {
padding: var(--space-3) var(--space-5);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
font-size: var(--font-size-md);
}
.service-contact__action--phone:hover,
.service-contact__action--phone:focus-visible {
border-color: var(--color-accent);
background-color: rgb(255 255 255 / 0.06);
}
.service-contact__action--mail {
padding-bottom: 2px;
border-bottom: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.service-contact__action--mail:hover,
.service-contact__action--mail:focus-visible {
color: var(--color-text);
border-bottom-color: var(--color-accent);
}
.service-contact__certs {
display: grid;
gap: var(--space-6);
margin-top: var(--space-6);
padding-top: var(--space-7);
border-top: 1px solid var(--color-border);
text-align: center;
}
.service-contact__certs-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
}
.service-contact__seals {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-6);
}
.service-contact__seal {
height: clamp(5rem, 3rem + 4vw, 7rem);
width: auto;
}
.service-contact__certs-list {
list-style: none;
display: grid;
gap: var(--space-4);
margin-top: var(--space-7);
}
.service-contact__certs-list li {
display: grid;
gap: var(--space-1);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
-webkit-hyphens: none;
hyphens: none;
}
.service-contact__certs-list strong {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text);
}
.service-contact__certs-list span {
color: var(--color-text-muted);
}
@media (min-width: 700px) {
.service-contact__certs-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
max-width: 56rem;
margin-inline: auto;
}
}
@media (min-width: 900px) {
.service-contact__layout {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
grid-template-areas:
"photo intro"
"photo person"
"certs certs";
column-gap: clamp(var(--space-7), 5vw, var(--space-9));
}
.service-contact__portrait {
max-width: 30rem;
}
}
.service-related .section__intro,
.jobs-related .section__intro {
max-width: 44rem;
margin-bottom: var(--space-6);
text-align: center;
margin-inline: auto;
}
.service-related .section__intro > p,
.jobs-related .section__intro > p {
margin-inline: auto;
}
.service-related__cols {
display: grid;
gap: var(--space-6);
max-width: 60rem;
margin-inline: auto;
align-items: start;
}
.service-related__col {
--related-pad: var(--space-5);
padding: var(--related-pad);
border-radius: var(--radius-xl);
background-color: var(--color-bg-subtle);
}
.service-related__col .service-related__link {
margin-inline: calc(-1 * var(--related-pad));
padding-inline: var(--related-pad);
}
.service-related__title,
.section--light .service-related__title {
margin-bottom: var(--space-3);
font-size: 0.8125rem;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.service-related__list {
list-style: none;
}
.service-related__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: 0.875rem var(--container-padding);
margin-inline: calc(-1 * var(--container-padding));
font-size: var(--font-size-base);
color: var(--color-text);
text-decoration: none;
transition:
background-color var(--duration-base) var(--easing-premium),
color var(--duration-base) var(--easing-premium);
}
.service-related__list li + li .service-related__link {
border-top: 1px solid var(--color-border);
}
.service-related__list li:first-child .service-related__link {
border-start-start-radius: var(--radius-md);
border-start-end-radius: var(--radius-md);
}
.service-related__list li:last-child .service-related__link {
border-end-start-radius: var(--radius-md);
border-end-end-radius: var(--radius-md);
}
.service-related__label {
transition: transform var(--duration-base) var(--easing-premium);
}
.service-related__arrow {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
color: var(--color-text-muted);
fill: none;
stroke: currentColor;
stroke-width: 1.6;
transition:
transform var(--duration-base) var(--easing-premium),
color var(--duration-base) var(--easing-premium);
}
.service-related__link:hover,
.service-related__link:focus-visible {
background-color: var(--color-accent-subtle);
color: var(--color-text);
}
.service-related__link:hover .service-related__label,
.service-related__link:focus-visible .service-related__label {
transform: translateX(4px);
}
.service-related__link:hover .service-related__arrow,
.service-related__link:focus-visible .service-related__arrow {
transform: translate(3px, -3px);
color: var(--color-accent);
}
@media (min-width: 768px) {
.service-related__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-6);
}
}
.section--light {
background-color: var(--color-white);
color: rgb(59 73 86 / 0.85);
--color-text: var(--color-logo-black);
--color-text-muted: var(--text-on-light-secondary);
--color-border: rgb(59 73 86 / 0.14);
--color-border-strong: rgb(59 73 86 / 0.3);
--color-bg-subtle: rgb(59 73 86 / 0.04);
--color-accent: var(--color-blue-dark);
--color-accent-strong: var(--color-blue-dark);
--color-accent-subtle: rgb(82 135 201 / 0.08);
--color-focus-ring: var(--color-blue-dark);
--color-link-hover: var(--color-logo-black);
}
.section--light h2,
.section--light h3 {
color: var(--color-logo-black);
}
.section--light .section-eyebrow {
color: var(--color-gray);
}
.section--light .service-link {
color: var(--link-on-light);
border-bottom-color: rgb(82 135 201 / 0.45);
}
.section--light .service-link:hover,
.section--light .service-link:focus-visible {
color: var(--color-logo-black);
border-bottom-color: var(--color-logo-black);
}
.section--light .service-highlight,
.section--light .service-decision {
border-color: rgb(82 135 201 / 0.3);
}
.service-highlight {
margin-top: var(--space-8);
padding: var(--space-6);
border: 1px solid rgb(61 154 211 / 0.35);
border-radius: var(--radius-md);
background-color: var(--color-accent-subtle);
max-width: 46rem;
}
.service-prose .section__intro,
.service-trust .section__intro {
text-align: center;
margin-inline: auto;
}
.service-prose .section__intro > p,
.service-trust .section__intro > p {
margin-inline: auto;
}
.service-prose .section__intro h2,
.service-trust .section__intro h2 {
max-width: 30ch;
margin-inline: auto;
text-wrap: balance;
}
.service-highlight {
margin-inline: auto;
}
.service-highlight__title {
font-size: var(--font-size-md);
margin-bottom: var(--space-3);
}
.service-highlight > p {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--space-5);
}
.section--light .service-panel__fact dt {
color: rgb(59 73 86 / 0.6);
}
.section--light .service-panel--primary {
background-color: rgb(82 135 201 / 0.06);
border-color: rgb(82 135 201 / 0.35);
}
.section--light .service-cases__logo {
filter: invert(1);
}
.section--light .service-related__link {
color: var(--color-gray);
}
.section--light .service-related__link:hover,
.section--light .service-related__link:focus-visible {
color: var(--color-logo-black);
}
.section--light .faq__list:not(.faq__list--cards) .faq-item summary::after {
color: var(--color-logo-black);
}
.trust-certs {
margin-top: var(--space-8);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
text-align: center;
}
.trust-certs__seal {
height: clamp(5rem, 3rem + 4vw, 7rem);
width: auto;
justify-self: center;
margin-bottom: var(--space-3);
}
.trust-certs__glyph {
display: grid;
place-items: center;
justify-self: center;
height: clamp(5rem, 3rem + 4vw, 7rem);
aspect-ratio: 399 / 600;
margin-bottom: var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
font-weight: 300;
line-height: 1;
color: var(--color-accent);
}
.trust-certs__list {
list-style: none;
display: grid;
gap: var(--space-4);
margin-top: var(--space-7);
}
.trust-certs__list li {
display: grid;
gap: var(--space-1);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
-webkit-hyphens: none;
hyphens: none;
}
.trust-certs__list li strong {
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text);
}
.trust-certs__memberships {
max-width: 34rem;
margin: var(--space-6) auto 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
-webkit-hyphens: none;
hyphens: none;
}
.section--light .trust-certs__memberships a:not(.service-link) {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
@media (min-width: 700px) {
.trust-certs__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
max-width: 56rem;
margin-inline: auto;
}
}
.pixel-seam {
position: relative;
z-index: 2;
height: 0;
overflow: visible;
}
.pixel-seam__band {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--pixel-band-h);
display: grid;
grid-template-columns: repeat(var(--pixel-cols, 10), var(--pixel-tile-size, 24px));
grid-template-rows: repeat(var(--pixel-rows, 3), var(--pixel-tile-size, 24px));
pointer-events: none;
overflow: hidden;
}
.pixel-seam__tile {
background-color: var(--pixel-tile-color, var(--color-bg));
opacity: 1;
transition: opacity 0.5s var(--easing-standard);
}
.pixel-seam__tile.is-revealed {
opacity: 0;
}
.pixel-seam--photo {
position: absolute;
inset: auto 0 0;
z-index: 2;
height: 0;
}
.pixel-seam--photo .pixel-seam__band {
top: auto;
bottom: 0;
--pixel-band-h: var(--service-hero-band-h);
}
.pixel-seam--photo .pixel-seam__tile {
background-color: var(--pixel-photo-fill, var(--surface-navy));
background-image: var(
--pixel-photo-glow,
linear-gradient(to top, rgb(61 154 211 / 0.38) 0, rgb(61 154 211 / 0) 100%)
);
background-size: 100% var(--pixel-band-h, 200px);
background-position: 0 calc(-1 * var(--pixel-row, 0) * var(--pixel-tile-size, 24px));
background-repeat: no-repeat;
opacity: 0;
}
.pixel-seam--photo-light {
--pixel-photo-fill: var(--color-white);
--pixel-photo-glow: none;
}
.pixel-seam--photo .pixel-seam__tile.is-revealed {
opacity: 1;
}
.pixel-seam--navy {
--pixel-tile-color: var(--surface-navy);
}
.pixel-seam--navy .pixel-seam__tile {
background-color: var(--surface-navy);
background-image: linear-gradient(
rgb(61 154 211 / 0.38),
rgb(61 154 211 / 0.38)
);
}
.pixel-seam--white {
--pixel-tile-color: var(--color-white);
}
.pixel-seam--pulse .pixel-seam__tile {
background-color: var(--color-white);
opacity: 0;
transition: opacity 0.4s var(--easing-standard);
}
.pixel-seam--pulse .pixel-seam__tile.is-active {
opacity: 1;
}
.pixel-seam + .section {
padding-top: calc(var(--space-9) + 200px);
}
.pixel-seam + .conversion {
padding-top: 200px;
}
@media (max-width: 767.98px) {
.service-contrast {
padding-bottom: var(--space-7);
}
.service-contrast__module:last-child {
padding-bottom: 0.5rem;
}
.pixel-seam {
--pixel-band-h: 120px;
}
.service-hero--split:not(.uu-hero) {
--svc-seam-band-h: 120px;
}
.service-hero--bleed {
--service-hero-band-h: 120px;
}
.pixel-seam + .section {
padding-top: calc(var(--space-9) + 120px);
}
.pixel-seam + .conversion {
padding-top: 120px;
}
}
@media (max-width: 1151.98px) {
.service-flow {
grid-template-columns: clamp(6.5rem, 13vw, 11rem) minmax(0, 1fr);
column-gap: clamp(var(--space-4), 2.5vw, var(--space-6));
row-gap: var(--space-5);
align-items: start;
}
.service-flow__intro {
grid-column: 1 / -1;
}
.service-flow__step:nth-child(1) { order: 2; }
.service-flow__media > :nth-child(1) { order: 1; }
.service-flow__step:nth-child(2) { order: 4; }
.service-flow__media > :nth-child(2) { order: 3; }
.service-flow__step:nth-child(3) { order: 6; }
.service-flow__media > :nth-child(3) { order: 5; }
.service-flow__step:nth-child(4) { order: 8; }
.service-flow__media > :nth-child(4) { order: 7; }
.service-flow__step:nth-child(5) { order: 10; }
.service-flow__media > :nth-child(5) { order: 9; }
.service-flow__step:nth-child(6) { order: 12; }
.service-flow__media > :nth-child(6) { order: 11; }
.service-flow__frame {
grid-column: 1;
aspect-ratio: 4 / 3;
max-width: none;
border-radius: var(--radius-sm);
}
.service-flow__step {
grid-column: 2;
max-width: none;
}
.service-flow__step h3 {
font-size: var(--font-size-base);
}
.service-flow__step > p:last-child {
margin-top: var(--space-2);
font-size: clamp(0.8125rem, 0.7rem + 0.35vw, var(--font-size-sm));
line-height: 1.5;
}
.service-risk__item {
padding: var(--space-5);
}
.service-risk__art {
aspect-ratio: 16 / 9;
padding: var(--space-3) var(--space-5);
}
.service-contrast__module {
padding-block: 2rem;
}
.service-contrast__cue {
min-height: 2.75rem;
}
@media (min-width: 768px) {
.service-contrast__module {
padding-block: 3rem;
}
}
@media (min-width: 768px) and (max-width: 899.98px) {
.service-contrast__module {
gap: 0.75rem;
}
.service-contrast__topic {
margin-bottom: 0.875rem;
}
}
.service-panel__cta,
.service-link,
.service-contact__action {
padding-block: var(--space-3);
}
.service-faq .faq-item summary {
min-height: 44px;
align-items: center;
}
.service-panel__fact dt,
.service-price__box-label,
.service-price__box-unit {
font-size: 0.8125rem;
}
.conversion__form .form-field__label {
font-size: 0.8125rem;
letter-spacing: 0.06em;
}
.conversion__form .form-field__input,
.conversion__form .form-field__textarea {
font-size: 1rem;
min-height: 3rem;
}
.conversion__form .form-checkbox {
gap: var(--space-3);
padding-block: var(--space-2);
}
.conversion__form .form-checkbox__input {
width: 1.375rem;
height: 1.375rem;
margin-top: 0;
}
.conversion__form .form-checkbox__label a,
.conversion__form-alt a {
padding-block: 0.75rem;
display: inline-block;
}
.conversion__form-alt a {
font-size: 1rem;
}
}
@media (max-width: 899.98px) {
.service-contact__portrait {
max-width: min(48vw, 14rem);
}
}
@media (max-width: 899.98px) {
.service-contact__intro,
.service-contact__person {
text-align: center;
}
.service-contact__portrait {
width: 100%;
justify-self: center;
}
.service-contact__body {
margin-inline: auto;
}
.service-contact__actions {
justify-content: center;
}
}
@media (max-width: 767.98px) {
main > .breadcrumbs,
.service-hero__crumbs,
main > section > .container {
padding-inline: calc(var(--container-padding) + var(--space-2));
}
.service-flow {
--flow-page-lead: calc(var(--container-padding) + var(--space-2));
}
.service-hero {
padding-block: var(--space-6) var(--space-8);
}
.service-hero--bleed {
padding-block: calc(var(--space-6) + var(--service-hero-overlap)) var(--space-8);
}
.service-hero__bg img {
object-position: 62% 45%;
}
.service-hero__bg::after {
background-image: linear-gradient(
to bottom,
rgb(1 1 1 / 0.7) 0%,
rgb(1 1 1 / 0.6) 45%,
rgb(1 1 1 / 0.78) 100%
);
}
.service-hero--bleed .service-hero__bg::after {
background-image:
linear-gradient(
to bottom,
rgb(1 1 1 / 0.62) 0,
rgb(1 1 1 / 0.28) var(--service-hero-overlap),
rgb(1 1 1 / 0) calc(var(--service-hero-overlap) * 2)
),
linear-gradient(
to bottom,
rgb(1 1 1 / 0.7) 0%,
rgb(1 1 1 / 0.6) 45%,
rgb(1 1 1 / 0.78) 100%
);
}
@media (max-width: 639.98px) {
.service-hero__actions {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.service-hero__actions .btn {
width: 100%;
white-space: normal;
}
}
.service-hero__trust {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid rgb(255 255 255 / 0.14);
gap: var(--space-3);
}
.service-hero__seal {
height: 2rem;
}
.service-hero__point,
.service-scope__list li,
.service-konzept__text,
.service-price__factors li,
.service-contact__certs-list li {
-webkit-hyphens: none;
hyphens: none;
overflow-wrap: anywhere;
}
.service-price__layout > *,
.service-contact__layout > *,
.service-scope__groups > *,
.service-decision > *,
.service-compare__panels > * {
min-width: 0;
}
.service-decision__text,
.service-decision__heading {
overflow-wrap: anywhere;
}
.service-related__link {
min-height: 44px;
}
.service-contact__action--mail,
.service-link {
display: inline-flex;
min-height: 44px;
align-items: center;
}
@media (max-width: 639.98px) {
.service-konzept__actions .btn {
width: 100%;
justify-content: center;
white-space: normal;
}
}
}
.hub-group + .hub-group {
margin-top: var(--space-8);
}
.hub-group__label {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-5);
}
.hub-group__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
@media (min-width: 640px) {
.hub-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.hub-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hub-tile {
display: flex;
flex-direction: column;
height: 100%;
gap: var(--space-2);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: inherit;
text-decoration: none;
transition: background-color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard);
}
.hub-tile:hover,
.hub-tile:focus-visible {
background-color: var(--color-accent-subtle);
border-color: var(--color-accent);
color: inherit;
}
.hub-tile__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
}
.hub-tile__text {
flex: 1;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.hub-tile__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
font-size: var(--font-size-sm);
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.hub-tile__arrow {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
transition: transform var(--duration-base) var(--easing-standard);
}
.hub-tile:hover .hub-tile__arrow,
.hub-tile:focus-visible .hub-tile__arrow {
transform: translate(2px, -2px);
}
@media (max-width: 767.98px) {
.service-hero .service-hero__content,
.service-hero .service-hero__content h1,
.service-hero .service-hero__lead {
max-width: none;
}
}
.service-hero--split .service-hero__grid {
align-items: center;
}
.service-hero--split .service-hero__content {
max-width: none;
}
.service-hero--split:not(.uu-hero) .service-hero__media {
border-radius: var(--radius-xl);
}
.service-hero--split .service-hero__media {
margin: 0;
width: 100%;
max-width: 24rem;
margin-inline: auto;
overflow: hidden;
background-color: var(--color-bg);
}
.service-hero--split .service-hero__media picture {
display: block;
width: 100%;
height: 100%;
}
.service-hero--split .service-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 1024px) {
.service-hero--split .service-hero__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.service-hero--split .service-hero__media {
--svc-hero-photo-h: calc(100svh - 16rem);
max-width: none;
max-height: var(--svc-hero-photo-h);
}
.service-hero--split:not(.uu-hero) .service-hero__media {
max-width: calc(var(--svc-hero-photo-h) * 0.78);
margin-inline-start: auto;
margin-inline-end: 0;
}
}
@media (max-width: 1023.98px) {
.service-hero--split:not(.uu-hero) {
--svc-crumbs-h: 5.5rem;
--svc-bleed-pull: calc(var(--svc-crumbs-h) + 6rem);
margin-top: calc(-1 * var(--svc-bleed-pull));
padding-top: calc(var(--svc-bleed-pull) + 9rem);
}
.service-hero--split:not(.uu-hero) .service-hero__grid {
position: static;
}
.service-hero--split:not(.uu-hero) .service-hero__content {
position: relative;
z-index: 1;
}
main > .breadcrumbs {
position: relative;
z-index: 1;
}
main:has(> .service-hero--split:not(.uu-hero)) > .breadcrumbs {
padding-top: var(--space-6);
}
.service-hero--split:not(.uu-hero) .service-hero__media {
position: absolute;
inset: 0;
margin: 0;
max-width: none;
width: 100%;
height: 100%;
border-radius: 0;
}
.service-hero--split:not(.uu-hero) .service-hero__media img {
object-position: 50% 32%;
}
.service-hero--split:not(.uu-hero) {
--svc-seam-band-h: 200px;
padding-bottom: calc(var(--space-9) + var(--svc-seam-band-h));
}
.service-hero--split:not(.uu-hero) + .pixel-seam .pixel-seam__band {
top: calc(-1 * var(--pixel-band-h));
}
.service-hero--split:not(.uu-hero) + .pixel-seam .pixel-seam__tile {
background-color: var(--color-white);
opacity: 0;
}
.service-hero--split:not(.uu-hero) + .pixel-seam .pixel-seam__tile.is-revealed {
opacity: 1;
}
.service-hero--split:not(.uu-hero) + .pixel-seam + .section {
padding-top: var(--space-9);
}
.service-hero--split:not(.uu-hero) .service-hero__media::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to bottom,
rgb(1 1 1 / 0.68) 0%,
rgb(1 1 1 / 0.58) 38%,
rgb(1 1 1 / 0.82) 100%
);
}
}
.service-points__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-7);
}
.service-points__item::before {
content: "";
display: block;
width: 3rem;
height: 2px;
margin-bottom: var(--space-4);
background-color: var(--color-accent);
}
.service-points__title {
font-size: var(--font-size-md);
font-weight: 500;
margin-bottom: var(--space-3);
}
.service-points__text {
color: var(--color-text-muted);
max-width: 42ch;
}
.service-points__num {
display: block;
margin-bottom: var(--space-2);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
font-weight: 300;
color: var(--color-accent);
}
@media (min-width: 640px) {
.service-points__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
.service-points__list--2 {
max-width: 46rem;
margin-inline: auto;
}
.service-points__list--2 > .service-points__item {
text-align: center;
-webkit-hyphens: none;
hyphens: none;
}
.service-points__list--2 > .service-points__item::before {
margin-inline: auto;
}
}
@media (min-width: 1100px) {
.service-points__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-points__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-points__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-points__list--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-points__list--3,
.service-points__list--4,
.service-points__list--5,
.service-points__list--6 { gap: var(--space-6); }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
.service-points__list--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-points__list--cards {
gap: var(--space-6);
}
.service-points__list--cards > .service-points__item {
display: grid;
align-content: start;
min-width: 0;
padding: var(--space-6);
border-radius: var(--radius-xl);
border: 1px solid rgb(1 1 1 / 0.07);
background-color: var(--color-white);
box-shadow: 0 18px 48px rgb(1 1 1 / 0.07), 0 2px 6px rgb(1 1 1 / 0.04);
}
.service-points__list--cards > .service-points__item::before {
content: none;
}
.service-points__icon {
width: 1.75rem;
height: 1.75rem;
margin-bottom: var(--space-5);
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-points__list--cards .service-points__text {
max-width: none;
-webkit-hyphens: none;
hyphens: none;
}
@media (min-width: 640px) {
.service-points__list--cards > .service-points__item {
padding: var(--space-7);
}
}
@media (min-width: 1100px) {
.service-points__list--cards > .service-points__item {
padding: var(--space-5);
}
}
@media (min-width: 640px) and (max-width: 1099.98px) {
.service-points__list--3 > :last-child,
.service-points__list--5 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
.service-points__list--4 > :nth-child(5):last-child { grid-column: 1 / -1; }
}
.service-points .section__intro,
.service-scope .section__intro:not(.service-flow__intro) {
text-align: center;
}
.service-points .section__intro > h2,
.service-scope .section__intro:not(.service-flow__intro) > h2 {
max-width: 30ch;
margin-inline: auto;
text-wrap: balance;
}
.service-points .section__intro > p,
.service-scope .section__intro:not(.service-flow__intro) > p {
margin-inline: auto;
}
.service-points__outro {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
max-width: 62rem;
color: var(--color-text-muted);
margin-inline: auto;
text-align: center;
-webkit-hyphens: none;
hyphens: none;
}
.service-scope__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-6);
}
.service-scope__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
}
.service-scope__body {
min-width: 0;
}
.service-scope__title {
font-size: var(--font-size-base);
font-weight: 500;
margin-bottom: var(--space-2);
}
.service-scope__text {
color: var(--color-text-muted);
}
@media (min-width: 900px) {
.service-scope__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-8);
}
}
.service-points__title,
.service-points__text,
.service-scope__title,
.service-scope__text {
hyphens: none;
}
@media (min-width: 700px) and (max-width: 1099.98px) {
.service-konzept__steps--4,
.service-konzept__steps--5 {
grid-template-columns: none;
}
.service-konzept__steps--4 > .service-konzept__step:not(:last-child)::after,
.service-konzept__steps--5 > .service-konzept__step:not(:last-child)::after {
top: auto;
bottom: calc(-1 * var(--space-7));
left: 50%;
right: auto;
width: 1px;
height: var(--space-7);
transform: scaleY(var(--step-line, 1));
transform-origin: top center;
}
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
.service-konzept__steps--5 {
grid-template-columns: none;
}
.service-konzept__steps--5 > .service-konzept__step:not(:last-child)::after {
top: auto;
bottom: calc(-1 * var(--space-7));
left: 50%;
right: auto;
width: 1px;
height: var(--space-7);
transform: scaleY(var(--step-line, 1));
transform-origin: top center;
}
}
@media (min-width: 1100px) {
.service-konzept__steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.service-konzept__steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.service-price__box--text .service-price__box-value {
font-size: var(--font-size-lg);
line-height: var(--line-height-tight);
white-space: normal;
text-wrap: balance;
}
.section--light .service-panel__fact dt {
color: var(--color-gray);
}
.section--light .service-panel--primary .service-panel__label {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.service-points__item .service-link,
.service-points__outro .service-link,
.service-scope__body .service-link {
min-height: 44px;
}
@media (max-width: 399.98px) {
.service-hero--split .service-hero__content h1 {
hyphens: auto;
}
}
.service-hero--split .service-hero__content,
.service-hero--split .service-hero__media {
min-width: 0;
}
@media (max-width: 639.98px) {
.service-panel__cta {
width: 100%;
white-space: normal;
}
}
.service-section--centred .service-scope__list,
.service-section--centred .service-points__list {
max-width: 62rem;
margin-inline: auto;
}
.service-section--centred .service-points__list--4 {
max-width: 72rem;
}
.service-scope__list {
row-gap: var(--space-5);
}
@media (min-width: 900px) {
.service-scope__list {
align-items: start;
row-gap: var(--space-5);
}
}