Built 2026-08-05 from NewVersionCopiesFrankonia/"2026-08-04 Webtext 50/51/52".
Shared by all THREE case studies: the client's three documents have an
identical shape (Hero + Ergebnis-Kachel → article sections → Sicherheitskonzept
pitch + CTA), which is why every class here is generic `.cs-*` and nothing is
named after a single study. A fourth case study needs copy, not CSS.
This file is deliberately small. `css/page-service.css` is the CHASSIS
(docs/page-conventions.md §9.1) and already provides, for free:
- the `--content-inset` rule on BOTH sides, for `main > .breadcrumbs` and
`main > section > .container`                                        (§1)
- the oversized regular-weight `main h2`                               (§2)
- the breadcrumb chevron                                              (§3)
- `.section--light`, which RE-DECLARES the tokens for a white section, so
every rule below that consumes a token gets its light variant free  (§5)
- `.service-hero*`, `.service-link*`, `.service-related*`
- the whole `.pixel-seam*` block + the padding the next block reserves (§4.4)
None of that is re-copied here. Only this page type's own blocks are.
PAGE COLOUR ORDER (3 seams):
hero ■ → article □ → pitch + CTA ■ → footer
Every H2 of the article body lives inside ONE white section on purpose: they
are chapters of one story, and a seam between two whites would dissolve white
on white (§9.2, same call /referenzen/ and /jobs/ already make).
========================================================================== */
.cs-hero__lead,
.cs-result__label,
.cs-outcome li,
.cs-figure__caption,
.cs-related__label {
-webkit-hyphens: none;
hyphens: none;
}
.cs-hero .service-hero__grid {
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.cs-hero {
min-height: 0;
}
}
.cs-hero__inner {
max-width: 44rem;
margin-inline: auto;
}
.cs-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 0.85rem;
margin-bottom: var(--space-4);
border: 1px solid rgb(255 255 255 / 0.25);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.82);
}
.cs-hero__badge-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: var(--color-accent);
flex-shrink: 0;
animation: section-eyebrow-blink 2.4s ease-in-out infinite;
}
.cs-hero__inner h1 {
font-size: clamp(2rem, 1.6rem + 2.2vw, 3.25rem);
font-weight: var(--font-weight-regular);
line-height: 1.1;
margin-bottom: var(--space-4);
}
.cs-hero__inner .hero__lead {
max-width: 34rem;
font-size: var(--font-size-lg);
line-height: 1.5;
color: rgb(255 255 255 / 0.82);
}
.cs-results {
list-style: none;
display: grid;
gap: var(--space-4);
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid rgb(255 255 255 / 0.18);
}
.cs-result__label {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: rgb(255 255 255 / 0.82);
}
.cs-result__tick {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
margin-top: 0.15rem;
fill: none;
stroke: var(--color-accent);
stroke-width: 2.25;
}
@media (min-width: 700px) {
.cs-results {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
}
.cs-article {
max-width: 44rem;
margin-inline: auto;
}
.cs-article h2 {
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
line-height: 1.2;
margin-top: var(--space-8);
margin-bottom: var(--space-4);
}
.cs-article > *:first-child {
margin-top: 0;
}
.cs-article p {
font-size: var(--font-size-md);
line-height: 1.65;
margin-bottom: var(--space-4);
}
.cs-figure {
margin: var(--space-6) 0 var(--space-7);
}
.cs-figure__frame {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-md);
}
.cs-figure__frame--empty {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
border: 1px dashed var(--color-border);
background-color: var(--color-bg-subtle);
}
.cs-figure__frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cs-figure__caption {
display: block;
margin-top: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
}
.cs-outcome {
list-style: none;
margin: var(--space-5) 0 var(--space-4);
border-top: 1px solid var(--color-border);
}
.cs-outcome li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-block: var(--space-4);
border-bottom: 1px solid var(--color-border);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.cs-outcome__tick {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
margin-top: 0.15rem;
fill: none;
stroke: color-mix(in srgb, var(--color-blue-dark) 85%, black);
stroke-width: 2.25;
}
.cs-outcome strong {
font-weight: 500;
color: var(--color-logo-black);
}
.cs-pitch__inner {
max-width: 44rem;
margin-inline: auto;
}
.cs-pitch h2 {
line-height: 1.12;
margin-bottom: var(--space-6);
}
.cs-pitch p {
font-size: var(--font-size-md);
line-height: 1.65;
color: rgb(255 255 255 / 0.82);
margin-bottom: var(--space-6);
}
.cs-pitch__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}
.cs-related {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid rgb(255 255 255 / 0.18);
}
.cs-related__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
font-size: var(--font-size-sm);
color: rgb(255 255 255 / 0.82);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard);
}
.cs-related__arrow {
width: 1rem;
height: 1rem;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
transition: transform var(--duration-base) var(--easing-premium);
}
.cs-related__link:hover,
.cs-related__link:focus-visible {
color: var(--color-white);
border-bottom-color: var(--color-accent);
}
.cs-related__link:hover .cs-related__arrow,
.cs-related__link:focus-visible .cs-related__arrow {
transform: translate(3px, -3px);
}
@media (max-width: 767.98px) {
.cs-hero__inner h1 {
font-size: clamp(1.75rem, 1.3rem + 3.2vw, 2.25rem);
}
.cs-article h2 {
margin-top: var(--space-7);
}
@media (max-width: 639.98px) {
.cs-pitch__actions .btn {
width: 100%;
white-space: normal;
}
}
.cs-related {
flex-direction: column;
gap: var(--space-1);
}
}