/* AdNora V3 design system (site.css)
Shared by every page in v3-baustelle/. Plain CSS, no build step, no external requests.
Order: fonts, theme tokens, base, type, buttons, surfaces, header, heroes, section patterns,
start page sections, tabs/faq, forms, footer, motion.
Product graphics live in css/gfx.css and read the theme tokens defined here. */
/* ================================================================ Fonts */
@font-face {
font-family: "Mona Sans";
src: url("../assets/fonts/mona-sans-var.woff2") format("woff2");
font-weight: 200 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Mono";
src: url("../assets/fonts/geist-mono-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ================================================================ Theme tokens
Konzept §2 tokens (exact names): --bg --bg-2 --surface --surface-2 --line --text --muted
--accent --accent-soft --ok --warn --shadow. Extras are marked "extra".
[data-theme] can also be set on a single element (e.g. a dark card inside the light page);
all tokens are re-declared there, so nested graphics follow that theme. */
:root,
[data-theme="light"] {
color-scheme: light;
--bg: #E6E7E9;
--bg-2: #DEDFE2;
--surface: #F3F4F5;
--surface-2: #FBFBFB;
--line: rgba(18, 18, 20, .10);
--text: #121214;
--muted: #55585E;
--accent: #D50620;
--accent-soft: rgba(213, 6, 32, .08);
--ok: #256346;
--warn: #8F5600;
--shadow: 0 1px 2px rgba(28, 32, 42, .06), 0 14px 34px -20px rgba(28, 32, 42, .32);
/* extra */
--accent-fill: #D50620; /* red surfaces (buttons, marks) in both themes */
--accent-fill-hover: #B00519;
--accent-text: #B8051B; /* red for small text: 5.5:1 on --bg (konzept --accent is 4.4:1) */
--accent-num: #D50620; /* large red figures (stats, calculator): brand red, >= 4:1 */
--on-accent: #FBFBFB;
--line-2: rgba(18, 18, 20, .16);
--shadow-lg: 0 2px 6px -2px rgba(28, 32, 42, .08), 0 44px 90px -44px rgba(28, 32, 42, .5);
--glass: rgba(243, 244, 245, .78);
--glass-ring: rgba(18, 18, 20, .08);
--hover: rgba(18, 18, 20, .06);
--bezel-shell: rgba(251, 251, 251, .45);
--bezel-ring: rgba(18, 18, 20, .07);
--bezel-highlight: rgba(255, 255, 255, .75);
--core-highlight: rgba(255, 255, 255, .9);
--grain-opacity: .045;
/* Paper sheen like the logo mockup: light from the top left, a soft shade bottom right. */
--paper:
radial-gradient(90% 65% at 15% 0%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(80% 70% at 100% 100%, rgba(18, 18, 20, .06) 0%, rgba(18, 18, 20, 0) 70%);
}
[data-theme="dark"] {
color-scheme: dark;
/* Anthracite grey with a paper sheen, not black (all text tokens >= 4.5:1 on every surface). */
--bg: #1E2023;
--bg-2: #1A1C1F;
--surface: #27292D;
--surface-2: #2E3135;
--line: rgba(255, 255, 255, .12);
--text: #F4F4F6;
--muted: #C6C9CF;
--accent: #F0364A;
--accent-soft: rgba(240, 54, 74, .16);
--ok: #7FDDAE;
--warn: #F2C26B;
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -20px rgba(0, 0, 0, .55);
/* extra */
--accent-fill: #D50620;
--accent-fill-hover: #B00519; /* 7.04:1 with --on-accent */
--accent-text: #FF7A86; /* 5.2:1 on --surface-2, 6.5:1 on --bg */
--accent-num: #FF3B4E; /* large red figures: 4.7:1 on --bg, 3.7:1 on --surface-2 (large text) */
--on-accent: #FBFBFB;
--line-2: rgba(255, 255, 255, .18);
--shadow-lg: 0 2px 8px -2px rgba(0, 0, 0, .35), 0 50px 100px -40px rgba(0, 0, 0, .6);
--glass: rgba(30, 32, 35, .74);
--glass-ring: rgba(255, 255, 255, .12);
--hover: rgba(255, 255, 255, .08);
--bezel-shell: rgba(255, 255, 255, .045);
--bezel-ring: rgba(255, 255, 255, .09);
--bezel-highlight: rgba(255, 255, 255, .08);
--core-highlight: rgba(255, 255, 255, .09);
--grain-opacity: .06;
--paper:
radial-gradient(90% 65% at 15% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%),
linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, 0) 62%),
radial-gradient(80% 70% at 100% 100%, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 70%);
}
[data-theme] { color: var(--text); }
:root {
--font-display: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Type scale. Every font-size in this file uses one of these (icons excepted: 12/16/20/24px).
At 1440px: 12, 14, 17, 21 (lead), 32 (h3), 56 (h2), 80 (h1), 96 (display). */
--fs-12: .75rem;
--fs-14: .875rem;
--fs-17: 1.0625rem;
--fs-21: 1.3125rem;
--fs-lead: clamp(1.0625rem, .974rem + .376vw, 1.3125rem);
--fs-h3: clamp(1.5rem, 1.32rem + .75vw, 2rem);
--fs-h2: clamp(2.25rem, 1.81rem + 1.88vw, 3.5rem);
--fs-h1: clamp(2.75rem, 1.96rem + 3.38vw, 5rem);
--fs-display: clamp(3rem, 1.95rem + 4.5vw, 6rem);
/* Fixed colours for photographic areas (identical in both themes). */
--photo-ink: #0B0C0F;
--on-photo: #F3F4F5;
--on-photo-muted: #C9CBD0;
/* Shape system (konzept §2): bezel shell 28 / core 20, cards 18, fields 12, interactive = pill. */
--r-shell: 28px;
--bezel: 8px;
--r-core: calc(var(--r-shell) - var(--bezel));
--r-card: 18px;
--r-inset: 14px;
--r-field: 12px;
--r-pill: 999px;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.32, .72, 0, 1);
--ease-soft: cubic-bezier(.45, 0, .55, 1);
--container: 1312px;
--gutter: clamp(16px, 4.5vw, 64px);
--section-y: clamp(64px, 3rem + 5.6vw, 128px);
/* space below a section head (title block) before the content starts */
--space-head: clamp(40px, 1.6rem + 2.4vw, 64px);
--header-h: 64px;
--header-top: 12px;
/* distance from the container edge to the right viewport edge (device bleed in heroes) */
--bleed-right: calc(var(--gutter) + max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2));
/* Z-index scale: content 0, grain 40, header 50, skip link 100. */
--z-grain: 40;
--z-header: 50;
--z-skip: 100;
}
/* ================================================================ Base */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-top) + var(--header-h) + 24px);
background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
html.menu-open { overflow: hidden; }
body {
margin: 0;
min-height: 100dvh;
background: var(--paper), var(--bg);
background-attachment: fixed;
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-17);
font-weight: 400;
font-stretch: 100%;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: normal;
}
/* Fine grain on a fixed, non-interactive layer: gives the silver a machined surface. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: var(--z-grain);
pointer-events: none;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { background: var(--accent-fill); color: var(--on-accent); }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.skip-link {
position: fixed;
top: 16px; left: 16px;
z-index: var(--z-skip);
padding: 16px 20px;
border-radius: var(--r-pill);
background: var(--text);
color: var(--bg);
font-weight: 560;
text-decoration: none;
}
.skip-link:not(:focus) {
width: 1px; height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(880px + 2 * var(--gutter)); }
/* ================================================================ Typography */
h1, h2, h3, h4,
.display, .h1, .h2, .h3, .h4, .statement {
font-family: var(--font-display);
font-stretch: 125%;
font-weight: 540;
letter-spacing: -0.03em;
line-height: 1.04;
text-wrap: balance;
}
.display {
font-size: var(--fs-display);
font-weight: 540;
line-height: .96;
letter-spacing: -0.038em;
}
.h1 { font-size: var(--fs-h1); line-height: .98; letter-spacing: -0.036em; }
.h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.032em; }
.h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.024em; }
.h4 { font-size: var(--fs-21); line-height: 1.2; letter-spacing: -0.012em; font-weight: 560; }
.lead {
max-width: 52ch;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--muted);
text-wrap: pretty;
}
.statement {
font-size: var(--fs-h1);
font-weight: 480;
line-height: 1.02;
letter-spacing: -0.035em;
}
.statement .muted-part { color: var(--muted); }
p { text-wrap: pretty; }
/* Eyebrow, format "ADNORA / BEREICH": write "AdNora / Bereich", CSS sets the capitals. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .7em;
margin-bottom: clamp(16px, 1.8vw, 24px);
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
line-height: 1.4;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
}
/* The red slant (the slant of the logo stripe) marks the eyebrow in heroes only. */
.eyebrow::before {
content: "";
display: none;
width: 7px; height: 7px;
background: var(--accent-fill);
transform: skewX(-31deg);
}
.hero .eyebrow::before,
.page-hero .eyebrow::before { display: block; }
.note {
font-family: var(--font-mono);
font-size: var(--fs-12);
letter-spacing: .04em;
color: var(--muted);
}
.accent-dot { color: var(--accent-fill); }
.on-photo .accent-dot { color: #FF3B4E; }
/* Photographic context: light text tokens for copy placed on a dark photo.
Only put it on the copy wrapper, never around .gfx (graphics keep the page theme). */
.on-photo {
--text: var(--on-photo);
--muted: var(--on-photo-muted);
--accent-text: #FF7A86;
--line: rgba(255, 255, 255, .16);
--line-2: rgba(255, 255, 255, .3);
--hover: rgba(255, 255, 255, .1);
color: var(--text);
}
/* ================================================================ Buttons */
.btn {
--btn-h: 56px;
--btn-icon: 40px; /* (56 - 40) / 2 = 8px inner padding */
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
min-height: var(--btn-h);
padding: calc((var(--btn-h) - var(--btn-icon)) / 2);
padding-left: 24px;
border: 0;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: var(--fs-17);
font-weight: 560;
font-stretch: 110%;
line-height: 1;
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out);
}
.btn-icon {
display: grid;
place-items: center;
flex: none;
width: var(--btn-icon);
height: var(--btn-icon);
border-radius: 50%;
font-size: 20px;
}
.btn--primary {
background: var(--accent-fill);
color: var(--on-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 28px -16px rgba(213, 6, 32, .7);
}
.btn--primary:hover { background: var(--accent-fill-hover); }
.btn--primary .btn-icon { background: var(--on-accent); color: var(--accent-fill); }
.btn--ghost {
background: transparent;
color: var(--text);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover { background: var(--hover); }
.btn--ghost .btn-icon { background: var(--text); color: var(--bg); }
/* On photographs: translucent pill with a light ring (readable over any part of the image). */
.btn--light {
background: rgba(255, 255, 255, .1);
color: var(--on-photo);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.btn--light:hover { background: rgba(255, 255, 255, .18); }
.btn--light .btn-icon { background: var(--on-photo); color: #121214; }
.btn--sm { --btn-h: 44px; --btn-icon: 36px; gap: 8px; padding-left: 16px; font-size: var(--fs-14); }
.btn--sm .btn-icon { font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Text link with arrow, for "Mehr erfahren" style secondary actions. */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-weight: 560;
font-stretch: 110%;
text-decoration: none;
color: var(--text);
}
.link-arrow .icon { color: var(--accent-text); font-size: 20px; }
.link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
.btn { transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out); }
.btn-icon { transition: transform .2s var(--ease-out); }
.btn:hover .btn-icon { transform: translate(2px, -2px) scale(1.06); }
.btn:active { transform: scale(.98); }
.link-arrow .icon { transition: transform .2s var(--ease-out); }
.link-arrow:hover .icon { transform: translate(2px, -2px); }
}
/* ================================================================ Surfaces */
/* Double bezel: .bezel (outer tray, 28px) > .bezel-core (inner plate, 22px). Concentric radii. */
.bezel {
--r-core: calc(var(--r-shell) - var(--bezel));
padding: var(--bezel);
border-radius: var(--r-shell);
background: var(--bezel-shell);
box-shadow:
inset 0 1px 0 var(--bezel-highlight),
0 0 0 1px var(--bezel-ring),
var(--shadow);
}
.bezel--lg { --r-shell: 36px; --bezel: 8px; }
.bezel-core {
position: relative;
border-radius: var(--r-core);
background: var(--surface);
box-shadow: inset 0 1px 1px var(--core-highlight), 0 0 0 1px var(--line);
}
.card {
position: relative;
padding: clamp(24px, 2.4vw, 32px);
border-radius: var(--r-card);
background: var(--surface);
box-shadow: inset 0 1px 0 var(--core-highlight), 0 0 0 1px var(--line);
}
.bezel > .card { border-radius: var(--r-core); }
.icon-chip {
display: grid;
place-items: center;
flex: none;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--surface-2);
box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 var(--core-highlight);
font-size: 20px;
color: var(--text);
}
.icon-chip--accent { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 30px;
padding: 0 12px;
border-radius: var(--r-pill);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line);
font-size: var(--fs-12);
font-weight: 500;
line-height: 1;
color: var(--text);
}
/* Photo frame with concentric radius; use inside .bezel or alone. */
.media {
position: relative;
overflow: hidden;
border-radius: var(--r-core);
background: var(--bg-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--landscape { aspect-ratio: 3 / 2; }
.media--wide { aspect-ratio: 16 / 9; }
/* Panel behind a product graphic: tinted plate with a soft red light from above. */
.gfx-core {
padding: clamp(16px, 2.2vw, 32px);
overflow: hidden;
background:
radial-gradient(70% 60% at 70% 0%, var(--accent-soft), transparent 70%),
var(--bg-2);
}
.gfx-caption { margin-top: 16px; }
.check-list { display: grid; gap: 12px; }
.check-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.check-list .icon { margin-top: 4px; font-size: 20px; color: var(--accent-text); }
.stretched-link { text-decoration: none; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* ================================================================ Logo */
.logo {
display: inline-flex;
align-items: baseline;
color: inherit;
text-decoration: none;
line-height: 1;
font-size: 22px;
border-radius: 8px;
}
.logo-word {
font-family: var(--font-display);
font-stretch: 125%;
font-weight: 380;
letter-spacing: -0.005em;
line-height: 1;
}
.logo-mark {
height: 1.15em;
height: 1.594cap;
width: auto;
aspect-ratio: 318.3 / 153;
margin-left: .094em;
margin-left: .13cap;
transform: translateY(.144em);
transform: translateY(.2cap);
overflow: visible;
}
.logo-ink { fill: currentColor; }
.logo-red { fill: #D50620; }
/* ================================================================ Header */
/* States: body[data-header="overlay"] = transparent over a dark photo hero until the hero
has scrolled past (js adds .is-past-hero via a sentinel). Without the attribute the bar is glass. */
.site-header {
--h-text: var(--text);
--h-contrast: var(--bg);
--h-bg: var(--glass);
--h-ring: var(--glass-ring);
--h-hover: var(--hover);
--h-blur: blur(18px) saturate(150%);
--h-shadow: 0 0 0 1px var(--glass-ring), 0 18px 40px -26px rgba(16, 18, 24, .45);
position: fixed;
top: var(--header-top);
left: 0;
right: 0;
z-index: var(--z-header);
padding-inline: max(8px, calc(var(--gutter) - 16px));
pointer-events: none;
}
body[data-header="overlay"] .site-header:not(.is-past-hero):not(.is-menu-open) {
--h-text: var(--on-photo);
--h-contrast: #121214;
--h-bg: rgba(14, 15, 17, 0);
--h-ring: rgba(255, 255, 255, .3);
--h-hover: rgba(255, 255, 255, .12);
--h-blur: none;
--h-shadow: 0 0 0 1px rgba(255, 255, 255, 0);
}
.header-bar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
max-width: calc(var(--container) + 32px);
height: var(--header-h);
margin-inline: auto;
padding: 0 12px 0 24px;
border-radius: var(--r-pill);
color: var(--h-text);
background: var(--h-bg);
box-shadow: var(--h-shadow);
-webkit-backdrop-filter: var(--h-blur);
backdrop-filter: var(--h-blur);
pointer-events: auto;
transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out);
}
.header-bar .logo { margin-right: auto; font-size: 27px; }
@media (max-width: 599px) { .header-bar .logo { font-size: 24px; } }
.nav { margin-right: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: inherit;
font-size: var(--fs-14);
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s var(--ease-out);
}
.nav-link:hover,
.nav-item.is-open > .nav-link { background: var(--h-hover); }
/* Current page: a short red slant under the label (real state, not decoration). */
.nav-link[aria-current="page"]::after,
.nav-trigger.is-current::after {
content: "";
position: absolute;
left: 50%;
bottom: 8px;
width: 16px;
height: 2px;
margin-left: -8px;
background: var(--accent-fill);
transform: skewX(-31deg);
}
.nav-caret { font-size: 12px; transition: transform .2s var(--ease-out); }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }
/* Plattform dropdown (disclosure pattern). Hidden with visibility so it leaves the tab order. */
.nav-panel {
position: absolute;
top: calc(100% + 16px);
left: -16px;
width: min(780px, calc(100vw - 48px));
padding: 8px;
border-radius: 28px;
background: var(--surface-2);
color: var(--text);
box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-panel:focus { outline: none; }
.nav-item.is-open .nav-panel {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0s;
}
.nav-panel-inner {
display: grid;
grid-template-columns: minmax(0, 15fr) minmax(0, 23fr);
gap: 8px;
}
.nav-feature {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
background: var(--photo-ink);
color: var(--on-photo);
text-decoration: none;
isolation: isolate;
}
.nav-feature-media { position: absolute; inset: 0; z-index: -2; }
.nav-feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.nav-feature::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(11, 12, 15, .92) 8%, rgba(11, 12, 15, .35) 60%, rgba(11, 12, 15, .1));
}
.nav-feature-body { margin-top: auto; padding: 24px; }
.nav-feature-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: var(--font-display);
font-stretch: 125%;
font-size: var(--fs-21);
font-weight: 540;
letter-spacing: -0.015em;
}
.nav-feature-text { margin-top: 8px; font-size: var(--fs-14); line-height: 1.45; color: var(--on-photo-muted); }
.nav-feature:focus-visible { outline-color: var(--accent-text); outline-offset: -3px; }
.nav-panel-list { display: grid; gap: 2px; padding: 8px; }
.nav-panel-link {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 8px 12px;
border-radius: 14px;
text-decoration: none;
color: var(--text);
transition: background-color .2s var(--ease-out);
}
.nav-panel-link:hover,
.nav-panel-link:focus-visible { background: var(--hover); }
.nav-panel-link:focus-visible { outline-offset: -2px; }
.nav-panel-icon {
display: grid;
place-items: center;
width: 38px; height: 38px;
border-radius: 12px;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
font-size: 20px;
color: var(--text);
}
.nav-panel-link:hover .nav-panel-icon { color: var(--accent-text); }
.nav-panel-title { display: block; font-size: var(--fs-14); font-weight: 560; line-height: 1.25; }
.nav-panel-desc { display: block; margin-top: 2px; font-size: var(--fs-14); line-height: 1.35; color: var(--muted); }
.nav-panel-link[aria-current="page"] .nav-panel-title { color: var(--accent-text); }
.header-actions { display: flex; align-items: center; gap: 8px; }
/* Theme toggle: one circle that becomes a crescent. Shows the current theme, aria-pressed = dark. */
.theme-toggle {
display: grid;
place-items: center;
width: 44px; height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
box-shadow: inset 0 0 0 1px var(--h-ring);
cursor: pointer;
transition: background-color .2s var(--ease-out);
}
.theme-toggle:hover { background: var(--h-hover); }
.theme-icon { width: 20px; height: 20px; overflow: visible; }
.theme-icon-body { transform-box: fill-box; transform-origin: center; transform: scale(.62); }
.theme-icon-cut { transform: translate(8px, -8px); }
.theme-icon-rays { transform-box: fill-box; transform-origin: center; opacity: 1; }
[data-theme="dark"] .theme-icon-body { transform: scale(1); }
[data-theme="dark"] .theme-icon-cut { transform: none; }
[data-theme="dark"] .theme-icon-rays { opacity: 0; transform: rotate(-60deg) scale(.6); }
@media (prefers-reduced-motion: no-preference) {
.theme-icon-body, .theme-icon-cut, .theme-icon-rays {
transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
}
.nav-toggle {
display: none;
position: relative;
width: 44px; height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--h-text);
color: var(--h-contrast);
cursor: pointer;
}
.nav-toggle-line {
position: absolute;
left: 12px; right: 12px; top: 50%;
height: 1.5px;
margin-top: -1px;
border-radius: 2px;
background: currentColor;
transform: translateY(-4px);
}
.nav-toggle-line + .nav-toggle-line { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line + .nav-toggle-line { transform: rotate(-45deg); }
.mobile-menu {
position: fixed;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 32px;
padding: calc(var(--header-top) + var(--header-h) + 24px) var(--gutter) 32px;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg);
color: var(--text);
opacity: 0;
pointer-events: auto;
}
.mobile-menu.is-open { opacity: 1; }
.mobile-nav { display: grid; gap: 8px; width: 100%; max-width: 560px; margin-inline: auto; }
.mobile-label {
margin: 16px 0 4px;
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.mobile-label:first-child { margin-top: 0; }
/* Plattform: one quiet grouped list (icon, title, one-line description, chevron) */
.mobile-features {
border-radius: var(--r-card);
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
overflow: hidden;
}
.mobile-features > li + li { border-top: 1px solid var(--line); }
.mobile-feature {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 16px;
align-items: center;
gap: 16px;
min-height: 64px;
padding: 12px 16px;
text-decoration: none;
transition: background-color .2s var(--ease-out);
}
.mobile-feature:hover, .mobile-feature:focus-visible { background: var(--hover); }
.mobile-feature-icon {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 12px;
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line);
font-size: 20px;
color: var(--text);
}
.mobile-feature[aria-current="page"] .mobile-feature-icon { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.mobile-feature-text { display: grid; gap: 2px; min-width: 0; }
.mobile-feature-title { font-size: var(--fs-17); font-weight: 560; line-height: 1.3; }
.mobile-feature-desc {
font-size: var(--fs-14);
line-height: 1.35;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-chevron { font-size: 16px; color: var(--muted); }
.mobile-all {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 12px 16px;
font-size: var(--fs-14);
font-weight: 560;
color: var(--accent-text);
text-decoration: none;
}
.mobile-all .icon { font-size: 16px; }
/* Mehr: plain rows with hairlines, same rhythm as the list above */
.mobile-list { border-top: 1px solid var(--line); }
.mobile-list > li { border-bottom: 1px solid var(--line); }
.mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
font-family: var(--font-display);
font-size: var(--fs-21);
font-weight: 540;
font-stretch: 110%;
letter-spacing: -0.012em;
text-decoration: none;
}
.mobile-link[aria-current="page"] > span { color: var(--accent-text); }
.mobile-cta {
display: grid;
gap: 16px;
width: 100%;
max-width: 560px;
margin: auto auto 0;
}
.mobile-cta .btn { width: 100%; justify-content: space-between; }
.mobile-legal { display: flex; justify-content: center; gap: 24px; font-size: var(--fs-14); }
.mobile-legal a { color: var(--muted); text-decoration: none; }
.mobile-legal a:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
.nav-toggle-line { transition: transform .2s var(--ease-out); }
.mobile-menu { transition: opacity .25s var(--ease-out); }
.m-stagger {
opacity: 0;
transform: translateY(12px);
transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
transition-delay: calc(var(--i, 0) * 24ms);
}
.mobile-menu.is-open .m-stagger { opacity: 1; transform: none; }
}
@media (max-width: 1023px) {
.nav, .nav-cta { display: none; }
.nav-toggle { display: block; }
.header-bar { padding-left: 16px; }
}
@media (min-width: 1024px) {
.mobile-menu { display: none !important; }
}
/* Sentinel spanning the hero; js switches the header once all of it has scrolled under the bar.
Full height (not 1px at the end) so a jump past the hero (anchor, reload) still fires the observer. */
.header-sentinel { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none; }
/* ================================================================ Ken Burns (heroes; the .hero-light glow is static) */
.kenburns { transform: scale(1.01); transform-origin: 62% 55%; }
@keyframes kenburns {
0% { transform: scale(1.01) translate3d(0, 0, 0); }
100% { transform: scale(1.11) translate3d(-1.4%, -.9%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
.kenburns { animation: kenburns 30s var(--ease-soft) infinite alternate; will-change: transform; }
.motion-paused .kenburns,
.is-offscreen .kenburns { animation-play-state: paused; }
}
/* Round pause/play control for the hero motion (WCAG 2.2.2), bottom right. */
.motion-toggle {
display: grid;
place-items: center;
width: 44px; height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: var(--on-photo);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
cursor: pointer;
}
.motion-toggle:hover { background: rgba(255, 255, 255, .16); }
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.motion-toggle .icon-play { display: none; }
.motion-paused .motion-toggle .icon-play { display: block; }
.motion-paused .motion-toggle .icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
.motion-toggle { display: none; }
}
/* ================================================================ Device stage (hero devices)
.float-stage > .float-device[data-parallax] > .float-tilt > .gfx
.float-device carries the scroll parallax (GSAP transform), .float-tilt the rotation (CSS rotate)
and the entrance (CSS translate), so the three never overwrite each other. */
.float-stage { position: relative; isolation: isolate; }
.float-stage::before {
content: "";
position: absolute;
inset: -12% -6% -14% 4%;
z-index: -1;
background: radial-gradient(46% 52% at 52% 56%, rgba(213, 6, 32, .26), rgba(213, 6, 32, 0) 72%);
pointer-events: none;
}
.float-device { position: relative; }
.float-tilt { position: relative; isolation: isolate; }
.float-tilt::after {
content: "";
position: absolute;
z-index: -1;
left: 7%;
right: 7%;
bottom: -6%;
height: 20%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(4, 7, 16, .62), rgba(4, 7, 16, 0));
filter: blur(12px);
pointer-events: none;
}
.float-device--laptop { width: 110%; }
.float-device--phone {
position: absolute;
z-index: 2;
left: -6%;
bottom: -9%;
width: 26%;
}
.float-device--phone .float-tilt { rotate: 4deg; }
.float-device--phone .float-tilt::after { left: 2%; right: 2%; bottom: -4%; height: 12%; }
.float-device--tablet { width: 100%; }
/* ================================================================ Start page hero */
.hero {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: 100vh;
min-height: 100svh;
padding-block: calc(var(--header-top) + var(--header-h) + clamp(28px, 5vh, 64px)) clamp(96px, 11vh, 128px);
overflow: clip;
background: var(--photo-ink);
color: var(--on-photo);
}
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-scrim {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(90deg, rgba(9, 10, 13, .86) 0%, rgba(9, 10, 13, .66) 34%, rgba(9, 10, 13, .22) 66%, rgba(9, 10, 13, .3) 100%),
linear-gradient(0deg, rgba(9, 10, 13, .5) 0%, rgba(9, 10, 13, .16) 16%, rgba(9, 10, 13, 0) 32%),
linear-gradient(180deg, rgba(9, 10, 13, .55) 0%, rgba(9, 10, 13, 0) 22%);
}
.hero-light {
position: absolute;
inset: -20% -10% auto 30%;
height: 90%;
z-index: -2;
background: radial-gradient(50% 50% at 60% 40%, rgba(255, 196, 160, .16), rgba(255, 196, 160, 0) 70%);
pointer-events: none;
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
gap: clamp(28px, 3.4vw, 56px);
align-items: center;
}
/* Same H1 size on every page (--fs-h1). The start-page lines never wrap: where the copy column is
too narrow for "Weniger suchen." (8.2em wide), the size follows the column (12cqi) instead. */
.hero-copy { container-type: inline-size; }
.hero-title {
font-size: min(var(--fs-h1), 12cqi);
font-weight: 560;
line-height: .98;
letter-spacing: -0.038em;
}
.hero-line {
display: block;
overflow: hidden;
padding-bottom: .14em;
margin-bottom: -.14em;
}
.hero-line > span { display: inline-block; }
.hero-title .hero-line > span { white-space: nowrap; }
.hero-sub {
max-width: 44ch;
margin-top: clamp(24px, 3vh, 32px);
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--muted);
}
.hero-copy .btn-row { margin-top: clamp(28px, 4vh, 44px); }
.hero-stage { margin-right: calc(-1 * min(var(--bleed-right), 220px)); }
.hero-foot {
position: absolute;
right: var(--gutter);
bottom: clamp(16px, 3vh, 28px);
display: flex;
align-items: center;
gap: 12px;
}
.hero-caption { color: var(--on-photo); }
.hero-copy .hero-sub.enter { --enter-delay: 220ms; }
.hero-copy .btn-row.enter { --enter-delay: 320ms; }
.hero-foot.enter { --enter-delay: 1000ms; }
@keyframes line-up { from { transform: translateY(108%); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes device-in { from { opacity: 0; translate: 0 48px; } }
@media (prefers-reduced-motion: no-preference) {
.hero-line > span { animation: line-up .5s var(--ease-out) both; }
.hero-line + .hero-line > span { animation-delay: .1s; }
.enter { animation: enter-up .5s var(--ease-out) both; animation-delay: var(--enter-delay, 0ms); }
.float-stage .float-tilt { animation: device-in .7s var(--ease-out) both; animation-delay: .3s; }
.float-stage .float-device--phone .float-tilt { animation-delay: .55s; }
}
@media (max-width: 1023px) {
.hero { padding-bottom: clamp(96px, 16vw, 140px); }
.hero-inner { grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 8vw, 72px); }
.hero-scrim {
background:
linear-gradient(180deg, rgba(9, 10, 13, .82) 0%, rgba(9, 10, 13, .66) 46%, rgba(9, 10, 13, .4) 100%);
}
.hero-stage { margin-right: 0; max-width: 720px; }
.float-device--laptop { width: 100%; }
.float-device--phone { left: auto; right: -3%; bottom: -12%; width: 29%; }
.hero-foot { position: static; justify-content: flex-end; margin-top: 40px; }
}
/* ================================================================ Subpage hero (template)
.page-hero > .page-hero-media (photo with .kenburns) + .page-hero-scrim + .container.page-hero-inner
Optional second column: .page-hero-inner.page-hero-inner--split with a .float-stage. */
.page-hero {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: 100vh;
min-height: 100svh;
padding-block: calc(var(--header-top) + var(--header-h) + 48px) clamp(56px, 8vw, 112px);
overflow: clip;
background: var(--photo-ink);
color: var(--on-photo);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(0deg, rgba(9, 10, 13, .88) 0%, rgba(9, 10, 13, .45) 52%, rgba(9, 10, 13, .3) 100%),
linear-gradient(90deg, rgba(9, 10, 13, .6) 0%, rgba(9, 10, 13, 0) 70%);
}
.page-hero-inner--split {
display: grid;
grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
gap: clamp(28px, 3.4vw, 56px);
align-items: end;
}
.page-hero-copy { max-width: 52rem; }
.page-hero-copy .page-hero-sub.enter { --enter-delay: 200ms; }
.page-hero-copy .btn-row.enter { --enter-delay: 300ms; }
.page-hero-copy .jump-links.enter { --enter-delay: 400ms; }
.page-hero-title { margin-top: 0; }
.page-hero-sub { margin-top: clamp(20px, 2.4vw, 28px); max-width: 48ch; }
.page-hero .btn-row { margin-top: clamp(28px, 3.4vw, 40px); }
@media (max-width: 1023px) {
.page-hero-inner--split { grid-template-columns: minmax(0, 1fr); }
}
/* Plain variant (no photo): the hero sits on the page background. */
.page-hero--plain { min-height: 0; background: transparent; color: var(--text); padding-bottom: var(--space-head); }
/* Photo heroes fill the first screen (100svh, no strip of the next section below) and sink while
scrolling away: the photo lags behind at a third of the scroll speed and dims, the copy drifts
down and fades. Scroll-driven CSS on a named view timeline of the hero itself, compositor only
(transform, opacity). Without support or with reduced motion the hero simply scrolls. */
@keyframes hero-sink-media { to { transform: translate3d(0, 34%, 0); opacity: .4; } }
@keyframes hero-sink-copy { to { transform: translate3d(0, 12vh, 0); opacity: 0; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hero,
.page-hero:not(.page-hero--plain) { view-timeline: --hero block; }
.hero-media,
.page-hero-media {
animation: hero-sink-media linear both;
animation-timeline: --hero;
animation-range: exit 0% exit 100%;
}
.hero-inner,
.page-hero:not(.page-hero--plain) > .page-hero-inner {
animation: hero-sink-copy linear both;
animation-timeline: --hero;
animation-range: exit 0% exit 75%;
}
}
}
/* Jump links (e.g. module anchors on plattform.html): one scrollable row of pills. */
.jump-links {
display: flex;
gap: 8px;
margin-top: clamp(32px, 4vw, 48px);
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
}
.jump-links::-webkit-scrollbar { display: none; }
.jump-links a {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px var(--line-2);
font-size: var(--fs-14);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s var(--ease-out);
}
.jump-links a:hover { background: var(--hover); }
/* ================================================================ Section patterns */
.section { position: relative; padding-block: var(--section-y); }
.section--alt { background: var(--paper), var(--bg-2); background-attachment: fixed; }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section-head { max-width: 56rem; margin-bottom: var(--space-head); }
.section-head .lead { margin-top: clamp(16px, 2vw, 24px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
margin-top: clamp(28px, 3vw, 40px);
}
/* Split: text column + media column on a 12-column grid. Add .split--reverse to mirror. */
.split {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(40px, 5vw, 72px) 24px;
align-items: center;
}
.split-copy { grid-column: 1 / span 5; }
.split-media { grid-column: 7 / span 6; }
.split--reverse .split-copy { grid-column: 8 / span 5; grid-row: 1; }
.split--reverse .split-media { grid-column: 1 / span 6; grid-row: 1; }
.split-copy .lead { margin-top: clamp(16px, 2vw, 24px); }
.split-copy .check-list { margin-top: clamp(24px, 3vw, 40px); }
.split-copy .btn-row,
.split-copy .link-arrow { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 1023px) {
.split-copy, .split-media,
.split--reverse .split-copy, .split--reverse .split-media { grid-column: 1 / -1; grid-row: auto; }
}
/* Bento: 12 columns. Cells take .span-4 / .span-5 / .span-6 / .span-7 / .span-8 / .span-12
and optionally .row-2. Plan spans so every row sums to 12 (no empty cells). */
.bento {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 12px;
}
.bento > * { min-width: 0; display: flex; }
.bento > * > .bezel-core { flex: 1 1 auto; min-width: 0; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }
@media (max-width: 1023px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento > .span-4, .bento > .span-5, .bento > .span-6 { grid-column: span 1; }
.bento > .span-7, .bento > .span-8, .bento > .span-12 { grid-column: span 2; }
}
@media (max-width: 767px) {
.bento { grid-template-columns: minmax(0, 1fr); }
.bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
/* Feature grid: icon + title + short text, 3 or 2 columns. */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border-radius: var(--r-core);
background: var(--line);
}
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature {
display: flex;
flex-direction: column;
gap: 8px;
padding: clamp(24px, 2.4vw, 32px);
background: var(--surface);
}
.feature .icon-chip { margin-bottom: 16px; }
.feature-title { font-size: var(--fs-21); line-height: 1.25; letter-spacing: -0.012em; font-weight: 560; }
.feature-text { font-size: var(--fs-17); line-height: 1.55; color: var(--muted); }
@media (max-width: 1023px) {
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
.feature-grid, .feature-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
/* Marquee: one per page at most. First group is the readable list, the copy is aria-hidden. */
.marquee {
overflow: hidden;
padding-block: clamp(20px, 2.4vw, 32px);
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.marquee-track { display: flex; width: max-content; }
.marquee-group {
display: flex;
flex: none;
align-items: center;
gap: clamp(40px, 4.4vw, 72px);
padding-right: clamp(40px, 4.4vw, 72px);
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: .55em;
font-family: var(--font-display);
font-size: var(--fs-21);
font-weight: 500;
font-stretch: 125%;
letter-spacing: -0.02em;
line-height: 1.2;
white-space: nowrap;
}
.marquee-item .icon { width: .9em; height: .9em; color: var(--accent-text); }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
.marquee-track { animation: marquee 56s linear infinite; }
.marquee:hover .marquee-track,
.marquee.is-offscreen .marquee-track,
.motion-paused .marquee-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { width: auto; padding-inline: var(--gutter); }
.marquee-group { flex-wrap: wrap; justify-content: center; gap: 12px 32px; padding: 0; flex: 1 1 auto; }
.marquee-group[aria-hidden="true"] { display: none; }
}
/* ================================================================ Start page: problem */
.problem-head {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 0 24px;
margin-bottom: var(--space-head);
}
.problem-head > * { grid-column: 1 / -1; }
.problem-title { max-width: 17em; }
.problem-lead {
grid-column: 6 / span 7;
max-width: 50ch;
margin-top: clamp(28px, 4vw, 56px);
}
.pains {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
}
.pain { display: flex; min-width: 0; }
.pain > .bezel-core { flex: 1 1 auto; min-width: 0; }
.pain--files { grid-column: 1 / span 7; grid-row: 1; }
.pain--deadlines { grid-column: 1 / span 7; grid-row: 2; }
.pain--photo { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.pain-core {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(20px, 2.4vw, 32px);
align-items: center;
padding: clamp(8px, 1.2vw, 16px);
padding-left: clamp(24px, 2.6vw, 40px);
}
.pain-title { font-size: var(--fs-h3); }
.pain-text { margin-top: 12px; max-width: 34ch; font-size: var(--fs-17); line-height: 1.55; color: var(--muted); }
.pain--photo .bezel-core {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 520px;
overflow: hidden;
background: var(--photo-ink);
isolation: isolate;
}
.pain--photo img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 40%;
}
.pain--photo .bezel-core::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(to top, rgba(9, 10, 13, .92) 0%, rgba(9, 10, 13, .55) 36%, rgba(9, 10, 13, 0) 64%);
}
.pain--photo .pain-body { padding: clamp(24px, 2.8vw, 40px); }
.pain--photo .pain-text { max-width: 38ch; }
/* Problem illustrations (decorative, aria-hidden). */
.pv {
position: relative;
min-height: 236px;
overflow: hidden;
border-radius: calc(var(--r-core) - 8px);
background:
radial-gradient(80% 70% at 100% 0%, var(--accent-soft), transparent 70%),
var(--bg-2);
box-shadow: inset 0 0 0 1px var(--line);
}
.pv-search {
position: absolute;
top: 16px; left: 16px; right: 16px;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 16px;
border-radius: var(--r-pill);
background: var(--surface-2);
box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
font-size: var(--fs-14);
color: var(--text);
white-space: nowrap;
}
.pv-search .icon { color: var(--muted); font-size: 16px; }
.pv-caret { width: 1.5px; height: 16px; margin-left: -4px; background: var(--accent-fill); }
.pv-file {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 10px;
background: var(--surface-2);
box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
font-family: var(--font-mono);
font-size: var(--fs-12);
line-height: 1.2;
white-space: nowrap;
color: var(--text);
}
.pv-file .icon { font-size: 16px; color: var(--muted); }
.pv-file:nth-of-type(1) { --i: 0; left: 6%; top: 76px; rotate: -5deg; }
.pv-file:nth-of-type(2) { --i: 1; left: 34%; top: 104px; rotate: 4deg; }
.pv-file:nth-of-type(3) { --i: 2; left: 2%; top: 140px; rotate: 2deg; }
.pv-file:nth-of-type(4) { --i: 3; left: 40%; top: 168px; rotate: -3deg; }
.pv-file:nth-of-type(5) { --i: 4; left: 12%; top: 196px; rotate: -1deg; }
.pv-deadlines { display: grid; align-content: center; gap: 8px; padding: 16px; }
.pv-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
padding: 12px;
border-radius: 12px;
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line);
font-size: var(--fs-14);
line-height: 1.3;
}
.pv-row .icon { font-size: 20px; color: var(--muted); justify-self: center; }
.pv-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-status {
padding: 4px 8px;
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
font-family: var(--font-mono);
font-size: var(--fs-12);
white-space: nowrap;
color: var(--muted);
}
.pv-row--over { box-shadow: inset 0 0 0 1px var(--accent-soft), 0 10px 24px -16px rgba(213, 6, 32, .55); }
.pv-row--over .icon { color: var(--accent-text); }
.pv-row--over .pv-status { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.pv-row--soon .icon { color: var(--warn); }
.pv-row--soon .pv-status { background: rgba(178, 107, 0, .12); color: var(--text); box-shadow: none; }
.pv-row--faded { opacity: .62; }
@keyframes file-drop { from { opacity: 0; translate: 0 -28px; } }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
.reveal-on .pain--files .pv-file { opacity: 0; }
.reveal-on .pain--files.is-in .pv-file {
opacity: 1;
animation: file-drop .5s var(--ease-out) both;
animation-delay: calc(var(--i) * 90ms + 250ms);
}
.pv-caret { animation: blink 1.1s steps(1) infinite; }
.reveal-on .pain--deadlines .pv-row { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal-on .pain--deadlines.is-in .pv-row { opacity: 1; transform: none; }
.reveal-on .pain--deadlines.is-in .pv-row--faded { opacity: .62; }
.pain--deadlines .pv-row:nth-child(2) { transition-delay: .12s; }
.pain--deadlines .pv-row:nth-child(3) { transition-delay: .24s; }
}
@media (max-width: 1023px) {
.pain--files, .pain--deadlines, .pain--photo { grid-column: 1 / -1; grid-row: auto; }
.pain--photo .bezel-core { min-height: clamp(380px, 70vw, 520px); }
.problem-lead { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
.pain-core { grid-template-columns: minmax(0, 1fr); padding: 8px; }
.pain-body { padding: 16px 12px 4px; }
.pain--files .pain-body, .pain--deadlines .pain-body { order: -1; }
}
/* ================================================================ Start page: solution + flow */
.solution-head { max-width: 62rem; margin: 0 auto var(--space-head); text-align: center; }
.solution-head .eyebrow { justify-content: center; }
.solution-head .lead { margin: clamp(24px, 2.6vw, 32px) auto 0; }
.solution-figure { position: relative; }
.solution-figure::before {
content: "";
position: absolute;
inset: 10% 10% -6%;
z-index: -1;
background: radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 72%);
filter: blur(30px);
pointer-events: none;
}
.solution-figure .bezel-core { padding: clamp(16px, 3vw, 48px); }
.solution-figure figcaption { margin-top: 16px; text-align: center; }
/* ================================================================ Start page: modules bento */
.module-core {
display: flex;
flex-direction: column;
gap: 16px;
padding: clamp(8px, 1vw, 12px);
overflow: hidden;
}
.module-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: clamp(12px, 1.4vw, 20px) clamp(12px, 1.4vw, 20px) 0;
}
.module-title { font-size: var(--fs-21); line-height: 1.2; letter-spacing: -0.022em; }
.module-title a { color: inherit; }
.module-arrow {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--line-2);
font-size: 16px;
}
.module-text {
max-width: 50ch;
padding: 0 clamp(12px, 1.4vw, 20px);
font-size: var(--fs-17);
line-height: 1.55;
color: var(--muted);
}
.module-visual {
position: relative;
display: grid;
align-items: end;
flex: 1 1 auto;
margin-top: auto;
padding: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px) 0;
overflow: hidden;
border-radius: calc(var(--r-core) - 10px);
background:
radial-gradient(70% 70% at 80% 0%, var(--accent-soft), transparent 70%),
var(--bg-2);
box-shadow: inset 0 0 0 1px var(--line);
}
.module-visual > .gfx { margin-bottom: -2px; }
.module-visual--pad { align-items: center; padding-bottom: clamp(16px, 2vw, 28px); }
.module:hover .module-arrow { background: var(--text); color: var(--bg); box-shadow: none; }
.module:focus-within { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.module .stretched-link:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
.module-arrow { transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out); }
.module:hover .module-arrow { transform: translate(2px, -2px); }
.module-visual > .gfx { transition: transform .2s var(--ease-out); }
.module:hover .module-visual > .gfx { transform: translateY(-6px); }
}
/* ================================================================ Start page: "So funktioniert’s"
Static by default (stacked steps, each with its graphic). On wide screens with motion allowed,
js adds .is-pinned: GSAP pins the section, the steps cross-fade and the progress bar fills. */
.how-head { max-width: 40rem; }
.how-head .lead { margin-top: 16px; }
.how-progress { display: none; }
.how-steps { display: grid; gap: clamp(64px, 8vw, 112px); margin-top: clamp(48px, 6vw, 80px); }
.how-step {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 32px 24px;
align-items: center;
}
.how-text { grid-column: 1 / span 5; }
.how-media { grid-column: 7 / span 6; }
.how-title { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.03em; }
.how-body { margin-top: 16px; max-width: 42ch; font-size: var(--fs-lead); color: var(--muted); }
@media (max-width: 1023px) {
.how-text, .how-media { grid-column: 1 / -1; }
}
.how.is-pinned { padding-block: 0; }
.how.is-pinned .how-inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 100svh;
min-height: 640px;
padding-top: calc(var(--header-top) + var(--header-h) + 24px);
padding-bottom: 40px;
}
.how.is-pinned .how-head,
.how.is-pinned .how-steps { width: calc((100% - 24px) * 5 / 12); }
.how.is-pinned .how-progress {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: clamp(28px, 4vh, 44px);
}
.how-progress span {
position: relative;
height: 3px;
overflow: hidden;
border-radius: 3px;
background: var(--line-2);
}
.how-progress span::after {
content: "";
position: absolute;
inset: 0;
background: var(--accent-fill);
transform-origin: 0 50%;
transform: scaleX(clamp(0, calc(var(--how-progress, 0) * 4 - var(--i)), 1));
}
.how-progress span:nth-child(1) { --i: 0; }
.how-progress span:nth-child(2) { --i: 1; }
.how-progress span:nth-child(3) { --i: 2; }
.how-progress span:nth-child(4) { --i: 3; }
.how.is-pinned .how-steps { display: grid; gap: 0; margin-top: clamp(24px, 4vh, 40px); }
.how.is-pinned .how-step { display: block; grid-area: 1 / 1; }
.how.is-pinned .how-text {
opacity: 0;
transform: translateY(14px);
transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.how.is-pinned .how-step.is-active .how-text { opacity: 1; transform: none; transition-delay: .08s; }
.how.is-pinned .how-media {
position: absolute;
top: calc(var(--header-top) + var(--header-h) + 24px);
bottom: 40px;
right: var(--gutter);
width: calc((100% - 2 * var(--gutter) - 24px) * 7 / 12);
display: flex;
align-items: center;
opacity: 0;
transform: translateY(18px) scale(.985);
pointer-events: none;
transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.how.is-pinned .how-media > * { width: 100%; }
.how.is-pinned .how-step.is-active .how-media { opacity: 1; transform: none; pointer-events: auto; }
/* ================================================================ Start page: story */
.story-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 48px 24px;
align-items: start;
}
.story-media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-top) + var(--header-h) + 32px); }
.story-media .media { aspect-ratio: 4 / 5; }
.story-media .media img { object-position: 50% 30%; }
.story-copy { grid-column: 7 / span 6; }
.story-intro { margin-top: clamp(16px, 2vw, 24px); }
.story-timeline { position: relative; display: grid; gap: clamp(40px, 4vw, 52px); margin-top: clamp(40px, 5vw, 64px); padding-left: 36px; }
.story-timeline::before {
content: "";
position: absolute;
top: 8px; bottom: 8px; left: 6px;
width: 1px;
background: linear-gradient(var(--accent-fill), var(--line-2) 30%, var(--line-2));
}
.story-beat { position: relative; }
.story-beat::before {
content: "";
position: absolute;
top: 4px;
left: -36px;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--bg);
box-shadow: inset 0 0 0 1.5px var(--accent-fill);
}
.story-beat:first-child::before { background: var(--accent-fill); }
.story-time {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-text);
}
.story-text { margin-top: 8px; font-size: var(--fs-lead); line-height: 1.55; }
.story-snippets { display: grid; gap: 8px; margin-top: 16px; max-width: 34rem; }
.snippet {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 8px;
align-items: start;
padding: 12px 16px;
border-radius: var(--r-inset);
background: var(--surface-2);
box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
font-size: var(--fs-14);
line-height: 1.45;
}
.snippet .icon { margin-top: 0; font-size: 20px; color: var(--muted); }
.snippet--alert .icon { color: var(--accent-text); }
.snippet--warn .icon { color: var(--warn); }
.snippet--ok .icon { color: var(--ok); }
.snippet-meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; color: var(--muted); }
.snippet--question {
justify-self: end;
grid-template-columns: minmax(0, 1fr);
max-width: 26rem;
border-radius: 18px 18px 6px 18px;
background: var(--text);
color: var(--bg);
box-shadow: var(--shadow);
}
.source-chip {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: start;
padding: 8px 12px 8px 8px;
border-radius: var(--r-pill);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
font-size: var(--fs-12);
font-weight: 500;
}
.source-chip sup {
display: grid;
place-items: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--accent-fill);
color: var(--on-accent);
font-family: var(--font-mono);
font-size: var(--fs-12);
line-height: 1;
vertical-align: baseline;
}
.story-note { margin-top: clamp(40px, 4vw, 52px); }
@media (max-width: 1023px) {
.story-media { grid-column: 1 / -1; position: relative; top: auto; }
.story-media .media { aspect-ratio: 16 / 11; }
.story-copy { grid-column: 1 / -1; }
}
/* ================================================================ Start page: dark security card */
/* .ink is a component with data-theme="dark": a dark plate on the silver page, tokens follow. */
.ink { background: var(--bezel-shell); }
/* On the light page the dark plate needs a light-theme tray around it. */
html[data-theme="light"] .ink {
background: rgba(18, 18, 20, .06);
box-shadow: 0 0 0 1px rgba(18, 18, 20, .1), 0 50px 100px -50px rgba(18, 18, 20, .55);
}
.ink-core {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 48px 24px;
align-items: center;
padding: clamp(28px, 5vw, 80px);
overflow: hidden;
background:
radial-gradient(60% 70% at 85% 20%, rgba(213, 6, 32, .16), transparent 70%),
var(--surface);
}
.ink-copy { grid-column: 1 / span 6; }
.ink-copy .lead { margin-top: 20px; }
.ink-media { grid-column: 8 / span 5; }
/* From 1024px the diagram gets the full width below the copy (it is drawn on a 960 x 640 stage and
scales with its box, so it is read at about 1:1 on a desktop). The copy above splits into
headline block (left) and trust list (right). Below 1024px everything stacks as before. */
@media (min-width: 1024px) {
.ink-core { row-gap: clamp(48px, 5vw, 72px); }
.ink-copy {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;
align-content: center;
}
.ink-copy > .eyebrow,
.ink-copy > .h2,
.ink-copy > .lead,
.ink-copy > .btn-row { grid-column: 1 / span 6; }
.ink-copy > .eyebrow { justify-self: start; }
.ink-copy > .trust-grid {
grid-column: 7 / span 6;
grid-row: 1 / span 4;
align-self: center;
margin-top: 0;
}
.ink-media {
grid-column: 1 / -1;
justify-self: center;
width: 100%;
max-width: 960px;
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.ink-copy > .trust-grid { grid-template-columns: minmax(0, 1fr); }
}
.trust-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 24px;
margin-top: clamp(28px, 3.4vw, 44px);
}
.trust-item {
display: flex;
align-items: center;
gap: 12px;
padding-block: 16px;
border-top: 1px solid var(--line);
font-weight: 500;
line-height: 1.35;
}
.trust-item .icon { font-size: 20px; color: var(--accent-text); }
.ink-copy .btn-row { margin-top: clamp(28px, 3.4vw, 40px); }
@media (max-width: 1023px) {
.ink-copy, .ink-media { grid-column: 1 / -1; }
}
@media (max-width: 539px) {
.trust-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ================================================================ Start page: company teaser */
.company-head { max-width: 58rem; margin-bottom: var(--space-head); }
.company-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 48px 24px;
align-items: start;
}
.company-copy { grid-column: 1 / span 5; }
.company-copy > p { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.company-copy > p strong { color: var(--text); font-weight: 560; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: clamp(28px, 3vw, 40px); }
.founder {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--r-card);
background: var(--surface);
box-shadow: inset 0 1px 0 var(--core-highlight), 0 0 0 1px var(--line);
}
.monogram {
display: grid;
place-items: center;
flex: none;
width: 56px; height: 56px;
border-radius: 14px;
background: var(--bg-2);
box-shadow: inset 0 0 0 1px var(--line);
font-family: var(--font-display);
font-stretch: 125%;
font-size: var(--fs-21);
font-weight: 420;
letter-spacing: -0.01em;
}
.founder-name, .founder-role { display: block; }
.founder-name { font-size: var(--fs-17); font-weight: 560; line-height: 1.25; }
.founder-role { font-size: var(--fs-14); color: var(--muted); }
.company-copy .link-arrow { margin-top: 24px; }
.company-media { grid-column: 7 / span 6; }
.company-media .media { aspect-ratio: 3 / 2; }
.values {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 20px;
margin-top: 28px;
}
.value { padding-top: 16px; border-top: 1px solid var(--line-2); }
.value-title { font-size: var(--fs-17); font-weight: 560; line-height: 1.3; letter-spacing: -0.01em; }
.value-text { margin-top: 8px; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
@media (max-width: 1023px) {
.company-copy, .company-media { grid-column: 1 / -1; }
.values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ================================================================ Closing CTA */
.cta-core {
position: relative;
display: grid;
min-height: clamp(460px, 56vw, 640px);
align-content: end;
padding: clamp(28px, 5.6vw, 96px);
overflow: hidden;
background: var(--photo-ink);
isolation: isolate;
}
.cta-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.cta-core::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
linear-gradient(0deg, rgba(9, 10, 13, .9) 0%, rgba(9, 10, 13, .5) 50%, rgba(9, 10, 13, .2) 100%),
linear-gradient(90deg, rgba(9, 10, 13, .55), rgba(9, 10, 13, 0) 70%);
}
.cta-copy { max-width: 44rem; }
.cta-copy .lead { margin-top: 20px; }
.cta-copy .btn-row { margin-top: clamp(28px, 3.4vw, 40px); }
/* ================================================================ Tabs (data-tabs, see _template.html) */
.tab-list {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
border-radius: var(--r-pill);
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
}
.tab {
min-height: 42px;
padding: 0 16px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
font-size: var(--fs-14);
font-weight: 500;
cursor: pointer;
transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.tab:hover { background: var(--hover); }
.tab[aria-selected="true"] { background: var(--text); color: var(--bg); }
.tab-panel { margin-top: clamp(28px, 3.4vw, 44px); }
@media (prefers-reduced-motion: no-preference) {
.tab-panel:not([hidden]) { animation: enter-up .5s var(--ease-out) both; }
}
/* ================================================================ FAQ (details/summary) */
.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 0;
list-style: none;
cursor: pointer;
font-size: var(--fs-lead);
font-weight: 540;
font-stretch: 112%;
letter-spacing: -0.012em;
line-height: 1.3;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-icon {
display: grid;
place-items: center;
flex: none;
width: 40px; height: 40px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--line-2);
font-size: 20px;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--text); color: var(--bg); box-shadow: none; }
.faq-a { max-width: 66ch; padding: 0 64px 28px 0; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.faq-icon { transition: transform .2s var(--ease-out); }
.faq-item[open] .faq-a { animation: enter-up .5s var(--ease-out) both; }
}
/* ================================================================ Forms (kontakt.html)
.form[data-contact-form] > .form-grid > .field (label, input, optional .field-help, .field-error)
Errors: . js fills and shows them. */
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
}
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field-label { font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.req { margin-left: 2px; color: var(--accent-text); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 1px solid var(--line-2);
border-radius: var(--r-field);
background: var(--surface-2);
color: var(--text);
font-size: var(--fs-17);
line-height: 1.5;
-webkit-appearance: none;
appearance: none;
transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field select {
padding-right: 44px;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.field textarea { min-height: 136px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
border-color: transparent;
}
.field [aria-invalid="true"] { border-color: var(--accent-text) !important; }
.field-help { font-size: var(--fs-14); line-height: 1.45; color: var(--muted); }
.field-error {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: var(--fs-14);
line-height: 1.45;
font-weight: 500;
color: var(--accent-text);
}
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.check input {
width: 22px; height: 22px;
margin: 2px 0 0;
accent-color: var(--accent-fill);
cursor: pointer;
}
.check label { font-weight: 400; color: var(--muted); cursor: pointer; }
.check label a { color: var(--text); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.form-status {
margin-top: 20px;
padding: 16px;
border-radius: var(--r-field);
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line-2), inset 3px 0 0 var(--accent-fill);
font-size: var(--fs-14);
}
.form-status:empty { display: none; }
@media (max-width: 639px) {
.form-grid { grid-template-columns: minmax(0, 1fr); }
.form-actions .btn { width: 100%; justify-content: space-between; }
}
/* ================================================================ Footer */
.site-footer {
position: relative;
padding-top: clamp(72px, 8vw, 120px);
padding-bottom: clamp(24px, 3vw, 40px);
background: var(--paper), var(--bg-2);
background-attachment: fixed;
border-top: 1px solid var(--line);
}
.footer-top {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 48px 24px;
}
.footer-brand { grid-column: 1 / span 4; }
.footer-claim {
margin-top: 24px;
font-family: var(--font-display);
font-stretch: 125%;
font-size: var(--fs-h3);
font-weight: 520;
line-height: 1.1;
letter-spacing: -0.025em;
}
.footer-desc { margin-top: 16px; max-width: 36ch; font-size: var(--fs-17); line-height: 1.55; color: var(--muted); }
.footer-brand .btn { margin-top: 24px; }
.footer-nav {
grid-column: 6 / span 7;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px 20px;
}
.footer-title {
margin-bottom: 12px;
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
font-stretch: 100%;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.footer-links { display: grid; gap: 2px; }
.footer-links a {
display: inline-flex;
align-items: center;
min-height: 36px;
font-size: var(--fs-14);
line-height: 1.35;
text-decoration: none;
}
.footer-links a:hover { color: var(--accent-text); }
.footer-links a[aria-current="page"] { color: var(--accent-text); }
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 32px;
margin-top: clamp(56px, 7vw, 96px);
padding-top: 20px;
border-top: 1px solid var(--line-2);
font-size: var(--fs-14);
color: var(--muted);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--text); }
/* Giant wordmark: the lockup is about 6.44em wide, so it spans the container. Decorative. */
.logo--giant {
display: flex;
width: fit-content;
margin-top: clamp(28px, 4vw, 56px);
font-size: min(calc((100vw - 2 * var(--gutter)) / 6.6), 198px);
color: var(--text);
pointer-events: none;
user-select: none;
}
@media (max-width: 1023px) {
.footer-brand, .footer-nav { grid-column: 1 / -1; }
.footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ================================================================ Scroll reveal
[data-reveal] rises 14px and fades in when it enters the viewport (IntersectionObserver).
Wrap siblings in [data-reveal-stagger] to cascade them by 70ms. Never use it inside a hero:
heroes animate on load with .enter / .hero-line. Only armed when js runs (html.reveal-on). */
@media (prefers-reduced-motion: no-preference) {
.reveal-on [data-reveal] {
opacity: 0;
transform: translate3d(0, 14px, 0);
transition:
opacity .5s var(--ease-out) var(--reveal-delay, 0ms),
transform .5s var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
}
/* ================================================================ Responsive odds and ends */
@media (max-width: 1023px) {
.ink-core { padding: clamp(24px, 6vw, 48px); }
}
@media (max-width: 767px) {
.hero-copy .btn-row .btn,
.cta-copy .btn-row .btn { flex: 1 1 100%; justify-content: space-between; }
.how-steps { gap: 72px; }
.faq-a { padding-right: 0; }
}
@media (prefers-reduced-transparency: reduce) {
.site-header { --h-blur: none; --glass: var(--surface); }
.btn--light, .motion-toggle { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 12, 15, .7); }
}
@media print {
.site-header, .marquee, .motion-toggle, body::after { display: none !important; }
.hero, .page-hero { min-height: 0; }
}
/* Rechner */
/* Start page: Zeitverlust-Rechner (#zeitverlust). Markup in index.html, behaviour in js/rechner.js.
Left: sliders in a bezel (sticky on tall desktop screens). Right: results with large display numbers,
a 10 x 10 grid of squares (red = share of working time), the planning statement and the call to action.
Tokens only, so both themes follow. The results are static text in the HTML, js only updates them. */
.calc { padding-top: 0; }
.calc-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.calc-in, .calc-out { min-width: 0; }
.calc-out { display: flex; flex-direction: column; gap: 12px; }
/* Inputs */
.calc-inputs-core {
display: grid;
gap: clamp(24px, 3vw, 40px);
padding: clamp(24px, 3vw, 40px);
}
.calc-kicker {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
line-height: 1.4;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--muted);
}
.calc-field { display: grid; gap: 2px; }
.calc-field-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.calc-label { font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.calc-value {
flex: none;
min-width: 4.5rem;
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--core-highlight);
font-family: var(--font-mono);
font-size: var(--fs-14);
font-weight: 500;
line-height: 1.3;
font-variant-numeric: tabular-nums;
text-align: center;
white-space: nowrap;
color: var(--text);
}
.calc-scale {
display: flex;
justify-content: space-between;
margin-top: -8px;
padding-inline: 2px;
font-family: var(--font-mono);
font-size: var(--fs-12);
line-height: 1.4;
color: var(--muted);
}
.calc-field .field-help { margin-top: 4px; }
.calc-assumption {
padding-top: 20px;
border-top: 1px solid var(--line);
line-height: 1.55;
}
/* Range slider: real , red filled track, red thumb.
--p (0 to 1) is the position of the value; the fill ends at the centre of the thumb. */
.calc-range {
--thumb: 28px;
--track: 8px;
--fill: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0));
display: block;
width: 100%;
height: 44px;
margin: 0;
padding: 0;
border-radius: var(--r-pill);
background: transparent;
accent-color: var(--accent-fill);
cursor: pointer;
touch-action: pan-y;
-webkit-appearance: none;
appearance: none;
}
.calc-range:focus-visible { outline-offset: 2px; }
.calc-range::-webkit-slider-runnable-track {
height: var(--track);
border-radius: var(--r-pill);
background-color: var(--line-2);
background-image: linear-gradient(var(--accent-fill), var(--accent-fill));
background-repeat: no-repeat;
background-size: var(--fill) 100%;
}
.calc-range::-moz-range-track {
height: var(--track);
border-radius: var(--r-pill);
background-color: var(--line-2);
background-image: linear-gradient(var(--accent-fill), var(--accent-fill));
background-repeat: no-repeat;
background-size: var(--fill) 100%;
}
.calc-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: var(--thumb);
height: var(--thumb);
margin-top: calc((var(--track) - var(--thumb)) / 2);
border: 5px solid var(--surface-2);
border-radius: 50%;
background: var(--accent-fill);
box-shadow: 0 0 0 1px var(--line-2), 0 8px 16px -6px rgba(213, 6, 32, .6);
}
.calc-range::-moz-range-thumb {
box-sizing: border-box;
width: var(--thumb);
height: var(--thumb);
border: 5px solid var(--surface-2);
border-radius: 50%;
background: var(--accent-fill);
box-shadow: 0 0 0 1px var(--line-2), 0 8px 16px -6px rgba(213, 6, 32, .6);
}
/* Results */
.calc-results-core {
container-type: inline-size;
display: grid;
gap: clamp(24px, 3vw, 40px);
padding: clamp(24px, 3.2vw, 44px);
overflow: hidden;
background:
radial-gradient(70% 55% at 100% 0%, var(--accent-soft), transparent 72%),
var(--surface);
}
.calc-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: clamp(20px, 2.6vw, 32px) clamp(16px, 2.4vw, 32px);
margin: 0;
}
.calc-metric { min-width: 0; margin: 0; }
.calc-metric--lead {
grid-column: 1 / -1;
padding-bottom: clamp(20px, 2.6vw, 32px);
border-bottom: 1px solid var(--line);
}
.calc-metric dt {
font-size: var(--fs-17);
font-weight: 500;
line-height: 1.35;
color: var(--muted);
}
.calc-metric--lead dt {
display: flex;
align-items: center;
gap: .7em;
}
.calc-metric--lead dt::before {
content: "";
width: 7px; height: 7px;
background: var(--accent-fill);
transform: skewX(-31deg); /* the slant of the logo stripe, as in the eyebrow */
}
.calc-metric dd {
margin: 8px 0 0;
font-family: var(--font-display);
font-stretch: 125%;
font-weight: 480;
font-size: var(--fs-h3);
line-height: 1;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
color: var(--text);
}
.calc-metric--lead dd {
font-size: var(--fs-display);
/* guard only: below ~1400px a 7-digit euro sum would not fit the card at display size */
font-size: min(var(--fs-display), 15cqi);
font-weight: 460;
letter-spacing: -0.045em;
}
/* 10 x 10 squares: red = share of working time lost to searching and chasing */
.calc-viz {
display: grid;
grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
gap: clamp(20px, 3vw, 40px);
align-items: center;
margin: 0;
padding-top: clamp(20px, 2.6vw, 32px);
border-top: 1px solid var(--line);
}
.calc-cells {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: clamp(4px, .45vw, 8px);
padding: clamp(8px, 1.3vw, 16px);
border-radius: var(--r-inset);
background: var(--bg-2);
box-shadow: inset 0 0 0 1px var(--line);
}
.calc-cell {
aspect-ratio: 1;
border-radius: 22%;
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line);
}
.calc-cell.is-on {
background: var(--accent-fill);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 5px 10px -5px rgba(213, 6, 32, .7);
}
html[data-theme="dark"] .calc-cell.is-on {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 14px -3px rgba(229, 40, 60, .55);
}
.calc-share {
font-family: var(--font-display);
font-stretch: 125%;
font-weight: 480;
font-size: var(--fs-h2);
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--accent-num);
}
.calc-viz-text {
max-width: 28ch;
margin-top: 12px;
font-size: var(--fs-17);
font-weight: 500;
line-height: 1.4;
color: var(--text);
}
.calc-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin-top: 16px;
font-size: var(--fs-14);
line-height: 1.3;
color: var(--muted);
}
.calc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.calc-swatch {
width: 12px; height: 12px;
border-radius: 3px;
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.calc-swatch.is-on { background: var(--accent-fill); box-shadow: none; }
.calc-viz-note { margin-top: 12px; line-height: 1.5; }
@container (max-width: 34rem) {
.calc-viz { grid-template-columns: minmax(0, 1fr); }
.calc-cells { max-width: 21rem; }
}
/* Planning statement and call to action */
.calc-plan {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 16px 20px;
align-items: start;
margin-top: clamp(16px, 2vw, 28px);
padding: clamp(20px, 2.4vw, 32px);
}
.calc-plan-text {
max-width: 62ch;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--text);
}
.calc-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 28px;
margin-top: clamp(8px, 1.4vw, 16px);
}
.calc-disclaimer {
flex: 1 1 16rem;
max-width: 36ch;
font-size: var(--fs-14);
line-height: 1.5;
color: var(--muted);
}
@media (min-width: 1024px) {
.calc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.calc-in { grid-column: 1 / span 5; }
.calc-out { grid-column: 6 / span 7; }
}
/* Sliders stay in view while the results are read, only where the card fits the screen. */
@media (min-width: 1024px) and (min-height: 760px) {
.calc-in {
position: sticky;
top: calc(var(--header-top) + var(--header-h) + 20px);
}
}
@media (max-width: 767px) {
.calc-cta .btn { flex: 1 1 100%; justify-content: space-between; }
.calc-plan { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
.calc-cell { transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.calc-range::-webkit-slider-thumb { transition: transform .2s var(--ease-out); }
.calc-range::-moz-range-thumb { transition: transform .2s var(--ease-out); }
.calc-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.calc-range:hover::-moz-range-thumb { transform: scale(1.08); }
.calc-range:active::-webkit-slider-thumb { transform: scale(1.14); }
.calc-range:active::-moz-range-thumb { transform: scale(1.14); }
}
/* Start page: extra story graphics (delay chain, before/after) */
.home-extra { margin-top: clamp(72px, 9vw, 128px); display: grid; gap: 16px; }
.home-extra .lead { max-width: 62ch; margin-bottom: 12px; }
/* ================================================================ Funnel (index.html, docs/v3/funnel.md)
Order: hero video slot, #erkennen (roles), #eskalation (sticky panel + steps), #zahlen (sourced figures),
turn statement in #ausgangslage, slogan in the closing CTA. */
/* Hero: the first line may wrap ("Alles ist / dokumentiert.") where the column is narrow. */
.hero-title .hero-line > span { white-space: normal; text-wrap: balance; }
.hero-title { font-size: min(var(--fs-h1), 11cqi); }
/* Video slot: poster + play button. data-src on [data-video] enables it (js/site.js, section 10). */
.hero-stage:has(.hero-video) { margin-right: 0; }
.hero-video { margin: 0; }
.hero-video-frame {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 20px;
background: var(--photo-ink);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -32px rgba(0, 0, 0, .7);
}
.hero-video-frame img,
.hero-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video-frame img { filter: saturate(.8) brightness(.7); }
.hero-video-play {
position: absolute;
left: 50%; top: 50%;
translate: -50% -50%;
display: grid;
place-items: center;
width: 88px; height: 88px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--on-photo);
background: rgba(255, 255, 255, .14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
cursor: pointer;
transition: transform .2s var(--ease-out), background-color .2s var(--ease-out);
}
.hero-video-play svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }
.hero-video-play:disabled { cursor: default; }
.has-video .hero-video-play { background: var(--accent-fill); box-shadow: none; }
.has-video .hero-video-play:hover { transform: scale(1.06); background: var(--accent-fill-hover); }
.hero-video-badge {
position: absolute;
left: 16px; bottom: 16px;
padding: 8px 12px;
border-radius: 999px;
font: 500 var(--fs-12)/1 var(--font-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--on-photo);
background: rgba(11, 12, 15, .56);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.has-video .hero-video-badge { display: none; }
/* Kennen Sie das? */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.role { display: flex; flex-direction: column; gap: 16px; }
.role-title { font-size: var(--fs-21); font-weight: 600; letter-spacing: -0.01em; }
.role-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.role-list li {
padding: 16px 16px 16px 20px;
border-radius: 12px;
background: var(--surface-2);
box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px var(--line);
font-size: var(--fs-17);
line-height: 1.45;
}
.roles-close {
max-width: 34ch;
margin-top: clamp(40px, 5vw, 64px);
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.02em;
}
@media (max-width: 1023px) {
.roles { grid-template-columns: minmax(0, 1fr); }
}
/* Eskalation: sticky panel heats up from level 0 to 5 (js/site.js, section 11). */
.escalate {
--heat: 44%;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.escalate[data-level="0"] { --heat: 0%; }
.escalate[data-level="1"] { --heat: 6%; }
.escalate[data-level="2"] { --heat: 14%; }
.escalate[data-level="3"] { --heat: 24%; }
.escalate[data-level="4"] { --heat: 34%; }
.escalate-panel {
position: sticky;
top: calc(var(--header-top) + var(--header-h) + 32px);
padding: clamp(24px, 3vw, 40px);
border-radius: var(--r-card);
background: color-mix(in srgb, var(--accent) var(--heat), var(--surface));
box-shadow: inset 0 0 0 1px var(--line);
transition: background-color .5s var(--ease-out);
}
.escalate-kicker { font: 500 var(--fs-12)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.escalate-status { margin-top: 24px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
.escalate-num {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 12px;
margin-top: 8px;
font-size: var(--fs-display);
font-weight: 560;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.escalate-unit { font-size: var(--fs-17); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.escalate-meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
.escalate-meter span { height: 6px; border-radius: 3px; background: var(--line); transition: background-color .5s var(--ease-out); }
.escalate[data-level="0"] .escalate-meter span:nth-child(-n+1),
.escalate[data-level="1"] .escalate-meter span:nth-child(-n+2),
.escalate[data-level="2"] .escalate-meter span:nth-child(-n+3),
.escalate[data-level="3"] .escalate-meter span:nth-child(-n+4),
.escalate[data-level="4"] .escalate-meter span:nth-child(-n+5),
.escalate[data-level="5"] .escalate-meter span { background: var(--accent); }
.escalate-steps { display: grid; gap: clamp(24px, 6vh, 64px); margin: 0; padding: clamp(0px, 4vh, 48px) 0; list-style: none; }
.esc-step {
padding: clamp(24px, 2.4vw, 32px);
border-radius: var(--r-card);
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
transition: opacity .5s var(--ease-out);
}
.escalate.is-armed .esc-step { opacity: .36; }
.escalate.is-armed .esc-step.is-past { opacity: .64; }
.escalate.is-armed .esc-step.is-active { opacity: 1; }
.esc-time { font: 500 var(--fs-12)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.esc-title { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; }
.esc-text { max-width: 52ch; margin-top: 12px; font-size: var(--fs-17); line-height: 1.55; color: var(--muted); }
.esc-step--final { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
.esc-step--final .esc-time,
.esc-step--final .esc-text { color: rgba(255, 255, 255, .84); }
@media (max-width: 1023px) {
.escalate { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.escalate-panel {
z-index: 2;
top: calc(var(--header-top) + var(--header-h) + 8px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 16px;
padding: 16px 20px;
background: color-mix(in srgb, var(--accent) var(--heat), var(--surface));
box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.escalate-kicker { display: none; }
.escalate-status { margin: 0; font-size: var(--fs-17); }
.escalate-num { margin: 0; font-size: var(--fs-h3); gap: 8px; }
.escalate-unit { font-size: var(--fs-14); }
.escalate-meter { grid-column: 1 / -1; margin-top: 4px; }
.escalate-steps { padding: 0; gap: 24px; }
}
/* Zahlen */
.stats-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat-big {
padding: clamp(24px, 3vw, 40px);
border-radius: var(--r-card);
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
}
.stat-big-num {
display: flex;
align-items: baseline;
flex-wrap: wrap;
font-size: var(--fs-display);
font-weight: 560;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--accent-num);
}
.stat-big-pre { margin-right: 12px; font-size: var(--fs-21); font-weight: 500; letter-spacing: -0.01em; color: var(--muted); }
.stat-big-unit { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.stat-big-text { margin-top: 24px; font-size: var(--fs-17); line-height: 1.5; color: var(--muted); }
.stat-big sup { line-height: 0; }
.stat-big sup a { margin-left: 2px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.sources {
display: grid;
gap: 8px;
max-width: 90ch;
margin-top: clamp(32px, 4vw, 48px);
padding-left: 1.4em;
font-size: var(--fs-14);
line-height: 1.5;
color: var(--muted);
}
.sources a { color: var(--text); text-underline-offset: 3px; }
.sources-more { margin-top: 16px; padding-left: 1.4em; font-size: var(--fs-14); }
.sources-more a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
/* quellen.html: the full list, a bit larger. */
.sources--page { gap: 16px; margin-top: 0; font-size: var(--fs-17); }
.sources-back { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 1023px) {
.stats-big { grid-template-columns: minmax(0, 1fr); }
}
/* Turn in #ausgangslage and the closing slogan */
.turn { max-width: 22em; margin-top: clamp(64px, 8vw, 112px); font-size: var(--fs-h2); }
.cta-slogan { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.035em; }
/* Rote Seite (#stopp): the page turns red (html.is-red, js/site.js section 13) while the sticky stage
stands. Two layers in one grid cell: .stop-grid (a wall of problems with the two claims) and .stop-finale
("Und manchmal kostet eine Frist alles!" ...). The default styles are the final picture: the wall
stepped back (faint, enlarged) and the finale on top. .stop.is-armed (js, motion allowed) shows the wall
at full strength and hides what has not popped yet; .is-zoom dives in before the finale comes.
The wall: in every list the items grow to fill their row (no gaps), js sets --wall (base font size)
so the whole wall fills the height of the stage. */
.stop { position: relative; background: var(--accent-fill); color: var(--on-accent); }
/* Rows (js) behind the sticky stage: they give the scroll length and fast-forward near the end. */
.stop-steps { display: none; }
.stop.is-armed .stop-steps { display: block; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.stop-steps > span { display: block; }
.stop-inner {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100svh;
padding: calc(var(--header-top) + var(--header-h) + 12px) var(--gutter) 12px;
}
.stop-stage { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); width: 100%; max-width: 1440px; margin-inline: auto; }
.stop-grid,
.stop-finale { grid-area: 1 / 1; }
.stop-grid {
--wall: clamp(13px, 1.9vh, 19px);
display: flex;
align-items: center;
min-height: 0;
overflow: hidden;
opacity: .1;
transform: scale(1.25);
filter: blur(3px);
}
.stop-wall { display: flex; flex-direction: column; gap: calc(var(--wall) * .55); width: 100%; font-size: var(--wall); }
.snips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--wall) * .35) calc(var(--wall) * 1.1); list-style: none; margin: 0; padding: 0; }
.snip {
flex: 1 1 auto;
max-width: 24em;
font-size: 1em;
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.01em;
text-align: center;
color: var(--on-accent);
}
.snip.s-big { font-size: 1.24em; font-weight: 680; letter-spacing: -0.02em; }
.snip.s-ink { color: #121214; }
.snip strong { font-weight: 780; color: #121214; }
.snip.s-ink strong { color: inherit; }
.snip sup { line-height: 0; font-size: .6em; font-weight: 500; }
.snip sup a { margin-left: 1px; color: inherit; opacity: .7; text-decoration: none; }
.snip--claim {
max-width: none;
padding-block: calc(var(--wall) * .2);
font-family: var(--font-display);
font-size: 2.05em;
font-stretch: 110%;
font-weight: 680;
line-height: 1.05;
letter-spacing: -0.03em;
text-wrap: balance;
}
.snip--claim-2 { color: #121214; }
/* Finale */
.stop-finale { position: relative; z-index: 1; align-self: center; justify-self: center; max-width: 1180px; text-align: center; }
.stop-label { margin-bottom: clamp(12px, 2vh, 20px); font: 500 var(--fs-12)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.stop-title {
font-family: var(--font-display);
font-size: min(var(--fs-display), 11.5vh);
font-stretch: 112%;
font-weight: 640;
line-height: .98;
letter-spacing: -0.05em;
text-wrap: balance;
}
.stop-text { margin-top: clamp(16px, 2.6vh, 28px); font-size: min(var(--fs-h3), 3.6vh); font-weight: 480; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.stop-burn {
margin-top: clamp(4px, 1vh, 10px);
font-family: var(--font-display);
font-size: min(var(--fs-h1), 8vh);
font-stretch: 112%;
font-weight: 760;
line-height: 1;
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
color: #121214;
}
.stop-final {
margin-top: clamp(24px, 4.4vh, 52px);
font-family: var(--font-display);
font-size: min(var(--fs-h2), 6.4vh);
font-stretch: 112%;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.035em;
color: #121214;
}
.stop-claim { max-width: 34em; margin: clamp(10px, 1.6vh, 16px) auto 0; font-size: var(--fs-21); font-weight: 650; line-height: 1.35; text-wrap: balance; color: #121214; }
.stop-sources { margin-top: 6px; font-size: var(--fs-12); color: rgba(255, 255, 255, .78); text-align: center; }
.stop-sources a { color: inherit; text-underline-offset: 2px; }
@keyframes zoom-in {
0% { opacity: 0; transform: scale(2.4); filter: blur(10px); }
70% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: none; filter: none; }
}
/* The finale rises out of the depth, softly (the wall dives past at the same time). */
@keyframes stop-rise {
0% { opacity: 0; transform: scale(.82); filter: blur(14px); }
100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: no-preference) {
.stop.is-armed .stop-grid { transition: opacity 2s cubic-bezier(.45, 0, .2, 1), transform 2.4s cubic-bezier(.45, 0, .2, 1), filter 2s cubic-bezier(.45, 0, .2, 1); }
.stop.is-armed:not(.is-zoom) .stop-grid { opacity: 1; transform: none; filter: none; }
.stop.is-armed .snip,
.stop.is-armed .stop-finale > * { opacity: 0; }
.stop.is-armed .snip.is-on { animation: zoom-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.stop.is-armed .stop-finale > .is-on { animation: stop-rise 1.3s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
.stop-grid { opacity: .3; transform: none; filter: none; }
}
/* From 768px every problem stays on one line; the rows still fill up because the items grow. */
@media (min-width: 768px) {
.snips .snip { max-width: none; white-space: nowrap; }
}
/* Tablet: 8 problems per list (24). Phone: 5 per list (15). */
@media (max-width: 1199px) {
.snips .snip:nth-child(n+9) { display: none; }
}
@media (max-width: 767px) {
.snips .snip:nth-child(n+6) { display: none; }
.snip--claim { font-size: 1.6em; }
.stop-title { font-size: min(var(--fs-h2), 7vh); }
.stop-text { font-size: var(--fs-17); }
.stop-final { font-size: min(var(--fs-h3), 5vh); }
.stop-burn { font-size: min(var(--fs-h2), 6vh); }
.stop-claim { font-size: var(--fs-17); }
.stop-sources-long { display: none; }
}
html.is-red, html.is-red body { background-color: var(--accent-fill); }
html.is-red main > section:not(.stop) { background-color: var(--accent-fill); }
html.is-red main > section:not(.stop) > * { opacity: 0; }
html.is-red .site-header {
--h-text: var(--on-accent);
--h-contrast: var(--accent-fill);
--h-bg: rgba(0, 0, 0, 0);
--h-ring: rgba(255, 255, 255, .4);
--h-hover: rgba(255, 255, 255, .14);
--h-blur: none;
--h-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}
html.is-red .site-header .nav-cta { background: var(--on-accent); color: var(--accent-fill); }
html.is-red .logo-red { fill: currentColor; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
body, main > section { transition: background-color .6s var(--ease-out); }
main > section > * { transition: opacity .6s var(--ease-out); }
}
/* Fristen-Rechner (second tab in #zeitverlust): tabs above the grids, cap bar under the metrics. */
.calc-tabs .tab-list { margin-bottom: 0; }
.calc-tabs .tab-panel { margin-top: clamp(20px, 2.4vw, 32px); }
.calc-cap { display: grid; gap: 12px; }
.calc-cap-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: var(--fs-14); color: var(--muted); }
.calc-cap-head span:last-child { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.calc-cap-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.calc-cap-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .2s var(--ease-out); }
/* Hero video slot without a film yet: no play button, no badge, a quiet quote on the photo instead. */
.hero-video:not(.has-video) .hero-video-play,
.hero-video:not(.has-video) .hero-video-badge { display: none; }
.hero-video-quote {
position: absolute;
left: clamp(20px, 3vw, 32px);
right: clamp(20px, 3vw, 32px);
bottom: clamp(20px, 3vw, 32px);
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--on-photo);
z-index: 1;
text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.has-video .hero-video-quote { display: none; }
.hero-video:not(.has-video) .hero-video-frame::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(9, 10, 13, .7) 0%, rgba(9, 10, 13, 0) 55%);
pointer-events: none;
}
/* Funktionen (index #funktionen): photo cards like the hero of each feature page.
Photo + scrim, kicker, title, hero sentence, "Funktion entdecken". The whole card is the link. */
.fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcard {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: clamp(320px, 28vw, 400px);
overflow: hidden;
border-radius: 24px;
background: var(--photo-ink);
box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.fcard--wide { grid-column: 1 / -1; min-height: clamp(380px, 36vw, 500px); }
.fcard-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.fcard::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(9, 10, 13, .95) 0%, rgba(9, 10, 13, .82) 45%, rgba(9, 10, 13, .45) 75%, rgba(9, 10, 13, .2) 100%);
}
.fcard-body { display: grid; gap: 12px; width: 100%; padding: clamp(24px, 3vw, 40px); }
.fcard-kicker { font: 500 var(--fs-12)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.fcard-title { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.fcard--wide .fcard-title { font-size: var(--fs-h2); }
.fcard-title a { color: inherit; text-decoration: none; }
.fcard-text { max-width: 44ch; font-size: var(--fs-17); line-height: 1.5; color: var(--muted); }
.fcard-more {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .2);
font-size: var(--fs-14);
font-weight: 500;
}
.fcard-arrow { display: inline-flex; color: var(--accent-text); }
.fcard-arrow .icon { width: 20px; height: 20px; }
.fcard .stretched-link:focus-visible { outline: none; }
.fcard:focus-within { outline: 2px solid var(--accent-text); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
.fcard-img { transition: transform .6s var(--ease-out); }
.fcard-arrow { transition: transform .2s var(--ease-out); }
}
@media (hover: hover) {
.fcard:hover .fcard-img { transform: scale(1.04); }
.fcard:hover .fcard-arrow { transform: translate(2px, -2px); }
}
@media (max-width: 767px) {
.fcards { grid-template-columns: minmax(0, 1fr); }
.fcard, .fcard--wide { min-height: 340px; }
}
/* One calculator in two parts (#zeitverlust): side by side from 1024px, the Zusammen block below.
Inside a part the sliders sit above the results (no 12-column split, no sticky sliders). */
.calc-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 96px) clamp(16px, 2vw, 28px); align-items: start; }
.calc-part { min-width: 0; }
.calc-part-head { margin-bottom: clamp(16px, 2vw, 24px); }
.calc-part-num {
display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px;
border-radius: 50%; background: var(--accent-fill); color: var(--on-accent);
font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 600;
}
.calc-part-text { margin-top: 8px; max-width: 34rem; color: var(--muted); }
.calc-duo .calc-grid { grid-template-columns: minmax(0, 1fr); }
.calc-duo .calc-in, .calc-duo .calc-out { grid-column: auto; position: static; }
/* Compact inside a part: tighter sliders, metrics in two columns, the squares small next to their caption. */
.calc-duo .calc-inputs-core { gap: clamp(18px, 2vw, 26px); padding: clamp(20px, 2.4vw, 32px); }
.calc-duo .calc-results-core { gap: clamp(20px, 2.4vw, 28px); padding: clamp(20px, 2.4vw, 32px); }
.calc-duo .calc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.calc-duo .calc-metric--lead { padding-bottom: 20px; }
.calc-duo .calc-metric dt { font-size: var(--fs-14); }
.calc-duo .calc-metric dd { font-size: clamp(1.375rem, 2vw, 1.875rem); }
.calc-duo .calc-metric--lead dd { font-size: min(var(--fs-display), 14cqi); }
.calc-duo .calc-viz { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 20px; padding-top: 20px; }
.calc-duo .calc-cells { gap: 3px; padding: 8px; }
.calc-duo .calc-share { font-size: var(--fs-h3); }
.calc-duo .calc-viz-text { margin-top: 8px; font-size: var(--fs-14); }
.calc-duo .calc-legend { display: none; }
.calc-duo .calc-viz-note { margin-top: 8px; }
.calc-duo .calc-plan-text { font-size: var(--fs-14); }
/* Side by side, the head, the slider card and the result card of both parts line up (subgrid rows).
.calc-grid keeps its data attributes for js but takes no box of its own here. */
@media (min-width: 1024px) {
.calc-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
@supports (grid-template-rows: subgrid) {
.calc-part { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.calc-duo .calc-grid { display: contents; }
.calc-duo .calc-in, .calc-duo .calc-out { display: flex; flex-direction: column; }
.calc-duo .calc-inputs, .calc-duo .calc-results { flex: 1; display: flex; flex-direction: column; }
.calc-duo .calc-inputs-core, .calc-duo .calc-results-core { flex: 1; align-content: start; }
}
}
/* Persönlich kennenlernen (.meet): kontakt.html and the last section of every feature page.
The photo is a placeholder (initials) until assets/img/team.jpg exists; then an ![]()
replaces the faces. */
.meet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.meet-photo {
position: relative;
display: grid;
place-items: center;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r-card);
background: radial-gradient(80% 70% at 30% 20%, var(--accent-soft), transparent 70%), var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
}
.meet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meet-faces { display: flex; gap: 16px; }
.meet-face {
display: grid;
place-items: center;
width: clamp(72px, 9vw, 112px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line-2);
font: 600 var(--fs-21)/1 var(--font-display);
color: var(--muted);
}
.meet-photo figcaption { position: absolute; left: 16px; bottom: 12px; font: 500 var(--fs-12)/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meet-copy .lead { margin-top: 16px; }
.meet-copy .btn-row { margin-top: clamp(24px, 3vw, 32px); }
.contact-list { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font-size: var(--fs-17); }
.contact-list li { display: flex; gap: 16px; }
.contact-k { flex: none; width: 6em; color: var(--muted); }
.contact-todo { color: var(--muted); font-style: italic; }
.contact-alt { margin-top: 24px; text-align: center; }
@media (max-width: 767px) {
.meet { grid-template-columns: minmax(0, 1fr); }
}
/* Funktionsseiten, Abschnitt "So funktioniert's": the animation in a bezel, three short points below. */
.sf-figure { padding: clamp(16px, 2.4vw, 32px); }
.sf-figure .gfx { margin-inline: auto; }
.sf-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(16px, 3vw, 40px); margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.sf-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: var(--fs-17); line-height: 1.45; }
.sf-num { font: 500 var(--fs-12)/1 var(--font-mono); letter-spacing: .08em; color: var(--accent-text); }
.meet-names { margin-top: 16px; font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
@media (max-width: 767px) {
.sf-points { grid-template-columns: minmax(0, 1fr); }
}
/* Lösungen #faelle: seven solution stories as tabs. */
.faelle .tab-list { margin-bottom: clamp(24px, 3vw, 40px); }
.fall-heute { max-width: 56rem; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.fall-heute .lead { margin-top: 8px; }
.fall-body { margin-top: clamp(32px, 4vw, 56px); }
.fall-more { margin-top: clamp(24px, 3vw, 40px); }
/* Rechner, Zusammen (.calc-sum): the total, a bar with three parts and a legend with the amounts. */
.calc-sum { margin-top: clamp(40px, 5vw, 72px); }
.calc-sum-core { padding: clamp(24px, 3.2vw, 44px); background: radial-gradient(70% 55% at 100% 0%, var(--accent-soft), transparent 72%), var(--surface); }
.calc-sum-title { margin-top: 8px; }
.calc-sum-total { margin-top: clamp(16px, 2vw, 24px); font-family: var(--font-display); font-size: var(--fs-display); font-weight: 560; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--accent-num); }
.calc-sum-bar { display: flex; gap: 4px; height: 20px; margin-top: clamp(20px, 2.6vw, 32px); }
.calc-sum-seg { flex: var(--w, 0) 1 0; min-width: 0; border-radius: 6px; transition: flex-grow .3s var(--ease-out); }
.calc-sum-seg--time, .calc-sum-sw--time { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.calc-sum-seg--penalty, .calc-sum-sw--penalty { background: var(--accent-fill); }
.calc-sum-seg--funding, .calc-sum-sw--funding { background: var(--warn); }
.calc-sum-legend { display: grid; gap: 12px; margin: clamp(20px, 2.6vw, 28px) 0 0; padding: 0; list-style: none; }
.calc-sum-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: var(--fs-17); }
.calc-sum-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; transform: translateY(2px); }
.calc-sum-note { display: block; margin-top: 2px; font-size: var(--fs-14); color: var(--muted); }
.calc-sum-v { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Vertrauen (index #vertrauen): the pilot in four steps, then three trust points (data, human decides, founders). */
.pilot-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(16px, 2vw, 24px); padding: 0; list-style: none; counter-reset: none; }
.pilot-step { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-core); background: var(--surface); box-shadow: inset 0 1px 1px var(--core-highlight), 0 0 0 1px var(--line); }
.pilot-num {
display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px;
border-radius: 50%; background: var(--accent-fill); color: var(--on-accent);
font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 600;
}
.trust-grid .feature .link-arrow { margin-top: auto; padding-top: 8px; }
.trust-cta { margin-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 1023px) { .pilot-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pilot-steps { grid-template-columns: minmax(0, 1fr); } }
/* Video slot without a film yet: photo and quote only, no disabled play button or "Film folgt" badge. */
[data-video][data-src=""] .hero-video-play,
[data-video][data-src=""] [data-video-badge] { display: none; }
/* Link cards without a visual (Lösungen #beispiele, Einsatzbereiche): room at the bottom. */
.module-core > .module-text:last-child { padding-bottom: clamp(12px, 1.4vw, 20px); }
/* Six menu items: a little less padding on small laptops, so the menu never touches the buttons. */
@media (min-width: 1024px) and (max-width: 1199px) {
.nav-link { padding: 0 11px; }
}
/* ================================================================ Erstgespräch (main call to action)
erstgespraech.html: facts under the hero, pill radios in the form. Everywhere: the offer line in the
.meet blocks, the highlighted card on kontakt.html and the floating button (js/site.js section 14). */
.eg-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: var(--fs-14); font-weight: 500; color: var(--text); }
.eg-facts li { display: inline-flex; align-items: center; gap: 8px; }
.eg-facts .icon { font-size: 18px; color: var(--accent-text); }
.eg-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.eg-choice legend { margin-bottom: 8px; padding: 0; font-size: var(--fs-14); font-weight: 500; }
.eg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.eg-pills label { position: relative; cursor: pointer; }
.eg-pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.eg-pills span {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
border: 1px solid var(--line-2); border-radius: var(--r-pill);
background: var(--surface-2); font-size: var(--fs-14); font-weight: 500; color: var(--text);
}
.eg-pills input:checked + span { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
.eg-pills input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.field input[type="date"] { color-scheme: light dark; }
.meet-offer { margin-top: 10px; font: 500 var(--fs-12)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.eg-fast-section { padding-bottom: 0; }
.eg-fast {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
padding: clamp(24px, 3vw, 40px); border-radius: var(--r-core);
background: radial-gradient(80% 120% at 100% 0%, var(--accent-soft), transparent 70%), var(--surface);
box-shadow: inset 0 1px 1px var(--core-highlight), 0 0 0 1px var(--line);
}
.eg-fast > div { max-width: 40rem; }
.eg-fast-text { margin-top: 8px; color: var(--muted); }
.calc-cta .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Floating Erstgespräch button: appears once the hero has scrolled away, hides over the closing
calls to action, the footer and the red page. Desktop: a pill bottom right; phone: a slim bar. */
.cta-float {
position: fixed; z-index: 40; right: 24px; bottom: 24px;
display: inline-flex; align-items: center; gap: 12px;
min-height: 52px; padding: 6px 8px 6px 20px;
border-radius: var(--r-pill);
background: var(--accent-fill); color: var(--on-accent);
box-shadow: 0 14px 34px -12px rgba(213, 6, 32, .65), 0 0 0 1px rgba(255, 255, 255, .12);
font-size: var(--fs-14); font-weight: 600; text-decoration: none;
opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none;
}
.cta-float.is-shown { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.cta-float-sub { font-weight: 500; opacity: .8; }
.cta-float .btn-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--on-accent); color: var(--accent-fill); }
.cta-float:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
html.is-red .cta-float { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.cta-float { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s; }
}
@media (max-width: 599px) {
.cta-float { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: space-between; }
}
/* Honeypot field in the forms: invisible for people and screen readers, bots fill it in. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }