/* ============================================================
hplus Steuerberatungsgesellschaft mbH: Design System
Palette, type scale and rules per Website Briefing v2 (Aug 2026).
Mobile-first: base layer is the 380px layout, desktop is the adaptation.
============================================================ */
/* Selbst gehostete Schriften (DSGVO: keine Verbindung zu Google). Variable Fonts,
je Schrift eine Datei pro Zeichensatz. Quelle: Google Fonts, SIL Open Font License. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600 700; font-display: swap;
src: url(../fonts/caveat-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600 700; font-display: swap;
src: url(../fonts/caveat-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url(../fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url(../fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap;
src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap;
src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- 1. Tokens ---------- */
:root {
/* Colour — briefing §3. Do not add values outside this set. */
--tann: #1F4A3C; /* Tannengrün — primary */
--salbei: #3A7A62; /* Salbeigrün — secondary */
--mint: #E8F0EC; /* Mint — tint */
--sand: #F7F4EF; /* Sand — page base */
--bernstein: #B0722A; /* Bernstein — accent */
--ink: #262826; /* Warm Black — body copy */
--grau: #6B6F6C; /* Grau — muted */
--white: #FFFFFF;
/* Derived surfaces (mixes of the tokens above, no new hues) */
--tann-deep: color-mix(in srgb, var(--tann) 88%, var(--ink));
--line: color-mix(in srgb, var(--grau) 14%, transparent);
--line-strong: color-mix(in srgb, var(--salbei) 20%, transparent);
--ph-fill: color-mix(in srgb, var(--grau) 16%, var(--mint));
/* Amber is decoration; where it has to carry small TEXT it is deepened
with Warm Black (light bands) or lifted with Mint (dark bands) so it
clears WCAG AA. Same hue, no extra colour in the system. */
--bernstein-text: color-mix(in srgb, var(--bernstein) 75%, var(--ink));
--bernstein-onDark: color-mix(in srgb, var(--bernstein) 52%, var(--mint));
--ph-line: color-mix(in srgb, var(--grau) 28%, transparent);
/* Shadow scale: tight contact shadow + one soft, low-opacity lift */
--shadow-sm: 0 1px 2px color-mix(in srgb, var(--tann) 6%, transparent),
0 4px 12px -6px color-mix(in srgb, var(--tann) 12%, transparent);
--shadow-md: 0 1px 2px color-mix(in srgb, var(--tann) 6%, transparent),
0 8px 20px -10px color-mix(in srgb, var(--tann) 16%, transparent);
--shadow-lg: 0 2px 4px color-mix(in srgb, var(--tann) 6%, transparent),
0 16px 32px -14px color-mix(in srgb, var(--tann) 20%, transparent);
--shadow-btn: 0 1px 2px color-mix(in srgb, var(--tann) 14%, transparent),
0 4px 10px -4px color-mix(in srgb, var(--tann) 28%, transparent);
--card-shadow: var(--shadow-sm);
/* Type */
--font-display: "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
--font-ui: "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
--font-body: "Inter", "Segoe UI", Tahoma, sans-serif;
/* Fluid scale — min values are the 380px mobile sizes */
--step--1: 0.9375rem; /* 15px captions */
--step-0: 1.0625rem; /* 17px Fließtext, mobile Untergrenze
aus Briefing §3 — nicht kleiner */
--step-1: clamp(1.125rem, 1.09rem + 0.2vw, 1.25rem); /* 18 → 20 Lead */
--step-2: clamp(1.375rem, 1.24rem + 0.7vw, 1.75rem);
--step-3: clamp(1.625rem, 1.38rem + 1.2vw, 2.25rem);
--step-4: clamp(1.9375rem, 1.5rem + 2.1vw, 3rem);
--step-5: clamp(2.25rem, 1.6rem + 3.2vw, 3.875rem);
/* Space */
--gutter: clamp(1.25rem, 4.5vw, 3.5rem);
--wrap-max: 1440px; /* Breite des Seitenrasters */
--wrap-max-narrow: 880px; /* FAQ und Rechtstexte, auf Lesebreite */
--band-y: clamp(2.5rem, 8vw, 7rem); /* 40px on phones, unchanged from 700px up */
--measure: 62ch;
--radius: 14px;
--radius-lg: 22px;
/* Photo corner treatment: two opposite corners get a large sweep. */
--radius-xl: clamp(2.25rem, 6vw, 4.5rem);
/* Header pill: button inset = --bar-pad on top/right/bottom; the logo
gets the same visual inset on the left. Height derives from these. */
--bar-btn-h: 44px;
--bar-logo-h: 26px;
--bar-pad: 12px;
--bar-h: calc(var(--bar-btn-h) + 2 * var(--bar-pad) + 2px);
--bar-gap: 10px;
}
/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Lock the page horizontally. `body { overflow-x: hidden }` alone still
lets iOS Safari pan sideways; `clip` on both keeps sticky working. */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
[id] { scroll-margin-top: calc(var(--bar-h) + var(--bar-gap) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background: var(--sand);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; padding-left: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
a { color: var(--tann); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible {
outline: 3px solid var(--bernstein);
outline-offset: 3px;
border-radius: 4px;
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: absolute; left: var(--gutter); top: 0; z-index: 200;
transform: translateY(-120%);
background: var(--tann); color: var(--white);
padding: 0.75rem 1.25rem; border-radius: 0 0 10px 10px;
text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }
/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-max-narrow); }
.band { padding-block: var(--band-y); position: relative; }
/* Two bands of the same colour read as one surface — on mobile the second
drops its top padding so the gap isn't doubled. */
@media (max-width: 899px) {
.band--sand + .band--sand, .band--mint + .band--mint { padding-top: 0; }
}
/* Light bands carry a quiet "+" lattice (echo of the H+ mark) on a solid
surface colour. */
.band--sand {
background-color: var(--sand);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%231F4A3C' stroke-width='1.4' stroke-linecap='round' opacity='0.07'/%3E%3C/svg%3E");
}
.band--mint {
background-color: var(--mint);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%231F4A3C' stroke-width='1.4' stroke-linecap='round' opacity='0.09'/%3E%3C/svg%3E");
}
.band--dark {
background-color: var(--tann); color: var(--white);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%23E8F0EC' stroke-width='1.4' stroke-linecap='round' opacity='0.07'/%3E%3C/svg%3E");
}
.band--dark h2, .band--dark h3 { color: var(--white); }
/* Opt-out: same solid surfaces, no "+" lattice. */
.band--sand.band--no-plus,
.band--mint.band--no-plus,
.band--dark.band--no-plus {
background-image: none;
}
/* Paper grain: one inline SVG turbulence, ~1kb, no network cost. */
.band--sand::before, .band--mint::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
opacity: 0.5; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.eyebrow {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bernstein-text);
display: flex; align-items: center; gap: 0.7rem;
margin-bottom: 1.1rem;
}
.eyebrow::before {
content: "+"; font-size: 1.25em; font-weight: 700; line-height: 1;
letter-spacing: 0; color: var(--bernstein); flex: none;
}
.band--dark .eyebrow { color: var(--bernstein-onDark); }
.section-head { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { font-size: var(--step-4); text-wrap: balance; color: var(--tann); }
.band--dark .section-head h2 { color: var(--white); }
.section-head p { color: color-mix(in srgb, var(--ink) 76%, var(--sand)); margin-top: 1rem; max-width: 46ch; }
.section-head--oneline { max-width: none; }
.section-head--wide { max-width: none; } /* heading lines set by
, not by the 40ch cap */
.section-head p.section-head__wide { max-width: none; } /* lets a lead run as two deliberate lines */
.split .section-head > .eyebrow:first-child { margin-top: 0; } /* keeps the eyebrow level with the neighbouring column */
.section-head--testi { max-width: 1000px; margin-inline: auto; }
/* min() caps the size on narrow screens so the unwrapped line still fits */
.section-head--oneline h2 { text-wrap: nowrap; font-size: min(var(--step-4), 5.5vw); }
.split .section-head--oneline h2 { text-wrap: balance; } /* in a column it must wrap, or it squeezes the neighbour */
.band--dark .section-head p { color: color-mix(in srgb, var(--mint) 85%, var(--tann)); }
.lead { font-size: var(--step-1); line-height: 1.55; }
/* Amber marker highlight drawn behind a word — briefing: amber for emphasis only */
.mark {
position: relative;
background-image: linear-gradient(to top,
color-mix(in srgb, var(--bernstein) 30%, transparent) 0 0.28em,
transparent 0.28em);
padding-inline: 0.06em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.band--dark .mark, .hero .mark {
background-image: linear-gradient(to top,
color-mix(in srgb, var(--bernstein) 35%, transparent) 0 0.5em,
transparent 0.5em);
}
/* ---------- 4. Buttons ---------- */
.btn {
display: inline-block; text-align: center;
min-height: 54px; /* generous tap target — briefing §7 */
padding: 0.9rem 1.6rem;
border: 2px solid transparent;
border-radius: 999px;
font-family: var(--font-ui);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Primary CTA: Tannengrün + white. Amber is never a button (briefing §3). */
.btn--primary {
background: var(--tann); color: var(--white);
box-shadow: var(--shadow-btn);
}
.btn--primary:hover { background: var(--salbei); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--tann); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--tann); background: color-mix(in srgb, var(--tann) 6%, transparent); }
.btn--onDark { background: var(--white); color: var(--tann); }
.btn--onDark:hover { background: var(--mint); }
.btn--block { width: 100%; }
.btn__arrow {
display: inline-block; vertical-align: -0.15em; margin-left: 0.55rem;
transition: transform .2s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }
/* ---------- 5. Top bar ---------- */
/* Floating pill: the outer bar is a transparent sticky rail, the inner
row carries the surface. Clicks pass through the rail around the pill. */
.topbar {
position: sticky; top: 0; z-index: 100;
padding-top: var(--bar-gap);
margin-bottom: calc(-1 * (var(--bar-h) + var(--bar-gap)));
pointer-events: none;
}
/* First section slides under the pill; a transparent top border keeps its
content clear while its own background fills the space behind the bar. */
main > :first-child { border-top: calc(var(--bar-h) + var(--bar-gap)) solid transparent; }
/* Overlays (paper grain) reach up into that border strip too… */
main > :first-child::before { top: calc(-1 * (var(--bar-h) + var(--bar-gap))); }
/* …and the hero, whose photo is absolutely placed, uses padding instead
so the photo itself runs behind the pill. */
main > .hero:first-child { border-top: 0; padding-top: calc(var(--bar-h) + var(--bar-gap)); }
.topbar__inner {
pointer-events: auto;
width: calc(100% - 2 * var(--gutter));
max-width: calc(var(--wrap-max) - 2 * var(--gutter));
min-height: var(--bar-h);
padding: var(--bar-pad);
padding-left: calc(var(--bar-pad) + (var(--bar-btn-h) - var(--bar-logo-h)) / 2);
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
background: color-mix(in srgb, var(--white) 90%, transparent);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border: 1px solid var(--line);
border-radius: 999px;
transition: background-color .25s ease;
}
.topbar.is-stuck .topbar__inner {
background: color-mix(in srgb, var(--white) 96%, transparent);
}
.topbar .btn { min-height: var(--bar-btn-h); padding: 0.55rem 1.1rem; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 419px) {
.topbar { --bar-logo-h: 20px; }
.topbar__inner { gap: 0.5rem; }
.topbar .btn { padding-inline: 0.7rem; font-size: 0.875rem; }
}
/* Pages without burger (legal, Danke): drop "buchen" on very narrow phones
so logo + button still fit the pill. */
@media (max-width: 370px) { .topbar__btn-more { display: none; } }
/* Burger + dropdown: below 900px the pill keeps logo + burger, the
section links and CTA open as a card under it. On desktop the menu
wrapper dissolves (display: contents) so nav and CTA sit in the pill. */
.topbar__burger {
display: inline-grid; place-content: center; gap: 5px;
width: var(--bar-btn-h); height: var(--bar-btn-h); flex: none;
padding: 0; border: 0; border-radius: 50%;
background: var(--tann); color: var(--white);
cursor: pointer;
transition: background-color .2s ease;
}
.topbar__burger:hover { background: var(--salbei); }
.topbar__burger span {
display: block; width: 18px; height: 2px; border-radius: 2px;
background: currentColor;
transition: transform .25s ease, opacity .2s ease;
}
.topbar.is-open .topbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.is-open .topbar__burger span:nth-child(2) { opacity: 0; }
.topbar.is-open .topbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
.topbar__inner { position: relative; }
.topbar__menu {
position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0;
display: grid; gap: 1rem;
padding: 0.75rem 1rem 1rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.topbar.is-open .topbar__menu {
opacity: 1; visibility: visible; transform: none;
transition: opacity .2s ease, transform .2s ease;
}
.topbar__nav { display: grid; }
.topbar__nav a {
display: block; padding: 0.85rem 0.25rem;
font-family: var(--font-ui); font-weight: 600; font-size: 1.0625rem;
color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--line);
}
.topbar__nav a:hover { color: var(--tann); }
.topbar__menu .btn { width: 100%; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
.topbar__menu, .topbar.is-open .topbar__menu, .topbar__burger span { transition: none; }
}
@media (min-width: 900px) {
.topbar__burger { display: none; }
.topbar__menu { display: contents; }
.topbar__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.topbar__nav a {
font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem;
color: var(--ink); text-decoration: none; white-space: nowrap;
padding-block: 0.5rem;
}
.topbar__nav a:hover {
color: var(--tann);
text-decoration: underline; text-decoration-color: var(--bernstein);
text-decoration-thickness: 2px; text-underline-offset: 7px;
}
}
.logo { flex-shrink: 0; display: inline-flex; align-items: center; text-decoration: none; }
.logo__img { height: var(--bar-logo-h); width: auto; flex: none; }
/* ---------- 6. Placeholder image slots ---------- */
/* Every slot keeps its ratio so a real photo can be dropped in
without touching the layout (briefing §4). */
.ph {
position: relative;
aspect-ratio: var(--ratio, 4 / 5);
background: var(--ph-fill);
border: 1px dashed var(--ph-line);
border-radius: var(--radius-xl) var(--radius) var(--radius-xl) var(--radius);
overflow: hidden;
display: grid; place-items: center;
color: var(--grau);
}
.ph::after { /* diagonal hatch so it reads as "not final" */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(135deg,
color-mix(in srgb, var(--grau) 8%, transparent) 0 2px,
transparent 2px 11px);
}
/* Real photo dropped into a placeholder: fill it, drop the hatch. */
.ph > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.ph:has(> img)::after { content: none; }
.ph__label {
position: relative; z-index: 1;
font-size: 0.8125rem; line-height: 1.45; font-weight: 500;
text-align: center; padding: 0.75rem 1rem; max-width: 26ch;
background: color-mix(in srgb, var(--sand) 84%, transparent);
border-radius: 8px;
}
.ph__label b { display: block; font-weight: 700; color: var(--ink); }
.ph__label span { display: block; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* Face safe area for critical portrait crops */
.ph__safe {
position: absolute; z-index: 1;
top: 8%; left: 50%; translate: -50% 0;
width: 46%; aspect-ratio: 1;
border: 1.5px dashed color-mix(in srgb, var(--salbei) 38%, transparent);
border-radius: 50%;
}
.ph__safe::after {
content: "Safe Area Gesicht";
position: absolute; bottom: -1.5rem; left: 50%; translate: -50% 0;
font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--salbei); white-space: nowrap;
}
.ph--onDark { background: color-mix(in srgb, var(--tann) 78%, var(--mint)); border-color: color-mix(in srgb, var(--mint) 26%, transparent); }
.ph--onDark .ph__label { background: color-mix(in srgb, var(--tann) 70%, transparent); color: var(--mint); }
.ph--onDark .ph__label b { color: var(--white); }
/* ---------- 7. Hero ---------- */
/* Same Sand palette as desktop on every width. Mobile stacks copy first,
portrait below; desktop switches to text left / portrait right — see §13. */
.hero {
position: relative;
background: var(--sand);
color: var(--ink);
overflow: hidden;
padding-block: 0;
}
.hero__inner {
position: relative;
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(1.75rem, 6vw, 2.5rem);
padding-block: clamp(1.5rem, 6vw, 3rem) clamp(2rem, 6vw, 3rem);
}
.hero__media { position: relative; z-index: 1; grid-row: 2; }
.hero__copy { position: relative; z-index: 2; }
.hero__photo {
display: block;
width: 100%; height: auto;
aspect-ratio: 4 / 5;
object-fit: cover; object-position: center;
border: 1px dashed var(--ph-line);
border-radius: var(--radius-xl) var(--radius) var(--radius-xl) var(--radius);
}
.hero__tag {
display: grid; gap: 0.1rem;
position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
padding: 0.55rem 0.9rem;
background: var(--white); color: var(--ink);
border-radius: 10px;
box-shadow: var(--card-shadow);
font-size: 0.875rem; line-height: 1.3;
}
.hero__tag b { font-weight: 700; }
.hero__tag span { font-size: 0.8125rem; color: var(--grau); }
.hero h1 {
font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.375rem);
font-weight: 800; max-width: 18ch; text-wrap: balance;
}
.hero__kicker {
font-size: 0.8125rem; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--bernstein-onDark);
margin-bottom: 1rem;
}
.hero__sub {
margin-top: 0.9rem; font-size: var(--step-0);
color: color-mix(in srgb, var(--ink) 82%, var(--sand)); max-width: 46ch;
}
.hero__cta { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.hero__cta .btn { flex: 1 1 auto; }
.hero .btn--onDark { background: var(--tann); color: var(--white); box-shadow: var(--shadow-btn); }
.hero .btn--onDark:hover { background: var(--salbei); }
.trustline {
margin-top: 1.25rem; padding-top: 1rem;
border-top: 1px solid var(--line);
font-size: 0.875rem; line-height: 1.7; font-weight: 500;
color: var(--grau);
}
.trustline span { white-space: nowrap; }
.trustline .sep { color: var(--line-strong); }
.trustline .hot { color: var(--bernstein-text); font-weight: 600; }
/* Trust badge: overlapping round thumbnails + claim. Ring colour matches
the hero background so the circles read as cut out of it. */
.trustbadge {
--ring: var(--sand);
display: flex; align-items: center; gap: 0.85rem;
margin-top: 1.25rem;
}
.trustbadge__faces { display: flex; list-style: none; margin: 0; padding: 0; }
.trustbadge__faces li {
width: 44px; height: 44px; border-radius: 50%;
border: 2px solid var(--ring);
overflow: hidden; flex: none;
background: var(--salbei);
}
.trustbadge__faces li + li { margin-left: -12px; }
.trustbadge__faces img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trustbadge__faces .trustbadge__more {
display: grid; place-items: center;
background: var(--tann);
color: var(--white);
font-weight: 800; font-size: 1.1rem;
}
.trustbadge__text { display: grid; line-height: 1.3; font-size: 0.875rem; color: var(--grau); }
.trustbadge__text b { font-size: 1rem; font-weight: 700; color: var(--ink); }
/* ---------- 8. Cards ---------- */
.cards { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
.cards--2 { grid-template-columns: 1fr; }
.cards--3 { grid-template-columns: 1fr; }
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.25rem, 3vw, 1.75rem);
box-shadow: var(--card-shadow);
}
.band--mint .card { background: var(--sand); }
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card p { color: color-mix(in srgb, var(--ink) 90%, var(--sand)); max-width: 48ch; }
/* 8a. Audience cards — photo cards with a Tannengrün scrim, serif title,
amber arrow chip. Each card links to its Fachrichtung subpage (TODO).
The photo goes into .acard__media as an ![]()
; until the shoot delivers,
a solid token fill stands in so the layout reads finished. */
.audience { display: grid; grid-template-columns: 1fr; gap: clamp(0.9rem, 2.5vw, 1.5rem); }
.acard {
position: relative; display: block;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 4.6;
text-decoration: none;
isolation: isolate;
box-shadow: var(--shadow-md);
transition: transform .25s ease, box-shadow .25s ease;
}
.acard:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.acard__media {
position: absolute; inset: 0; z-index: -1;
background: color-mix(in srgb, var(--salbei) 45%, var(--grau));
transition: transform .45s ease;
}
.acard__media::after { /* grain, so the stand-in reads photographic, not flat */
content: ""; position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
}
.acard__media img { width: 100%; height: 100%; object-fit: cover; }
.acard:hover .acard__media { transform: scale(1.045); }
/* Verlauf wie bei .scard: oben leicht abgedunkelt für den Pfeil,
unten satt für den Text */
.acard::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--tann-deep) 38%, transparent) 0%,
color-mix(in srgb, var(--tann-deep) 0%, transparent) 28%,
color-mix(in srgb, var(--tann-deep) 12%, transparent) 45%,
color-mix(in srgb, var(--tann-deep) 78%, transparent) 72%,
color-mix(in srgb, var(--tann-deep) 94%, transparent) 100%);
}
.acard__arrow {
position: absolute; z-index: 1; top: 1.1rem; left: 1.1rem;
width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center;
background: color-mix(in srgb, var(--bernstein) 88%, var(--sand));
color: var(--white);
transition: transform .25s ease, background-color .25s ease;
}
.acard__arrow svg { width: 20px; height: 20px; }
.acard:hover .acard__arrow { transform: translateX(4px); background: var(--bernstein); }
.acard__text {
position: absolute; z-index: 1; inset: auto 0 0 0;
padding: clamp(1.1rem, 3vw, 1.6rem);
}
.acard__title {
display: block;
font-family: var(--font-display); font-weight: 700;
font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.01em;
color: var(--white);
}
.acard__sub {
display: block;
margin-top: 0.5rem;
font-size: 0.9375rem; line-height: 1.5;
color: color-mix(in srgb, var(--mint) 90%, var(--tann));
max-width: 34ch;
}
.acard:focus-visible { outline-offset: 4px; }
.audience__closing {
margin-top: clamp(1.5rem, 3vw, 2.25rem);
font-size: var(--step-1); line-height: 1.5; max-width: 44ch;
padding-left: 1.1rem; border-left: 3px solid var(--bernstein);
}
/* 8b. Pain points — understanding, not alarmist. No red, no warning icons. */
.pains { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
/* Stacked columns on mobile get the same small gap as the cards;
from 900px the two-column grid sets its own. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.75rem, 2vw, 1.25rem); }
.pain {
background: var(--mint); border: 1px solid color-mix(in srgb, var(--salbei) 14%, transparent);
border-radius: var(--radius);
padding: clamp(1.1rem, 3vw, 1.6rem);
display: flex; gap: 0.9rem; align-items: flex-start;
}
.pain__marker {
flex: none; width: 22px; height: 22px; margin-top: 0.2rem;
color: var(--bernstein);
}
.pain p { font-size: var(--step-1); line-height: 1.45; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; max-width: 34ch; }
.pains__closing {
font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
line-height: 1.4; color: var(--tann); max-width: 30ch;
margin-top: clamp(1rem, 2.5vw, 1.5rem);
}
/* 8c. Services */
.services { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
.service { display: flex; flex-direction: column; gap: 0.75rem; }
.service .service__no {
font-family: var(--font-ui); font-weight: 700; font-size: 0.8125rem;
letter-spacing: 0.14em; color: var(--bernstein-text);
}
.service h3 { font-size: var(--step-1); }
.service p { color: color-mix(in srgb, var(--ink) 90%, var(--sand)); }
/* 8d. Why H+ — dark anchor band */
.usps { display: grid; gap: 0; counter-reset: usp; }
.usp {
display: grid; gap: 0.35rem;
padding-block: clamp(1.1rem, 3vw, 1.5rem);
border-top: 1px solid color-mix(in srgb, var(--mint) 16%, transparent);
}
.usp:last-child { border-bottom: 1px solid color-mix(in srgb, var(--mint) 16%, transparent); }
.usp h3 { font-size: var(--step-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.usp p { color: color-mix(in srgb, var(--mint) 94%, var(--tann)); max-width: 58ch; }
.badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: color-mix(in srgb, var(--bernstein) 80%, var(--ink)); color: var(--white);
font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.09em; text-transform: uppercase;
padding: 0.3rem 0.65rem; border-radius: 999px;
}
/* 8e. About — the emotional core, most generous section */
.about__grid { display: grid; gap: clamp(1rem, 3vw, 1.5rem); }
.about__body { font-size: var(--step-1); line-height: 1.6; max-width: 56ch; }
.about__media { display: grid; gap: 10px; }
.about__lead { --ratio: 1; }
.about__team { --ratio: 16 / 9; }
.about__portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 2vw, 1rem); }
.about__portraits .ph { --ratio: 1; }
/* 8f. Steps */
.steps { display: grid; gap: clamp(1rem, 3vw, 1.5rem); counter-reset: step; }
.step {
display: grid; gap: 0.6rem;
background: var(--sand);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.25rem, 3vw, 1.75rem);
box-shadow: var(--card-shadow);
}
.step .step__no {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 0.9;
color: var(--bernstein); font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--step-2); }
.step p { color: color-mix(in srgb, var(--ink) 90%, var(--sand)); max-width: 40ch; }
/* 8g. FAQ accordion — closed by default. Items sit on Sand cards on the
Mint band; on a Sand band they switch to White so they stay readable. */
.faq { display: grid; gap: 0.6rem; }
.faq__item {
background: var(--sand); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
}
.band--sand .faq__item { background: var(--white); }
.faq__item[open] { border-color: var(--line-strong); }
.faq__q {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: clamp(1rem, 3vw, 1.35rem);
font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
letter-spacing: -0.01em; cursor: pointer; list-style: none; min-height: 56px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--tann); }
.faq__icon { flex: none; width: 22px; height: 22px; margin-top: 0.15rem; color: var(--salbei); transition: transform .25s ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 clamp(1rem, 3vw, 1.35rem) clamp(1.1rem, 3vw, 1.5rem); }
.faq__a p { color: color-mix(in srgb, var(--ink) 90%, var(--sand)); max-width: 62ch; }
.placeholder-note {
display: inline-block; margin-bottom: 0.5rem;
font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--bernstein-text);
}
/* ---------- 9. Conversion form ---------- */
.convert { position: relative; }
/* Wide crop band behind the form — the 16:9 frame is cropped, never squeezed. */
.convert__media { margin-bottom: clamp(-4rem, -6vw, -2rem); }
.convert__media .ph { aspect-ratio: auto; width: 100%; height: clamp(160px, 34vw, 240px); }
.form-card {
position: relative;
background: var(--sand);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
padding: clamp(1.25rem, 4vw, 2.5rem);
box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--grau); }
.field .req { color: var(--bernstein-text); }
.field input, .field select, .field textarea {
width: 100%; min-height: 52px;
padding: 0.8rem 0.95rem;
background: var(--mint);
border: 1.5px solid transparent;
border-radius: 10px;
font-size: 1.0625rem;
transition: border-color .18s ease, background-color .18s ease;
}
.field textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233A7A62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1rem center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--salbei); background: var(--white); outline: none;
}
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--bernstein-text); }
.field__error { font-size: var(--step--1); color: var(--bernstein-text); font-weight: 600; display: none; }
.field--invalid .field__error { display: block; }
.field__hint { font-size: 0.8125rem; color: var(--grau); }
.field input::placeholder, .field textarea::placeholder { color: var(--grau); opacity: 1; }
.field select:invalid { color: var(--grau); }
.field select option { color: var(--ink); }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; }
.consent input { width: 24px; height: 24px; min-height: 0; flex: none; margin-top: 0.15rem; accent-color: var(--tann); background: var(--white); }
.consent label { font-size: 0.9375rem; line-height: 1.5; color: var(--grau); font-weight: 400; }
.form-foot { display: grid; gap: 0.85rem; margin-top: 0.5rem; }
.form-foot .note { font-size: 0.8125rem; color: var(--grau); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Danke-Seite nach Formularversand (danke.html) — passt ohne Scrollen in den Viewport */
.danke-band {
min-height: calc(100svh - var(--bar-h) - var(--bar-gap));
display: grid; align-items: start;
padding-block: clamp(4rem, 18vh, 10rem) clamp(1.5rem, 6vh, 3.5rem);
}
.danke { text-align: center; }
.thanks__icon {
width: 48px; height: 48px; margin: 0 auto 1rem;
border-radius: 50%; background: var(--tann); color: var(--white);
display: grid; place-items: center;
}
.danke h1 { font-size: var(--step-4); color: var(--tann); text-wrap: balance; margin-bottom: 0.5rem; }
.danke__lead { color: var(--grau); max-width: 52ch; margin: 0 auto 3rem; font-size: var(--step-1); }
.danke__sub { font-size: var(--step-2); margin-bottom: 1.5rem; }
.danke__steps { list-style: none; padding: 0; margin: 0 auto 1.5rem; max-width: 34rem; display: grid; gap: 1rem; text-align: left; counter-reset: step; }
.danke__steps li {
counter-increment: step; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem;
padding: 1.5rem 1.75rem; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
}
.danke__steps li::before {
content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%;
background: var(--mint); color: var(--tann); font-weight: 700; display: grid; place-items: center;
}
.danke__steps span { color: var(--grau); }
.danke__contact { color: var(--grau); margin: 0 auto 2rem; } /* Zeilenumbruch per
gesetzt */
/* Dunkelgrüner Band: Texte hell, Icon invertiert (Farben wie .band--dark .section-head) */
.band--dark .thanks__icon { background: var(--bernstein); color: var(--white); } /* wie der Pfeil-Button auf den Karten (.acard__arrow) */
.band--dark.danke-band h1 { color: var(--white); }
.band--dark .danke__lead,
.band--dark .danke__contact { color: color-mix(in srgb, var(--mint) 85%, var(--tann)); }
.band--dark .danke__contact a { color: var(--white); }
.band--dark .danke__steps li { color: var(--ink); background: var(--mint); } /* Mint-Karten, damit sie sich vom weißen Button abheben; Text nicht vom Band erben */
.band--dark .danke__steps li::before { background: var(--white); } /* Nummer sonst unsichtbar auf Mint (wie .band--mint .card__icon) */
/* Moderner Feinschliff: Ring ums Icon, rahmenlose Karten mit Nummern
wie die Schritte auf der Startseite (.step__no) */
.band--dark .thanks__icon {
box-shadow: 0 0 0 7px color-mix(in srgb, var(--bernstein) 22%, transparent),
0 0 0 15px color-mix(in srgb, var(--bernstein) 9%, transparent);
}
.band--dark .thanks__icon { margin-bottom: 1.625rem; } /* Platz für den Ring */
.band--dark.danke-band h1 { letter-spacing: -0.025em; }
.band--dark .danke__steps li {
/* Transparente Glas-Karten: weniger Weiß auf der Seite, Band scheint durch */
background: color-mix(in srgb, var(--white) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
box-shadow: none;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* Kreuzraster dahinter weichzeichnen */
}
.band--dark .danke__steps li::before {
content: counter(step, decimal-leading-zero);
width: auto; height: auto; border-radius: 0; background: none;
font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.2;
color: var(--bernstein); font-variant-numeric: tabular-nums; align-self: start;
}
.band--dark .danke__steps b { color: var(--white); }
.band--dark .danke__steps span { color: color-mix(in srgb, var(--mint) 85%, var(--tann)); } /* wie .danke__lead */
.band--dark .danke__contact a {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
text-decoration-color: color-mix(in srgb, var(--white) 45%, transparent);
transition: text-decoration-color .2s ease;
}
.band--dark .danke__contact a:hover { text-decoration-color: var(--white); }
.danke__actions .btn { display: inline-flex; align-items: center; }
.danke__actions .btn svg { flex: none; margin-right: 0.5rem; transition: transform .2s ease; }
.danke__actions .btn:hover svg { transform: translateX(-3px); }
/* Sanftes Einblenden beim Laden — reines CSS, main.js läuft hier nicht */
@keyframes danke-in { from { opacity: 0; transform: translateY(14px); } }
.danke > * { animation: danke-in .6s cubic-bezier(.2,.7,.3,1) backwards; } /* nicht "both": sonst bleibt die Animation aktiv und blockiert backdrop-filter der Karten */
.danke > :nth-child(2) { animation-delay: .06s; }
.danke > :nth-child(3) { animation-delay: .12s; }
.danke > :nth-child(4), .danke > :nth-child(5) { animation-delay: .2s; }
.danke > :nth-child(6) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
.danke > * { animation: none; }
.danke__actions .btn svg { transition: none; }
}
/* Ab Tablet: Schritte nebeneinander statt untereinander — spart die meiste Höhe */
@media (min-width: 800px) {
.danke__steps { max-width: 70rem; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.danke__steps li { align-content: start; }
}
/* Niedrige Laptop-Viewports: alles etwas kompakter */
@media (min-width: 800px) and (max-height: 820px) {
.danke-band { padding-block: clamp(2.5rem, 12vh, 5.5rem) 1.25rem; }
.thanks__icon { width: 40px; height: 40px; }
.band--dark .thanks__icon {
margin-bottom: 1.125rem;
box-shadow: 0 0 0 5px color-mix(in srgb, var(--bernstein) 22%, transparent),
0 0 0 11px color-mix(in srgb, var(--bernstein) 9%, transparent);
}
.danke h1 { font-size: var(--step-3); }
.danke__lead { font-size: var(--step-0); margin-bottom: 2rem; }
.danke__sub { font-size: var(--step-1); margin-bottom: 1rem; }
.danke__steps { margin-bottom: 1.25rem; }
.danke__steps li { padding: 1.25rem 1.5rem; column-gap: 0.875rem; font-size: 0.9375rem; }
.danke__actions .danke__contact { margin-bottom: 1.25rem; max-width: none; font-size: 0.9375rem; }
.danke__actions .btn { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9375rem; } /* wie der Topbar-Button */
}
@media (min-width: 800px) and (max-height: 640px) {
.danke-band { padding-block: 3.5rem 0.25rem; }
.thanks__icon { width: 32px; height: 32px; }
.band--dark .thanks__icon {
margin-bottom: 0.75rem;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bernstein) 22%, transparent),
0 0 0 8px color-mix(in srgb, var(--bernstein) 9%, transparent);
}
.thanks__icon svg { width: 18px; height: 18px; }
.danke h1 { margin-bottom: 0.25rem; }
.danke__lead { max-width: 64ch; margin-bottom: 1rem; }
.danke__sub { display: none; }
.danke__steps { margin-bottom: 0.625rem; }
.danke__steps li { padding: 0.75rem 1rem; column-gap: 0.75rem; font-size: 0.9375rem; }
.danke__actions .danke__contact { margin-bottom: 1rem; }
}
/* ---------- 9a. CTA-Banner + Anfrage-Funnel ---------- */
/* Section sits on Sand so the dark banner reads as its own card,
clearly separated from the (also dark) footer below. */
.convert-cta.band--dark {
background-color: var(--sand);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%231F4A3C' stroke-width='1.4' stroke-linecap='round' opacity='0.07'/%3E%3C/svg%3E");
padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 6vw, 5rem);
}
.cta-banner {
display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center;
position: relative; overflow: hidden;
padding: clamp(2rem, 6vw, 4.5rem);
border-radius: var(--radius-lg);
background-color: var(--tann);
background-image:
radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in srgb, var(--salbei) 55%, transparent), transparent 70%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%23E8F0EC' stroke-width='1.4' stroke-linecap='round' opacity='0.07'/%3E%3C/svg%3E");
box-shadow: var(--shadow-lg);
}
.cta-banner__sub {
margin-top: 1rem; max-width: 46ch;
font-size: var(--step-1); line-height: 1.55;
color: color-mix(in srgb, var(--mint) 85%, var(--tann));
}
.cta-banner__points { margin-top: 1.5rem; display: grid; gap: 0.65rem; }
.cta-banner__points li {
display: flex; align-items: center; gap: 0.65rem;
font-size: var(--step--1); font-weight: 600;
color: color-mix(in srgb, var(--mint) 90%, var(--tann));
}
.cta-banner__points li::before {
content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
background-color: color-mix(in srgb, var(--mint) 24%, transparent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5l5 5L20 6.5' stroke='%23E8F0EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
.cta-banner__btn { margin-top: 2rem; }
/* Mobile: portrait leads the card as a wider crop so it doesn't fill the
screen; desktop puts it beside the copy at full 4:5. */
.cta-banner__media { order: -1; }
.cta-banner__media .ph { aspect-ratio: 4 / 3; }
.cta-banner__media .ph > img { object-position: 50% 22%; }
@media (min-width: 900px) {
.cta-banner { grid-template-columns: 1fr 1fr; }
.cta-banner__media { order: 0; justify-self: end; width: min(100%, 440px); }
.cta-banner__media .ph { aspect-ratio: var(--ratio); }
.cta-banner__media .ph > img { object-position: center; }
}
/* Overlay */
.funnel { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2rem); }
.funnel[hidden] { display: none; }
.funnel__backdrop {
position: absolute; inset: 0;
background: color-mix(in srgb, var(--tann) 55%, transparent);
backdrop-filter: blur(4px);
}
.funnel__card {
position: relative; z-index: 1;
width: min(760px, 100%);
max-height: calc(100svh - 2rem);
overflow: auto; overscroll-behavior: contain;
background: var(--sand);
}
.funnel__close {
position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--line); background: var(--white); color: var(--tann);
display: grid; place-items: center; cursor: pointer;
transition: background-color .2s ease;
}
.funnel__close:hover { background: var(--mint); }
.funnel__head { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); padding-right: 3.25rem; }
.funnel__kicker { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau); font-weight: 700; }
.funnel__progress { display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; }
.funnel__count {
font-size: 0.8125rem; font-weight: 700; color: var(--grau);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.funnel__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--mint); overflow: hidden; }
.funnel__bar span {
display: block; height: 100%; width: 25%;
background: var(--bernstein); border-radius: 999px;
transition: width .3s ease;
}
/* Steps */
.funnel-step { display: none; border: 0; padding: 0; margin: 0; }
.funnel-step.is-current { display: block; }
.funnel__q {
font-family: var(--font-display); font-weight: 700;
font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.02em;
color: var(--tann); margin-bottom: 1.25rem; padding: 0;
}
.funnel__hint { margin-top: 1rem; font-size: 0.8125rem; color: var(--grau); }
.choice-grid { display: grid; gap: 0.75rem; }
@media (min-width: 620px) {
.choice-grid { grid-template-columns: 1fr 1fr; }
.choice-grid--rows { grid-template-columns: 1fr; }
}
.choice {
display: flex; align-items: center; gap: 0.9rem;
width: 100%; text-align: left;
padding: 0.95rem 1.05rem;
background: var(--white);
border: 1.5px solid var(--line); border-radius: var(--radius);
cursor: pointer;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.choice:hover { border-color: var(--salbei); transform: translateY(-1px); box-shadow: var(--card-shadow); }
.choice.is-selected { border-color: var(--tann); background: var(--mint); }
.choice__icon {
flex: none; width: 44px; height: 44px; border-radius: 12px;
background: var(--mint); color: var(--tann);
display: grid; place-items: center;
}
.choice.is-selected .choice__icon { background: var(--white); }
.choice__text { flex: 1; min-width: 0; }
.choice__text b { display: block; font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
.choice__text span { display: block; margin-top: 0.1rem; font-size: 0.875rem; color: var(--grau); }
.choice__radio {
flex: none; position: relative;
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--line-strong);
transition: border-color .18s ease;
}
.choice.is-selected .choice__radio { border-color: var(--tann); }
.choice.is-selected .choice__radio::after {
content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--tann);
}
.funnel__nav { margin-top: 1.5rem; }
.funnel__back {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.45rem 0.7rem; border: 0; border-radius: 8px;
background: none; cursor: pointer;
font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem;
color: var(--grau);
transition: background-color .18s ease, color .18s ease;
}
.funnel__back:hover { color: var(--tann); background: var(--mint); }
.funnel__back[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.choice, .funnel__bar span { transition: none; }
}
/* ---------- 10. Footer ---------- */
.footer { background: var(--tann); color: color-mix(in srgb, var(--mint) 90%, var(--tann)); padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__top { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.footer__col h4 {
font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
color: color-mix(in srgb, var(--mint) 62%, var(--tann)); margin-bottom: 0.9rem; font-weight: 700;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9375rem; }
.footer__col .footer__social { display: flex; gap: 0.75rem; }
.footer__social a {
display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--mint) 35%, var(--tann)); transition: background-color .2s, border-color .2s;
}
.footer__social a:hover, .footer__social a:focus-visible { background: color-mix(in srgb, var(--mint) 12%, var(--tann)); border-color: var(--mint); }
/* Footer logo on dark ground: wordmark and badge lift to Mint, H inverts to the
footer ink, the plus uses the AA-safe amber-on-dark mix. */
.footer .logo__img path[fill="#1F4A3C"] { fill: var(--mint); }
.footer .logo__img rect { fill: var(--mint); }
.footer .logo__img path[fill="white"] { fill: var(--tann); }
.footer .logo__img path[fill="#B0722A"] { fill: var(--bernstein); }
.footer__bottom {
margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem;
border-top: 1px solid color-mix(in srgb, var(--mint) 14%, transparent);
display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: space-between;
font-size: 0.8125rem; color: color-mix(in srgb, var(--mint) 72%, var(--tann));
}
/* Mandatory ETL line: legal obligation and mild trust signal, not a co-brand. */
.etl-line { font-size: 0.8125rem; color: color-mix(in srgb, var(--mint) 72%, var(--tann)); }
/* ---------- 10a. Contact rail — floating quick actions, right edge ---------- */
.contact-rail {
position: fixed; z-index: 95;
right: clamp(0.5rem, 1.5vw, 1.1rem); top: 50%; translate: 0 -50%;
display: flex; flex-direction: column; gap: 0.2rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.45rem 0.35rem;
box-shadow: var(--shadow-md);
}
.contact-rail a {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center;
color: var(--tann); text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.contact-rail a:hover { background: var(--mint); }
.contact-rail a:focus-visible { outline-offset: 0; }
.contact-rail svg { width: 21px; height: 21px; }
/* Mobile: the side rail would sit over the narrow text column, so it
becomes a small pill at the bottom centre. The footer keeps room at its
bottom for it, and it steps aside while the burger menu is open. */
@media (max-width: 899px) {
.contact-rail {
top: auto; right: auto; left: 50%; translate: -50% 0;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
flex-direction: row; gap: 0.35rem;
padding: 0.3rem 0.45rem;
transition: opacity .2s ease, visibility 0s linear 0s;
}
body:has(.contact-rail) .footer { padding-bottom: calc(1.75rem + 46px + 0.6rem + 1.5rem + env(safe-area-inset-bottom)); }
body:has(.topbar.is-open) .contact-rail {
opacity: 0; visibility: hidden;
transition: opacity .2s ease, visibility 0s linear .2s;
}
}
/* ---------- 11. Cookie consent (gates Meta Pixel + Mouseflow) ---------- */
.consent-bar {
position: fixed; z-index: 150; inset: auto 0.75rem 0.75rem;
max-width: 520px; margin-inline: auto;
background: var(--white); border: 1px solid var(--line-strong);
border-radius: var(--radius); padding: 1rem;
box-shadow: var(--shadow-lg);
display: none;
}
.consent-bar.is-visible { display: grid; gap: 0.75rem; }
.consent-bar p { font-size: 0.8125rem; line-height: 1.5; color: var(--grau); }
.consent-bar__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; }
.consent-bar .btn { min-height: 46px; font-size: 0.875rem; padding-inline: 0.9rem; }
/* ---------- 12. Scroll reveal ---------- */
/* Only hide when JS is running — without it every section stays visible. */
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in.d1 { transition-delay: .07s; }
.reveal.is-in.d2 { transition-delay: .14s; }
.reveal.is-in.d3 { transition-delay: .21s; }
.reveal.is-in.d4 { transition-delay: .28s; }
/* List items inside a reveal come in one after another; main.js sets --i. */
html.js .reveal .stagger { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-in .stagger {
opacity: 1; transform: none;
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
transition-delay: calc(.12s + var(--i, 0) * .08s);
}
/* Photos settle from a slight zoom as their block appears. */
html.js .reveal .ph > img, html.js .ph.reveal > img { transform: scale(1.06); }
html.js .reveal.is-in .ph > img, html.js .ph.reveal.is-in > img {
transform: none;
transition: transform 1.4s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
html.js .reveal, html.js .reveal.is-in { opacity: 1; transform: none; transition: none; }
html.js .reveal .stagger, html.js .reveal .ph > img, html.js .ph.reveal > img { opacity: 1; transform: none; transition: none; }
.btn, .acard, .acard__media, .acard__arrow { transition: none; }
}
/* ---------- 13. Desktop adaptation ---------- */
@media (min-width: 620px) {
.cards--2, .pains { grid-template-columns: 1fr 1fr; }
.services { grid-template-columns: 1fr 1fr; }
.form-grid { grid-template-columns: 1fr 1fr; }
.field--full { grid-column: 1 / -1; }
.form-foot { grid-template-columns: auto auto; align-items: center; justify-content: space-between; }
.form-foot .btn { justify-self: start; }
.audience { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
:root { --bar-btn-h: 50px; --bar-logo-h: 30px; }
.topbar .btn { padding: 0.6rem 1.35rem; font-size: 1rem; }
/* Hero: back to Sand, text left, portrait right, slight asymmetry. */
.hero {
padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
/* Clear the pill with padding, not the shared transparent border:
overflow: hidden clips at the padding edge, which would cut the glow
and lattice off in a flat strip under the bar. */
main > .hero {
border-top: 0;
padding-top: calc(var(--bar-h) + var(--bar-gap));
}
.hero__inner {
grid-template-columns: 1.1fr 0.9fr;
align-items: center; align-content: center;
gap: clamp(2rem, 5vw, 4.5rem);
min-height: min(760px, calc(100svh - var(--bar-h) - var(--bar-gap)));
padding-top: clamp(2rem, 5vw, 4rem);
}
.hero__copy { grid-column: 1; grid-row: 1; }
.hero__inner { grid-template-columns: 1.1fr 0.9fr; }
.hero__media { grid-column: 2; grid-row: 1; }
.hero__sub { font-size: var(--step-1); margin-top: 1.1rem; }
.hero__cta { margin-top: 1.75rem; }
.hero__cta .btn { flex: 0 0 auto; }
.trustline { margin-top: 1.5rem; padding-top: 1.25rem; font-size: var(--step--1); }
.trustbadge { margin-top: 1.5rem; }
/* Soft beige radial glow breaking the grid behind the portrait */
.hero::after {
content: ""; position: absolute; z-index: 0;
width: 46vw; aspect-ratio: 1; right: -14vw; top: -10vw;
background: radial-gradient(circle at 50% 50%,
color-mix(in srgb, var(--bernstein) 32%, transparent),
transparent 70%);
pointer-events: none;
}
/* Quiet "+" lattice over the glow, radially faded so it dissolves
into the Sand surface instead of ending on a hard edge. */
.hero::before {
content: ""; position: absolute; z-index: 0;
width: 46vw; aspect-ratio: 1; right: -14vw; top: -10vw;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%231F4A3C' stroke-width='1.4' stroke-linecap='round' opacity='0.16'/%3E%3C/svg%3E");
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
pointer-events: none;
}
.cards--3, .steps { grid-template-columns: repeat(3, 1fr); }
.services { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
/* Two-column section shells */
.split { display: grid; grid-template-columns: var(--split, 1fr 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.split--sticky > :first-child { position: sticky; top: calc(var(--bar-h) + 2rem); }
.audience { grid-template-columns: repeat(3, 1fr); }
.about__grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
.about__media { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
.about__lead { margin-top: 2.5rem; }
.about__body { position: sticky; top: calc(var(--bar-h) + 2.5rem); }
.convert__media { margin-bottom: -7rem; }
.convert__media .ph { height: clamp(240px, 24vw, 340px); }
.form-card { max-width: 1000px; margin-inline: auto; }
.footer__top { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: clamp(2rem, 5vw, 4.5rem); }
.usp { grid-template-columns: 0.9fr 1.1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; }
}
@media (min-width: 1100px) {
.footer__top { grid-template-columns: 1fr repeat(4, auto); justify-content: normal; }
.steps { gap: clamp(1.5rem, 4vw, 3rem); }
.pains { gap: 1.5rem; }
}
/* ---------- 14. Inline lead term (copy stays verbatim, incl. em dash) ---------- */
.term {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--step-1);
letter-spacing: -0.01em;
color: var(--tann);
}
.service__copy, .step p { text-wrap: pretty; }
.step .term { font-size: var(--step-2); }
.band--dark .term { color: var(--white); }
/* Consent gate: nothing visual, but keeps a hook for QA */
html[data-consent="granted"] .consent-bar { display: none; }
/* ---------- 15. Legal pages ---------- */
.prose { max-width: 68ch; }
.prose h1 { font-size: var(--step-4); margin-bottom: 1.5rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: 0.4rem; }
.todo {
display: block; margin-bottom: 1.5rem; padding: 1rem 1.15rem;
background: var(--mint); border-left: 3px solid var(--bernstein);
border-radius: 8px; font-size: 0.9375rem; color: var(--ink);
}
.todo b { color: var(--bernstein-text); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; display: block; margin-bottom: 0.35rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; margin-bottom: 2rem; }
.back-link:hover { text-decoration: underline; }
/* ---------- 16. Stimmen — Testimonial-Karussell (6.5) ----------
Eine große Karte pro Stimme: Porträt links, Sterne + Zitat rechts
(mobil gestapelt). Steuerung über Pfeile, Punkte und Wischgeste,
Logik in main.js. Inhalte sind PLATZHALTER, siehe index.html. */
.testi {
position: relative;
max-width: 1000px;
margin-inline: auto;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
overflow: hidden;
}
.testi__viewport { overflow: hidden; }
.testi__track {
display: flex;
transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.testi__slide {
flex: 0 0 100%;
min-width: 100%;
display: grid;
}
.testi__slide[aria-hidden="true"] { visibility: hidden; transition: visibility .6s; }
/* Foto randlos, mobil oben, ab 900px links in voller Kartenhöhe */
.testi__media {
margin: 0;
aspect-ratio: 16 / 11;
overflow: hidden;
}
/* Initialen-Avatar statt Mandantenfoto: Kreis in Tannengrün mit weißen
Initialen, für die Vorlagenkarte der ausgeblendeten Stimmen-Sektion. */
.testi__media--initials {
aspect-ratio: 1;
border-radius: 50%;
background: var(--tann);
display: flex;
align-items: center;
justify-content: center;
max-width: 300px;
}
.testi__avatar {
color: var(--white);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.75rem, 9vw, 4.5rem);
letter-spacing: 0.04em;
user-select: none;
}
.testi__media img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
display: block;
transform: scale(1.04);
transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.testi__slide:not([aria-hidden="true"]) .testi__media img { transform: none; }
.testi__body {
position: relative;
display: flex; flex-direction: column;
padding: clamp(1.5rem, 3.5vw, 3rem);
}
/* Großes Anführungszeichen als ruhiges Ornament */
.testi__body::before {
content: "\201C";
position: absolute;
top: clamp(0.25rem, 1vw, 0.75rem);
right: clamp(1.25rem, 3vw, 2.5rem);
font-family: var(--font-display);
font-size: clamp(6rem, 12vw, 9rem);
font-weight: 800;
line-height: 1;
color: var(--mint);
pointer-events: none;
}
.testi__stars { position: relative; color: var(--bernstein); line-height: 0; }
.testi__stars svg { width: 92px; height: auto; }
.testi__quote { position: relative; margin: 0; }
.testi__quote p {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--tann);
margin-top: 1rem;
text-wrap: pretty;
}
.testi__person {
display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.85rem;
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.testi__person::before {
content: "";
grid-row: 1 / span 2;
width: 28px; height: 2px; flex: none;
border-radius: 2px;
background: var(--bernstein);
}
.testi__name { font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
.testi__role { color: var(--grau); font-size: var(--step--1); margin-top: 0.1rem; }
.testi__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3rem);
}
.testi__arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none;
border-radius: 50%;
border: 0;
background: var(--mint);
color: var(--tann);
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.testi__arrow:hover { background: var(--tann); color: var(--white); }
.testi__arrow:active { transform: scale(.94); }
.testi__arrow:focus-visible { outline: 2px solid var(--tann); outline-offset: 3px; }
.testi__dots { display: flex; align-items: center; gap: 0.4rem; }
.testi__dot {
width: 8px; height: 8px; padding: 0;
border: 0; border-radius: 999px;
background: color-mix(in srgb, var(--grau) 30%, transparent);
cursor: pointer;
transition: width .3s ease, background .3s ease;
}
.testi__dot:hover { background: color-mix(in srgb, var(--grau) 55%, transparent); }
.testi__dot.is-active { width: 28px; background: var(--bernstein); }
@media (min-width: 900px) {
.testi__slide { grid-template-columns: minmax(0, 320px) 1fr; min-height: 380px; }
.testi__media { aspect-ratio: auto; height: 100%; }
.testi__body { padding-bottom: calc(clamp(1.5rem, 3.5vw, 3rem) + 8px); }
.testi__person { margin-top: auto; padding-top: 1.5rem; max-width: calc(100% - 280px); }
/* Steuerung unten rechts, auf Höhe der Person */
.testi__controls {
position: absolute;
right: clamp(1.5rem, 3.5vw, 3rem);
bottom: clamp(1.5rem, 3.5vw, 3rem);
padding: 0;
gap: 0.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.testi__track, .testi__dot, .testi__media img { transition: none; }
.testi__media img { transform: none; }
}
/* ---------- 17. Zahlen-Band (6.4a) ---------- */
/* Head: heading left, copy + link right (desktop); photo full width;
four figures underneath. Values are placeholders — see index.html. */
.numbers-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.numbers-head .section-head { margin-bottom: 1.25rem; max-width: none; }
/* Überschrift ist per
auf genau zwei Zeilen gesetzt — kein weiterer Umbruch */
.numbers-head .section-head h2 { text-wrap: nowrap; font-size: min(var(--step-4), 5.5vw); }
.numbers-head__aside {
max-width: 46ch;
color: color-mix(in srgb, var(--ink) 76%, var(--sand));
display: grid; gap: 1.1rem; justify-items: start;
}
.numbers-head__link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-ui); font-weight: 700; font-size: var(--step--1);
color: var(--tann); text-decoration: none;
border-bottom: 2px solid color-mix(in srgb, var(--bernstein) 55%, transparent);
padding-bottom: 0.15rem;
}
.numbers-head__link:hover { border-bottom-color: var(--bernstein); }
.numbers-head__link svg { transition: translate .2s ease; }
.numbers-head__link:hover svg { translate: 3px 0; }
.numbers-photo { --ratio: 4 / 3; }
.numbers-photo > img { object-position: 50% 25%; } /* faces sit high in the frame */
.numbers {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(1.75rem, 4vw, 2.5rem) 1rem;
padding: 0; list-style: none;
margin-top: clamp(2.25rem, 5vw, 3.75rem);
}
.numbers li { display: grid; gap: 0.4rem; justify-items: center; text-align: center; }
.numbers__value {
font-family: var(--font-display); font-weight: 700;
font-size: var(--step-5); line-height: 1;
color: var(--tann); font-variant-numeric: tabular-nums;
}
.numbers__label { font-size: var(--step--1); font-weight: 500; color: var(--grau); }
@media (min-width: 900px) {
.numbers-head {
display: grid; grid-template-columns: 1.15fr 0.85fr;
gap: clamp(2rem, 5vw, 4.5rem); align-items: end;
}
.numbers-head .section-head { margin-bottom: 0; }
.numbers-photo { --ratio: 21 / 9; }
.numbers { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- 17. Leistungen — Foto-Karten (Vollbild-Foto, Text auf Verlauf) ---------- */
/* Foto füllt die ganze Karte; ein Tannengrün-Verlauf von unten trägt
weißen Text. Oben links ein Glas-Etikett mit Icon und Kurzlabel.
Fällt das Foto aus, steht die Token-Fläche darunter ein. */
/* Seitlich scrollender Streifen mit Snap: mobil eine Karte plus Anschnitt,
ab 700px zwei, ab 1100px drei Karten pro Reihe. */
.scards {
--gap: clamp(0.9rem, 2.5vw, 1.5rem);
display: grid; grid-auto-flow: column;
grid-auto-columns: 86%;
gap: var(--gap);
/* Luft für den Kartenschatten, den overflow sonst abschneidet */
padding: 0.5rem 0 1.75rem; margin: -0.5rem 0 -1.75rem;
list-style: none;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.scards::-webkit-scrollbar { display: none; }
.scards:focus-visible { outline: 2px solid var(--salbei); outline-offset: 4px; border-radius: var(--radius-lg); }
.scards > .scard { scroll-snap-align: start; }
.scard {
position: relative;
display: grid; grid-template-rows: auto 1fr;
min-height: clamp(26rem, 60vw, 32rem);
padding: clamp(1.1rem, 2.4vw, 1.5rem);
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
color: var(--white);
background: var(--tann-deep);
box-shadow: var(--card-shadow);
}
.scard__media {
position: absolute; inset: 0; z-index: -1;
background: color-mix(in srgb, var(--salbei) 45%, var(--grau));
}
.scard__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
/* Verlauf: oben leicht abgedunkelt fürs Etikett, unten satt für den Text */
.scard__media::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--tann-deep) 38%, transparent) 0%,
color-mix(in srgb, var(--tann-deep) 0%, transparent) 28%,
color-mix(in srgb, var(--tann-deep) 12%, transparent) 45%,
color-mix(in srgb, var(--tann-deep) 78%, transparent) 72%,
color-mix(in srgb, var(--tann-deep) 94%, transparent) 100%);
}
.scard:hover .scard__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.scard__media img { transition: none; }
.scard:hover .scard__media img { transform: none; }
}
.scard__tag {
justify-self: start; align-self: start;
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.4rem 0.9rem 0.4rem 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, var(--white) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--white) 20%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font-family: var(--font-ui);
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
}
.scard__icon {
width: 30px; height: 30px; border-radius: 999px;
display: grid; place-items: center;
background: var(--white); color: var(--tann);
}
.scard__icon svg { width: 17px; height: 17px; }
.scard__body {
align-self: end;
display: grid; gap: 0.6rem;
}
.scard__body h3 {
color: var(--white);
font-size: var(--step-2); line-height: 1.2;
text-wrap: balance;
}
.scard__body p {
font-size: 0.9375rem; line-height: 1.55;
color: color-mix(in srgb, var(--mint) 82%, transparent);
}
.scard__link {
margin-top: 0.4rem;
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem;
color: var(--white); text-decoration: none;
}
.scard__link svg { transition: transform .25s ease; }
.scard__link:hover svg, .scard__link:focus-visible svg { transform: translateX(3px); }
.scards__cta {
margin-top: clamp(1.75rem, 4vw, 2.5rem);
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem;
}
/* CTA neben der Überschrift im Sektionskopf */
.section-head--split {
display: flex; flex-wrap: wrap;
align-items: flex-end; justify-content: space-between;
gap: 1rem 1.5rem;
}
.scards__cta--head { margin-top: 0; justify-content: flex-start; }
@media (min-width: 700px) { .scards { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
@media (min-width: 1100px) { .scards { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
@media (prefers-reduced-motion: reduce) { .scards { scroll-behavior: auto; } }
/* Navigation unter dem Streifen: Fortschrittslinie links, Pfeile rechts */
.scards__nav {
display: flex; align-items: center; gap: 1.5rem;
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.scards__nav[hidden] { display: none; }
.scards__progress {
position: relative; flex: 1;
height: 3px; border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.scards__progress span {
position: absolute; inset-block: 0; left: 0;
width: var(--w, 33%);
transform: translateX(var(--x, 0%));
border-radius: inherit;
background: var(--tann);
transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.scards__arrows { display: flex; gap: 0.6rem; }
.scards__arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; flex: none;
border-radius: 50%;
border: 1px solid var(--tann);
background: var(--tann); color: var(--white);
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.scards__arrow:hover { background: var(--tann-deep); }
.scards__arrow svg { transition: transform .2s ease; }
.scards__arrow[data-scards-next]:hover svg { transform: translateX(2px); }
.scards__arrow[data-scards-prev]:hover svg { transform: translateX(-2px); }
.scards__arrow:disabled {
background: transparent; color: var(--tann);
border-color: var(--line-strong);
opacity: 0.55; cursor: default;
}
.scards__arrow:disabled svg { transform: none; }
.scards__arrow:focus-visible { outline: 2px solid var(--salbei); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.scards__progress span, .scards__arrow, .scards__arrow svg { transition: none; }
}
/* ---------- 18. Warum H+ — voller dunkler Anker mit nummeriertem Register ---------- */
/* Volles Tannengrün-Band (band--dark). Links Kopf, Foto und CTA, rechts
die fünf Gründe als Register mit Haarlinien — bewusst kein weiteres
Karten-Raster direkt nach den Leistungs-Karten. */
.why-grid {
display: grid;
grid-template-areas: "head" "list" "media";
gap: clamp(1.75rem, 4vw, 2.5rem);
align-items: start;
}
.why-head { grid-area: head; margin-bottom: 0; }
.why-list {
grid-area: list;
display: grid;
border-top: 1px solid color-mix(in srgb, var(--mint) 16%, transparent);
}
.why-row {
display: grid; grid-template-columns: auto 1fr;
gap: clamp(1rem, 2.5vw, 1.75rem);
padding-block: clamp(1.15rem, 3vw, 1.6rem);
border-bottom: 1px solid color-mix(in srgb, var(--mint) 16%, transparent);
}
.why-row__no {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.375rem, 2.5vw, 1.75rem); line-height: 1.2;
color: var(--bernstein-onDark);
font-variant-numeric: tabular-nums;
min-width: 2.4ch;
}
.why-row__body { display: grid; gap: 0.4rem; }
.why-row h3 {
font-size: var(--step-2);
display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem;
text-wrap: balance;
}
.why-row p { color: color-mix(in srgb, var(--mint) 88%, var(--tann)); max-width: 52ch; }
.why-media { grid-area: media; display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); justify-items: start; }
.why-photo { --ratio: 4 / 3; width: 100%; }
@media (max-width: 480px) {
/* Schmale Viewports: CTA volle Breite, etwas engere Polster,
damit die Beschriftung einzeilig bleibt. */
.why-media .btn { width: 100%; padding-inline: 1rem; }
}
@media (min-width: 900px) {
.why-grid {
grid-template-areas:
"head list"
"media list";
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(2.5rem, 5vw, 4.5rem);
}
}
/* ---------- 19. Deutschlandweit — Karte (6.5a) ---------- */
/* Stilisierte Deutschland-Silhouette (inline SVG) mit Standort-Marker
Bochum. Farben ausschließlich aus den Tokens gemischt. */
.map-figure { position: relative; max-width: 300px; margin-inline: auto; margin-bottom: 1.25rem; } /* + split gap = 32px air above the copy on mobile */
.map-figure svg { display: block; width: 100%; height: auto; }
/* Same state shapes drawn twice: a thick-stroked layer underneath leaves
only the outer half of its stroke visible (national border), the top
layer covers it and adds hairline state borders. */
.map-outline, .map-states {
fill: color-mix(in srgb, var(--salbei) 24%, var(--mint));
stroke: color-mix(in srgb, var(--salbei) 30%, var(--sand));
stroke-linejoin: round;
}
.map-outline { stroke-width: 5; }
.map-states { stroke-width: 1; }
.map-marker__halo { fill: color-mix(in srgb, var(--tann) 18%, transparent); }
.map-marker__ring { fill: var(--white); }
.map-marker__dot { fill: var(--tann); }
.map-marker__label {
font-family: var(--font-display); font-weight: 700; font-size: 27px;
fill: var(--tann);
}
.map-copy__text {
font-size: var(--step-1); line-height: 1.6;
color: color-mix(in srgb, var(--ink) 90%, var(--sand));
max-width: 54ch;
}
.map-copy__text + .map-copy__text { margin-top: 1rem; }
.map-copy .btn { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 900px) {
.map-figure { max-width: 440px; margin-inline: 0; margin-bottom: 0; }
}
/* ---------- 20. Landingpages je Fachrichtung ---------- */
/* Breadcrumb sits in the hero copy, Grau on the Sand hero. */
.breadcrumb { margin-bottom: 1.1rem; font-size: 0.8125rem; font-weight: 500; color: var(--grau); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.6; }
.breadcrumb a { color: inherit; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--tann); }
/* Surface swaps so cards stay visible when their band colour flips. */
.band--mint .pain { background: var(--sand); }
.band--sand .step { background: var(--white); }
/* Long one-line headings: shrink with the viewport on desktop,
wrap normally below 900px where one line would get too small. */
.section-head--fit h2 { font-size: min(var(--step-4), 3.7vw); }
@media (max-width: 899px) {
.section-head--fit h2 { text-wrap: balance; font-size: var(--step-4); }
/* Same on the one-line heads: below 900px they wrap at the regular
section size instead of shrinking to fit, so every h2 matches. */
.section-head--oneline h2,
.numbers-head .section-head h2 { text-wrap: balance; font-size: var(--step-4); }
.cta-banner h2 { font-size: var(--step-4); }
}
.cards .card h3 { color: var(--tann); }
.card__icon {
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
margin-bottom: 1rem;
background: var(--mint); color: var(--salbei);
}
.band--mint .card__icon { background: var(--white); }
.card__icon svg { width: 22px; height: 22px; }
.knowledge .prose { max-width: 64ch; }
.knowledge .prose > :first-child { margin-top: 0; }
/* Mobile: photo stacks above the text — extra room above the first
heading, tighter spacing between topics. */
@media (max-width: 899px) {
.knowledge .split { gap: 2rem; }
.knowledge .prose h3:not(:first-child) { margin-top: 1.25rem; }
}
.knowledge .prose h3 { font-size: var(--step-2); color: var(--tann); }
.knowledge .prose p { color: color-mix(in srgb, var(--ink) 90%, var(--sand)); }
.knowledge .ph > img { object-position: 50% 30%; }
/* Steuerwissen as topic cards: icon + legal anchor, heading, short text */
.kgrid { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); list-style: none; padding: 0; margin: 0; }
.kcard {
display: flex; flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(1.25rem, 2.6vw, 1.75rem);
box-shadow: var(--card-shadow);
transition: border-color .2s ease, transform .2s ease;
}
.kcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.kcard__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.kcard__top .card__icon { margin-bottom: 0; background: var(--mint); }
.kcard__law {
font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
white-space: nowrap;
color: var(--bernstein-text);
background: color-mix(in srgb, var(--bernstein) 10%, var(--white));
border: 1px solid color-mix(in srgb, var(--bernstein) 15%, transparent);
padding: 0.3rem 0.65rem; border-radius: 999px;
}
.kcard h3 { font-size: var(--step-1); color: var(--tann); margin-bottom: 0.5rem; text-wrap: balance; }
.kcard p { color: color-mix(in srgb, var(--ink) 90%, var(--sand)); font-size: var(--step--1); line-height: 1.6; }
.knowledge__split .ph { display: none; }
@media (min-width: 700px) { .kgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
.knowledge__split .ph { display: block; }
.knowledge__split { align-items: stretch; }
.knowledge__split > .ph { aspect-ratio: auto; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kcard, .kcard:hover { transition: none; transform: none; } }
.related-note { margin-top: clamp(1.5rem, 3vw, 2rem); }
.related-note a { color: var(--tann); font-weight: 600; text-underline-offset: 3px; }