/* Entry stylesheet — import order is intentional */
/* ---- fonts.css ---- */
/* Self-hosted Plus Jakarta Sans (variable, 500–800).
Previously loaded from fonts.googleapis.com with display=swap, which was
the cause of the homepage load jitter: the fallback font was painted
first and the swap reflowed every line of text. The interior pages hide
that because their hero copy sits inside fixed min-height panels, but the
homepage hero is content-sized, so the reflow moved the whole page.
Serving the font from our own origin removes the CSS + font round-trips
to two extra hosts, and `font-display: block` with a preload in each
means text is painted once, in the right font — no swap, no shift.
Both files together are ~48 kB. */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 500 800;
font-display: block;
src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* German umlauts live in latin, but this covers the extended punctuation
and currency glyphs the site uses (e.g. €, ‑, ·). */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 500 800;
font-display: block;
src: url("../assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* ---- tokens.css ---- */
/* Vieth design tokens — single source of truth */
:root {
/* Brand */
--color-navy: #193277;
--color-navy-deep: #0f214f;
--color-ink: #0a0a0a;
--color-text: #111111;
/* Long-form body copy — same value the homepage uses for leads/card text */
--color-body: #4b5563;
--color-text-muted: #6b6b6b;
--color-text-soft: #8a8fa8;
--color-label: #6b7aa5;
/* Surfaces */
--color-canvas: #ffffff;
--color-surface-soft: #f2f4fb;
/* Neutral editorial band (Historie) */
--color-surface-neutral: #f9fafb;
--color-surface-tint: #f2f3f7;
--color-border: #eceef4;
--color-border-strong: #e6e8f0;
/* Accent */
--color-cta: #c13a4a;
--color-cta-hover: #a83240;
--color-accent-line: #e40046;
--color-available: #12b98a;
/* Typography */
--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Layout */
--container: 1440px;
--gutter: 24px;
--gutter-lg: 48px;
--radius-card: 24px;
--radius-pill: 999px;
--radius-sm: 8px;
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 280ms;
--dur: 500ms;
--dur-slow: 900ms;
/* Elevation */
--shadow-card: 0 20px 40px rgba(25, 50, 119, 0.12);
--shadow-cta: 0 8px 24px rgba(193, 58, 74, 0.28);
--shadow-cta-hover: 0 12px 32px rgba(193, 58, 74, 0.36);
--shadow-truck: drop-shadow(0 20px 40px rgba(25, 50, 119, 0.12));
}
@media (min-width: 640px) {
:root {
--gutter: 32px;
}
}
@media (min-width: 1024px) {
:root {
--gutter: var(--gutter-lg);
}
}
/* ---- base.css ---- */
/* The webfont is loaded via in each page , not @import here:
an @import inside an @import'ed file serialises font discovery behind two
round-trips and delays first paint. */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
/* Always reserve the scrollbar track. Without this, any page whose height
crosses the viewport threshold after load — the homepage does, because
the hero chat animation and the rotating Leistungen panel change its
height — toggles the scrollbar on and off. Each toggle changes the
viewport width, which re-centres .container and re-measures the nav's
vw-based max-width, so the sticky header visibly jumps sideways. */
scrollbar-gutter: stable;
}
/* The header is sticky (72px). Without this, an in-page anchor or a
scrollIntoView() call parks the target underneath it. */
[id] {
scroll-margin-top: 88px;
}
body {
margin: 0;
background: var(--color-canvas);
color: var(--color-text);
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
}
::selection {
background: var(--color-navy);
color: #fff;
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ---- Page transitions ----
Cross-document view transitions give a soft cross-fade between pages plus
a morphing nav pill (see .site-nav in components.css), with no JS at all.
Browsers without support fall back to the fade-out in page-transition.js. */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
::view-transition-group(root) {
animation-duration: 420ms;
animation-timing-function: var(--ease-out);
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 420ms;
animation-timing-function: var(--ease-out);
}
/* The pill sliding from one nav item to the next — the whole point of
naming it. Slower than the content fade so the movement reads. */
::view-transition-group(nav-pill) {
animation-duration: 520ms;
animation-timing-function: var(--ease-out);
}
}
/* Fallback leave animation, only used when cross-document view transitions
are unavailable (page-transition.js sets .is-leaving). */
html.is-leaving body {
opacity: 0;
transition: opacity 200ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html.is-leaving body {
opacity: 1;
transition: none;
}
}
/* ---- components.css ---- */
/* Shared chrome used across pages */
/* Skip link — off-screen until focused */
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 100;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
border-radius: var(--radius-pill);
background: var(--color-navy);
color: #fff;
font-size: 14px;
font-weight: var(--fw-semibold);
transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
top: 12px;
}
/* Outline CTA for light sections.
Same metrics as .btn-primary / .btn-secondary (48px, pill, 15px/600) so every
button on the site reads as one family. .btn-secondary can't be reused here:
below 1024px it is styled translucent-white for the dark hero panels. */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 28px;
border-radius: var(--radius-pill);
background: var(--color-canvas);
color: var(--color-navy);
font-size: 15px;
font-weight: var(--fw-semibold);
border: 1.5px solid var(--color-navy);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.btn-outline:hover {
background: var(--color-navy);
color: #fff;
box-shadow: 0 6px 18px rgba(25, 50, 119, 0.18);
transform: translateY(-1px);
}
.btn-outline:active {
transform: translateY(0) scale(0.99);
}
.btn-outline:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 2px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
/* Naming the header keeps it visually anchored during a page transition —
only the content below it cross-fades, so navigation feels continuous
instead of the whole screen blinking. */
view-transition-name: site-header;
}
.site-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 72px;
}
.site-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
z-index: 2;
}
.site-logo__img {
display: block;
height: 36px;
width: auto;
}
/* Desktop pill nav — centered in the header bar */
.site-nav {
display: none;
align-items: center;
gap: 2px;
padding: 6px;
border-radius: 999px;
background: #f2f3f7;
border: 1px solid transparent;
max-width: min(720px, 58vw);
flex-wrap: nowrap;
overflow: hidden;
}
@media (min-width: 1024px) {
.site-nav {
display: inline-flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
}
.site-nav a {
position: relative;
display: inline-grid;
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: var(--fw-medium);
color: #6b7280;
white-space: nowrap;
background: transparent;
transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 1200px) {
.site-nav a {
padding: 8px 14px;
font-size: 13.5px;
}
}
.site-nav a > span {
grid-area: 1 / 1;
}
/* Invisible bold ghost reserves width so neighbors don't shift */
.site-nav a::after {
content: attr(data-label);
grid-area: 1 / 1;
font-weight: var(--fw-bold);
visibility: hidden;
pointer-events: none;
}
/* Hover + active: white pill, navy text — no outline */
.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"],
body[data-page="unternehmen"] .site-nav a[data-nav-page="unternehmen"],
body[data-page="leistungen"] .site-nav a[data-nav-page="leistungen"],
body[data-page="vermietung"] .site-nav a[data-nav-page="vermietung"],
body[data-page="kontakt"] .site-nav a[data-nav-page="kontakt"],
body[data-page="index"] .site-nav a[data-nav-page="index"] {
color: var(--color-navy);
font-weight: var(--fw-bold);
background: #fff;
}
/* Only the *current* pill is named (never the hover state), so exactly one
element carries the name per page and the browser can morph it into the
next page's pill — the pill appears to slide across the nav. Scoped to
.site-nav on purpose: the mobile drawer's active link must not claim the
same name, or the transition would be dropped as ambiguous. */
@media (prefers-reduced-motion: no-preference) {
.site-nav a[aria-current="page"],
body[data-page="index"] .site-nav a[data-nav-page="index"],
body[data-page="unternehmen"] .site-nav a[data-nav-page="unternehmen"],
body[data-page="leistungen"] .site-nav a[data-nav-page="leistungen"],
body[data-page="vermietung"] .site-nav a[data-nav-page="vermietung"] {
view-transition-name: nav-pill;
}
}
.site-header__actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
z-index: 2;
margin-left: auto;
}
.site-header__actions .btn-nav,
.site-header__drawer-actions .btn-nav {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: 999px;
font-size: 13.5px;
font-weight: var(--fw-semibold);
border: none;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out);
text-align: center;
}
/* Higher specificity than `.site-header__actions .btn-nav` */
.site-header__actions .site-header__cta-desktop {
display: none;
}
@media (min-width: 1024px) {
.site-header__actions .site-header__cta-desktop {
display: inline-flex;
}
}
.btn-nav--navy {
background: var(--color-navy);
color: #fff;
}
.btn-nav--navy:hover {
background: var(--color-navy-deep);
}
.btn-nav--red {
background: var(--color-accent-line);
color: #fff;
}
.btn-nav--red:hover {
background: #c8003d;
}
/* Hamburger — mobile only */
.site-header__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1.5px solid var(--color-border);
border-radius: 12px;
background: #fff;
cursor: pointer;
padding: 0;
color: var(--color-navy);
transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.site-header__toggle:hover {
background: var(--color-surface-soft);
}
.site-header__toggle:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 2px;
}
@media (min-width: 1024px) {
.site-header__toggle {
display: none;
}
}
.site-header__toggle-bars {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 18px;
}
.site-header__toggle-bars span {
display: block;
height: 2px;
width: 100%;
border-radius: 999px;
background: currentColor;
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
transform-origin: center;
}
.site-header.is-nav-open .site-header__toggle-bars span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header.is-nav-open .site-header__toggle-bars span:nth-child(2) {
opacity: 0;
}
.site-header.is-nav-open .site-header__toggle-bars span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ---- Mobile drawer ----
Animated, not display-toggled. Three decisions carry that:
1. It overlays the page (absolute, under the sticky header bar) instead of
sitting in flow. In flow, opening it changes document height, which is a
layout animation no matter how it is written.
2. Only opacity and transform move — both composited, so the panel can't
drop frames on a phone. No height/max-height, no shadow animation.
3. Open/closed is expressed as CSS state, never as `display`, so a second
tap mid-animation reverses from wherever the panel currently is rather
than restarting. That is what keeps fast double taps from breaking it.
`visibility` (not `display`) takes the closed panel out of the tab order,
and its transition is delayed until the fade has finished. */
.site-header__drawer {
position: absolute;
top: 100%;
left: 0;
right: 0;
border-top: 1px solid var(--color-border);
background: #fff;
padding: 12px var(--gutter) 20px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition:
opacity 200ms var(--ease-out),
transform 260ms var(--ease-out),
visibility 0s linear 260ms;
}
.site-header.is-nav-open .site-header__drawer {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 180ms var(--ease-out),
transform 280ms var(--ease-out),
visibility 0s;
}
/* No-JS fallback: nav.js swaps [hidden] for CSS state on boot, so this only
ever applies before/without scripts — where an always-open drawer would
otherwise hang under the header. */
.site-header__drawer[hidden] {
display: none;
}
@media (min-width: 1024px) {
.site-header__drawer,
.site-header.is-nav-open .site-header__drawer {
display: none;
}
}
.site-header__drawer-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.site-header__drawer-nav a {
display: flex;
align-items: center;
min-height: 48px;
padding: 0 14px;
border-radius: 12px;
font-size: 15px;
font-weight: var(--fw-semibold);
color: #6b7280;
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.site-header__drawer-nav a:hover {
color: var(--color-navy);
background: var(--color-surface-soft);
}
.site-header__drawer-nav a[aria-current="page"],
.site-header__drawer-nav a[aria-current="true"],
body[data-page="unternehmen"] .site-header__drawer-nav a[data-nav-page="unternehmen"],
body[data-page="leistungen"] .site-header__drawer-nav a[data-nav-page="leistungen"],
body[data-page="vermietung"] .site-header__drawer-nav a[data-nav-page="vermietung"],
body[data-page="kontakt"] .site-header__drawer-nav a[data-nav-page="kontakt"],
body[data-page="index"] .site-header__drawer-nav a[data-nav-page="index"] {
color: var(--color-navy);
font-weight: var(--fw-bold);
background: var(--color-surface-soft);
}
.site-header__drawer-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.site-header__drawer-actions .btn-nav {
width: 100%;
}
/* The global reduced-motion rule clamps transition *durations*, not delays —
the drawer's `visibility 0s linear 260ms` step would leave a closed panel on
screen for a quarter second. Drop the transition entirely here. */
@media (prefers-reduced-motion: reduce) {
.site-header__drawer,
.site-header.is-nav-open .site-header__drawer {
transition: none;
transform: none;
}
}
body.nav-lock {
overflow: hidden;
}
/* ---- Scroll to top ----
Ported from the old site: the ring is a scroll-progress indicator.
Navy disc rather than the original white one. Half this site is now
full-bleed photography and dark panels, and a white circle with a hairline
border disappeared into them — the button was there, it just could not be
found. z-index sits above the header (50) so nothing can cover it. */
.scroll-top {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 55;
width: 48px;
height: 48px;
padding: 0;
border-radius: 999px;
border: none;
background: var(--color-navy);
box-shadow: 0 6px 22px rgba(10, 18, 42, 0.32);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.9);
transition:
opacity var(--dur-fast) var(--ease-out),
visibility var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 768px) {
.scroll-top {
right: 28px;
bottom: 28px;
width: 52px;
height: 52px;
}
}
.scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.scroll-top.is-visible:hover {
background: var(--color-navy-deep);
transform: translateY(-2px) scale(1.04);
}
.scroll-top.is-visible:active {
transform: scale(0.95);
}
.scroll-top:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.7);
outline-offset: 2px;
}
/* The ring is inset by 2px on each side so its 3px stroke sits inside the
disc rather than straddling its edge. */
.scroll-top__progress {
position: absolute;
inset: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
/* Start the ring at 12 o'clock */
transform: rotate(-90deg);
pointer-events: none;
}
.scroll-top__ring-bg {
stroke: rgba(255, 255, 255, 0.18);
}
.scroll-top__ring-fg {
stroke: var(--color-accent-line);
transition: stroke-dashoffset 100ms linear;
}
.scroll-top__arrow {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: transform var(--dur-fast) var(--ease-out);
}
.scroll-top:hover .scroll-top__arrow {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.scroll-top,
.scroll-top__arrow,
.scroll-top__ring-fg {
transition: none;
}
.scroll-top.is-visible:hover {
transform: none;
}
}
/* ---- Site footer ----
Ported from the old site: navy panel, brand column twice as wide as the
three link columns, socials as circular buttons, thin bottom bar. */
.site-footer {
background: var(--color-navy-deep);
color: rgba(255, 255, 255, 0.75);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px 24px;
padding-top: 56px;
padding-bottom: 40px;
}
@media (min-width: 640px) {
.site-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Brand block spans the full width until there's room for its own column */
.site-footer__brand {
grid-column: 1 / -1;
}
}
@media (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-top: 72px;
padding-bottom: 56px;
}
.site-footer__brand {
grid-column: auto;
}
}
/* The logo is a masked multi-colour SVG — flatten it to solid white so it
reads on the navy panel (same approach as the old site). */
.site-footer__logo {
height: 40px;
width: auto;
margin-bottom: 18px;
filter: brightness(0) invert(1);
}
.site-footer__tagline {
margin: 0;
max-width: 420px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
.site-footer__address {
margin: 18px 0 0;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-style: normal;
font-weight: var(--fw-medium);
line-height: 1.7;
}
.site-footer__hours {
margin-top: 20px;
max-width: 260px;
}
.site-footer__hours-title {
margin: 0 0 6px;
color: #fff;
font-size: 13px;
font-weight: var(--fw-bold);
}
.site-footer__hours-row {
margin: 0;
display: flex;
justify-content: space-between;
gap: 16px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.7;
font-variant-numeric: tabular-nums;
}
.site-footer__socials {
margin-top: 24px;
display: flex;
gap: 12px;
}
.site-footer__socials a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
transition:
background-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.site-footer__socials a:hover {
background: var(--color-accent-line);
transform: translateY(-2px);
}
.site-footer__socials a:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 3px;
}
.site-footer__col-title {
margin: 0 0 14px;
color: #fff;
font-size: 15px;
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
}
.site-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__col a {
display: inline-block;
padding: 5px 0;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
font-weight: var(--fw-medium);
transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__col a:hover {
color: #fff;
}
.site-footer__col a:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.7);
outline-offset: 2px;
border-radius: 4px;
}
.site-footer__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
padding-block: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
font-weight: var(--fw-medium);
}
.site-footer__bar-meta {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
/* ---- sections/hero.css ---- */
/* Hero + social proof.
One layout at every width: the photo is full-bleed behind the section and
the copy sits on top of it, left-aligned in the frame at every breakpoint. */
.hero {
position: relative;
background: var(--color-navy-deep);
overflow: hidden;
/* The scrim and the copy stack inside the section, never against whatever
the next section paints. */
isolation: isolate;
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "copy";
gap: 0;
align-items: stretch;
padding-block: 28px 36px;
min-height: 0;
}
@media (min-width: 640px) {
.hero__inner {
padding-block: 36px 48px;
}
}
@media (min-width: 1024px) {
.hero__inner {
align-items: center;
padding-block: 72px 80px;
/* The photo used to get its height from the 520px media column. It is a
background now, so the section has to state its own height. */
min-height: clamp(560px, 46vw, 660px);
}
}
/* ---- Media: full-bleed photo behind the whole section ----
Child of .hero, not of .hero__inner: .hero__inner is a .container capped at
1440px, so an absolute child of it stops at the container edge and leaves
bars on wide screens. */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
}
.hero__media-frame {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--color-navy-deep);
}
.hero__media-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Portrait crops hard: bias right so the two trucks stay in frame rather
than the yard in front of them. */
object-position: 68% center;
display: block;
}
@media (min-width: 1024px) {
.hero__media-photo {
/* Wide enough for the whole frame — and this is the position where the
gradient baked into the master lands under the copy column. */
object-position: center center;
}
}
/* Dark scrim so the copy stays readable on top of the photo. Tops up the
gradient already baked into the image; both are the same navy, so they
blend rather than banding against each other. */
.hero__media-frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(10, 18, 42, 0.74) 0%,
rgba(10, 18, 42, 0.56) 45%,
rgba(10, 18, 42, 0.82) 100%
);
pointer-events: none;
}
@media (min-width: 1024px) {
.hero__media-frame::after {
/* Left-to-right instead: the copy only occupies the left column, and the
trucks are the reason the photo is here — they must stay visible.
The stops are placed against the copy, not by eye: the lead is capped at
520px inside a 1440px container, so it never runs past ~40% of the
viewport. Everything up to there is held dark enough for white text; the
fall-off starts after it. The bump at 100% gives the white chat card an
edge to sit against. */
background: linear-gradient(
90deg,
rgba(10, 18, 42, 0.86) 0%,
rgba(10, 18, 42, 0.78) 30%,
rgba(10, 18, 42, 0.52) 50%,
rgba(10, 18, 42, 0.18) 70%,
rgba(10, 18, 42, 0.08) 84%,
rgba(10, 18, 42, 0.28) 100%
);
}
}
.hero__copy {
position: relative;
z-index: 2;
grid-area: copy;
padding: 8px 0 12px;
}
@media (min-width: 1024px) {
.hero__copy {
padding: 0 24px 0 0;
}
}
/* The copy is white at every width now — the photo runs the full section, so
there is no light panel to switch to at 1024px any more. */
.hero__title {
margin: 0;
font-size: clamp(30px, 7.2vw, 60px);
font-weight: var(--fw-extrabold);
letter-spacing: -0.04em;
line-height: 0.98;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}
.hero__title-accent {
color: #ff5a8a;
}
.hero__lead {
margin: 20px 0 0;
max-width: 520px;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.88);
/* Insurance for the smaller type: the scrim carries the contrast, but the
sky behind the middle of the photo is bright and a phone crop can move it
under the text. */
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1024px) {
.hero__lead {
margin-top: 24px;
}
}
.hero__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (min-width: 1024px) {
.hero__actions {
margin-top: 32px;
}
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 28px;
border-radius: var(--radius-pill);
background: var(--color-accent-line);
color: #fff;
font-size: 15px;
font-weight: var(--fw-semibold);
border: none;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover {
background: #c8003d;
transform: translateY(-1px);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 28px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 15px;
font-weight: var(--fw-semibold);
border: 1.5px solid rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out);
backdrop-filter: blur(6px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.24);
}
/* Interior heroes (Unternehmen, Leistungen) sit on white from 1024px, so the
shared button flips to a solid light skin there. */
@media (min-width: 1024px) {
.btn-secondary {
background: #fff;
color: var(--color-navy);
border-color: var(--color-navy);
backdrop-filter: none;
}
.btn-secondary:hover {
background: var(--color-surface-soft);
}
/* …but not on the homepage: this hero is a photo at every width now, so the
button has to stay translucent-on-dark like it is on phones. Scoped the
same way vermietung-hero.css scopes its own variant. */
.hero .btn-secondary {
background: rgba(255, 255, 255, 0.14);
color: #fff;
border-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
}
.hero .btn-secondary:hover {
background: rgba(255, 255, 255, 0.24);
}
}
.hero__proof {
margin-top: 28px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
@media (min-width: 1024px) {
.hero__proof {
margin-top: 40px;
gap: 20px;
}
}
.hero__avatars {
display: flex;
}
.hero__avatar {
width: 32px;
height: 32px;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.9);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: var(--fw-bold);
color: var(--color-navy);
background: #d9deef;
margin-left: -8px;
}
.hero__avatar:first-child { margin-left: 0; }
.hero__avatar--navy {
background: var(--color-navy);
color: #fff;
}
.hero__proof-text {
margin: 0;
font-size: 13px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.86);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.maps-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
color: #fff;
font-weight: var(--fw-medium);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.maps-link__label {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 1.5px;
transition: background-size 320ms var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.maps-link:hover,
.maps-link:focus-visible {
color: #ff8aab;
}
.maps-link:hover .maps-link__label,
.maps-link:focus-visible .maps-link__label {
background-size: 100% 1.5px;
}
.maps-link:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 4px;
border-radius: 4px;
}
/* ---- sections/fokus.css ---- */
/* Fokus — die zwei Kernfelder.
Card shell, icon circle and reveal timing are shared with .why-card
(why-vieth.css) so both blocks read as one system. */
.fokus {
background: var(--color-canvas);
border-bottom: 1px solid var(--color-border);
}
.fokus__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.fokus__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.fokus__title {
margin: 0;
max-width: 680px;
color: var(--color-navy);
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
}
/* Same tight gutter and header gap as .why-vieth__grid — the two homepage
card blocks have to share one rhythm, or the page reads as two systems. */
.fokus__grid {
margin-top: 36px;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: stretch;
}
@media (min-width: 768px) {
.fokus__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.fokus__grid {
margin-top: 44px;
gap: 12px;
}
}
.fokus-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-canvas);
transition:
border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out);
}
.fokus-card:hover,
.fokus-card:focus-within {
border-color: var(--color-border-strong);
transform: translateY(-6px);
box-shadow: var(--shadow-card);
}
.fokus-card__media {
position: relative;
height: 200px;
overflow: hidden;
background: var(--color-surface-soft);
}
@media (min-width: 1024px) {
.fokus-card__media {
height: 240px;
}
}
.fokus-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.fokus-card:hover .fokus-card__photo {
transform: scale(1.04);
}
.fokus-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
padding: 28px;
}
@media (min-width: 1024px) {
.fokus-card__body {
padding: 32px;
}
}
/* Same circle as .why-card__icon */
.fokus-card__icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-soft);
color: var(--color-navy);
}
.fokus-card__icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.fokus-card__title {
margin: 20px 0 0;
color: var(--color-navy);
font-size: clamp(22px, 2.2vw, 26px);
font-weight: var(--fw-bold);
line-height: 1.15;
letter-spacing: -0.02em;
}
.fokus-card__text {
margin: 12px 0 0;
max-width: 420px;
color: var(--color-text-muted);
font-size: 15px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
.fokus-card__link {
margin-top: auto;
padding-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-navy);
font-size: 14px;
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
transition: color var(--dur-fast) var(--ease-out);
}
.fokus-card__link:hover {
color: var(--color-accent-line);
}
.fokus-card__link:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
.fokus-card__arrow {
line-height: 1;
transition: transform var(--dur-fast) var(--ease-out);
}
.fokus-card__link:hover .fokus-card__arrow {
transform: translateX(3px);
}
/* Same reveal timing as the why-vieth cards */
html.js .fokus.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .fokus.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .fokus.is-inview [data-reveal="2"] { animation-delay: 110ms; }
@media (prefers-reduced-motion: reduce) {
html.js .fokus.is-inview [data-reveal] {
animation: none;
}
.fokus-card__photo,
.fokus-card:hover .fokus-card__photo {
transition: none;
transform: none;
}
}
/* ---- sections/leistungen.css ---- */
/* Leistungen — auto-rotate with gray progress fill.
Navy/blue only on HOVER (not default active).
*/
.leistungen {
background: var(--color-canvas);
padding-block: 64px;
border-bottom: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
.leistungen {
padding-block: 96px;
}
}
.leistungen__layout {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
@media (min-width: 1024px) {
/* fr, NOT percent. 44% + 56% is already the full content box, and a grid
gap is added on top of the tracks instead of taken out of them — so the
row was 48px wider than the container and the panel hung one gutter past
the content column. On a laptop (container = viewport) that is exactly the
right page padding, so the panel ran into the edge of the screen while
every other section stopped 48px short of it.
fr distributes what is left AFTER the gap, so 44fr/56fr keeps the same
proportion and fits. minmax(0, …) on both tracks so a long word in the
list or the panel photo can never push the track wider than its share. */
.leistungen__layout {
grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
gap: 48px;
}
}
.leistungen__title {
margin: 0 0 28px;
font-size: clamp(30px, 3.5vw, 40px);
font-weight: var(--fw-extrabold);
letter-spacing: -0.03em;
line-height: 1.02;
color: var(--color-navy);
}
.leistungen__list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.leistungen__item {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
text-align: left;
border: 1.5px solid var(--color-border);
border-radius: 16px;
background: transparent;
padding: 16px 20px;
cursor: pointer;
color: inherit;
font: inherit;
overflow: hidden;
isolation: isolate;
transition:
background-color 280ms var(--ease-out),
border-color 280ms var(--ease-out),
color 280ms var(--ease-out),
transform 280ms var(--ease-out),
box-shadow 280ms var(--ease-out);
}
/* Gray progress fill behind active (auto-rotate) item — deliberately more
saturated than the card background so it reads clearly as a status wipe. */
.leistungen__progress {
position: absolute;
inset: 0;
z-index: 0;
background: #ccd2e6;
transform-origin: left center;
transform: scaleX(0);
pointer-events: none;
}
.leistungen__item.is-current .leistungen__progress {
animation: leistungenFill var(--leistungen-duration, 5s) linear forwards;
}
.leistungen.is-paused .leistungen__item.is-current .leistungen__progress {
animation-play-state: paused;
}
@keyframes leistungenFill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Bottom status line — same gray family as the fill, just stronger so it
reads as a clear "time remaining" indicator rather than a hairline. */
.leistungen__item.is-current::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #9aa4c6;
z-index: 1;
transform-origin: left center;
transform: scaleX(0);
animation: leistungenFill var(--leistungen-duration, 5s) linear forwards;
}
.leistungen.is-paused .leistungen__item.is-current::after {
animation-play-state: paused;
}
.leistungen__item > * {
position: relative;
z-index: 2;
}
/* Current (auto) stays light with border — NOT navy */
.leistungen__item.is-current {
border-color: #dfe3ee;
background: #fbfcfe;
}
/* Navy only on hover */
.leistungen__item:hover,
.leistungen__item:focus-visible {
background: var(--color-navy);
border-color: var(--color-navy);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.leistungen__item:hover .leistungen__progress,
.leistungen__item:focus-visible .leistungen__progress,
.leistungen__item:hover::after,
.leistungen__item:focus-visible::after {
opacity: 0;
animation: none;
}
.leistungen__item:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.3);
outline-offset: 2px;
}
.leistungen__num {
flex-shrink: 0;
margin-top: 2px;
font-size: 13px;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
color: #9ca3af;
min-width: 28px;
transition: color 280ms var(--ease-out);
}
.leistungen__item.is-current .leistungen__num {
color: var(--color-navy);
}
.leistungen__item:hover .leistungen__num,
.leistungen__item:focus-visible .leistungen__num {
color: rgba(255, 255, 255, 0.55);
}
.leistungen__item-body {
flex: 1;
min-width: 0;
}
.leistungen__item-title {
font-size: 15px;
font-weight: var(--fw-bold);
line-height: 1.35;
color: #4b5563;
transition: color 280ms var(--ease-out);
}
.leistungen__item.is-current .leistungen__item-title {
color: var(--color-navy);
}
.leistungen__item:hover .leistungen__item-title,
.leistungen__item:focus-visible .leistungen__item-title {
color: #fff;
}
.leistungen__item-short {
font-size: 15px;
font-weight: var(--fw-medium);
line-height: 1.35;
color: #6b7280;
transition: color 280ms var(--ease-out);
}
.leistungen__item:hover .leistungen__item-short,
.leistungen__item:focus-visible .leistungen__item-short {
color: rgba(255, 255, 255, 0.72);
}
.leistungen__chev {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
background: #fff;
color: #9ca3af;
transition:
background-color 280ms var(--ease-out),
border-color 280ms var(--ease-out),
color 280ms var(--ease-out);
}
.leistungen__item.is-current .leistungen__chev {
border-color: #e5e7eb;
color: var(--color-navy);
}
.leistungen__item:hover .leistungen__chev,
.leistungen__item:focus-visible .leistungen__chev {
background: var(--color-accent-line);
border-color: var(--color-accent-line);
color: #fff;
}
/* Detail panel */
.leistungen__panel {
border: 1.5px solid var(--color-border);
border-radius: 24px;
background: var(--color-canvas);
overflow: hidden;
transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.leistungen__panel.is-swap {
animation: leistungenPanelIn 320ms var(--ease-out);
}
@keyframes leistungenPanelIn {
from {
opacity: 0.55;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.leistungen__visual {
position: relative;
height: 240px;
background: #e8ecf4;
overflow: hidden;
border-bottom: 1.5px solid var(--color-border);
}
@media (min-width: 768px) {
.leistungen__visual { height: 300px; }
}
.leistungen__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: opacity 280ms var(--ease-out), transform 420ms var(--ease-out);
}
.leistungen__panel.is-swap .leistungen__photo {
transform: scale(1.03);
}
.leistungen__visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(10, 18, 42, 0.18) 0%,
rgba(10, 18, 42, 0.02) 45%,
rgba(10, 18, 42, 0.28) 100%
);
}
.leistungen__visual-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.leistungen__chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: var(--fw-bold);
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.94);
color: var(--color-navy);
backdrop-filter: blur(6px);
}
.leistungen__chip--dark {
background: rgba(25, 50, 119, 0.92);
border-color: transparent;
color: #fff;
font-weight: var(--fw-semibold);
}
.leistungen__panel-body {
padding: 28px 24px 32px;
}
@media (min-width: 768px) {
.leistungen__panel-body { padding: 32px; }
}
/* The panel's text is swapped every 5s by leistungen.js, and the five
services have different copy lengths (headlines wrap to 1–2 lines, the
descriptions run 151–209 characters). Without a reserved height the panel
resized on every rotation and shoved everything below it down the page —
the homepage-only "everything jerks" effect. Reserving the worst case in
line-height units keeps the panel a fixed size while staying responsive. */
.leistungen__headline {
margin: 0;
min-height: calc(1.08em * 2);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: var(--fw-extrabold);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--color-navy);
}
.leistungen__desc {
margin: 12px 0 0;
/* 5 lines covers the longest description in the narrow single-column
panel; the desktop panel is wider, so 4 is enough there. */
min-height: calc(1.7em * 5);
font-size: 14.5px;
line-height: 1.7;
color: #4b5563;
}
@media (min-width: 1024px) {
.leistungen__desc {
min-height: calc(1.7em * 4);
}
}
@media (prefers-reduced-motion: reduce) {
.leistungen__item.is-current .leistungen__progress,
.leistungen__item.is-current::after {
animation: none;
transform: scaleX(1);
}
}
/* ---- sections/leistungen-hero.css ---- */
/* Leistungen hero — same panel / stats language as Unternehmen hero */
.l-hero {
padding-top: 16px;
padding-bottom: 8px;
background: var(--color-canvas);
}
@media (min-width: 768px) {
.l-hero {
padding-top: 24px;
}
}
.l-hero__panel {
position: relative;
isolation: isolate;
min-height: 460px;
max-height: none;
border-radius: var(--radius-card);
overflow: hidden;
background: #0d1428;
display: flex;
align-items: center;
}
@media (min-width: 1024px) {
.l-hero__panel {
min-height: 460px;
max-height: 560px;
}
}
.l-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.l-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.l-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.1) 100%),
linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 100%),
rgba(0, 0, 0, 0.35);
}
.l-hero__content {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
padding: 40px 20px 36px;
}
@media (min-width: 768px) {
.l-hero__content {
padding: 56px 40px 48px;
}
}
@media (min-width: 1024px) {
.l-hero__content {
flex-direction: row;
align-items: center;
gap: 48px;
padding: 56px 56px 48px;
}
}
.l-hero__copy {
max-width: 640px;
min-width: 0;
}
/* Weight/line-height/curve match the Unternehmen hero H1 (.u-hero__title) so
both hero panels read as one family. */
.l-hero__title {
margin: 0;
color: #fff;
font-size: clamp(28px, 7.2vw, 64px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.04em;
hyphens: auto;
overflow-wrap: break-word;
}
.l-hero__lead {
margin: 18px 0 0;
max-width: 520px;
color: rgba(255, 255, 255, 0.85);
font-size: clamp(16px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.55;
}
@media (min-width: 768px) {
.l-hero__lead {
margin-top: 20px;
}
}
.l-hero__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
@media (min-width: 768px) {
.l-hero__actions {
margin-top: 32px;
}
}
/* Secondary CTA reuses the shared .btn-secondary treatment (hero.css) — same
as Unternehmen, incl. its switch to solid white/navy at 1024px+. */
/* White stat cards — same as Unternehmen. Hidden on phones: 4 cards wrap
into a cramped 2x2 block that eats most of the panel; they return once
there's room to lay them out in a single row. */
.l-hero__stats {
display: none;
}
@media (min-width: 640px) {
.l-hero__stats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
width: 100%;
}
}
@media (min-width: 1024px) {
.l-hero__stats {
width: 180px;
flex-direction: column;
flex-wrap: nowrap;
flex-shrink: 0;
margin-left: auto;
}
}
.l-hero__stat {
display: flex;
flex-direction: column;
justify-content: center;
width: 180px;
height: 92px;
padding: 0 20px;
background: #fff;
border: 1px solid #eef0f7;
border-radius: 20px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.l-hero__stat-value {
color: var(--color-navy);
font-size: 28px;
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: -0.03em;
}
.l-hero__stat-label {
margin-top: 4px;
color: #6b7280;
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
}
/* ---- sections/transport.css ---- */
/* Transport — cargo type cards (from import Transport+Baustoffe) */
.transport {
background: #f7f8fb;
padding-block: 36px;
}
@media (min-width: 768px) {
.transport {
padding-block: 48px;
}
}
.transport__header {
max-width: 640px;
}
.transport__title {
margin: 0;
font-size: clamp(28px, 3.4vw, 36px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
}
.transport__title-accent {
color: var(--color-accent-line);
}
.transport__title-main {
color: var(--color-text);
}
.transport__lead {
margin: 12px 0 0;
max-width: 520px;
color: #525a6e;
font-size: clamp(14px, 1.2vw, 15px);
font-weight: var(--fw-medium);
line-height: 1.45;
}
.transport__grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (min-width: 768px) {
.transport__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.transport__grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
.transport-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 128px;
padding: 16px;
border-radius: 16px;
border: 1px solid #eef0f7;
background: #fff;
overflow: hidden;
transition:
transform 300ms var(--ease-out),
box-shadow 300ms var(--ease-out),
border-color 300ms var(--ease-out);
}
@media (min-width: 768px) {
.transport-card {
min-height: 132px;
}
}
.transport-card:hover {
transform: translateY(-1px);
border-color: #e3e7f3;
box-shadow: 0 8px 20px rgba(25, 50, 119, 0.07);
}
.transport-card__top {
display: flex;
align-items: flex-start;
gap: 2px;
}
.transport-card__num {
font-size: clamp(32px, 3vw, 36px);
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.04em;
color: #111827;
transition: color 300ms var(--ease-out);
}
.transport-card:hover .transport-card__num {
color: var(--color-navy);
}
.transport-card--first .transport-card__num {
color: var(--color-accent-line);
}
.transport-card--first:hover .transport-card__num {
color: var(--color-accent-line);
}
.transport-card__dot {
margin-top: 4px;
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--color-accent-line);
opacity: 0.8;
flex-shrink: 0;
}
@media (min-width: 768px) {
.transport-card__dot {
width: 6px;
height: 6px;
}
}
.transport-card--first .transport-card__dot {
background: #111827;
opacity: 1;
}
.transport-card__body {
margin-top: 12px;
}
.transport-card__title {
margin: 0;
font-size: 13px;
font-weight: var(--fw-bold);
line-height: 1.25;
letter-spacing: -0.01em;
color: #111827;
}
.transport-card__short {
margin: 4px 0 0;
font-size: 11px;
font-weight: var(--fw-medium);
line-height: 1.3;
color: #7a8194;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Closing line — dual-tone in one row (dark + light), text only */
.transport__closing {
margin: 28px 0 0;
max-width: 920px;
font-size: clamp(18px, 2.2vw, 26px);
font-weight: var(--fw-bold);
line-height: 1.25;
letter-spacing: -0.025em;
}
.transport__closing-main {
color: var(--color-navy);
}
.transport__closing-soft {
color: #9ca3af;
font-weight: var(--fw-medium);
}
.transport__closing-soft::before {
content: " ";
}
@media (prefers-reduced-motion: reduce) {
.transport-card {
transition: none;
}
.transport-card:hover {
transform: none;
}
}
/* ---- sections/baustoffe.css ---- */
/* Baustoffe — aggregate product cards (from import Transport+Baustoffe) */
.baustoffe {
background: #fff;
border-top: 1px solid #eef0f7;
padding-block: 36px;
}
@media (min-width: 768px) {
.baustoffe {
padding-block: 48px;
}
}
.baustoffe__header {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 768px) {
.baustoffe__header {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
}
}
.baustoffe__header-copy {
max-width: 560px;
}
.baustoffe__title {
margin: 0;
font-size: clamp(28px, 4vw, 40px);
font-weight: var(--fw-extrabold);
line-height: 0.92;
letter-spacing: -0.03em;
}
.baustoffe__title-accent {
color: var(--color-accent-line);
}
.baustoffe__title-main {
color: #111827;
}
.baustoffe__lead {
margin: 12px 0 0;
color: #525a6e;
font-size: clamp(14px, 1.2vw, 15px);
font-weight: var(--fw-medium);
line-height: 1.45;
}
.baustoffe__pills {
display: none;
flex-wrap: wrap;
gap: 8px;
flex-shrink: 0;
padding-bottom: 4px;
}
@media (min-width: 768px) {
.baustoffe__pills {
display: flex;
}
}
.baustoffe__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: #f7f8fb;
border: 1px solid #eef0f7;
color: var(--color-navy);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
}
.baustoffe__pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
flex-shrink: 0;
}
.baustoffe__pill-dot--red {
background: var(--color-accent-line);
}
.baustoffe__pill-dot--green {
background: #22c55e;
}
/* Product grid */
.baustoffe__grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (min-width: 768px) {
.baustoffe__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.baustoffe__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.baustoffe-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 132px;
padding: 16px;
border-radius: 16px;
border: 1px solid #eef0f7;
background: #f7f8fb;
transition:
transform 300ms var(--ease-out),
box-shadow 300ms var(--ease-out),
border-color 300ms var(--ease-out);
}
@media (min-width: 768px) {
.baustoffe-card {
min-height: 140px;
}
}
.baustoffe-card--extras {
background: #fff;
}
.baustoffe-card:hover {
transform: translateY(-1px);
border-color: #e3e7f3;
box-shadow: 0 8px 20px rgba(25, 50, 119, 0.07);
}
.baustoffe-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.baustoffe-card__num-row {
display: flex;
align-items: flex-start;
gap: 3px;
}
.baustoffe-card__num {
font-size: 32px;
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.04em;
color: #111827;
transition: color 300ms var(--ease-out);
}
.baustoffe-card:hover .baustoffe-card__num {
color: var(--color-navy);
}
.baustoffe-card__dot {
margin-top: 4px;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--color-accent-line);
opacity: 0.9;
flex-shrink: 0;
}
.baustoffe-card__unit {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #eef0f7;
color: var(--color-navy);
font-size: 10px;
font-weight: var(--fw-extrabold);
letter-spacing: -0.02em;
}
.baustoffe-card__title {
margin: 12px 0 0;
font-size: 14px;
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: -0.01em;
color: #111827;
}
.baustoffe-card__sizes {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.baustoffe-card__sizes > span {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
background: #fff;
border: 1px solid #eef0f7;
color: var(--color-navy);
font-size: 11px;
font-weight: var(--fw-semibold);
letter-spacing: -0.01em;
line-height: 1;
}
/* Beton-Tankstelle — text left + real site button, one compact row */
.baustoffe__closing {
margin-top: 28px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
@media (min-width: 768px) {
.baustoffe__closing {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
}
}
.baustoffe__closing-copy {
min-width: 0;
flex: 1;
max-width: 760px;
}
.baustoffe__closing-title {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 10px;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: var(--fw-bold);
line-height: 1.1;
letter-spacing: -0.025em;
}
.baustoffe__closing-title-main {
color: var(--color-navy);
}
.baustoffe__closing-title-soft {
color: #9ca3af;
font-weight: var(--fw-medium);
font-size: 0.62em;
letter-spacing: 0.06em;
}
.baustoffe__closing-text {
margin: 10px 0 0;
font-size: clamp(16px, 1.8vw, 20px);
font-weight: var(--fw-bold);
line-height: 1.3;
letter-spacing: -0.02em;
}
.baustoffe__closing-main {
color: var(--color-navy);
}
.baustoffe__closing-soft {
color: #9ca3af;
font-weight: var(--fw-medium);
}
.baustoffe__closing-soft::before {
content: " ";
}
.baustoffe__closing-btn {
flex-shrink: 0;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.baustoffe-card {
transition: none;
}
.baustoffe-card:hover {
transform: none;
}
}
/* ---- sections/logistik.css ---- */
/* Logistik — big blue numbers (from import Vieth-Logistik-Big-Blue-Numbers) */
.logistik {
background: #fff;
padding-block: 48px;
}
@media (min-width: 768px) {
.logistik {
padding-block: 80px;
}
}
.logistik__title {
margin: 0;
max-width: 12ch;
font-size: clamp(36px, 5vw, 52px);
font-weight: var(--fw-extrabold);
line-height: 0.92;
letter-spacing: -0.03em;
}
@media (min-width: 768px) {
.logistik__title {
max-width: none;
}
}
.logistik__title-navy {
color: var(--color-navy);
}
.logistik__title-ink {
color: #111827;
}
.logistik__lead {
margin: 20px 0 0;
max-width: 680px;
color: #4b5563;
font-size: 16px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
.logistik__grid {
margin-top: 56px;
display: grid;
grid-template-columns: 1fr;
gap: 40px 48px;
}
@media (min-width: 768px) {
.logistik__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 48px;
row-gap: 56px;
}
}
@media (min-width: 1024px) {
.logistik__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.logistik-item {
cursor: default;
}
.logistik-item__num-row {
display: flex;
align-items: baseline;
gap: 3px;
}
.logistik-item__num {
font-size: clamp(48px, 5vw, 56px);
font-weight: var(--fw-extrabold);
letter-spacing: -0.05em;
line-height: 1;
color: var(--color-navy);
transition: color 300ms var(--ease-out);
}
.logistik-item:hover .logistik-item__num {
color: var(--color-accent-line);
}
.logistik-item__slash {
color: var(--color-accent-line);
font-size: clamp(30px, 3.2vw, 36px);
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.05em;
transform: translateY(-1px);
}
.logistik-item__title {
margin: 12px 0 0;
color: #111827;
font-size: clamp(24px, 2.4vw, 28px);
font-weight: var(--fw-bold);
line-height: 1.1;
letter-spacing: -0.02em;
transition: color 300ms var(--ease-out);
}
.logistik-item:hover .logistik-item__title {
color: var(--color-navy);
}
.logistik-item__desc {
margin: 12px 0 0;
max-width: 320px;
color: #6b7280;
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
/* CTA — navy plaque, compact one-row: text left + site button */
.logistik-cta {
position: relative;
margin-top: 64px;
border-radius: 20px;
background: var(--color-navy);
border: 1px solid var(--color-navy);
overflow: hidden;
}
.logistik-cta__glow {
pointer-events: none;
position: absolute;
border-radius: 999px;
}
.logistik-cta__glow--tr {
right: -64px;
top: -64px;
width: 220px;
height: 220px;
background: rgba(255, 255, 255, 0.06);
filter: blur(1px);
}
.logistik-cta__glow--bl {
left: -48px;
bottom: -80px;
width: 180px;
height: 180px;
background: rgba(228, 0, 70, 0.12);
}
.logistik-cta__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px 22px;
}
@media (min-width: 768px) {
.logistik-cta__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px 28px;
gap: 24px;
}
}
.logistik-cta__copy {
min-width: 0;
flex: 1;
}
.logistik-cta__title {
margin: 0;
color: #fff;
font-size: clamp(16px, 1.5vw, 18px);
font-weight: var(--fw-extrabold);
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Dual-tone in one compact line */
.logistik-cta__text {
margin: 4px 0 0;
max-width: 640px;
font-size: clamp(13px, 1.15vw, 14.5px);
font-weight: var(--fw-bold);
line-height: 1.35;
letter-spacing: -0.015em;
}
.logistik-cta__text-main {
color: #fff;
}
.logistik-cta__text-soft {
color: rgba(255, 255, 255, 0.62);
font-weight: var(--fw-medium);
}
.logistik-cta__btn {
flex-shrink: 0;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(228, 0, 70, 0.28);
}
.logistik-cta__btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.logistik-item__num,
.logistik-item__title {
transition: none;
}
}
/* ---- sections/ziersteine-entsorgung.css ---- */
/* Ziersteine + Entsorgung — side-by-side colour cards, no photos.
The two cards close the Leistungen page, so they carry copy only: the
former bottom photos ate roughly a third of each card and pushed the
content into a narrow strip at the top. */
.ze {
background: #f7f8fb;
padding-block: 40px 56px;
}
@media (min-width: 768px) {
.ze {
padding-block: 48px 64px;
}
}
@media (min-width: 1024px) {
.ze {
padding-block: 64px 88px;
}
}
.ze__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: stretch;
}
@media (min-width: 768px) {
.ze__grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
.ze-card {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
border-radius: 24px;
overflow: hidden;
}
/* Red card — Ziersteine (no border / no glow) */
.ze-card--red {
background: var(--color-accent-line);
border: none;
box-shadow: none;
}
.ze-card--entsorgung {
background: var(--color-navy);
border: none;
box-shadow: 0 8px 28px rgba(25, 50, 119, 0.12);
}
.ze-card__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 28px 24px;
}
@media (min-width: 768px) {
.ze-card__body {
padding: 32px 28px;
}
}
.ze-card__body--navy {
position: relative;
overflow: hidden;
background: var(--color-navy);
}
.ze-card__body-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex: 1;
}
.ze-card__glow {
pointer-events: none;
position: absolute;
border-radius: 999px;
}
.ze-card__glow--tr {
top: 0;
right: 0;
width: 220px;
height: 220px;
background: rgba(255, 255, 255, 0.06);
filter: blur(36px);
transform: translate(25%, -33%);
}
.ze-card__glow--bl {
bottom: 0;
left: 0;
width: 280px;
height: 280px;
background: rgba(228, 0, 70, 0.1);
filter: blur(50px);
transform: translate(-25%, 33%);
}
/* Headline runs the full card width — no fixed breaks, no max-width. */
.ze-card__title {
margin: 0;
max-width: none;
font-size: clamp(28px, 3.4vw, 40px);
font-weight: var(--fw-extrabold);
line-height: 1.02;
letter-spacing: -0.035em;
color: #fff;
text-wrap: balance;
}
/* Both cards' intro copy at one scale and one opacity — the red one used to
sit at 0.78 and read visibly washed out next to the navy card. */
.ze-card__text {
margin: 0;
max-width: none;
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.ze-card__text--lead {
margin-top: 16px;
font-size: clamp(15.5px, 1.5vw, 17px);
line-height: 1.6;
}
/* Bottom groups are pushed down in both cards so the two halves end on the
same line no matter which headline wraps further. */
.ze-card__footer {
margin-top: auto;
padding-top: 28px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
}
.ze-card__footer-label {
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Sort tiles — a grid, not a pill row. The freed photo space goes here, so
each sort gets a real block instead of a 10px chip. */
.ze-card__tags {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (min-width: 480px) {
.ze-card__tags {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.ze-card__tags {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.ze-card__tags {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ze-card__tag {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.24);
color: #fff;
font-size: 14.5px;
font-weight: var(--fw-semibold);
letter-spacing: -0.01em;
text-align: center;
box-sizing: border-box;
}
.ze-card__tag--more {
background: rgba(255, 255, 255, 0.06);
border-style: dashed;
color: rgba(255, 255, 255, 0.8);
}
/* Waste types — matched to the sort tiles opposite: same 52px block height,
same radius, so the two cards read as one pair. */
.ze-card__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ze-card__list li {
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 14.5px;
font-weight: var(--fw-semibold);
line-height: 1.35;
letter-spacing: -0.01em;
box-sizing: border-box;
}
.ze-card__check {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 13px;
line-height: 1;
}
/* Desktop/laptop: the cards read as too small next to the rest of the page
at this width. Grow the body and copy — there is no photo to compete. */
@media (min-width: 1024px) {
.ze-card__body {
padding: 44px 40px 40px;
}
.ze-card__title {
font-size: clamp(32px, 2.9vw, 46px);
}
.ze-card__text--lead {
margin-top: 20px;
font-size: 17.5px;
}
.ze-card__footer {
padding-top: 34px;
gap: 14px;
}
.ze-card__tag,
.ze-card__list li {
min-height: 56px;
font-size: 15.5px;
}
}
/* ---- sections/why-vieth.css ---- */
/* Section: Warum Vieth — equal-height cards, aligned icon + text rows */
.why-vieth {
background: var(--color-canvas);
border-bottom: 1px solid var(--color-border);
}
.why-vieth__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.why-vieth__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.why-vieth__title {
margin: 0;
max-width: 680px;
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--color-navy);
}
.why-vieth__grid {
margin-top: 36px;
display: grid;
grid-template-columns: 1fr;
/* Tight gutter on purpose: the cards are one block of four, not four
free-floating tiles. A 16px gap plus 1.5px borders read as a loose grid. */
gap: 10px;
/* equal row heights */
align-items: stretch;
}
@media (min-width: 768px) {
.why-vieth__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.why-vieth__grid {
margin-top: 44px;
grid-template-columns: repeat(4, 1fr);
}
}
/* Card shell — shared edge language with Leistungen.
Density: the card is sized to its content plus one breath, not to a tall
fixed frame. It used to be 320/340px high for a number, an icon and two
lines of text, which parked 90–110px of nothing between the number and the
icon on every card. The min-height below is the sum of the bands
(num + icon row + text row + padding) — it still locks the row to one
height, it just no longer pads it out. */
.why-card {
position: relative;
display: grid;
/* Row 1 = number + icon side by side, row 2 = title. See the
.why-card__body note below for how the icon gets up here. */
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
column-gap: 14px;
/* fixed equal height across the row */
min-height: 176px;
height: 100%;
overflow: hidden;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-canvas);
padding: 22px;
cursor: default;
transition:
background-color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
@media (min-width: 1024px) {
.why-card {
min-height: 184px;
padding: 24px;
}
}
.why-card:hover,
.why-card:focus-within {
background: var(--color-navy);
border-color: var(--color-navy);
color: #fff;
/* Lift only, no scale: with a 10px gutter a scaled card grows into its
neighbour and the row reads as colliding tiles. */
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
/* Sits on the padding line, so it moves with the padding above */
.why-card__accent {
position: absolute;
top: 22px;
right: 22px;
height: 2px;
width: 0;
border-radius: 999px;
background: var(--color-accent-line);
transform-origin: right center;
transition: all var(--dur) var(--ease-out) 80ms;
}
.why-card:hover .why-card__accent,
.why-card:focus-within .why-card__accent {
width: 40px;
background: #fff;
opacity: 0.9;
}
.why-card__num {
grid-column: 1;
grid-row: 1;
display: block;
font-size: 46px;
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.04em;
color: var(--color-border);
user-select: none;
transition: color var(--dur) var(--ease-out);
}
.why-card:hover .why-card__num,
.why-card:focus-within .why-card__num {
color: rgba(255, 255, 255, 0.25);
}
/* The wrapper dissolves: with display:contents its two rows become grid items
of the card itself, which is what lets the icon sit beside the number in row
1 while the title spans both columns underneath — without touching the
markup in why-vieth / werte / vermietung-vorteile / karriere-vorteile. */
.why-card__body {
display: contents;
}
/* Icon shares row 1 with the number, vertically centred on it. To park it at
the right edge of the card instead, switch justify-content to flex-end. */
.why-card__icon-row {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-start;
height: 46px;
flex-shrink: 0;
}
.why-card__icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
color: var(--color-navy);
transition:
background-color var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
.why-card:hover .why-card__icon,
.why-card:focus-within .why-card__icon {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.why-card__icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Text band: spans both columns under the number/icon row and is pinned to the
bottom of the card, so titles share one top edge across the row. The
min-height only has to hold the longest title (three lines at 16/1.35). */
.why-card__text-row {
grid-column: 1 / -1;
grid-row: 2;
align-self: end;
margin-top: 18px;
min-height: 66px;
display: flex;
align-items: flex-start;
}
.why-card__title {
margin: 0;
max-width: 240px;
font-size: 16px;
font-weight: var(--fw-bold);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--color-navy);
transition: color var(--dur) var(--ease-out);
}
.why-card:hover .why-card__title,
.why-card:focus-within .why-card__title {
color: #fff;
}
/* Reveal enhancement — cards stay visible by default.
Only animate when the section is in view (never leave opacity:0 stuck). */
html.js .why-vieth.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .why-vieth.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .why-vieth.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .why-vieth.is-inview [data-reveal="3"] { animation-delay: 160ms; }
html.js .why-vieth.is-inview [data-reveal="4"] { animation-delay: 210ms; }
@keyframes whyReveal {
from {
opacity: 0.35;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
html.js .why-vieth.is-inview [data-reveal] {
animation: none;
}
}
/* ---- sections/final-cta.css ---- */
/* Final CTA — title left | truck center | action right
Full truck not required: cab sits mid-frame, bottom can crop.
*/
.final-cta {
position: relative;
background: var(--color-canvas);
padding-block: 40px 56px;
}
@media (min-width: 1024px) {
.final-cta {
padding-block: 48px 72px;
}
}
.final-cta__frame {
position: relative;
border: 1.5px solid var(--color-navy);
border-radius: 28px;
background: var(--color-canvas);
overflow: hidden;
min-height: 300px;
}
@media (min-width: 1024px) {
.final-cta__frame {
border-radius: 32px;
min-height: clamp(360px, 34vw, 440px);
}
}
.final-cta__inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
min-height: inherit;
height: 100%;
padding: clamp(32px, 4.2vw, 64px) clamp(22px, 3.8vw, 64px);
align-items: center;
}
@media (min-width: 1024px) {
.final-cta__inner {
grid-template-columns: minmax(280px, 1.05fr) minmax(240px, 0.78fr);
gap: clamp(24px, 4vw, 64px);
padding-bottom: clamp(36px, 4vw, 56px);
padding-top: clamp(36px, 4vw, 56px);
}
}
/* LEFT title */
.final-cta__title {
margin: 0;
position: relative;
z-index: 4;
font-size: clamp(34px, 4.4vw, 58px);
font-weight: var(--fw-extrabold);
line-height: 1.12;
letter-spacing: -0.035em;
text-transform: uppercase;
color: var(--color-ink);
max-width: 12ch;
}
@media (min-width: 1024px) {
.final-cta__title {
align-self: center;
justify-self: start;
}
}
.final-cta__title-line {
display: block;
overflow: hidden;
line-height: 1.12;
padding-block: 0.015em;
}
/* Gated on :not(.is-inview) rather than on html.js alone: the js class is
added after first paint, so the old rule painted the headline in place and
then snapped it out of view on every load — a visible jolt on the homepage,
which is the only page carrying this section. */
html.js .final-cta:not(.is-inview) .final-cta__title-line > span {
transform: translateY(110%);
}
.final-cta__title-line > span {
display: block;
transition: transform var(--dur-slow) var(--ease-out);
}
.final-cta.is-inview .final-cta__title-line > span {
transform: translateY(0);
}
.final-cta.is-inview .final-cta__title-line:nth-child(1) > span { transition-delay: 100ms; }
.final-cta.is-inview .final-cta__title-line:nth-child(2) > span { transition-delay: 180ms; }
.final-cta.is-inview .final-cta__title-line:nth-child(3) > span { transition-delay: 260ms; }
.final-cta.is-inview .final-cta__title-line:nth-child(4) > span { transition-delay: 340ms; }
/* RIGHT action */
.final-cta__action {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
gap: 20px;
max-width: 340px;
}
html.js .final-cta.is-inview .final-cta__action {
animation: finalCtaIn 700ms var(--ease-out) 200ms both;
}
@media (min-width: 1024px) {
.final-cta__action {
justify-self: end;
align-self: center;
width: 100%;
max-width: 320px;
}
}
.final-cta__copy {
margin: 0;
font-size: clamp(15px, 1.2vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.55;
color: var(--color-navy);
}
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 26px;
border-radius: var(--radius-pill);
background: var(--color-cta);
color: #fff;
font-size: 15px;
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
box-shadow: var(--shadow-cta);
width: fit-content;
transition:
background-color var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out);
}
.btn-cta:hover {
background: var(--color-cta-hover);
box-shadow: var(--shadow-cta-hover);
transform: translateY(-1px);
}
.btn-cta:active { transform: translateY(0); }
.btn-cta:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.35);
outline-offset: 3px;
}
.btn-cta__arrow {
margin-left: 8px;
font-size: 18px;
line-height: 1;
transform: translateY(-1px);
}
.final-cta__meta {
margin-top: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.final-cta__meta-line {
display: block;
width: 32px;
height: 1px;
background: var(--color-border-strong);
flex-shrink: 0;
}
.final-cta__meta-text {
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-soft);
white-space: nowrap;
}
/* TRUCK — centered between columns, bottom may crop (cab is enough) */
.final-cta__media {
position: absolute;
z-index: 2;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: clamp(220px, 42vw, 520px);
height: clamp(180px, 28vw, 340px);
pointer-events: none;
user-select: none;
overflow: hidden;
background: transparent;
}
@media (min-width: 1024px) {
.final-cta__media {
left: 50%;
width: clamp(313px, 40vw, 560px);
height: clamp(240px, 28vw, 281px);
}
}
.final-cta__truck {
position: absolute;
left: 50%;
bottom: -22%;
transform: translateX(-50%);
width: 112%;
max-width: none;
height: auto;
object-fit: contain;
object-position: center bottom;
background: transparent;
filter: none;
}
html.js .final-cta.is-inview .final-cta__truck {
animation: finalTruckIn 900ms var(--ease-out) 160ms both;
}
@keyframes finalCtaIn {
from {
opacity: 0.35;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes finalTruckIn {
from { opacity: 0.2; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
html.js .final-cta__title-line > span {
transform: none;
}
html.js .final-cta.is-inview .final-cta__action,
html.js .final-cta.is-inview .final-cta__truck {
animation: none;
}
}
/* Shared: no truck below desktop */
@media (max-width: 1023px) {
.final-cta__frame {
min-height: 0;
}
.final-cta__media {
display: none !important;
}
.final-cta__meta-text {
white-space: normal;
line-height: 1.35;
}
}
/* Tablet — desktop-like split: title left | copy+button right */
@media (min-width: 640px) and (max-width: 1023px) {
.final-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
column-gap: clamp(20px, 4vw, 40px);
row-gap: 0;
align-items: center;
padding: 36px 28px 36px;
}
.final-cta__title {
max-width: 11ch;
width: auto;
font-size: clamp(30px, 4.6vw, 44px);
line-height: 1.08;
z-index: 4;
justify-self: start;
align-self: center;
}
.final-cta__action {
max-width: 320px;
width: 100%;
gap: 16px;
justify-self: end;
align-self: center;
}
.final-cta__copy {
font-size: clamp(14px, 1.8vw, 16px);
}
}
/* Phone — stacked title then action */
@media (max-width: 639px) {
.final-cta__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 24px 18px 24px;
}
.final-cta__title {
max-width: none;
width: 100%;
font-size: clamp(26px, 8vw, 34px);
line-height: 1.08;
z-index: 4;
}
.final-cta__action {
max-width: 100%;
width: 100%;
gap: 14px;
}
.final-cta__copy {
font-size: 15px;
}
.btn-cta {
min-height: 48px;
padding: 0 18px;
font-size: 14px;
}
}
@media (max-width: 419px) {
.final-cta__meta-text {
font-size: 9px;
}
}
/* Unternehmen page sections */
/* ---- sections/unternehmen-hero.css ---- */
/* Section: Unternehmen hero */
.u-hero {
padding-top: 16px;
padding-bottom: 8px;
background: var(--color-canvas);
}
@media (min-width: 768px) {
.u-hero {
padding-top: 24px;
}
}
.u-hero__panel {
position: relative;
isolation: isolate;
min-height: 460px;
max-height: none;
border-radius: var(--radius-card);
overflow: hidden;
background: #0d1428;
display: flex;
align-items: center;
}
@media (min-width: 1024px) {
.u-hero__panel {
min-height: 460px;
max-height: 560px;
}
}
.u-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.u-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.u-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.1) 100%),
linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 100%),
rgba(0, 0, 0, 0.35);
}
.u-hero__content {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
padding: 40px 20px 36px;
}
@media (min-width: 768px) {
.u-hero__content {
padding: 56px 40px 48px;
}
}
@media (min-width: 1024px) {
.u-hero__content {
flex-direction: row;
align-items: center;
gap: 48px;
padding: 56px 56px 48px;
}
}
.u-hero__copy {
max-width: 640px;
min-width: 0;
}
/* Weight/line-height match the homepage H1 (.hero__title); size and layout
stay hero-specific. */
.u-hero__title {
margin: 0;
color: #fff;
/* 7.2vw growth curve matches the homepage H1; the 28px floor plus hyphens
keeps "Familienunternehmen," inside the panel on 360–390px screens. */
font-size: clamp(28px, 7.2vw, 64px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.04em;
hyphens: auto;
overflow-wrap: break-word;
}
.u-hero__lead {
margin: 18px 0 0;
max-width: 520px;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.6;
}
@media (min-width: 768px) {
.u-hero__lead {
margin-top: 20px;
}
}
.u-hero__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
@media (min-width: 768px) {
.u-hero__actions {
margin-top: 32px;
}
}
/* Hero CTAs reuse shared .btn-primary / .btn-secondary from hero.css */
/* Hidden on phones: 3 cards wrap into a cramped row that eats space and
adds to the panel's oversized feel; they return once there's room. */
.u-hero__stats {
display: none;
}
@media (min-width: 640px) {
.u-hero__stats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
width: 100%;
}
}
@media (min-width: 1024px) {
.u-hero__stats {
width: 180px;
flex-direction: column;
flex-wrap: nowrap;
flex-shrink: 0;
margin-left: auto;
}
}
.u-hero__stat {
display: flex;
flex-direction: column;
justify-content: center;
width: 180px;
height: 92px;
padding: 0 20px;
background: var(--color-canvas);
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.u-hero__stat-value {
color: var(--color-navy);
font-size: 28px;
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: -0.03em;
}
.u-hero__stat-label {
margin-top: 4px;
color: #6b7280;
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
}
/* ---- sections/historie.css ---- */
/* Section: Historie */
.historie {
background: var(--color-surface-neutral);
border-bottom: 1px solid var(--color-border);
}
/* Section rhythm — same as homepage .fokus__inner / .why-vieth__inner */
.historie__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.historie__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.historie__layout {
display: flex;
flex-direction: column;
gap: 40px;
}
@media (min-width: 1024px) {
.historie__layout {
flex-direction: row;
justify-content: space-between;
gap: 0;
}
}
.historie__aside {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 1024px) {
.historie__aside {
order: 2;
width: 40%;
position: sticky;
top: 112px;
align-self: flex-start;
}
}
/* Canonical section H2 — identical to .fokus__title / .why-vieth__title */
.historie__title {
margin: 0;
color: var(--color-navy);
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
}
.historie__rule {
display: none;
width: 88px;
height: 3px;
margin-top: 8px;
border-radius: var(--radius-pill);
background: rgba(25, 50, 119, 0.1);
}
@media (min-width: 1024px) {
.historie__rule {
display: block;
}
}
.historie__body {
display: flex;
flex-direction: column;
gap: 32px;
}
@media (min-width: 768px) {
.historie__body {
gap: 40px;
}
}
@media (min-width: 1024px) {
.historie__body {
order: 1;
width: 55%;
}
}
/* Canonical body copy — shared with .fuhrpark__lead / .uber-uns__col-text */
.historie__text {
margin: 0;
color: var(--color-body);
font-size: clamp(16px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
.historie__quote {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 8px;
padding-top: 32px;
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.historie__quote {
margin-top: 16px;
}
}
/* Portrait frame for the managing director — larger than the old initials
badge so an actual face reads, and overflow-clipped so a dropped-in photo
needs no cropping. */
.historie__quote-mark {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
color: var(--color-navy);
font-size: 12px;
font-weight: var(--fw-bold);
}
.historie__quote-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.historie__quote-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--color-text-soft);
}
.historie__quote-placeholder svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.historie__quote-title {
margin: 0;
color: var(--color-navy);
font-size: 15px;
font-weight: var(--fw-bold);
line-height: 1.5;
}
.historie__quote-sub {
margin: 4px 0 0;
color: var(--color-body);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.5;
}
/* Reveal — same keyframes/timing as every other section (see why-vieth.css) */
html.js .historie.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .historie.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .historie.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .historie.is-inview [data-reveal="3"] { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
html.js .historie.is-inview [data-reveal] {
animation: none;
}
}
/* ---- sections/uber-uns.css ---- */
/* Section: Über uns (bento) */
.uber-uns {
background: var(--color-canvas);
}
/* Section rhythm — same as homepage .fokus__inner / .why-vieth__inner */
.uber-uns__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.uber-uns__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
/* Two text columns */
.uber-uns__columns {
display: grid;
gap: 40px;
}
@media (min-width: 768px) {
.uber-uns__columns {
grid-template-columns: 1fr 1fr;
gap: 64px;
}
}
@media (min-width: 1024px) {
.uber-uns__columns {
gap: 80px;
}
}
/* Sub-section H3 — same weight/tracking language as the section H2s */
.uber-uns__col-title {
margin: 0 0 14px;
color: var(--color-navy);
font-size: clamp(26px, 2.4vw, 32px);
font-weight: var(--fw-extrabold);
line-height: 1.08;
letter-spacing: -0.02em;
}
/* Canonical body copy — shared with .historie__text / .fuhrpark__lead */
.uber-uns__col-text {
margin: 0;
max-width: 480px;
color: var(--color-body);
font-size: clamp(16px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
.uber-uns__col-note {
margin: 20px 0 0;
max-width: 480px;
color: var(--color-navy);
font-size: 15px;
font-weight: var(--fw-bold);
line-height: 1.5;
}
/* Metrics come from the shared .btn-outline (components.css) */
.uber-uns__link {
margin-top: 20px;
}
/* Bento grid */
.uber-uns__bento {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 48px;
padding-top: 48px;
border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.uber-uns__bento {
grid-template-columns: repeat(2, 1fr);
margin-top: 56px;
padding-top: 56px;
}
}
@media (min-width: 1024px) {
.uber-uns__bento {
grid-template-columns: repeat(4, 1fr);
}
}
.uber-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
padding: 28px;
border-radius: 20px;
overflow: hidden;
transition:
transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out);
}
.uber-tile:hover {
transform: translateY(-4px);
}
/* Team card */
.uber-tile--team {
border: 1px solid #eef0f7;
background: #fff;
box-shadow: 0 8px 30px rgba(25, 50, 119, 0.06);
}
.uber-tile--team:hover {
border-color: #e2e6f3;
box-shadow: 0 16px 40px rgba(25, 50, 119, 0.1);
}
.uber-tile__glow {
position: absolute;
pointer-events: none;
border-radius: 999px;
filter: blur(28px);
}
.uber-tile__glow--soft {
top: -64px;
right: -64px;
width: 160px;
height: 160px;
background: #eef2ff;
opacity: 0.7;
}
.uber-tile__glow--navy {
bottom: -80px;
left: -80px;
width: 256px;
height: 256px;
background: #26449e;
opacity: 0.6;
filter: blur(30px);
}
.uber-tile__avatars {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
.uber-tile__avatar-row {
display: flex;
align-items: center;
}
.uber-tile__avatar {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 12px;
font-weight: var(--fw-bold);
box-shadow: 0 0 0 3px #fff;
}
.uber-tile__avatar + .uber-tile__avatar {
margin-left: -8px;
}
.uber-tile__avatar--navy {
background: var(--color-navy);
color: #fff;
box-shadow: 0 0 0 3px #fff, 0 1px 2px rgba(0, 0, 0, 0.08);
}
.uber-tile__avatar--soft {
background: #d9deef;
color: var(--color-navy);
}
.uber-tile__avatar--mist {
background: #e3e6f2;
color: var(--color-navy);
}
.uber-tile__avatar--pale {
background: #eef0f7;
color: #5b6a9a;
}
.uber-tile__avatar--navy-soft {
background: rgba(25, 50, 119, 0.9);
color: #fff;
}
.uber-tile__avatar--ghost {
background: #fff;
border: 1px solid #e4e7f0;
color: #9aa6c8;
box-shadow: 0 0 0 3px #fff;
}
.uber-tile__foot {
position: relative;
margin-top: 24px;
}
.uber-tile__kicker {
margin: 0;
color: #6b7280;
font-size: 12px;
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.uber-tile__kicker--light {
margin-top: 8px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.12em;
font-weight: var(--fw-bold);
font-size: 12px;
}
.uber-tile__metric {
margin-top: 6px;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.uber-tile__value {
color: var(--color-navy);
font-size: 40px;
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.03em;
}
.uber-tile__value--lg {
font-size: 40px;
letter-spacing: -0.02em;
}
.uber-tile__value--places {
font-size: 48px;
letter-spacing: -0.03em;
}
.uber-tile__value--fleet {
font-size: 44px;
letter-spacing: -0.02em;
}
.uber-tile__value--white {
color: #fff;
}
.uber-tile__unit {
color: var(--color-body);
font-size: 14px;
font-weight: var(--fw-medium);
}
/* Navy experience card */
.uber-tile--navy {
background: var(--color-navy);
color: #fff;
}
.uber-tile--navy:hover {
box-shadow: 0 16px 40px rgba(25, 50, 119, 0.28);
}
.uber-tile--navy::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
transparent,
transparent
);
pointer-events: none;
}
.uber-tile__top {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.uber-tile--navy .uber-tile__value {
color: #fff;
}
.uber-tile__icon-circle {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(6px);
}
.uber-tile__note {
margin: 0;
max-width: 240px;
color: rgba(255, 255, 255, 0.85);
font-size: 15px;
line-height: 1.5;
}
/* Places card — larger "2 Standorte" */
.uber-tile--places {
border: 1px solid #eef0f7;
background: #f7f8fb;
}
.uber-tile--places:hover {
border-color: #e2e6f3;
box-shadow: 0 12px 32px rgba(25, 50, 119, 0.08);
}
.uber-tile__text {
margin: 14px 0 0;
max-width: 260px;
color: var(--color-body);
font-size: 15px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.uber-tile__places-row {
position: relative;
margin-top: 28px;
display: flex;
align-items: center;
gap: 14px;
}
.uber-tile__map-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff;
border: 1px solid #e8ebf3;
color: var(--color-navy);
box-shadow: 0 2px 8px rgba(25, 50, 119, 0.04);
}
.uber-tile__places-meta {
flex: 1;
min-width: 0;
}
.uber-tile__places-count {
margin: 0;
display: flex;
align-items: baseline;
gap: 10px;
}
.uber-tile__places-label {
color: #6b7280;
font-size: 15px;
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.uber-tile__places-names {
margin: 6px 0 0;
color: var(--color-body);
font-size: 14px;
font-weight: var(--fw-medium);
}
/* Fleet photo card with auto-rotate */
.uber-tile--fleet {
padding: 0;
color: #fff;
}
.uber-tile--fleet:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.uber-tile__photos {
position: absolute;
inset: 0;
}
.uber-tile__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 700ms var(--ease-out);
}
.uber-tile__photo.is-active {
opacity: 1;
}
.uber-tile__photo-scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.15), transparent 60%),
linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
}
.uber-tile__fleet-body {
position: relative;
z-index: 2;
height: 100%;
min-height: 220px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Title + subtitle + text stacked at the bottom */
.uber-tile__fleet-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
max-width: 100%;
}
.uber-tile__fleet-copy .uber-tile__value {
margin: 0;
}
.uber-tile__fleet-subtitle {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.3;
}
.uber-tile__fleet-note {
margin: 4px 0 0;
max-width: 260px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.5;
font-weight: var(--fw-medium);
}
/* Reveal — same keyframes/timing as every other section (see why-vieth.css) */
html.js .uber-uns.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .uber-uns.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .uber-uns.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .uber-uns.is-inview [data-reveal="3"] { animation-delay: 160ms; }
html.js .uber-uns.is-inview [data-reveal="4"] { animation-delay: 210ms; }
html.js .uber-uns.is-inview [data-reveal="5"] { animation-delay: 260ms; }
html.js .uber-uns.is-inview [data-reveal="6"] { animation-delay: 310ms; }
@media (prefers-reduced-motion: reduce) {
.uber-tile,
.uber-uns__link,
.uber-tile__photo {
transition: none;
}
.uber-tile:hover {
transform: none;
}
html.js .uber-uns.is-inview [data-reveal] {
animation: none;
}
}
/* ---- sections/fuhrpark.css ---- */
/* Section: Fuhrpark (auto-scroll carousel) */
.fuhrpark {
background: var(--color-canvas);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
/* Section rhythm — same as homepage .fokus__inner / .why-vieth__inner */
.fuhrpark__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.fuhrpark__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.fuhrpark__header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 720px;
margin-inline: auto;
}
/* Canonical section H2 — identical to .fokus__title / .why-vieth__title */
.fuhrpark__title {
margin: 0;
max-width: 760px;
color: var(--color-navy);
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
}
/* Canonical body copy — shared with .historie__text / .uber-uns__col-text */
.fuhrpark__lead {
margin: 18px 0 0;
max-width: 760px;
color: var(--color-body);
font-size: clamp(16px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
.fuhrpark__tags {
list-style: none;
margin: 32px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.fuhrpark__tag {
padding: 8px 16px;
border-radius: var(--radius-pill);
background: var(--color-surface-tint);
border: 1px solid var(--color-border);
color: var(--color-navy);
font-size: 12px;
font-weight: var(--fw-semibold);
letter-spacing: -0.01em;
}
.fuhrpark__track-wrap {
position: relative;
width: 100%;
margin-top: 48px;
}
@media (min-width: 768px) {
.fuhrpark__track-wrap {
margin-top: 56px;
}
}
.fuhrpark__fade {
position: absolute;
top: 0;
bottom: 0;
width: 24px;
z-index: 2;
pointer-events: none;
}
@media (min-width: 768px) {
.fuhrpark__fade {
width: 40px;
}
}
.fuhrpark__fade--left {
left: 0;
background: linear-gradient(to right, var(--color-canvas), transparent);
}
.fuhrpark__fade--right {
right: 0;
background: linear-gradient(to left, var(--color-canvas), transparent);
}
.fuhrpark__track {
display: flex;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: auto;
padding: 8px 4px;
-ms-overflow-style: none;
scrollbar-width: none;
cursor: grab;
}
.fuhrpark__track::-webkit-scrollbar {
display: none;
}
.fuhrpark__track.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}
.fuhrpark__card {
position: relative;
flex: 0 0 auto;
width: min(320px, 82vw);
height: 460px;
border-radius: var(--radius-card);
overflow: hidden;
background: var(--color-canvas);
border: 1px solid var(--color-border);
box-shadow: 0 8px 30px rgba(25, 50, 119, 0.08);
user-select: none;
}
@media (min-width: 768px) {
.fuhrpark__card {
width: 360px;
}
}
.fuhrpark__card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: transform;
}
.fuhrpark__card:hover .fuhrpark__card-img {
transform: scale(1.05);
}
.fuhrpark__card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.3) 45%,
transparent 100%
);
height: 65%;
top: auto;
transition:
height 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
background 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fuhrpark__card::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
transition: background-color 500ms var(--ease-out);
pointer-events: none;
}
.fuhrpark__card:hover::after {
background: rgba(0, 0, 0, 0.25);
}
.fuhrpark__card:hover .fuhrpark__card-overlay {
height: 90%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.5) 50%,
transparent 100%
);
}
.fuhrpark__card-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 24px;
}
.fuhrpark__card-cat {
margin: 0 0 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.fuhrpark__card-title {
margin: 0;
color: #fff;
font-size: 18px;
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: -0.01em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.fuhrpark__card-desc {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
font-weight: var(--fw-medium);
line-height: 1.5;
transition: color 300ms var(--ease-out);
}
.fuhrpark__card:hover .fuhrpark__card-desc {
color: rgba(255, 255, 255, 0.9);
}
/* Reveal — same keyframes/timing as every other section (see why-vieth.css) */
html.js .fuhrpark.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .fuhrpark.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .fuhrpark.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .fuhrpark.is-inview [data-reveal="3"] { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
.fuhrpark__card-img,
.fuhrpark__card-overlay,
.fuhrpark__card::after,
.fuhrpark__card-desc {
transition: none;
}
.fuhrpark__card:hover .fuhrpark__card-img {
transform: none;
}
html.js .fuhrpark.is-inview [data-reveal] {
animation: none;
}
}
/* ---- sections/werte.css ---- */
/* Section: Werte — reuses .why-card / .why-vieth__grid from why-vieth.css */
.werte {
background: var(--color-canvas);
border-bottom: 1px solid var(--color-border);
}
.werte__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.werte__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.werte__header {
max-width: 680px;
}
/* Canonical section H2 — identical to .fokus__title / .why-vieth__title */
.werte__title {
margin: 0;
max-width: 680px;
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--color-navy);
}
/* Grid + card copy are inherited unchanged from why-vieth.css so the Werte
cards are pixel-identical to the homepage cards. No overrides here. */
/* Same reveal timing as homepage why-vieth cards */
html.js .werte.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .werte.is-inview [data-reveal="1"] {
animation-delay: 60ms;
}
html.js .werte.is-inview [data-reveal="2"] {
animation-delay: 110ms;
}
html.js .werte.is-inview [data-reveal="3"] {
animation-delay: 160ms;
}
html.js .werte.is-inview [data-reveal="4"] {
animation-delay: 210ms;
}
@media (prefers-reduced-motion: reduce) {
html.js .werte.is-inview [data-reveal] {
animation: none;
}
}
/* Hallen- & Flächenvermietung page sections */
/* ---- sections/vermietung-hero.css ---- */
/* Vermietung hero — same mechanism as the homepage hero (.hero in hero.css):
the photo is full-bleed behind the whole section at every width and the copy
sits on top of it. From 1024px the grid splits so the rotating proof stats
get their own column on the right; the photo still runs edge to edge
underneath both. */
.v-hero {
position: relative;
overflow: hidden;
background: var(--color-navy-deep);
isolation: isolate;
}
.v-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"proof";
gap: 28px;
align-items: stretch;
padding-block: 28px 36px;
min-height: 460px;
}
@media (min-width: 640px) {
.v-hero__inner {
min-height: 520px;
}
}
@media (min-width: 768px) {
.v-hero__inner {
gap: 32px;
padding-block: 36px 48px;
}
}
@media (min-width: 1024px) {
.v-hero__inner {
/* Identical split to the homepage hero (.hero__inner) — the old
52/48 gave the photo a wider column and thus different proportions. */
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.9fr);
grid-template-areas: "copy proof";
align-items: center;
padding-block: 64px 72px;
/* The photo used to get its height from the 520px media card. It is a
background now, so the section states its own height — and it is kept
modest on purpose: the supplied master is only 1600x400, so a taller
hero means more upscaling and a softer picture. */
min-height: clamp(440px, 34vw, 520px);
}
}
/* ---- Copy ---- */
.v-hero__copy {
position: relative;
z-index: 2;
grid-area: copy;
min-width: 0;
}
/* White at every width now — same treatment as the homepage H1. There is no
light panel to switch to at 1024px any more; the photo runs the full
section. */
.v-hero__title {
margin: 0;
max-width: 560px;
color: #fff;
font-size: clamp(30px, 7.2vw, 60px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.04em;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}
/* Kept lighter than --color-accent-line: a pale pink disappears over the
bright roof patches, the brand crimson goes muddy against the baked-in
crimson panel behind it. */
.v-hero__title-accent {
color: #ff5a8a;
}
.v-hero__lead {
margin: 20px 0 0;
max-width: 440px;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.6;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.v-hero__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* The shared .btn-secondary flips to a solid light skin at 1024px for the
interior heroes that sit on white (see hero.css). This one is a photo at
every width, so it keeps the translucent-on-dark treatment — same override
the homepage hero makes. */
@media (min-width: 1024px) {
.v-hero .btn-secondary {
background: rgba(255, 255, 255, 0.14);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
}
.v-hero .btn-secondary:hover {
background: rgba(255, 255, 255, 0.24);
}
}
/* ---- Photo: full-bleed behind the whole section ----
Child of .v-hero, not of .v-hero__inner — see the note in the markup. */
.v-hero__media {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
}
.v-hero__media-frame {
position: absolute;
inset: 0;
isolation: isolate;
overflow: hidden;
background: var(--color-navy-deep);
}
.v-hero__media-photo {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
/* The master is a 4:1 letterbox. A portrait viewport crops it to a narrow
vertical slice, so bias right — anchored left, the slice would be nothing
but the crimson panel and no halls at all. */
object-position: 64% center;
}
@media (min-width: 1024px) {
.v-hero__media-photo {
/* Wide enough to keep most of the frame: anchor left so the crimson panel
baked into the master lands under the copy column instead of being
cropped away from both sides. */
object-position: left center;
}
}
/* ---- Scrim ----
Portrait: near-uniform dark wash — the aerial shot has bright roof panels
that wash out light text, so the middle band stays fairly dark too.
Desktop: left-to-right, topping up the crimson panel baked into the master
under the copy column while leaving the halls on the right visible. */
.v-hero__proof-scrim {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(8, 16, 42, 0.68) 0%,
rgba(8, 16, 42, 0.48) 38%,
rgba(8, 16, 42, 0.5) 62%,
rgba(8, 16, 42, 0.8) 100%
);
}
@media (min-width: 1024px) {
.v-hero__proof-scrim {
background: linear-gradient(
90deg,
rgba(8, 16, 42, 0.62) 0%,
rgba(8, 16, 42, 0.5) 34%,
rgba(8, 16, 42, 0.38) 52%,
rgba(8, 16, 42, 0.46) 74%,
rgba(8, 16, 42, 0.72) 100%
);
}
}
/* ---- Rotating proof ----
A grid row of its own below 1024px and the right-hand column above it. It
used to be absolutely positioned inside the photo frame; the frame is a
decorative background now, so the numbers moved into the content grid.
Height is fixed because the three items are stacked on top of each other
(inset:0) for the crossfade — without it the block would collapse to zero. */
.v-hero__proof {
grid-area: proof;
position: relative;
z-index: 2;
height: 132px;
color: #fff;
text-align: left;
pointer-events: none;
}
@media (min-width: 640px) {
.v-hero__proof {
height: 168px;
}
}
@media (min-width: 1024px) {
.v-hero__proof {
justify-self: end;
width: min(100%, 460px);
height: 200px;
text-align: right;
}
}
.v-hero__proof-item {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
/* Left-aligned while it is a stacked row under the copy; right-aligned once
it has its own column. */
align-items: flex-start;
justify-content: flex-end;
opacity: 0;
transform: translateX(64px);
animation: vHeroProofSlide 15s var(--ease-out) infinite;
}
@media (min-width: 1024px) {
.v-hero__proof-item {
align-items: flex-end;
}
}
.v-hero__proof-item:nth-child(2) {
animation-delay: 5s;
}
.v-hero__proof-item:nth-child(3) {
animation-delay: 10s;
}
/* Eyebrow label — the site's standard small-caps label (cf. the Fuhrpark
card category): tracked *out*, never in. */
.v-hero__proof-label {
margin: 0 0 6px;
font-size: 12px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 640px) {
.v-hero__proof-label {
margin-bottom: 8px;
font-size: 13.5px;
}
}
/* Wraps instead of clipping if the number ever outgrows the safe box.
Tracking stays near the H1's -0.03em — the old -0.045em on extrabold
digits closed the counters up and the figure read as one blob. */
.v-hero__proof-main {
margin: 0;
max-width: 100%;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
column-gap: 0.22em;
row-gap: 1px;
font-size: clamp(30px, 7.4vw, 46px);
font-weight: var(--fw-extrabold);
line-height: 1.04;
letter-spacing: -0.025em;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
}
@media (min-width: 640px) {
.v-hero__proof-main {
font-size: clamp(34px, 3.9vw, 54px);
}
}
@media (min-width: 1024px) {
.v-hero__proof-main {
justify-content: flex-end;
}
}
.v-hero__proof-accent {
color: #ff3a74;
white-space: nowrap;
}
/* Canonical body copy scale, so the caption matches the rest of the site
instead of dropping to a 12px footnote. */
.v-hero__proof-sub {
margin: 10px 0 0;
max-width: 300px;
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.5;
color: rgba(255, 255, 255, 0.92);
}
@media (min-width: 640px) {
.v-hero__proof-sub {
margin-top: 14px;
max-width: 380px;
font-size: 16px;
line-height: 1.55;
}
}
@keyframes vHeroProofSlide {
0% {
opacity: 0;
transform: translateX(64px);
}
12%,
27% {
opacity: 1;
transform: translateX(0);
}
40%,
100% {
opacity: 0;
transform: translateX(-64px);
}
}
/* No carousel without motion — show the first slide only */
@media (prefers-reduced-motion: reduce) {
.v-hero__proof-item {
animation: none;
}
.v-hero__proof-item:not(:first-child) {
display: none;
}
.v-hero__proof-item:first-child {
opacity: 1;
transform: none;
}
}
/* ---- sections/vermietung-flaechen.css ---- */
/* Flächen-Überblick — editorial split: surface cards left, copy right. */
.flaechen {
background: var(--color-canvas);
border-top: 1px solid var(--color-border);
}
.flaechen__inner {
display: grid;
grid-template-columns: 1fr;
gap: 46px;
align-items: center;
padding-top: 56px;
padding-bottom: 56px;
}
@media (min-width: 841px) {
.flaechen__inner {
grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.36fr);
gap: clamp(46px, 8vw, 135px);
padding-top: clamp(56px, 6vw, 88px);
padding-bottom: clamp(56px, 6vw, 88px);
}
}
/* ---- Cards ---- */
.flaechen__cards {
/* Below 841px the copy is pulled above the cards */
order: 2;
max-width: 560px;
width: 100%;
}
@media (min-width: 841px) {
.flaechen__cards {
order: 0;
max-width: none;
}
}
.surface-card {
position: relative;
min-height: 132px;
margin-top: 12px;
padding: 20px 78px 18px 22px;
overflow: hidden;
background: var(--color-canvas);
border: 1px solid rgba(25, 50, 119, 0.3);
border-radius: 20px;
transition: border-color var(--dur-fast) var(--ease-out);
}
.surface-card:first-child {
margin-top: 0;
}
.surface-card:hover {
border-color: rgba(25, 50, 119, 0.48);
}
.surface-card__type {
margin: 0;
color: #7586ab;
font-size: 10px;
font-weight: var(--fw-extrabold);
letter-spacing: 0.13em;
text-transform: uppercase;
}
.surface-card__amount {
margin: 9px 0 5px;
color: var(--color-navy);
font-size: clamp(30px, 2.6vw, 43px);
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.065em;
}
.surface-card__copy {
margin: 0;
max-width: 310px;
color: #5c6b84;
font-size: 12.5px;
font-weight: var(--fw-medium);
line-height: 1.45;
}
/* Silhouette icon bleeds off the right edge, tinted navy */
.surface-card__icon {
position: absolute;
right: -22px;
top: 50%;
width: 108px;
height: 70%;
transform: translateY(-50%);
object-fit: contain;
opacity: 0.14;
filter: invert(17%) sepia(43%) saturate(1470%) hue-rotate(197deg) brightness(84%) contrast(91%);
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-out);
}
.surface-card:hover .surface-card__icon {
opacity: 1;
}
/* ---- Copy ---- */
.flaechen__copy {
order: 1;
position: relative;
}
@media (min-width: 841px) {
.flaechen__copy {
order: 0;
}
}
.flaechen__title {
margin: 0;
max-width: 760px;
color: var(--color-navy);
font-size: clamp(40px, 5.5vw, 86px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.06em;
}
.flaechen__title-faded {
display: block;
margin-top: 0.11em;
color: #a2acbc;
font-weight: var(--fw-medium);
letter-spacing: -0.056em;
}
.flaechen__lead {
margin: 24px 0 0;
max-width: 600px;
color: #4b5563;
font-size: clamp(15px, 1.5vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
.flaechen__lead + .flaechen__lead {
margin-top: 16px;
}
.flaechen__lead strong {
color: var(--color-navy);
font-weight: var(--fw-bold);
}
/* The "ab 200 m²" line — the smallest bookable unit, so it sits apart from
the descriptive lead rather than inside it. */
.flaechen__lead--note {
margin-top: 18px;
padding-left: 14px;
border-left: 3px solid var(--color-accent-line);
}
.flaechen__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
}
@media (min-width: 841px) {
.flaechen__actions {
margin-top: 32px;
}
}
.flaechen__btn {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 0 23px;
border-radius: var(--radius-pill);
background: var(--color-accent-line);
color: #fff;
font-size: 13px;
font-weight: var(--fw-bold);
transition:
background-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.flaechen__btn:hover {
background: #cb003d;
transform: translateY(-2px);
}
.flaechen__btn:focus-visible {
outline: 3px solid rgba(228, 0, 70, 0.28);
outline-offset: 4px;
}
/* ---- Small phones ---- */
@media (max-width: 540px) {
.flaechen__inner {
gap: 38px;
padding-top: 40px;
padding-bottom: 38px;
}
.flaechen__title {
font-size: clamp(34px, 11vw, 45px);
line-height: 1.01;
}
.flaechen__lead {
margin-top: 21px;
line-height: 1.58;
}
.flaechen__actions {
margin-top: 25px;
gap: 15px;
}
.flaechen__btn {
min-height: 50px;
padding: 0 20px;
}
.surface-card {
padding: 19px 66px 16px 18px;
border-radius: 18px;
}
.surface-card__amount {
font-size: 38px;
}
.surface-card__copy {
font-size: 12px;
}
.surface-card__icon {
width: 95px;
right: -18px;
}
}
/* Reveal — same timing as the why-vieth cards */
html.js .flaechen.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .flaechen.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .flaechen.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .flaechen.is-inview [data-reveal="3"] { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
html.js .flaechen.is-inview [data-reveal] {
animation: none;
}
.surface-card,
.surface-card__icon {
transition: none;
}
}
/* ---- sections/vermietung-vorteile.css ---- */
/* Section: Vorteile — reuses .why-vieth__grid / .why-card from why-vieth.css */
.vorteile {
background: var(--color-canvas);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.vorteile__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.vorteile__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.vorteile__header {
max-width: 720px;
}
.vorteile__title {
margin: 0;
max-width: 720px;
font-size: clamp(36px, 4.5vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--color-navy);
}
.vorteile .why-card__title {
max-width: 260px;
font-size: 17px;
line-height: 1.4;
}
.vorteile .why-vieth__grid {
margin-top: 36px;
}
@media (min-width: 1024px) {
.vorteile .why-vieth__grid {
margin-top: 44px;
}
}
/* Same reveal timing as homepage why-vieth cards */
html.js .vorteile.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .vorteile.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .vorteile.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .vorteile.is-inview [data-reveal="3"] { animation-delay: 160ms; }
html.js .vorteile.is-inview [data-reveal="4"] { animation-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
html.js .vorteile.is-inview [data-reveal] {
animation: none;
}
}
/* ---- sections/stellplaetze.css ---- */
/* Wohnmobilstellplätze — navy photo panel, copy left, price right.
Mobile order is price above the button (DOM order); desktop restores
copy + button on the left with the price on the right. */
.stellplatz {
background: var(--color-canvas);
}
.stellplatz__inner {
padding-top: 48px;
padding-bottom: 48px;
}
@media (min-width: 1024px) {
.stellplatz__inner {
padding-top: 72px;
padding-bottom: 72px;
}
}
.stellplatz__panel {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 28px;
background: #121f49;
min-height: 480px;
display: flex;
align-items: stretch;
}
@media (min-width: 768px) {
.stellplatz__panel {
border-radius: 32px;
}
}
@media (min-width: 1024px) {
.stellplatz__panel {
min-height: 520px;
}
}
.stellplatz__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.stellplatz__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
transition: transform 1200ms var(--ease-out);
}
.stellplatz__panel:hover .stellplatz__photo {
transform: scale(1.06);
}
/* Layered navy scrim — keeps the copy readable over the aerial shot */
.stellplatz__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(14, 28, 68, 0.88) 0%, rgba(25, 50, 119, 0.62) 45%, rgba(25, 50, 119, 0.3) 100%),
radial-gradient(110% 80% at 20% 25%, rgba(30, 58, 138, 0.55) 0%, rgba(19, 39, 96, 0.28) 40%, transparent 70%),
linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 0%, transparent 45%, rgba(0, 0, 0, 0.3) 100%);
}
.stellplatz__content {
position: relative;
z-index: 1;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"copy"
"price"
"btn";
align-content: center;
justify-items: start;
gap: 28px;
padding: 40px 24px 44px;
}
@media (min-width: 768px) {
.stellplatz__content {
padding: 48px 40px;
}
}
@media (min-width: 1024px) {
.stellplatz__content {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"copy price"
"btn price";
column-gap: 40px;
row-gap: 28px;
padding: 48px 56px;
}
}
.stellplatz__copy {
grid-area: copy;
max-width: 560px;
min-width: 0;
}
@media (min-width: 1024px) {
.stellplatz__copy {
max-width: 520px;
}
}
.stellplatz__title {
margin: 0;
color: #fff;
font-size: clamp(30px, 4vw, 46px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.03em;
text-wrap: balance;
}
.stellplatz__lead {
margin: 18px 0 0;
max-width: 460px;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(14px, 1.2vw, 15.5px);
font-weight: var(--fw-medium);
line-height: 1.6;
}
.stellplatz__btn {
grid-area: btn;
align-self: start;
}
/* Price block — the visual anchor of the panel */
.stellplatz__price {
grid-area: price;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
@media (min-width: 1024px) {
.stellplatz__price {
align-items: flex-end;
align-self: center;
justify-self: end;
}
}
.stellplatz__price-row {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0;
}
.stellplatz__price-prefix {
flex-shrink: 0;
color: rgba(255, 255, 255, 0.8);
font-size: 22px;
font-weight: var(--fw-semibold);
letter-spacing: -0.02em;
line-height: 1;
}
.stellplatz__price-value {
color: #fff;
font-size: clamp(64px, 9vw, 132px);
font-weight: var(--fw-extrabold);
letter-spacing: -0.05em;
line-height: 0.85;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.stellplatz__price-label {
margin: 0;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
}
@media (min-width: 768px) {
.stellplatz__price-label {
font-size: 14px;
}
}
html.js .stellplatz.is-inview .stellplatz__panel {
animation: stellplatzIn 700ms var(--ease-out) both;
}
@keyframes stellplatzIn {
from {
opacity: 0.4;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
html.js .stellplatz.is-inview .stellplatz__panel {
animation: none;
}
.stellplatz__photo,
.stellplatz__panel:hover .stellplatz__photo {
transition: none;
transform: none;
}
}
/* ---- sections/vermietung-cta.css ---- */
/* Closing CTA — centered copy over the yard photo.
The photo's own sky is near-white at the top, so the scrim fades it
into the page and keeps the navy headline readable. */
.closing-cta {
/* How far the copy block (title, intro, button, phone) sits above the
photo band. The inner box is centre-aligned, so extra bottom padding is
what lifts it — tune this one value to raise or lower the whole group. */
--cta-lift: 80px;
position: relative;
isolation: isolate;
min-height: 460px;
overflow: hidden;
background: var(--color-canvas);
}
.closing-cta__media {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* Lower band only — nothing of the photo reaches the copy above it. */
height: 48%;
z-index: 0;
}
@media (max-width: 800px) {
.closing-cta__media {
height: 42%;
}
}
.closing-cta__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* Sits on the photo band only, dissolving its top edge into the white page
so there is no visible seam between background and photo. */
.closing-cta__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
#ffffff 0%,
rgba(255, 255, 255, 0.92) 18%,
rgba(255, 255, 255, 0.55) 44%,
rgba(255, 255, 255, 0.18) 68%,
rgba(255, 255, 255, 0) 88%
);
}
.closing-cta__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--container);
min-height: 460px;
margin-inline: auto;
/* Bottom padding keeps the actions above the photo band */
padding: 48px var(--gutter) calc(240px + var(--cta-lift));
display: flex;
flex-direction: column;
align-items: center;
/* Centered on the panel height (not top-anchored) so the block sits
against the middle of the yard photo instead of drifting toward its
bottom edge, and the gap down to the footer stays a fixed, deliberate
size rather than "whatever's left over". */
justify-content: center;
text-align: center;
}
.closing-cta__title {
margin: 0;
max-width: 720px;
color: var(--color-navy);
font-size: clamp(42px, 4.4vw, 62px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.05em;
}
.closing-cta__intro {
margin: 23px auto 29px;
max-width: 575px;
color: #4b5563;
font-size: 17px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
.closing-cta__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 22px;
}
.closing-cta__btn {
display: inline-flex;
align-items: center;
gap: 11px;
min-height: 52px;
padding: 0 25px;
border: 1px solid var(--color-accent-line);
border-radius: var(--radius-pill);
background: var(--color-accent-line);
color: #fff;
font-size: 14px;
font-weight: var(--fw-bold);
box-shadow: 0 10px 24px rgba(228, 0, 70, 0.24);
transition:
background-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.closing-cta__btn:hover {
background: #c8003d;
transform: translateY(-2px);
}
.closing-cta__btn:focus-visible,
.closing-cta__phone:focus-visible {
outline: 3px solid rgba(228, 0, 70, 0.28);
outline-offset: 4px;
border-radius: var(--radius-pill);
}
.closing-cta__phone {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
min-height: 44px;
color: var(--color-navy);
font-size: 14px;
font-weight: var(--fw-bold);
transition: color var(--dur-fast) var(--ease-out);
}
.closing-cta__phone:hover {
color: var(--color-accent-line);
}
.closing-cta__phone-label {
color: var(--color-text-muted);
font-size: 13px;
font-weight: var(--fw-medium);
}
html.js .closing-cta.is-inview .closing-cta__inner {
animation: closingCtaIn 700ms var(--ease-out) both;
}
@keyframes closingCtaIn {
from {
opacity: 0.35;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 800px) {
.closing-cta,
.closing-cta__inner {
min-height: 400px;
}
.closing-cta__inner {
padding: 32px var(--gutter) calc(170px + var(--cta-lift));
}
.closing-cta__title {
max-width: 350px;
font-size: clamp(32px, 9vw, 40px);
}
.closing-cta__intro {
margin: 20px auto 25px;
font-size: 16px;
line-height: 1.58;
}
.closing-cta__actions {
flex-direction: column;
gap: 10px;
}
.closing-cta__phone {
min-height: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
html.js .closing-cta.is-inview .closing-cta__inner {
animation: none;
}
}
/* Kontakt page */
/* ---- sections/kontakt.css ---- */
/* Kontakt — hero + 4-step wizard left, navy contact card right. */
/* ============ Hero ============ */
.k-hero {
background: var(--color-surface-soft);
}
.k-hero__inner {
padding-top: 48px;
padding-bottom: 8px;
}
@media (min-width: 1024px) {
.k-hero__inner {
padding-top: 72px;
}
}
.k-hero__title {
margin: 0;
max-width: 16ch;
color: var(--color-navy);
font-size: clamp(38px, 5.5vw, 72px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.05em;
}
.k-hero__title-soft {
display: block;
margin-top: 0.1em;
color: #a2acbc;
font-weight: var(--fw-medium);
letter-spacing: -0.046em;
}
.k-hero__lead {
margin: 22px 0 0;
max-width: 555px;
color: #5e6c85;
font-size: clamp(15px, 1.3vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.62;
}
/* ============ Layout ============ */
.kontakt {
background: var(--color-surface-soft);
}
.kontakt__inner {
padding-top: 32px;
padding-bottom: 56px;
}
@media (min-width: 1024px) {
.kontakt__inner {
padding-top: 40px;
padding-bottom: 80px;
}
}
.kontakt__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
@media (min-width: 1024px) {
.kontakt__grid {
grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
gap: 32px;
}
}
.kontakt__col {
min-width: 0;
}
.kontakt__aside {
min-width: 0;
}
@media (min-width: 1024px) {
.kontakt__aside {
position: sticky;
top: 96px;
}
}
/* ============ Wizard card ============ */
.kontakt-card {
position: relative;
overflow: hidden;
padding: 22px 24px 28px;
border: 1px solid #f2f3f7;
border-radius: 28px;
background: var(--color-canvas);
box-shadow: 0 20px 60px rgba(25, 50, 119, 0.08);
}
@media (min-width: 768px) {
.kontakt-card {
padding: 26px 32px 32px;
}
}
.kontakt-card__progress {
width: 100%;
height: 3px;
overflow: hidden;
border-radius: 999px;
background: #edeef5;
}
.kontakt-card__progress-bar {
display: block;
height: 100%;
border-radius: 999px;
background: var(--color-cta);
transition: width var(--dur) var(--ease-out);
}
.kontakt-card__meta {
margin: 18px 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.kontakt-card__meta-count {
color: var(--color-text-muted);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.kontakt-card__meta-list {
display: none;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (min-width: 768px) {
.kontakt-card__meta-list {
display: flex;
}
}
.kontakt-card__meta-list span {
color: #a0a8bb;
transition: color var(--dur-fast) var(--ease-out);
}
.kontakt-card__meta-list span.is-done {
color: var(--color-navy);
}
.kontakt-card__meta-list i {
color: #d6dae6;
font-style: normal;
}
/* ============ Steps ============ */
.kontakt-step[hidden] {
display: none;
}
html.js .kontakt-step {
animation: kontaktFadeIn 350ms var(--ease-out) both;
}
@keyframes kontaktFadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kontakt-step__title {
margin: 0 0 10px;
color: var(--color-navy);
font-size: clamp(24px, 3vw, 34px);
font-weight: var(--fw-extrabold);
line-height: 1.1;
letter-spacing: -0.02em;
}
.kontakt-step__title-accent,
.kontakt-step__lead-accent {
color: var(--color-accent-line);
}
.kontakt-step__lead {
margin: 0 0 26px;
max-width: 520px;
color: var(--color-text-muted);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
/* ---- Topic pills ---- */
.kontakt-topics {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.kontakt-topic {
min-height: 44px;
padding: 0 20px;
border: 1px solid #eef0f7;
border-radius: var(--radius-pill);
background: var(--color-surface-soft);
color: var(--color-navy);
font-size: 14px;
font-weight: var(--fw-semibold);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.kontakt-topic:hover {
background: var(--color-canvas);
border-color: #d6dae6;
box-shadow: 0 6px 16px rgba(25, 50, 119, 0.06);
}
.kontakt-topic.is-active {
background: var(--color-navy);
border-color: var(--color-navy);
color: #fff;
box-shadow: 0 8px 20px rgba(25, 50, 119, 0.18);
}
.kontakt-topic:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 2px;
}
/* ---- Confirmation hint ---- */
.kontakt-hint {
margin: 24px 0 0;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border: 1px solid #eef0f7;
border-radius: 16px;
background: var(--color-surface-soft);
color: var(--color-text-muted);
font-size: 13.5px;
line-height: 1.5;
}
.kontakt-hint[hidden] {
display: none;
}
.kontakt-hint strong {
display: block;
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
.kontakt-hint__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-navy);
color: #fff;
}
.kontakt-hint__icon svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---- Fields ---- */
.kontakt-fields {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.kontakt-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kontakt-field--wide {
grid-column: 1 / -1;
}
}
.kontakt-field {
min-width: 0;
}
.kontakt-field__label {
display: block;
margin-bottom: 8px;
color: var(--color-text-muted);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.kontakt-field__input,
.kontakt-field__textarea {
width: 100%;
padding: 0 16px;
border: 1px solid #eef0f7;
border-radius: 14px;
background: var(--color-surface-soft);
color: var(--color-navy);
font-family: inherit;
font-size: 15px;
font-weight: var(--fw-medium);
transition:
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.kontakt-field__input {
height: 48px;
}
.kontakt-field__textarea {
min-height: 132px;
padding: 16px;
border-radius: 16px;
line-height: 1.55;
resize: vertical;
}
.kontakt-field__input::placeholder,
.kontakt-field__textarea::placeholder {
color: #a0a8bb;
}
.kontakt-field__input:focus,
.kontakt-field__textarea:focus {
outline: none;
border-color: rgba(25, 50, 119, 0.2);
box-shadow: 0 0 0 3px rgba(25, 50, 119, 0.1);
}
.kontakt-field__meta {
margin: 8px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: #a0a8bb;
font-size: 12px;
}
.kontakt-field__ok {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--color-available);
font-weight: var(--fw-semibold);
}
.kontakt-field__ok[hidden] {
display: none;
}
.kontakt-field__ok svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.kontakt-field__error {
margin: 8px 0 0;
color: var(--color-cta);
font-size: 12px;
font-weight: var(--fw-semibold);
}
.kontakt-field__error[hidden] {
display: none;
}
/* ---- Consent ---- */
/* Why the Weiter button is greyed out. Inserted above the nav row by the
wizard scripts whenever the current step still blocks. */
.kontakt-step__hint {
margin: 22px 0 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-left: 3px solid var(--color-accent-line);
border-radius: var(--radius-sm);
background: #fff5f8;
color: #8a1235;
font-size: 13.5px;
font-weight: var(--fw-semibold);
line-height: 1.45;
}
.kontakt-step__hint[hidden] {
display: none;
}
.kontakt-consent {
margin-top: 24px;
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.5;
transition: color var(--dur-fast) var(--ease-out);
}
.kontakt-consent:hover {
color: var(--color-navy);
}
.kontakt-consent input {
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--color-navy);
cursor: pointer;
}
/* ---- Step navigation ---- */
.kontakt-nav {
margin-top: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.kontakt-nav--end {
justify-content: flex-end;
}
@media (max-width: 560px) {
.kontakt-nav--stack {
flex-direction: column-reverse;
align-items: stretch;
}
}
.kontakt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 14px;
font-weight: var(--fw-bold);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
}
.kontakt-btn:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 3px;
}
.kontakt-btn__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.kontakt-btn--primary {
background: var(--color-accent-line);
color: #fff;
}
.kontakt-btn--primary:hover {
background: #c4003b;
}
.kontakt-btn--primary:disabled {
opacity: 0.3;
pointer-events: none;
}
.kontakt-btn--send {
padding: 0 30px;
box-shadow: 0 10px 24px rgba(228, 0, 70, 0.28);
}
.kontakt-btn--ghost {
background: var(--color-canvas);
border-color: #eef0f7;
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
.kontakt-btn--ghost:hover {
background: var(--color-surface-soft);
}
/* ---- Summary ---- */
.kontakt-summary {
padding: 20px;
border: 1px solid #eef0f7;
border-radius: 20px;
background: var(--color-surface-soft);
}
@media (min-width: 768px) {
.kontakt-summary {
padding: 24px;
}
}
.kontakt-summary__head {
margin: 0 0 16px;
color: var(--color-text-muted);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.kontakt-summary__list {
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.kontakt-summary__row {
display: flex;
justify-content: space-between;
gap: 16px;
}
.kontakt-summary__row dt {
flex-shrink: 0;
margin-top: 2px;
color: var(--color-text-muted);
font-size: 12px;
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.kontakt-summary__row dd {
margin: 0;
max-width: 62%;
color: var(--color-navy);
font-size: 14px;
font-weight: var(--fw-bold);
text-align: right;
overflow-wrap: anywhere;
}
.kontakt-summary__row dd.is-muted {
color: #a0a8bb;
font-weight: var(--fw-medium);
}
.kontakt-summary__message {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #eef0f7;
}
.kontakt-summary__message-label {
margin: 0 0 6px;
color: var(--color-text-muted);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.kontakt-summary__message-text {
margin: 0;
color: var(--color-navy);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.kontakt-summary--done {
margin-top: 20px;
text-align: left;
}
/* ---- Warning note ---- */
.kontakt-note {
margin: 22px 0 0;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border: 1px solid #ffe1e7;
border-radius: 16px;
background: #fffbfc;
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.5;
}
.kontakt-note strong {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
.kontakt-note__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-accent-line);
color: #fff;
font-size: 11px;
font-weight: var(--fw-bold);
}
/* ---- Done screen ---- */
.kontakt-done {
text-align: center;
padding-block: 4px;
}
.kontakt-done__mark {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
}
.kontakt-done__ring {
position: absolute;
border-radius: 999px;
border: 1px solid rgba(193, 58, 74, 0.2);
}
.kontakt-done__ring:nth-child(1) {
width: 88px;
height: 88px;
}
.kontakt-done__ring:nth-child(2) {
width: 118px;
height: 118px;
border-color: rgba(193, 58, 74, 0.15);
}
.kontakt-done__ring:nth-child(3) {
width: 152px;
height: 152px;
border-color: rgba(193, 58, 74, 0.1);
}
html.js .kontakt-done__ring {
animation: kontaktPing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
html.js .kontakt-done__ring:nth-child(2) {
animation-delay: 0.8s;
}
html.js .kontakt-done__ring:nth-child(3) {
animation-delay: 1.6s;
}
@keyframes kontaktPing {
0% {
transform: scale(0.75);
opacity: 0.9;
}
100% {
transform: scale(1.45);
opacity: 0;
}
}
.kontakt-done__disc {
position: relative;
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-cta);
color: #fff;
box-shadow: 0 10px 24px rgba(193, 58, 74, 0.32);
}
html.js .kontakt-done__disc {
animation: kontaktScaleIn 550ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes kontaktScaleIn {
0% {
transform: scale(0);
opacity: 0;
}
60% {
transform: scale(1.12);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.kontakt-done__disc svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Two sentences at 34px break badly on their own — the default greedy line
filler leaves "angekommen." alone on the last line. Balanced wrapping keeps
the two halves of the headline intact, and a slightly smaller cap keeps it
to three lines on a phone. */
.kontakt-done__title {
margin-bottom: 10px;
max-width: 22ch;
margin-inline: auto;
font-size: clamp(23px, 2.6vw, 30px);
text-wrap: balance;
}
.kontakt-done__text {
margin: 0 auto;
max-width: 400px;
color: var(--color-text-muted);
font-size: 13.5px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.kontakt-done__text strong {
color: var(--color-navy);
font-weight: var(--fw-semibold);
}
/* ---- "So geht es weiter" — the three steps ----
The done screen is centred, but a numbered list has to be left-aligned or
the eye loses the column of numbers. So: centred block, left-aligned rows.
Numbers come from spans rather than the marker because the marker
cannot be styled into a filled disc, and they are aria-hidden — the list
semantics already tell a screen reader this is step 1 of 3. */
.kontakt-done__steps {
margin: 20px auto 0;
max-width: 420px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.kontakt-done__step {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-canvas);
}
.kontakt-done__step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--color-navy);
color: #fff;
font-size: 12px;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.kontakt-done__step-body {
color: var(--color-body);
font-size: 13.5px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.kontakt-done__step-label {
display: block;
color: var(--color-navy);
font-weight: var(--fw-bold);
}
/* The alternative route in, for anyone who does not want to wait for the
call — kept visible rather than tucked away. */
.kontakt-done__fallback {
margin: 16px auto 0;
max-width: 420px;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-soft);
color: var(--color-body);
font-size: 13px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.kontakt-done__fallback a {
color: var(--color-navy);
font-weight: var(--fw-bold);
text-decoration: underline;
text-underline-offset: 2px;
}
.kontakt-done__restart {
margin-top: 22px;
}
/* ---- Weekend note ---- */
.kontakt-weekend {
margin: 16px 0 0;
padding: 14px 18px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-canvas);
color: var(--color-text-muted);
font-size: 13px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
/* ============ Contact card ============ */
.kontakt-daten {
position: relative;
overflow: hidden;
padding: 28px 24px;
border-radius: 28px;
background: var(--color-navy);
color: #fff;
}
@media (min-width: 768px) {
.kontakt-daten {
padding: 36px;
}
}
.kontakt-daten__glow {
position: absolute;
top: 50%;
right: -80px;
width: 200px;
height: 200px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
filter: blur(40px);
pointer-events: none;
}
.kontakt-daten__head {
position: relative;
margin-bottom: 28px;
}
.kontakt-daten__title {
margin: 0;
font-size: clamp(22px, 2.2vw, 26px);
font-weight: var(--fw-extrabold);
line-height: 1.1;
letter-spacing: -0.01em;
}
.kontakt-daten__kicker {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
font-weight: var(--fw-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.kontakt-daten__grid {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 480px) {
.kontakt-daten__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.kontakt-tile {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
padding: 6px;
margin: -6px;
border-radius: 14px;
transition: background-color var(--dur-fast) var(--ease-out);
}
a.kontakt-tile:hover {
background: rgba(255, 255, 255, 0.06);
}
a.kontakt-tile:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.kontakt-tile__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.kontakt-tile__icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.kontakt-tile__body {
min-width: 0;
}
.kontakt-tile__label {
display: block;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.kontakt-tile__value {
display: block;
margin-top: 4px;
font-size: 15px;
font-weight: var(--fw-semibold);
line-height: 1.4;
overflow-wrap: break-word;
}
.kontakt-tile__value--break {
overflow-wrap: anywhere;
}
.kontakt-tile__value--address {
color: rgba(255, 255, 255, 0.9);
font-weight: var(--fw-medium);
}
/* ---- Location card ---- */
.kontakt-daten__place {
position: relative;
margin-top: 24px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
background: rgba(255, 255, 255, 0.05);
}
.kontakt-daten__photo {
width: 100%;
height: 150px;
object-fit: cover;
opacity: 0.9;
}
.kontakt-daten__place-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
}
.kontakt-daten__place-title {
margin: 0;
font-size: 14px;
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
}
.kontakt-daten__place-sub {
margin: 3px 0 0;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
}
/* Same skin as .btn-secondary on a dark ground (see hero.css) — the site's
one outline button, e.g. "Offene Stellen" in the Unternehmen hero. Spelled
out rather than reusing the class because .btn-secondary flips to a solid
light-background variant at 1024px, and this bar is dark at every width. */
.kontakt-daten__route {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 26px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.14);
border: 1.5px solid rgba(255, 255, 255, 0.7);
color: #fff;
font-size: 15px;
font-weight: var(--fw-semibold);
backdrop-filter: blur(6px);
transition: background-color var(--dur-fast) var(--ease-out);
}
.kontakt-daten__route:hover {
background: rgba(255, 255, 255, 0.24);
}
.kontakt-daten__route:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html.js .kontakt-step,
html.js .kontakt-done__ring,
html.js .kontakt-done__disc {
animation: none;
}
.kontakt-done__ring {
opacity: 0.35;
}
}
/* Karriere page */
/* ---- sections/karriere-hero.css ---- */
/* Karriere hero — same panel mechanism as Unternehmen/Leistungen/Vermietung
heroes (panel > media + content), without a stats/proof row. The media
layers are the job pages' .stelle-hero__photo / __grad / __figure (see
stelle.css), so the wash and the cut-out behave identically here. */
.kar-hero {
padding-top: 16px;
padding-bottom: 8px;
background: var(--color-canvas);
}
@media (min-width: 768px) {
.kar-hero {
padding-top: 24px;
}
}
.kar-hero__panel {
position: relative;
isolation: isolate;
min-height: 460px;
max-height: none;
border-radius: var(--radius-card);
overflow: hidden;
background: #0d1428;
display: flex;
align-items: center;
}
@media (min-width: 1024px) {
.kar-hero__panel {
min-height: 460px;
max-height: 560px;
}
}
.kar-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.kar-hero__content {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 40px 20px 36px;
}
@media (min-width: 768px) {
.kar-hero__content {
padding: 56px 40px 48px;
}
}
@media (min-width: 1024px) {
.kar-hero__content {
padding: 56px 56px 48px;
}
}
.kar-hero__copy {
max-width: 640px;
min-width: 0;
}
/* Curve/line-height match the homepage H1 (.hero__title) exactly. */
.kar-hero__title {
margin: 0;
color: #fff;
font-size: clamp(28px, 7.2vw, 64px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.04em;
hyphens: auto;
overflow-wrap: break-word;
}
.kar-hero__lead {
margin: 18px 0 0;
max-width: 520px;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(15px, 1.4vw, 18px);
font-weight: var(--fw-medium);
line-height: 1.6;
}
@media (min-width: 768px) {
.kar-hero__lead {
margin-top: 20px;
}
}
.kar-hero__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
@media (min-width: 768px) {
.kar-hero__actions {
margin-top: 32px;
}
}
/* Hero CTAs reuse shared .btn-primary / .btn-secondary from hero.css —
.btn-secondary is already translucent-on-dark at every width here since
this hero has no white/desktop variant like the interior-page heroes. */
/* ---- sections/karriere-vorteile.css ---- */
/* Section: Karriere Vorteile — reuses .why-vieth__grid / .why-card from
why-vieth.css (homepage), 5 cards instead of 4. */
.kar-vorteile {
background: var(--color-canvas);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.kar-vorteile__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.kar-vorteile__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.kar-vorteile__header {
max-width: 720px;
}
.kar-vorteile__title {
margin: 0;
max-width: 720px;
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--color-navy);
}
.kar-vorteile__grid {
margin-top: 36px;
}
/* Wider cards than the homepage's. These titles are whole sentences, not
two-word labels; five 1/5-width columns broke them into six-line stacks
with a tall empty band underneath. Six tracks let a row hold three cards
(span 2) or two (span 3), so the last row always fills and the cards stop
looking like five identical slivers. */
@media (min-width: 768px) {
.kar-vorteile__grid > .why-card:nth-child(5) {
grid-column: 1 / -1;
}
}
@media (min-width: 1024px) {
.kar-vorteile__grid {
margin-top: 44px;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kar-vorteile__grid > .why-card {
grid-column: span 2;
}
.kar-vorteile__grid > .why-card:nth-child(4),
.kar-vorteile__grid > .why-card:nth-child(5) {
grid-column: span 3;
}
}
/* The fixed bands that keep four narrow homepage cards aligned would leave
a big hole under this section's shorter, wider text blocks. Stays below the
homepage card height for the same reason: these titles run one or two lines,
not three. */
.kar-vorteile .why-card {
min-height: 152px;
}
.kar-vorteile .why-card__text-row {
min-height: 0;
}
.kar-vorteile .why-card__title {
max-width: none;
font-size: 17px;
}
@media (min-width: 1024px) {
.kar-vorteile .why-card {
min-height: 160px;
}
.kar-vorteile .why-card__title {
font-size: 18px;
}
}
/* Same reveal timing as the homepage why-vieth cards */
html.js .kar-vorteile.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .kar-vorteile.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .kar-vorteile.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .kar-vorteile.is-inview [data-reveal="3"] { animation-delay: 160ms; }
html.js .kar-vorteile.is-inview [data-reveal="4"] { animation-delay: 210ms; }
html.js .kar-vorteile.is-inview [data-reveal="5"] { animation-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
html.js .kar-vorteile.is-inview [data-reveal] {
animation: none;
}
}
/* ---- sections/karriere-stellen.css ---- */
/* Section: Offene Stellen — "Silhouette Hover Reveal".
States:
rest = navy brand base + ghosted duotone driver
revealed= photo + full-colour driver + accent-red button
"Revealed" is driven by :hover / :focus-within on pointer devices, and is
permanent on touch (no hover there — a card must not need a tap to become
readable).
Every vacancy card shares one base colour, one badge style and one button
treatment. The concept shipped four different card colours, which made the
first card invert its button to white and turn its badge red while the
others went red — reading as a bug rather than a variant. */
.jobs {
background: #fbfcff;
}
.jobs__inner {
padding-top: 80px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.jobs__inner {
padding-top: 112px;
padding-bottom: 80px;
}
}
.jobs__header {
max-width: 680px;
}
.jobs__title {
margin: 0;
color: var(--color-navy);
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
}
.jobs__lead {
margin: 18px 0 0;
max-width: 560px;
color: var(--color-body);
font-size: clamp(15px, 1.2vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.6;
}
/* Concept grid: 1 col → 2 cols, gap 20/24 */
.jobs__grid {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.jobs__grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (min-width: 1024px) {
.jobs__grid {
margin-top: 48px;
}
}
/* ---- Card shell ---- */
.job {
/* Horizontal focal point shared by the background photo and the cut-out
driver on layered cards. Both layers read it, so they stay pixel-aligned
— nudge this one value to move the driver left or right. */
--job-focus: 34%;
position: relative;
height: 300px;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--color-navy);
user-select: none;
}
@media (min-width: 768px) {
.job {
height: 310px;
}
}
/* ---- Reveal layer (photo + gradients), hidden at rest ---- */
.job__reveal {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
transition: opacity 600ms var(--ease-out);
}
.job__photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: var(--job-focus) center;
filter: brightness(0.75) saturate(1.1);
transition: transform 1200ms ease-out;
}
/* The pre-composed phone photo. Hidden here, shown in the max-width block at
the bottom of this file. Both photo layers sit before the gradients in the
DOM, so the navy wash covers whichever one is on. */
.job__photo-card {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.82) saturate(1.05);
}
/* Left-to-right navy wash — this is what keeps the copy legible once the
photo is visible, so it must stay opaque on the text side. */
.job__reveal-grad {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(18, 38, 94, 0.92) 0%,
rgba(18, 38, 94, 0.78) 28%,
rgba(18, 38, 94, 0.35) 65%,
rgba(18, 38, 94, 0.05) 100%
);
}
.job__reveal-tint {
position: absolute;
inset: 0;
background: rgba(18, 38, 94, 0.2);
}
.job:hover .job__reveal,
.job:focus-within .job__reveal {
opacity: 1;
}
.job:hover .job__photo,
.job:focus-within .job__photo {
transform: scale(1.04);
}
/* ---- Silhouette ----
Bottom-right ghost at rest, full colour on reveal. */
.job__figure {
position: absolute;
bottom: -12%;
right: 0;
z-index: 3;
height: 95%;
width: 44%;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0.38;
transform: translateY(6%);
filter: sepia(1) hue-rotate(185deg) saturate(3) brightness(0.9) contrast(1.1);
mix-blend-mode: luminosity;
pointer-events: none;
/* filter is deliberately NOT transitioned: interpolating hue-rotate(185deg)
down to 0 walks the entire colour wheel, which read as the driver
flashing rainbow. Colour is crossfaded between two layers instead. */
transition:
right 750ms var(--ease-out),
opacity 750ms var(--ease-out),
transform 750ms var(--ease-out);
}
.job:hover .job__figure,
.job:focus-within .job__figure {
right: 2%;
opacity: 1;
transform: translateY(0) scale(1.03);
filter: none;
mix-blend-mode: normal;
}
/* ---- Layered variant ----
For cards with a real background + cut-out pair exported from the same
1920x1080 frame: the cut-out must stay aligned with the photo, so it fills
the card rather than sitting bottom-right, and it does not slide on reveal
(that would break the alignment). The duotone-to-colour crossfade — the
actual point of the concept — is kept. */
.job--layered .job__figure {
inset: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
transform: none;
opacity: 1;
filter: none;
mix-blend-mode: normal;
}
.job--layered .job__figure-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--job-focus) center;
transition: opacity 650ms var(--ease-out);
}
/* Rest: blue duotone ghost (static filter, never animated) */
.job__figure-img--ghost {
opacity: 0.5;
filter: sepia(1) hue-rotate(185deg) saturate(2.2) brightness(0.85) contrast(1.05);
}
/* Reveal: the untouched, full-colour cut-out */
.job__figure-img--full {
opacity: 0;
}
.job--layered:hover .job__figure,
.job--layered:focus-within .job__figure {
right: 0;
transform: scale(1.03);
}
.job--layered:hover .job__figure-img--ghost,
.job--layered:focus-within .job__figure-img--ghost {
opacity: 0;
}
.job--layered:hover .job__figure-img--full,
.job--layered:focus-within .job__figure-img--full {
opacity: 1;
}
/* Inset hairline ring + top light edge */
.job__ring {
position: absolute;
inset: 0;
z-index: 4;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.job__hairline {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 4;
height: 1px;
opacity: 0.6;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0)
);
pointer-events: none;
}
/* ---- Content ----
Capped width so the copy never runs under the silhouette. */
.job__content {
position: relative;
z-index: 5;
height: 100%;
max-width: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
}
@media (min-width: 768px) {
.job__content {
max-width: 56%;
padding: 28px;
}
}
/* Initiativbewerbung has no silhouette, so its copy may use the full width */
.job__content--wide {
max-width: 100%;
}
@media (min-width: 768px) {
.job__content--wide {
max-width: 72%;
}
}
/* ---- Badge ---- */
.job__badge {
display: inline-flex;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
backdrop-filter: blur(12px);
}
.job__badge--accent {
background: var(--color-accent-line);
box-shadow: 0 2px 10px rgba(228, 0, 70, 0.35);
backdrop-filter: none;
}
/* ---- Title / meta ---- */
.job__title {
margin: 16px 0 0;
color: #fff;
font-size: 19px;
font-weight: var(--fw-bold);
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
}
@media (min-width: 768px) {
.job__title {
font-size: 21px;
}
}
.job__meta {
margin: 10px 0 0;
color: rgba(255, 255, 255, 0.7);
font-size: 12.5px;
font-weight: var(--fw-medium);
line-height: 1.5;
}
/* ---- Button ----
One treatment for every card: outlined white at rest, accent red once the
card is revealed. */
.job__btn {
align-self: flex-start;
margin-top: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
padding: 9px 16px;
border: 1.5px solid rgba(255, 255, 255, 0.35);
background: transparent;
color: rgba(255, 255, 255, 0.92);
font-size: 12.5px;
font-weight: var(--fw-semibold);
letter-spacing: -0.01em;
transition: all 300ms var(--ease-out);
}
.job:hover .job__btn,
.job:focus-within .job__btn {
background: var(--color-accent-line);
border-color: var(--color-accent-line);
color: #fff;
}
.job__btn:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.55);
outline-offset: 3px;
}
/* ---- Initiativbewerbung ---- */
.job--initiativ {
height: auto;
min-height: 200px;
border-style: dashed;
border-color: rgba(255, 255, 255, 0.28);
background: var(--color-navy-deep);
}
@media (min-width: 768px) {
.job--initiativ {
grid-column: 1 / -1;
min-height: 180px;
}
}
.job--initiativ .job__content {
justify-content: center;
gap: 4px;
}
.job--initiativ .job__btn {
border-color: var(--color-accent-line);
background: var(--color-accent-line);
color: #fff;
}
.job--initiativ:hover .job__btn,
.job--initiativ:focus-within .job__btn {
background: #c8003d;
border-color: #c8003d;
}
/* ---- Touch devices ----
No hover exists here, so the revealed state is the default: photo visible,
driver in full colour, button already red. Nothing needs to be tapped
before the card is readable. */
@media (hover: none) {
.job__reveal {
opacity: 1;
}
.job__figure {
right: 2%;
opacity: 1;
transform: translateY(0);
filter: none;
mix-blend-mode: normal;
}
.job--layered .job__figure {
right: 0;
transform: none;
}
.job__figure-img--ghost {
opacity: 0;
}
.job__figure-img--full {
opacity: 1;
}
.job__btn {
background: var(--color-accent-line);
border-color: var(--color-accent-line);
color: #fff;
}
}
/* ---- Phone: one pre-composed photo, no layers on top of it ----
The cut-out colleague is exported from a 1400x788 landscape frame. In a
narrow single-column card it gets cropped so hard that the shoulder lands on
the headline and the arm runs into the card edge — the layer reads as broken
rather than as a portrait. The inset ring and the top hairline add nothing at
this size either.
So below 768px the whole layered stack is dropped and the *-card photo — the
same scene already composed for this format — carries the card on its own.
The navy wash stays; it is what makes the white copy legible, not
decoration. It turns top-to-bottom because the copy now uses the full card
width instead of the left 60%. Same reasoning as the portrait gradient on the
job detail heroes (stelle.css).
Swapping the *plate* (display) rather than just covering it also means the
phone never downloads the two layered files, and the desktop never downloads
the composite: a display:none background is not fetched, and a display:none
lazy ![]()
is not either. */
@media (max-width: 767px) {
.job__figure,
.job__ring,
.job__hairline,
.job__photo {
display: none;
}
.job__photo-card {
display: block;
}
/* With no silhouette left there is nothing for a hover to reveal, so the
photo is simply on. The @media (hover: none) block above already does this
for touch; stating it here as well covers a narrow desktop window, which
would otherwise show a bare navy card until the pointer entered it. */
.job__reveal {
opacity: 1;
}
.job__reveal-grad {
background: linear-gradient(
180deg,
rgba(18, 38, 94, 0.88) 0%,
rgba(18, 38, 94, 0.62) 45%,
rgba(18, 38, 94, 0.55) 70%,
rgba(18, 38, 94, 0.85) 100%
);
}
/* The card is in its revealed state here, so the button matches it —
otherwise a narrow desktop window would show an outlined button on a
revealed card while a phone of the same width shows a red one. */
.job__btn {
background: var(--color-accent-line);
border-color: var(--color-accent-line);
color: #fff;
}
/* Nothing occupies the right side any more, so the copy may use it. */
.job__content {
max-width: 100%;
}
/* Without the silhouette the card no longer needs 300px of height to show
a person — it only has to hold badge, title, meta and button. Kept as a
fixed height (not auto): .job__content is height:100% + space-between, and
an auto-height card would collapse that to a top-aligned stack. */
.job:not(.job--initiativ) {
height: 260px;
}
}
/* Reveal-on-scroll — same keyframes/timing as every other section */
html.js .jobs.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .jobs.is-inview [data-reveal="1"] { animation-delay: 60ms; }
html.js .jobs.is-inview [data-reveal="2"] { animation-delay: 110ms; }
html.js .jobs.is-inview [data-reveal="3"] { animation-delay: 160ms; }
html.js .jobs.is-inview [data-reveal="4"] { animation-delay: 210ms; }
html.js .jobs.is-inview [data-reveal="5"] { animation-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
html.js .jobs.is-inview [data-reveal] {
animation: none;
}
.job__reveal,
.job__photo,
.job__figure,
.job__figure-img,
.job__btn {
transition: none;
}
.job:hover .job__photo,
.job:focus-within .job__photo {
transform: none;
}
}
/* ---- sections/karriere-bewerbung.css ---- */
/* Section: Bewerbungsformular.
The form itself reuses the .kontakt-* design system (kontakt.css) so both
wizards on the site are visually identical; only the section frame, the
labelled choice rows and the expanding driver-only group live here. */
.bewerbung {
background: var(--color-canvas);
border-top: 1px solid var(--color-border);
}
.bewerbung__inner {
padding-top: 80px;
padding-bottom: 64px;
}
/* Two columns from 1024px: the intro copy holds the left side while the card
takes the right. Previously the card sat alone under a full-width heading,
which left most of the right half of the section empty. */
@media (min-width: 1024px) {
.bewerbung__inner {
padding-top: 112px;
padding-bottom: 80px;
display: grid;
grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
gap: 48px;
align-items: start;
}
}
.bewerbung__header {
max-width: 680px;
}
/* Sticky so the pitch stays in view while the visitor works through the
steps — the card is considerably taller than the copy. */
@media (min-width: 1024px) {
.bewerbung__header {
position: sticky;
top: 104px;
max-width: none;
}
}
.bewerbung__title {
margin: 0;
color: var(--color-navy);
font-size: clamp(32px, 4vw, 56px);
font-weight: var(--fw-extrabold);
line-height: 0.95;
letter-spacing: -0.03em;
}
.bewerbung__lead {
margin: 18px 0 0;
max-width: 560px;
color: var(--color-body);
font-size: clamp(15px, 1.2vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.6;
}
/* Single-column form — the Kontakt page pairs its card with a contact aside,
here the card carries the section on its own, so cap its width. */
.bewerbung__card {
margin-top: 40px;
max-width: 760px;
}
@media (min-width: 1024px) {
.bewerbung__card {
margin-top: 0;
max-width: none;
}
}
/* ---- Labelled choice row ---- */
.bew-block + .bew-block {
margin-top: 22px;
}
/* The gate sits between the CE and the Einsatzbereich blocks, which breaks the
adjacent-sibling rule above. Restore the rhythm — the selector still matches
while the gate is [hidden], so the spacing does not jump when it appears. */
.bew-gate + .bew-block {
margin-top: 22px;
}
.bew-block--spaced {
margin-top: 24px;
}
.bew-block__label {
margin: 0 0 12px;
color: var(--color-navy);
font-size: 13px;
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
}
.bew-block__optional {
margin-left: 6px;
color: var(--color-text-soft);
font-size: 11px;
font-weight: var(--fw-medium);
letter-spacing: 0;
text-transform: none;
}
.bew-choice {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ---- Driver-only group ----
Animating grid-template-rows 0fr -> 1fr expands to the content's own
height without hard-coding one. Browsers without that interpolation
simply snap open, which is a fine fallback. */
.bew-conditional {
display: grid;
grid-template-rows: 0fr;
margin-top: 0;
opacity: 0;
overflow: hidden;
transition:
grid-template-rows 420ms var(--ease-out),
opacity 300ms var(--ease-out),
margin-top 420ms var(--ease-out);
}
.bew-conditional.is-open {
grid-template-rows: 1fr;
margin-top: 24px;
opacity: 1;
}
/* Required so the row can actually collapse below its content height */
.bew-conditional__inner {
min-height: 0;
}
.bew-conditional__note {
margin: 0 0 18px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-soft);
color: var(--color-navy);
font-size: 12.5px;
font-weight: var(--fw-medium);
line-height: 1.4;
}
.bew-conditional__note-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-navy);
color: #fff;
font-size: 10px;
font-weight: var(--fw-extrabold);
}
/* ---- Screening gate ----
Shown when a driver applicant answers "Nein" to the CE licence. Accent-red
left edge rather than a full red panel: it is a redirect, not an error, and
the two ways forward inside it have to read as offers. */
.bew-gate {
margin-top: 18px;
padding: 16px 18px;
border: 1px solid rgba(228, 0, 70, 0.28);
border-left: 3px solid var(--color-accent-line);
border-radius: var(--radius-sm);
background: #fff6f8;
}
.bew-gate__title {
margin: 0;
color: var(--color-navy);
font-size: 14.5px;
font-weight: var(--fw-bold);
line-height: 1.4;
letter-spacing: -0.01em;
}
.bew-gate__text {
margin: 8px 0 0;
color: var(--color-body);
font-size: 13px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.bew-gate__list {
margin: 10px 0 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 7px;
color: var(--color-body);
font-size: 13px;
font-weight: var(--fw-medium);
line-height: 1.55;
}
.bew-gate__list strong {
color: var(--color-navy);
font-weight: var(--fw-bold);
}
.bew-gate__btn {
margin-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
.bew-conditional {
transition: none;
}
}
/* Job detail pages */
/* ---- sections/stelle.css ---- */
/* Job detail pages (stelle-*.html).
Shared by all four pages — the hero reuses the same photo-panel mechanism
as the Unternehmen/Karriere heroes, and the content blocks reuse the
numbered-card language from .why-card / .logistik-item. */
/* ============ Hero ============ */
.stelle-hero {
padding-top: 16px;
padding-bottom: 8px;
background: var(--color-canvas);
}
@media (min-width: 768px) {
.stelle-hero {
padding-top: 24px;
}
}
.stelle-hero__panel {
position: relative;
isolation: isolate;
min-height: 460px;
border-radius: var(--radius-card);
overflow: hidden;
background: #0d1428;
display: flex;
align-items: center;
}
@media (min-width: 1024px) {
.stelle-hero__panel {
min-height: 500px;
max-height: 600px;
}
}
.stelle-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
/* Background photo — same focal point variable as the job cards, so the
background and the cut-out driver stay pixel-aligned. */
.stelle-hero__photo {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: var(--stelle-focus, 40%) center;
filter: brightness(0.78) saturate(1.05);
}
/* Pre-composed phone photo. Same swap as the job cards
(karriere-stellen.css): below 768px the background plate and the cut-out
colleague are both dropped and this one flat shot carries the panel, because
a 1400x788 cut-out cropped into a portrait panel puts the colleague straight
across the headline. Shown in the max-width block further down. */
.stelle-hero__photo-card {
display: none;
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.8) saturate(1.05);
}
/* Readability wash: opaque on the copy side, clear on the driver side */
.stelle-hero__grad {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(13, 20, 40, 0.94) 0%,
rgba(13, 20, 40, 0.82) 30%,
rgba(13, 20, 40, 0.42) 62%,
rgba(13, 20, 40, 0.08) 100%
);
}
@media (max-width: 767px) {
/* Portrait: the copy sits over the whole panel, so darken top-to-bottom
instead of left-to-right. */
.stelle-hero__grad {
background: linear-gradient(
180deg,
rgba(13, 20, 40, 0.86) 0%,
rgba(13, 20, 40, 0.62) 45%,
rgba(13, 20, 40, 0.5) 70%,
rgba(13, 20, 40, 0.82) 100%
);
}
/* One composed photo instead of the layered stack — see the note on
.stelle-hero__photo-card above. */
.stelle-hero__figure,
.stelle-hero__photo {
display: none;
}
.stelle-hero__photo-card {
display: block;
}
}
/* The driver sits ABOVE the wash so it is never greyed out, and eases in on
load — the "approaching" motion from the job-card concept, played once here
instead of on hover (a hero has nothing to hover).
Two stacked copies, exactly as on the cards: the tinted one fades out while
the full-colour one fades in. The filter is NEVER animated — interpolating
hue-rotate(185deg) down to 0 walks the whole colour wheel, which made the
driver turn green on the way in. */
.stelle-hero__figure {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
user-select: none;
}
.stelle-hero__figure-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--stelle-focus, 40%) center;
}
/* Static duotone — held, not interpolated */
.stelle-hero__figure-img--ghost {
filter: sepia(1) hue-rotate(185deg) saturate(2.2) brightness(0.85) contrast(1.05);
}
.stelle-hero__figure-img--full {
opacity: 0;
}
/* Slide the pair in, then swap tint for colour underneath the motion */
html.js .stelle-hero__figure {
animation: stelleFigureSlide 1000ms var(--ease-out) 120ms both;
}
html.js .stelle-hero__figure-img--ghost {
animation: stelleFigureGhostOut 800ms var(--ease-out) 520ms both;
}
html.js .stelle-hero__figure-img--full {
animation: stelleFigureFullIn 800ms var(--ease-out) 520ms both;
}
@keyframes stelleFigureSlide {
from {
opacity: 0;
transform: translateX(46px) scale(1.02);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes stelleFigureGhostOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes stelleFigureFullIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* No motion: land straight on the full-colour driver */
@media (prefers-reduced-motion: reduce) {
html.js .stelle-hero__figure,
html.js .stelle-hero__figure-img--ghost,
html.js .stelle-hero__figure-img--full {
animation: none;
}
.stelle-hero__figure-img--ghost {
opacity: 0;
}
.stelle-hero__figure-img--full {
opacity: 1;
}
}
.stelle-hero__content {
position: relative;
z-index: 1;
width: 100%;
padding: 40px 20px 36px;
}
@media (min-width: 768px) {
.stelle-hero__content {
padding: 56px 40px 48px;
}
}
@media (min-width: 1024px) {
.stelle-hero__content {
padding: 56px 56px 48px;
}
}
.stelle-hero__copy {
max-width: 720px;
}
.stelle-hero__badges {
margin: 0 0 18px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.stelle-hero__badge {
display: inline-flex;
padding: 5px 14px;
border-radius: var(--radius-pill);
background: var(--color-accent-line);
color: #fff;
font-size: 10.5px;
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.stelle-hero__meta {
color: rgba(255, 255, 255, 0.72);
font-size: 12.5px;
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
}
/* Same curve as the homepage/Unternehmen H1 */
.stelle-hero__title {
margin: 0;
color: #fff;
font-size: clamp(28px, 5.6vw, 54px);
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.035em;
hyphens: auto;
overflow-wrap: break-word;
}
.stelle-hero__claim {
margin: 16px 0 0;
max-width: 620px;
color: #ff8aab;
font-size: clamp(16px, 1.6vw, 20px);
font-weight: var(--fw-bold);
line-height: 1.4;
letter-spacing: -0.01em;
}
.stelle-hero__lead {
margin: 14px 0 0;
max-width: 620px;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(15px, 1.4vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.65;
}
.stelle-hero__actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
/* ============ Content blocks ============ */
.stelle-block {
background: var(--color-canvas);
border-top: 1px solid var(--color-border);
}
/* Alternate band so the three blocks read as separate chapters */
.stelle-block:nth-of-type(even) {
background: var(--color-surface-soft);
}
.stelle-block__inner {
padding-top: 72px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.stelle-block__inner {
padding-top: 96px;
padding-bottom: 80px;
}
}
/* Header: heading, and the supporting copy directly underneath it — one column,
both on the same left edge as everything else in the block.
It was a two-column grid (heading left, intro right) for a while. That put
the two on the same optical line but at different left edges, so the block
started at two places at once. Stacked, the reading order and the alignment
line are the same thing.
No kicker label above the heading. A line reading "02 — Aufgaben" over a
heading that already reads "Das erwartet dich" says the same thing twice —
the heading is the label. */
.stelle-block__header {
max-width: 720px;
}
.stelle-block__title {
margin: 0;
color: var(--color-navy);
font-size: clamp(30px, 3.6vw, 48px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.03em;
}
/* Sits under the heading on the same left edge. Never right-aligned: these are
150–200 character German sentences, and a ragged left edge costs real
reading comfort at 16px. */
.stelle-block__intro {
margin: 16px 0 0;
max-width: 680px;
color: var(--color-body);
font-size: clamp(15px, 1.3vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
@media (min-width: 1024px) {
.stelle-block__intro {
margin-top: 18px;
font-size: 16px;
line-height: 1.7;
}
}
/* ---- Feed ----
The three content blocks were 4–7 bordered boxes in a grid. Replaced with a
horizontal scroll feed: cards are columns separated by a hairline instead of
boxes with their own outline, which is what makes the row read as one
continuous strip of content rather than a wall of half-empty containers.
TRADE-OFF, worth knowing before this ships: a feed hides content. Seven
benefits at 340px do not fit any desktop viewport, so a visitor sees three
and has to scroll for the rest. On a careers page the benefits are the sell.
If that turns out to matter more than the look, the switch is one media
query — see the note at the end of this section. */
.stelle-feed {
position: relative;
margin-top: 36px;
}
@media (min-width: 1200px) {
.stelle-feed {
margin-top: 44px;
}
}
/* The track breaks out of the container gutter and re-applies it as padding,
so the last card runs off the edge of the content column instead of stopping
neatly inside it. That overflow is the affordance — it is how a feed says
"there is more this way" without a label. */
.stelle-feed__track {
display: flex;
align-items: stretch;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: 4px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
/* MUST match padding-inline. A snapport is the padding box, so `mandatory`
snapping pulled the first card onto the *border* edge on load and swallowed
the leading padding — the whole row sat one gutter (48px) left of the h2
and of the photo band above it. scroll-padding insets the snapport back to
the padding line, which is the line everything in the block aligns to. */
scroll-padding-inline: var(--gutter);
/* Hidden bars, still scrollable: the arrows and the cut-off card carry the
affordance, and a permanent bar under every block is noise. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.stelle-feed__track::-webkit-scrollbar {
display: none;
}
/* Focusable so the feed can be scrolled with the keyboard — a plain
overflow container is not reachable by Tab in every browser. */
.stelle-feed__track:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 4px;
border-radius: 4px;
}
/* ---- Card ----
No border, no background, no shadow. The hairline on the right is the only
separator; every card shares one 300px measure so the copy sets identically
across the row (the first card is narrower because it has no left padding —
the widths differ to keep the *content* boxes equal).
ALIGNMENT: the first card carries no left padding, so its number and title
start on exactly the same vertical line as the block's h2 and the photo band
below it. The 300px measure is kept by taking the 4px it used to be indented
off the card width instead. */
.stelle-item {
flex: 0 0 auto;
scroll-snap-align: start;
width: min(326px, 84vw);
padding: 0 26px 0 0;
border-right: 1px solid var(--color-border-strong);
}
.stelle-item + .stelle-item {
width: min(352px, 88vw);
padding-left: 26px;
padding-right: 26px;
}
.stelle-item:last-child {
border-right: none;
}
/* ---- Big number ----
Display-size, not a caption. It is the only ornament a card has now that the
box is gone, so it has to carry the weight the border used to. Colour
alternates so a row of seven does not read as one repeated stamp. */
.stelle-item__num {
display: block;
color: var(--color-accent-line);
font-size: 44px;
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
.stelle-item__num {
font-size: 52px;
}
}
.stelle-item:nth-child(even) .stelle-item__num {
color: var(--color-navy);
}
.stelle-item__title {
margin: 18px 0 0;
color: var(--color-navy);
font-size: 18px;
font-weight: var(--fw-bold);
line-height: 1.25;
letter-spacing: -0.02em;
text-wrap: balance;
}
@media (min-width: 768px) {
.stelle-item__title {
font-size: 19.5px;
}
}
.stelle-item__text {
margin: 10px 0 0;
color: var(--color-body);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
/* ---- Arrows ----
stelle-feed.js disables them at each end and hides the whole row when the
track has nothing to scroll (a 3-card block on a wide screen). */
.stelle-feed__nav {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
}
.stelle-feed__nav[hidden] {
display: none;
}
.stelle-feed__btn {
width: 42px;
height: 42px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--color-border-strong);
border-radius: 999px;
background: var(--color-canvas);
color: var(--color-navy);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
}
.stelle-feed__btn:hover:not(:disabled) {
border-color: var(--color-navy);
background: var(--color-surface-tint);
}
.stelle-feed__btn:disabled {
opacity: 0.3;
cursor: default;
}
.stelle-feed__btn:focus-visible {
outline: 3px solid rgba(25, 50, 119, 0.28);
outline-offset: 2px;
}
.stelle-feed__btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* TO REVERT TO A GRID on desktop (all cards visible, no horizontal scroll),
add this and drop nothing else — the arrows hide themselves once the track
stops overflowing:
@media (min-width: 1024px) {
.stelle-feed__track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px 26px;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
}
.stelle-item,
.stelle-item + .stelle-item {
width: auto;
padding: 0 26px 0 0;
}
}
*/
/* ---- Variant 2: Rail ----
A vertical numbered list, not a card row: number in a fixed left column,
title and copy beside it, one hairline per row. Three things it does that
the feed cannot — nothing is hidden off-screen, long copy has room to
breathe, and the number column puts every row's first pixel on the same
line as the block's h2.
Used where a block has 3–6 entries with real sentences in them. Markup:
→ - with a __num,
__title and __text as direct children (no wrapper — they are grid items). */
.stelle-rail {
margin: 32px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--color-border-strong);
}
@media (min-width: 1200px) {
.stelle-rail {
margin-top: 40px;
}
}
.stelle-rail__row {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
column-gap: 16px;
padding: 16px 0 18px;
border-bottom: 1px solid var(--color-border-strong);
}
/* From tablet up the row reads across instead of stacking: number, then the
title, then the copy in its own column. Keeps a six-entry block short
enough to take in at a glance. */
@media (min-width: 768px) {
.stelle-rail__row {
grid-template-columns: 54px minmax(0, 0.8fr) minmax(0, 1.25fr);
column-gap: 28px;
align-items: start;
padding: 20px 0 22px;
}
}
/* Same alternating colour as the feed numbers, at list scale rather than
display scale — here the hairlines carry the structure, not the number. */
.stelle-rail__num {
grid-column: 1;
grid-row: 1 / span 2;
color: var(--color-accent-line);
font-size: 20px;
font-weight: var(--fw-extrabold);
line-height: 1.3;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.stelle-rail__row:nth-child(even) .stelle-rail__num {
color: var(--color-navy);
}
.stelle-rail__title {
grid-column: 2;
grid-row: 1;
margin: 0;
color: var(--color-navy);
font-size: 17px;
font-weight: var(--fw-bold);
line-height: 1.3;
letter-spacing: -0.02em;
}
.stelle-rail__text {
grid-column: 2;
grid-row: 2;
margin: 8px 0 0;
color: var(--color-body);
font-size: 14.5px;
font-weight: var(--fw-medium);
line-height: 1.65;
}
@media (min-width: 768px) {
.stelle-rail__num {
grid-row: 1;
font-size: 22px;
}
.stelle-rail__title {
font-size: 18px;
}
.stelle-rail__text {
grid-column: 3;
grid-row: 1;
margin-top: 0;
}
}
/* ---- Variant 3: Checks ----
A dense tile grid with a check mark instead of a number — for blocks that
are a list of conditions ("das bringst du mit") or short, countable facts.
Deliberately the tightest of the three: 10–12px gutters and the same low
card height as the homepage cells, so it never reads as the airy 4-up grid.
Column count is explicit per entry count (--3 / --4 / --6) instead of
auto-fit, because auto-fit leaves a half-empty last row at exactly the
counts these pages use. */
.stelle-checks {
margin: 32px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
@media (min-width: 640px) {
.stelle-checks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.stelle-checks {
margin-top: 40px;
gap: 12px;
}
.stelle-checks--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stelle-checks--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stelle-checks--6 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.stelle-checks__item {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 13px;
align-content: start;
padding: 18px 20px 20px;
border: 1.5px solid var(--color-border);
border-radius: 16px;
background: var(--color-canvas);
}
.stelle-checks__mark {
grid-column: 1;
grid-row: 1 / span 2;
width: 26px;
height: 26px;
margin-top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(228, 0, 70, 0.1);
color: var(--color-accent-line);
}
.stelle-checks__item:nth-child(even) .stelle-checks__mark {
background: rgba(25, 50, 119, 0.09);
color: var(--color-navy);
}
.stelle-checks__mark svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.stelle-checks__title {
grid-column: 2;
grid-row: 1;
margin: 0;
color: var(--color-navy);
font-size: 16.5px;
font-weight: var(--fw-bold);
line-height: 1.3;
letter-spacing: -0.02em;
}
.stelle-checks__text {
grid-column: 2;
grid-row: 2;
margin: 7px 0 0;
color: var(--color-body);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.6;
}
/* ---- Feature band ----
Sits between a block header and its card grid and carries the block's punch
line over a photo. Two jobs: it breaks a run of six or seven cards up with
an image, and it gives the opening sentence of the intro somewhere to be
loud — in the old layout it was the first half of a grey paragraph.
To place a photo in another block, copy this markup and point the
![]()
somewhere else; nothing here is specific to one page. */
.stelle-feature {
position: relative;
margin-top: 36px;
min-height: 210px;
display: flex;
align-items: flex-end;
overflow: hidden;
border-radius: 20px;
background: var(--color-navy-deep);
isolation: isolate;
}
@media (min-width: 768px) {
.stelle-feature {
min-height: 240px;
}
}
@media (min-width: 1200px) {
.stelle-feature {
margin-top: 44px;
min-height: 260px;
}
}
.stelle-feature__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
/* Left-to-right so the copy side stays opaque while the photo keeps its right
half. Portrait crops leave far less room, hence the vertical variant below. */
.stelle-feature::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(10, 18, 42, 0.35) 0%,
rgba(10, 18, 42, 0.72) 55%,
rgba(10, 18, 42, 0.92) 100%
);
}
@media (min-width: 768px) {
.stelle-feature::before {
background: linear-gradient(
90deg,
rgba(10, 18, 42, 0.93) 0%,
rgba(10, 18, 42, 0.82) 42%,
rgba(10, 18, 42, 0.42) 72%,
rgba(10, 18, 42, 0.2) 100%
);
}
}
.stelle-feature__body {
position: relative;
z-index: 2;
padding: 22px 22px 24px;
max-width: 720px;
}
@media (min-width: 768px) {
.stelle-feature__body {
padding: 28px 30px 30px;
}
}
.stelle-feature__kicker {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
color: #ff8aab;
font-size: 10.5px;
font-weight: var(--fw-bold);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.stelle-feature__kicker::before {
content: "";
flex-shrink: 0;
width: 22px;
height: 1px;
background: currentColor;
}
.stelle-feature__claim {
margin: 0;
color: #fff;
font-size: clamp(18px, 2.4vw, 26px);
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.stelle-feature__pills {
margin: 16px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.stelle-feature__pills li {
display: inline-flex;
padding: 6px 13px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 11.5px;
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
backdrop-filter: blur(6px);
}
/* ============ Werte & Kultur ============ */
.stelle-werte {
background: var(--color-canvas);
border-top: 1px solid var(--color-border);
}
.stelle-werte__inner {
padding-top: 64px;
padding-bottom: 64px;
}
@media (min-width: 1024px) {
.stelle-werte__inner {
padding-top: 88px;
padding-bottom: 88px;
}
}
.stelle-werte__panel {
position: relative;
overflow: hidden;
padding: 40px 28px;
border-radius: var(--radius-card);
background: var(--color-navy);
color: #fff;
}
.stelle-werte__copy {
min-width: 0;
}
/* A colleague from the yard stands in the panel — same cut-out language as
the hero, and deliberately a different face than the one up top. The
figure runs off the bottom edge instead of floating in a box. */
.stelle-werte__media {
width: min(248px, 64%);
margin: 20px -28px -40px auto;
}
.stelle-werte__photo {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}
@media (min-width: 1024px) {
.stelle-werte__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
column-gap: 48px;
align-items: end;
padding: 56px 64px 0;
}
.stelle-werte__copy {
padding-bottom: 56px;
}
/* Pushed onto the panel's right edge, not floating inside the padding: the
column is wider and the figure eats the panel's 64px right padding, so he
runs off the corner the same way he runs off the bottom. The panel clips
him (overflow:hidden), which is the intent — a cut-out standing in the
corner reads as part of the panel, one centred in a box reads as a sticker. */
.stelle-werte__media {
width: calc(100% + 64px);
margin: 0 -64px 0 0;
}
}
.stelle-werte__title {
margin: 0;
max-width: 20ch;
font-size: clamp(26px, 3.2vw, 42px);
font-weight: var(--fw-extrabold);
line-height: 1.02;
letter-spacing: -0.03em;
}
.stelle-werte__text {
margin: 20px 0 0;
max-width: 720px;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(15px, 1.3vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.75;
}
/* ============ Closing CTA ============ */
.stelle-cta {
background: var(--color-surface-soft);
border-top: 1px solid var(--color-border);
}
.stelle-cta__inner {
padding-top: 64px;
padding-bottom: 72px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media (min-width: 1024px) {
.stelle-cta__inner {
padding-top: 88px;
padding-bottom: 96px;
}
}
.stelle-cta__title {
margin: 0;
max-width: 22ch;
color: var(--color-navy);
font-size: clamp(28px, 3.6vw, 46px);
font-weight: var(--fw-extrabold);
line-height: 1;
letter-spacing: -0.035em;
}
.stelle-cta__text {
margin: 20px auto 0;
max-width: 600px;
color: var(--color-body);
font-size: clamp(15px, 1.3vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
.stelle-cta__actions {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 22px;
}
.stelle-cta__phone {
color: var(--color-navy);
font-size: 15px;
font-weight: var(--fw-bold);
transition: color var(--dur-fast) var(--ease-out);
}
.stelle-cta__phone:hover {
color: var(--color-accent-line);
}
/* Reveal — same keyframes/timing as every other section */
html.js .stelle-block.is-inview [data-reveal],
html.js .stelle-werte.is-inview [data-reveal] {
animation: whyReveal 560ms var(--ease-out) both;
}
html.js .stelle-block.is-inview [data-reveal="1"] {
animation-delay: 80ms;
}
/* The Vorteile blocks gained a feature band between header and grid, so the
grid moved to index 2. */
html.js .stelle-block.is-inview [data-reveal="2"] {
animation-delay: 150ms;
}
@media (prefers-reduced-motion: reduce) {
html.js .stelle-block.is-inview [data-reveal],
html.js .stelle-werte.is-inview [data-reveal] {
animation: none;
}
.stelle-item {
transition: none;
}
.stelle-item:hover {
transform: none;
}
}
/* Legal pages */
/* ---- sections/legal.css ---- */
/* Legal pages (Impressum, Datenschutz) — long-form reading layout.
Same type scale and rhythm as the rest of the site; measure is capped so
the paragraphs stay readable on wide screens. */
.legal {
background: var(--color-canvas);
}
.legal__inner {
padding-top: 56px;
padding-bottom: 72px;
}
@media (min-width: 1024px) {
.legal__inner {
padding-top: 80px;
padding-bottom: 96px;
}
}
.legal__header {
max-width: 720px;
padding-bottom: 32px;
border-bottom: 1px solid var(--color-border);
}
.legal__kicker {
margin: 0 0 12px;
color: var(--color-label);
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.legal__title {
margin: 0;
color: var(--color-navy);
font-size: clamp(34px, 4.5vw, 60px);
font-weight: var(--fw-extrabold);
line-height: 0.98;
letter-spacing: -0.04em;
}
.legal__lead {
margin: 20px 0 0;
max-width: 640px;
color: var(--color-body);
font-size: clamp(15px, 1.3vw, 17px);
font-weight: var(--fw-medium);
line-height: 1.7;
}
.legal__body {
max-width: 760px;
margin-top: 40px;
}
.legal__block + .legal__block {
margin-top: 40px;
}
.legal__block h2 {
margin: 0 0 14px;
color: var(--color-navy);
font-size: clamp(19px, 1.8vw, 23px);
font-weight: var(--fw-bold);
line-height: 1.25;
letter-spacing: -0.02em;
}
.legal__block p {
margin: 0 0 14px;
color: var(--color-body);
font-size: 15.5px;
font-weight: var(--fw-medium);
line-height: 1.75;
}
.legal__block p:last-child {
margin-bottom: 0;
}
.legal__block a {
color: var(--color-navy);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color var(--dur-fast) var(--ease-out);
}
.legal__block a:hover {
color: var(--color-accent-line);
}
.legal__address {
margin: 0 0 18px;
color: var(--color-navy);
font-size: 16px;
font-style: normal;
font-weight: var(--fw-semibold);
line-height: 1.8;
}
/* Label/value pairs — two columns once there's room */
.legal__data {
margin: 0;
display: grid;
gap: 10px 24px;
}
@media (min-width: 640px) {
.legal__data {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.legal__data > div {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-soft);
}
.legal__data dt {
color: var(--color-text-muted);
font-size: 11.5px;
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.legal__data dd {
margin: 0;
color: var(--color-navy);
font-size: 15px;
font-weight: var(--fw-semibold);
}
.legal__list {
margin: 0 0 14px;
padding-left: 20px;
color: var(--color-body);
font-size: 15.5px;
font-weight: var(--fw-medium);
line-height: 1.8;
}
.legal__note {
margin: 14px 0 0;
color: var(--color-text-muted);
font-size: 14.5px;
font-weight: var(--fw-medium);
}
/* Open points the operator still has to fill in — deliberately visible, so
an unfinished legal page can't quietly go live looking complete. */
.legal__todo {
margin: 14px 0 0;
padding: 12px 14px;
border-left: 3px solid var(--color-accent-line);
border-radius: var(--radius-sm);
background: #fff5f8;
color: #8a1235;
font-size: 14.5px;
font-weight: var(--fw-semibold);
line-height: 1.6;
}
.legal__review {
margin: 48px 0 0;
padding: 18px 20px;
border: 1.5px dashed var(--color-border-strong);
border-radius: var(--radius-card);
background: var(--color-surface-soft);
color: var(--color-text-muted);
font-size: 14.5px;
font-weight: var(--fw-medium);
line-height: 1.7;
}
/* ---- Zertifikate ----
Each tile shows page 1 of the PDF itself rather than a stand-in icon.
The