/* ==========================================================================
Schriftarten, selbst gehostet. Kein Aufruf an Google beim Laden der Seite.
Inter und Space Grotesk stehen unter der SIL Open Font License.
Erzeugt aus der Google Fonts Ausgabe, nur Latein und Latein erweitert.
========================================================================== */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fonts/inter-400-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;
font-display: swap;
src: url(assets/fonts/inter-400-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: 500;
font-display: swap;
src: url(assets/fonts/inter-500-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: 500;
font-display: swap;
src: url(assets/fonts/inter-500-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: 600;
font-display: swap;
src: url(assets/fonts/inter-600-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: 600;
font-display: swap;
src: url(assets/fonts/inter-600-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: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/space-grotesk-500-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: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(assets/fonts/space-grotesk-500-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: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/space-grotesk-600-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: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(assets/fonts/space-grotesk-600-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: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/space-grotesk-700-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: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(assets/fonts/space-grotesk-700-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;
}
/* ==========================================================================
FAiA Systems · Startseite · Design System Tokens + Komponenten
Tokens abgeleitet aus moodboard.png (verbindlich, 11.09.2026)
========================================================================== */
:root {
/* Farben (Moodboard) */
--navy: #0d1b2a;
--blue: #0a66ff;
--blue-deep: #0852d6;
--soft-blue: #d6e4ff;
--white: #ffffff;
--gray: #f3f5f7;
--charcoal: #1f2937;
/* Abgeleitet: Text auf Hell, aus Navy getönt */
--ink: var(--navy);
--ink-2: #3d4d61;
--ink-3: #5a6b80;
--danger: #c93a3a;
--line: rgba(13, 27, 42, 0.08);
--line-strong: rgba(13, 27, 42, 0.16);
--blue-wash: rgba(10, 102, 255, 0.08);
--blue-wash-2: rgba(10, 102, 255, 0.14);
/* Text auf Navy */
--on-navy: #eef3fb;
--on-navy-2: #a9bad3;
--on-navy-3: #7b8fab;
--line-on-navy: rgba(238, 243, 251, 0.12);
/* Typografie */
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
/* Radien */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 24px;
--r-pill: 999px;
/* Schatten (Navy getönt, Offset + Blur) */
--shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.05), 0 2px 8px -2px rgba(13, 27, 42, 0.06);
--shadow-md: 0 2px 4px rgba(13, 27, 42, 0.04), 0 12px 32px -12px rgba(13, 27, 42, 0.16);
--shadow-lg: 0 4px 8px rgba(13, 27, 42, 0.04), 0 32px 64px -24px rgba(13, 27, 42, 0.24);
--shadow-blue: 0 8px 24px -8px rgba(10, 102, 255, 0.45);
/* Glass */
--glass-bg: rgba(255, 255, 255, 0.68);
--glass-line: rgba(255, 255, 255, 0.75);
--glass-blur: 18px;
/* Motion Tokens (aus der Referenz Analyse) */
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
--dur-fast: 160ms;
--dur-base: 400ms;
--dur-slow: 650ms;
--dur-reveal: 900ms;
/* Layout */
--container: 1200px;
--gutter: 24px;
--frame: 16px; /* Rand um Karten Sections */
--nav-h: 64px;
color-scheme: light;
}
@media (max-width: 767px) {
:root { --gutter: 20px; --frame: 8px; --nav-h: 56px; }
}
/* --------------------------------------------------------------------------
Reset und Basis
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: auto;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
margin: 0;
background: var(--gray);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
/* Browser Oberflächen aus der Palette */
::selection { background: var(--soft-blue); color: var(--navy); }
.on-navy ::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-xs); }
html { scrollbar-color: rgba(13, 27, 42, 0.28) transparent; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-thumb { background: rgba(13, 27, 42, 0.24); border-radius: 999px; border: 3px solid var(--gray); }
input, textarea { caret-color: var(--blue); }
.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; }
/* Platzhalter Links (Termin Tool, Rechtstexte): sichtbar markiert bis Ziel feststeht */
[data-todo]::after { content: "folgt"; display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--blue-wash-2); color: var(--blue-deep); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; vertical-align: middle; }
.on-navy [data-todo]::after { background: rgba(214, 228, 255, 0.16); color: var(--soft-blue); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--navy); color: var(--white); border-radius: var(--r-sm); transform: translateY(-160%); transition: transform var(--dur-fast); }
.skip-link:focus { transform: none; }
/* --------------------------------------------------------------------------
Typografie Skala
-------------------------------------------------------------------------- */
.t-display { font-size: clamp(2rem, 1rem + 4.6vw, 4.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
/* Schlagbegriff: Electric Blue, kursiv (Space Grotesk hat keine echte Kursive, der Browser neigt die Form) */
.hl { font-style: italic; color: var(--blue); }
.t-h2 { font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem); letter-spacing: -0.032em; line-height: 1.02; }
.t-h3 { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); letter-spacing: -0.025em; line-height: 1.12; }
.t-h4 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.t-lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); }
.t-body { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.t-small { font-size: 0.9375rem; line-height: 1.5; }
.t-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.accent { color: var(--blue); }
.measure { max-width: 34em; }
.measure-narrow { max-width: 26em; }
/* --------------------------------------------------------------------------
Layout
-------------------------------------------------------------------------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(80px, 9vw, 128px); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) {
.section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px; }
.section-head .t-lead { padding-bottom: 6px; }
}
/* --------------------------------------------------------------------------
Icons
-------------------------------------------------------------------------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--soft-blue); color: var(--blue); }
.icon-tile--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.icon-tile--navy { background: rgba(214, 228, 255, 0.12); color: var(--soft-blue); }
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
--btn-bg: var(--blue);
--btn-fg: var(--white);
--btn-fill: rgba(255, 255, 255, 0.18);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 22px;
border: 0;
border-radius: var(--r-sm);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint), background-color var(--dur-fast);
}
.btn--primary { box-shadow: var(--shadow-blue); }
.btn--secondary { --btn-bg: var(--white); --btn-fg: var(--navy); --btn-fill: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-fill: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--on-navy { --btn-bg: var(--white); --btn-fg: var(--navy); --btn-fill: var(--soft-blue); box-shadow: none; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
/* Füllung wächst vom Cursor aus (Prinzip der Referenz, kürzer choreografiert) */
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--btn-fill);
clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
transition: clip-path var(--dur-slow) var(--ease-out-expo);
}
/* Text rollt eine Zeile nach oben */
.btn__label { display: block; position: relative; overflow: hidden; height: 1.25em; line-height: 1.25em; }
.btn__label span { display: block; transition: transform var(--dur-base) var(--ease-out-quint); }
.btn__label span[aria-hidden] { position: absolute; inset: 0; transform: translateY(105%); }
.btn .icon { transition: transform var(--dur-base) var(--ease-out-quint); }
@media (hover: hover) {
.btn:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
.btn:hover .btn__label span:first-child { transform: translateY(-105%); }
.btn:hover .btn__label span[aria-hidden] { transform: translateY(0); }
.btn:hover .icon { transform: translateX(4px); }
.btn--primary:hover { box-shadow: 0 12px 28px -8px rgba(10, 102, 255, 0.55); }
}
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--blue); }
.link-arrow .icon { transition: transform var(--dur-base) var(--ease-out-quint); }
@media (hover: hover) { .link-arrow:hover .icon { transform: translateX(4px); } }
/* --------------------------------------------------------------------------
Pills, Tags
-------------------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--gray); color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
.pill--blue { background: var(--soft-blue); color: var(--blue-deep); }
.pill--navy { background: rgba(238, 243, 251, 0.08); color: var(--on-navy-2); }
.pill--live { background: #e6f7ee; color: #0f7a3e; }
.pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.8); } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* --------------------------------------------------------------------------
Glass
-------------------------------------------------------------------------- */
.glass {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
border: 1px solid var(--glass-line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-md);
}
/* --------------------------------------------------------------------------
Navigation
-------------------------------------------------------------------------- */
.nav.glass {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58) 55%, rgba(214, 228, 255, 0.5));
-webkit-backdrop-filter: blur(22px) saturate(1.8);
backdrop-filter: blur(22px) saturate(1.8);
border: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(13, 27, 42, 0.05), 0 1px 2px rgba(13, 27, 42, 0.04), 0 12px 32px -14px rgba(13, 27, 42, 0.22);
}
.nav.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(13, 27, 42, 0.14) 60%, rgba(255, 255, 255, 0.7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.nav.glass::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%); pointer-events: none; z-index: -1; }
.nav {
position: fixed;
isolation: isolate;
top: var(--frame);
left: var(--frame);
right: var(--frame);
z-index: 50;
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px 0 20px;
border-radius: var(--r-lg);
transition: transform var(--dur-slow) var(--ease-out-quint), opacity var(--dur-base);
}
.nav__logo img { height: 28px; width: auto; }
.nav__links { display: none; gap: 4px; }
.nav__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--ink-2); transition: color var(--dur-fast), background-color var(--dur-fast); }
@media (hover: hover) { .nav__links a:hover { color: var(--navy); background: var(--blue-wash); } }
.nav__actions { display: flex; align-items: center; gap: 8px; }
/* WhatsApp: Markenfarbe als Fläche, gleiche Bauart wie der Primary Button */
.icon--glyph { fill: currentColor; stroke: none; }
.btn--whatsapp { --btn-bg: #25d366; --btn-fg: var(--white); --btn-fill: rgba(255, 255, 255, 0.22); box-shadow: 0 8px 24px -8px rgba(37, 211, 102, 0.55); }
@media (hover: hover) { .btn--whatsapp:hover { box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.65); } }
.nav__wa .icon { width: 18px; height: 18px; }
/* Mobil: runder Umriss Button wie ein Icon, kein gefüllter Block */
@media (max-width: 899px) {
.nav .nav__actions .nav__wa { --btn-bg: transparent; --btn-fg: var(--navy); --btn-fill: var(--blue-wash); width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav .nav__actions .nav__wa .btn__label { display: none; }
.nav .nav__actions .nav__wa .icon { width: 23px; height: 23px; }
.nav__wa:active { transform: scale(0.94); }
}
.nav__burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--navy); cursor: pointer; }
@media (min-width: 900px) {
.nav { padding-left: 24px; }
.nav__links { display: flex; }
.nav__burger { display: none; }
}
@media (max-width: 899px) { .nav .btn { min-height: 40px; padding: 0 14px; font-size: 0.875rem; } }
.nav.is-hidden { transform: translateY(calc(-100% - var(--frame) - 8px)); }
/* Mobile Sheet */
.sheet { position: fixed; inset: var(--frame); z-index: 49; border-radius: var(--r-xl); padding: calc(var(--nav-h) + 24px) 24px 24px; display: flex; flex-direction: column; gap: 4px; clip-path: inset(0 0 100% 0 round var(--r-xl)); transition: clip-path var(--dur-slow) var(--ease-in-out); visibility: hidden; }
.sheet[data-open="true"] { clip-path: inset(0 0 0 0 round var(--r-xl)); visibility: visible; }
.sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 8px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--navy); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base), transform var(--dur-slow) var(--ease-out-quint); }
.sheet[data-open="true"] a { opacity: 1; transform: none; }
.sheet[data-open="true"] a:nth-child(2) { transition-delay: 60ms; }
.sheet[data-open="true"] a:nth-child(3) { transition-delay: 120ms; }
.sheet[data-open="true"] a:nth-child(4) { transition-delay: 180ms; }
.sheet__foot { margin-top: auto; display: grid; gap: 12px; }
@media (min-width: 900px) { .sheet { display: none; } }
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero { position: relative; z-index: 3; padding: var(--frame); }
.hero__card {
position: relative;
overflow: hidden;
min-height: calc(100svh - var(--frame) * 2);
padding: calc(var(--nav-h) + var(--frame) + 40px) clamp(20px, 5vw, 72px) clamp(32px, 5vw, 64px);
border-radius: var(--r-xl);
background: var(--white);
box-shadow: var(--shadow-sm);
transform-origin: 50% 100%;
transform: scale(calc(1 - var(--hp, 0) * 0.04));
border-radius: calc(var(--r-xl) + var(--hp, 0) * 12px);
display: grid;
align-content: center;
}
/* Licht: eine weiche Electric Blue Quelle oben rechts, sonst nichts */
.hero__light { position: absolute; inset: -20% -10% auto auto; width: 70%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(closest-side, rgba(10, 102, 255, 0.16), rgba(10, 102, 255, 0.05) 45%, transparent 70%); filter: blur(24px); }
/* Netzwerk Layer: hinter dem Inhalt, zu den Kartenrändern weich ausgeblendet */
.net-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: radial-gradient(125% 115% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(125% 115% at 50% 50%, #000 62%, transparent 100%); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__copy { max-width: 680px; } }
.hero__copy { display: grid; gap: 28px; will-change: transform, opacity; transform: translateY(calc(var(--sp, 0) * 40vh)); opacity: calc(1 - var(--sp, 0) * 0.6); }
.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: -10px; color: var(--blue-deep); }
.hero__eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
@media (max-width: 767px) { .hero__eyebrow { font-size: 0.6875rem; gap: 8px; margin-bottom: -6px; } }
.hero__title { max-width: 19ch; }
.hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .word span { display: inline-block; transform: translateY(110%); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1023px) { .hero__copy { transform: none !important; opacity: 1 !important; } .board { transform: none !important; } }
@media (max-width: 767px) {
.hero__copy .t-lead { font-size: 1rem; line-height: 1.5; }
.hero__card { padding-top: calc(var(--nav-h) + var(--frame) + 28px); padding-bottom: 24px; min-height: 0; }
.hero__grid { gap: 28px; }
.hero__copy { gap: 18px; }
.hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hero__actions .btn { min-height: 52px; padding: 0 12px; font-size: 0.9375rem; }
.hero__trust { gap: 8px; }
/* Mobile Nav: nur Logo, WhatsApp und Menü. Der CTA lebt im Menü Sheet. */
.nav .btn--primary { display: none; }
}
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px; }
/* Glass Chips: Liquid Glass auf der Hero Karte, Netzwerk scheint dahinter durch */
.glass-chip {
position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border-radius: var(--r-pill); isolation: isolate;
/* Glaskörper: leichte Blau Grau Tönung mit Verlauf, damit es auf Weiß als Material liest */
background: linear-gradient(135deg, rgba(214, 228, 255, 0.72) 0%, rgba(243, 245, 247, 0.4) 45%, rgba(214, 228, 255, 0.55) 100%);
-webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(13, 27, 42, 0.06), inset 0 0 12px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(13, 27, 42, 0.06), 0 10px 28px -12px rgba(13, 27, 42, 0.28);
color: var(--ink-2); font-size: 0.875rem; font-weight: 500; white-space: nowrap;
}
/* Kante: 1px Verlaufsrand, oben links hell, unten rechts dunkler (Glas Refraktion) */
.glass-chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(13, 27, 42, 0.2) 55%, rgba(255, 255, 255, 0.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* Lichtreflex: diagonaler weicher Streifen oben */
.glass-chip::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%); pointer-events: none; z-index: -1; }
.chip__sep { width: 1px; height: 18px; margin: 0 2px; background: linear-gradient(180deg, rgba(13, 27, 42, 0), rgba(13, 27, 42, 0.22), rgba(13, 27, 42, 0)); }
.glass-chip strong { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.chip__g { width: 18px; height: 18px; }
.chip__star { width: 15px; height: 15px; margin-left: -2px; fill: #f5b301; }
.chip__icon { color: var(--blue); }
@media (max-width: 767px) { .glass-chip { height: 40px; font-size: 0.8125rem; padding: 0 14px 0 12px; } }
.hero__enter { opacity: 0; transform: translateY(20px); }
.is-loaded .hero__enter { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-out-quint), transform var(--dur-reveal) var(--ease-out-quint); }
.is-loaded .hero__enter:nth-child(1) { transition-delay: 0ms; }
.is-loaded .hero__enter:nth-child(3) { transition-delay: 320ms; }
.is-loaded .hero__enter:nth-child(4) { transition-delay: 420ms; }
.is-loaded .hero__enter:nth-child(5) { transition-delay: 520ms; }
.is-loaded .hero__title .word span { transform: none; transition: transform 1s var(--ease-out-expo); transition-delay: calc(var(--i) * 55ms + 80ms); }
/* Diashow im Hero */
.show { position: relative; will-change: transform; transform: translateY(calc(var(--sp, 0) * 14vh)); }
.show__track { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(13, 27, 42, 0.06); background: var(--gray); aspect-ratio: 5 / 4; transform: translate3d(calc(var(--mx, 0) * 1.5px), calc(var(--my, 0) * 1.5px), 0); transition: transform 120ms linear; }
.show__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out-quint); }
.show__slide.is-on { opacity: 1; }
.show__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.show__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: transform var(--dur-base) var(--ease-out-quint), background-color var(--dur-base); }
.show__dots button[aria-selected="true"] { background: var(--blue); transform: scale(1.25); }
.is-loaded .show { animation: flow-in var(--dur-reveal) var(--ease-out-quint) both; animation-delay: 480ms; }
/* Dashboard Slide: lebende Oberfläche, alle Zahlen synthetisch */
.dash { display: grid; grid-template-columns: 112px 1fr; height: 100%; font-family: var(--font-body); font-size: 10px; color: var(--ink-2); background: var(--gray); }
.dash__side { display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: var(--navy); color: var(--on-navy-2); }
.dash__logo { width: 64px; height: auto; margin: 2px 0 6px 4px; }
.dash__nav { display: grid; gap: 2px; }
.dash__nav li { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 7px; font-size: 10px; font-weight: 500; }
.dash__nav li .icon { width: 12px; height: 12px; }
.dash__nav li.is-on { background: var(--blue); color: var(--white); }
.dash__main { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: 10px 12px 12px; min-width: 0; }
.dash__bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 9.5px; }
.dash__crumb b { color: var(--navy); font-weight: 600; }
.dash__user i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--soft-blue); color: var(--blue-deep); font-style: normal; font-weight: 700; font-size: 8px; }
.dash__head { display: flex; align-items: center; justify-content: space-between; }
.dash__head strong { display: block; font-family: var(--font-display); font-size: 13px; color: var(--navy); }
.dash__head small { font-size: 9px; color: var(--ink-3); }
.dash__head .pill { height: 18px; font-size: 8.5px; padding: 0 8px; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kpi { padding: 8px 9px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-sm); display: grid; gap: 1px; min-width: 0; }
.kpi small { font-size: 8.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi strong { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi em.up { color: #0f7a3e; }
.kpi em.down { color: var(--danger); }
.dash__row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 6px; min-height: 0; }
.dash__row--bottom { grid-template-columns: 1fr 1fr; }
.dash__panel { padding: 8px 9px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-sm); min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.dash__ptitle { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 10px; font-weight: 600; color: var(--navy); }
.dash__ptitle span { font-family: var(--font-body); font-size: 8px; font-weight: 500; color: var(--ink-3); padding: 2px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.dash__livedot { color: #0f7a3e !important; box-shadow: none !important; }
.dash__livedot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #16a34a; animation: pulse 1.8s ease-in-out infinite; }
/* Linienchart: Pfad zeichnet sich, Fläche blendet nach, Punkte kommen zuletzt */
.line { width: 100%; height: auto; overflow: visible; }
.line__grid line { stroke: rgba(13, 27, 42, 0.07); stroke-width: 1; }
.line__path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.line__area { fill: url(#dash-area); opacity: 0; }
.line__dots circle { fill: var(--white); stroke: var(--blue); stroke-width: 1.5; opacity: 0; vector-effect: non-scaling-stroke; }
.is-live .line__path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out-quint) 200ms; }
.is-live .line__area { opacity: 1; transition: opacity 900ms ease 900ms; }
.is-live .line__dots circle { opacity: 1; transition: opacity 300ms ease; }
.is-live .line__dots circle:nth-child(1) { transition-delay: 300ms; } .is-live .line__dots circle:nth-child(2) { transition-delay: 500ms; } .is-live .line__dots circle:nth-child(3) { transition-delay: 700ms; } .is-live .line__dots circle:nth-child(4) { transition-delay: 900ms; } .is-live .line__dots circle:nth-child(5) { transition-delay: 1100ms; } .is-live .line__dots circle:nth-child(6) { transition-delay: 1300ms; } .is-live .line__dots circle:nth-child(7) { transition-delay: 1500ms; }
.line__axis { display: flex; justify-content: space-between; font-size: 7.5px; color: var(--ink-3); }
/* Ring: füllt sich */
.dash__donut { grid-template-rows: auto 1fr auto; }
.donut { position: relative; width: 72px; margin: 0 auto; }
.donut svg { width: 100%; height: auto; transform: rotate(-90deg); }
.donut__track { fill: none; stroke: var(--soft-blue); stroke-width: 9; }
.donut__fill { fill: none; stroke: var(--blue); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-live .donut__fill { stroke-dashoffset: 88; transition: stroke-dashoffset 1.4s var(--ease-out-quint) 300ms; }
.donut__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.donut__label strong { font-family: var(--font-display); font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums; }
.donut__label small { font-size: 7px; color: var(--ink-3); }
.donut__meta { text-align: center; }
.donut__meta strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums; }
.donut__meta small { font-size: 7.5px; color: var(--ink-3); }
/* Standorte und Ereignisse */
.dash__sites ul, .dash__events ul { display: grid; gap: 4px; align-content: start; }
.dash__sites li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 9px; color: var(--navy); font-weight: 500; }
.dash__sites li i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.dash__sites li b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.dash__sites li em { font-style: normal; color: #0f7a3e; font-size: 8px; }
.dash__events li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 9px; color: var(--ink-2); }
.dash__events li time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dash__events li i { width: 10px; height: 10px; border-radius: 50%; }
.dash__events li i.in { background: #e6f7ee; box-shadow: inset 0 0 0 1px #16a34a; }
.dash__events li i.out { background: #fdecec; box-shadow: inset 0 0 0 1px var(--danger); }
.dash__events li b { font-family: var(--font-display); color: var(--navy); }
.dash__events li.is-new { animation: event-in var(--dur-slow) var(--ease-out-quint) both; }
@keyframes event-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Reveal der Kacheln beim Start */
.kpi, .dash__panel { opacity: 0; transform: translateY(8px); }
.is-live .kpi, .is-live .dash__panel { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-quint), transform var(--dur-slow) var(--ease-out-quint); }
.is-live .kpi:nth-child(2) { transition-delay: 60ms; } .is-live .kpi:nth-child(3) { transition-delay: 120ms; } .is-live .kpi:nth-child(4) { transition-delay: 180ms; }
.is-live .dash__chart { transition-delay: 240ms; } .is-live .dash__donut { transition-delay: 300ms; } .is-live .dash__sites { transition-delay: 360ms; } .is-live .dash__events { transition-delay: 420ms; }
@media (max-width: 1023px) { .show { transform: none !important; } }
/* Mobil: kein Dashboard im Hero, der Text steht allein */
@media (max-width: 560px) {
.dash { grid-template-columns: 1fr; }
.dash__side { display: none; }
.dash__kpis { grid-template-columns: repeat(2, 1fr); }
.dash__row--bottom { display: none; }
.dash__main { grid-template-rows: auto auto auto 1fr; }
/* Mobil: Höhe aus dem Inhalt, Slides liegen nicht übereinander */
.show__track { aspect-ratio: auto; }
.show__slide { position: relative; display: none; }
.show__slide.is-on { display: block; }
.dash { height: auto; }
}
/* Prozess Board (nicht mehr im Hero, Styles bleiben für Wiederverwendung) */
.board { position: relative; will-change: transform; transform: translateY(calc(var(--sp, 0) * 14vh)); }
.board__frame { position: relative; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(214, 228, 255, 0.55), rgba(243, 245, 247, 0.7)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 0 var(--white), var(--shadow-sm); }
.board__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 14px; color: var(--ink-3); font-size: 0.8125rem; }
.board__head strong { font-family: var(--font-display); font-weight: 600; color: var(--ink-2); }
.board__list { display: grid; gap: 10px; }
.flow {
--depth: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--r-md);
background: var(--white);
box-shadow: inset 0 0 0 1px rgba(13, 27, 42, 0.06), var(--shadow-sm);
transform: translate3d(calc(var(--mx, 0) * var(--depth) * 1px), calc(var(--my, 0) * var(--depth) * 1px), 0);
transition: box-shadow var(--dur-slow) var(--ease-out-quint), transform 120ms linear;
opacity: 0;
}
.is-loaded .flow { opacity: 1; animation: flow-in var(--dur-reveal) var(--ease-out-quint) both; animation-delay: calc(560ms + var(--i) * 90ms); }
@keyframes flow-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
.flow.is-active { box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow-md); }
.flow__in, .flow__out { display: grid; gap: 2px; min-width: 0; }
.flow__in strong, .flow__out strong { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow__in small, .flow__out small { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow__arrow { position: relative; width: 44px; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.flow__arrow::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.flow.is-active .flow__arrow::after { animation: arrow-run 1.4s var(--ease-in-out) forwards; }
.flow.is-done .flow__arrow::after { transform: scaleX(1); }
@keyframes arrow-run { to { transform: scaleX(1); } }
.flow__status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--gray); color: var(--ink-3); font-size: 0.75rem; font-weight: 500; white-space: nowrap; transition: background-color var(--dur-base), color var(--dur-base); }
.flow__status .icon { width: 14px; height: 14px; }
.flow.is-active .flow__status { background: var(--soft-blue); color: var(--blue-deep); }
.flow.is-done .flow__status { background: #e6f7ee; color: #0f7a3e; }
.flow__status .dots { display: inline-flex; gap: 3px; }
.flow__status .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dot 1s ease-in-out infinite; }
.flow__status .dots i:nth-child(2) { animation-delay: 0.15s; }
.flow__status .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.flow__status [data-state] { display: none; }
.flow[data-state="idle"] .flow__status [data-state="idle"],
.flow[data-state="active"] .flow__status [data-state="active"],
.flow[data-state="done"] .flow__status [data-state="done"] { display: inline-flex; align-items: center; gap: 6px; }
.flow__out { opacity: 0.55; transition: opacity var(--dur-base); }
.flow.is-done .flow__out { opacity: 1; }
@media (max-width: 560px) {
.flow { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "icon in status" "icon out status"; gap: 4px 12px; padding: 12px; }
.flow .icon-tile { grid-area: icon; align-self: start; }
.flow__in { grid-area: in; }
.flow__out { grid-area: out; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
.flow__out::before { content: ""; width: 14px; height: 14px; margin-top: 3px; grid-row: 1 / span 2; align-self: start; background: var(--blue); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.flow__out strong, .flow__out small { grid-column: 2; white-space: normal; }
.flow__in strong, .flow__in small { white-space: normal; }
.flow__status { grid-area: status; align-self: center; }
.flow__arrow { display: none; }
}
/* --------------------------------------------------------------------------
Leistungs Deck (gepinnte Sequenz)
-------------------------------------------------------------------------- */
.deck { position: relative; z-index: 1; --n: 3; --step: 80vh; margin-top: -100vh; height: calc(200vh + var(--n) * var(--step)); }
.deck__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--nav-h) + 40px); }
.deck__head { text-align: center; display: grid; justify-items: center; gap: 16px; transform-origin: 50% 0; will-change: transform, opacity; }
.deck__head h2 { max-width: 18ch; }
.deck__stage { position: relative; perspective: 1800px; perspective-origin: 50% 30%; }
.deck-card {
position: absolute;
left: 50%;
top: 50%;
width: min(100% - var(--gutter) * 2, 880px);
transform: translate(-50%, -50%);
transform-origin: 50% 0;
will-change: transform, opacity, filter;
border-radius: 20px;
background: var(--white);
box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(13, 27, 42, 0.06);
overflow: hidden;
}
.deck-card__tint { position: absolute; inset: 0; background: var(--navy); opacity: 0; pointer-events: none; border-radius: inherit; will-change: opacity; }
.deck-card__inner { display: grid; gap: 28px; padding: clamp(24px, 3vw, 40px); }
@media (min-width: 860px) { .deck-card__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; } }
.deck-card__copy { display: grid; gap: 18px; align-content: start; }
.deck-card__copy .t-body { max-width: 36ch; }
.deck-card__mock { min-height: 220px; }
@media (max-width: 859px) {
.deck-card { width: min(100% - var(--gutter) * 2, 560px); }
.deck-card__inner { gap: 18px; padding: 20px; }
.deck-card__copy { min-width: 0; }
.deck-card__copy .t-body { max-width: 100%; font-size: 1rem; }
.deck-card__mock { min-height: 0; }
.deck-card__mock .mock { padding: 10px; }
.deck-card__mock .chat__msg:nth-child(n + 3) { display: none; }
.deck-card__mock .mock__panel, .deck-card__mock .site__tiles { display: none; }
.deck-card__mock .mock__kpis { margin-bottom: 0; }
.deck-card__copy .pills .pill:nth-child(n + 6) { display: none; }
}
@media (max-width: 859px) and (max-height: 700px) { .deck-card__mock { display: none; } }
@media (min-width: 860px) and (max-height: 760px) { .deck-card__inner { padding: 24px; } .deck-card__mock { transform: scale(0.9); transform-origin: 50% 50%; } }
.deck__hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 0.8125rem; }
.deck__hint i { display: block; width: 1px; height: 28px; background: linear-gradient(var(--blue), transparent); }
.deck__progress { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.deck__progress i { width: 4px; height: 24px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.deck__progress i::after { content: ""; display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleY(var(--f, 0)); transform-origin: 50% 0; }
@media (max-width: 767px) { .deck__progress, .deck__hint { display: none; } .deck__head .t-lead { display: none; } .deck__sticky { padding-top: calc(var(--nav-h) + 12px); } .deck__head h2 { font-size: clamp(1.75rem, 1rem + 4vw, 2.25rem); } .deck-card { top: 40px; } }
@media (max-height: 800px) and (min-width: 860px) {
.deck__sticky { padding-top: calc(var(--nav-h) + 20px); }
.deck__head { gap: 10px; }
.deck__head h2 { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.5rem); }
.deck__head .t-lead { font-size: 1rem; }
.deck-card__inner { padding: 22px 26px; gap: 28px; }
.deck-card__copy { gap: 12px; }
}
/* Mini UIs in den Deck Cards */
.mock { position: relative; border-radius: var(--r-lg); background: var(--gray); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; font-size: 0.8125rem; color: var(--ink-2); }
.mock__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; color: var(--navy); }
.mock__bar .pill { height: 24px; font-size: 0.6875rem; }
.mock__panel { background: var(--white); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow-sm); }
.mock__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mock__row:last-child { border-bottom: 0; }
.mock__row .num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft-blue); color: var(--blue-deep); font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; }
.mock__row .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); font-weight: 500; }
.mock__row .meta { color: var(--ink-3); font-size: 0.75rem; white-space: nowrap; }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mock__kpi { background: var(--white); border-radius: var(--r-sm); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.mock__kpi small { display: block; color: var(--ink-3); font-size: 0.6875rem; }
.mock__kpi strong { display: block; font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mock__kpi em { font-style: normal; color: #0f7a3e; font-size: 0.6875rem; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; padding-top: 6px; }
.bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--soft-blue); height: calc(var(--v) * 1%); transform-origin: 50% 100%; transition: transform var(--dur-slow) var(--ease-out-quint); transition-delay: calc(var(--k, 0) * 30ms); }
@media (hover: hover) { .case:hover .bars i { transform: scaleY(1.12); } .case:hover .bars i.hot { transform: scaleY(1.04); } }
.bars i.hot { background: var(--blue); }
.chat { display: grid; gap: 8px; }
.chat__msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); color: var(--navy); line-height: 1.4; }
.chat__msg--out { justify-self: end; background: var(--blue); color: var(--white); border-bottom-right-radius: 4px; }
.chat__msg--in { border-bottom-left-radius: 4px; }
.chat__msg small { display: block; margin-top: 2px; font-size: 0.6875rem; opacity: 0.7; }
.browser { border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--gray); border-bottom: 1px solid var(--line); }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.browser__bar span { flex: 1; margin-left: 6px; height: 18px; padding: 0 8px; border-radius: 4px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.6875rem; line-height: 18px; color: var(--ink-3); }
.browser__body { padding: 12px; display: grid; gap: 8px; }
.site { padding: 12px; display: grid; gap: 10px; font-size: 0.75rem; }
.site__nav { display: flex; align-items: center; gap: 10px; }
.site__nav b { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 0.8125rem; letter-spacing: -0.01em; }
.site__nav span { flex: 1; color: var(--ink-3); font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__nav em { font-style: normal; padding: 4px 8px; border-radius: 5px; background: var(--blue); color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; white-space: nowrap; }
.site__hero { display: grid; gap: 4px; padding: 4px 0; }
.site__hero strong { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); }
.site__hero--lg strong { font-size: 1.25rem; }
.site__hero small { color: var(--ink-3); font-size: 0.6875rem; }
.site__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.site__tiles span { display: grid; align-content: end; height: 56px; padding: 8px; border-radius: 8px; background: var(--soft-blue); color: var(--blue-deep); font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; }
.site__proof { display: flex; gap: 8px; flex-wrap: wrap; }
.site__proof span { padding: 4px 8px; border-radius: 999px; background: var(--gray); color: var(--ink-2); font-size: 0.6875rem; }
.site__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.site__products > div { display: grid; gap: 3px; font-size: 0.6875rem; }
.site__products i { display: block; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(160deg, var(--soft-blue), #b9cffb); }
.site__products b { color: var(--navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__products span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.site__label { position: absolute; right: 12px; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: #e6f7ee; color: #0f7a3e; font-size: 0.6875rem; font-weight: 500; }
.sk { height: 8px; border-radius: 4px; background: var(--gray); }
.sk--title { height: 14px; width: 60%; background: var(--navy); opacity: 0.9; }
.sk--btn { height: 20px; width: 72px; background: var(--blue); border-radius: 5px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.sk-grid i { display: block; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--soft-blue); }
/* --------------------------------------------------------------------------
Vorgehen (ruhiger Block)
-------------------------------------------------------------------------- */
.process { position: relative; z-index: 2; background: var(--gray); padding-top: clamp(48px, 6vw, 80px); }
.process__steps { position: relative; display: grid; gap: 40px; }
.process__line { position: absolute; left: 22px; top: 22px; bottom: 22px; width: 1px; background: var(--line-strong); }
.process__line::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleY(var(--f, 0)); transform-origin: 50% 0; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; align-content: start; }
.step__node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; transition: background-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.step.is-in .step__node { background: var(--blue); color: var(--white); box-shadow: 0 0 0 6px var(--blue-wash); }
.step__body { display: grid; gap: 8px; padding-top: 8px; }
.step__body p { max-width: 42ch; }
@media (min-width: 900px) {
.process__steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
.process__line { left: 22px; right: 22px; top: 22px; bottom: auto; width: auto; height: 1px; }
.process__line::after { transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.step { grid-template-columns: 1fr; gap: 24px; }
}
/* Einmaliger Reveal (IntersectionObserver) */
/* Scroll gebundener Reveal: --r wird vom Motion Modul aus der Position im Viewport berechnet (0 → 1) */
.reveal { opacity: var(--r, 1); transform: translateY(calc((1 - var(--r, 1)) * 28px)); will-change: transform, opacity; }
.reveal.is-in { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
Projekte
-------------------------------------------------------------------------- */
.cases { position: relative; z-index: 2; background: var(--gray); }
.cases__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .cases__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .case--featured { grid-column: 1 / -1; } }
.case {
display: grid;
min-width: 0;
border-radius: 20px;
background: var(--white);
box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(13, 27, 42, 0.05);
overflow: hidden;
transition: transform var(--dur-slow) var(--ease-out-quint), box-shadow var(--dur-slow) var(--ease-out-quint);
}
@media (hover: hover) {
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(13, 27, 42, 0.05); }
.case:hover .case__visual > * { transform: scale(1.03); }
}
.case__visual { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(214, 228, 255, 0.5), var(--gray)); padding: 24px 24px 0; height: 280px; display: grid; align-items: end; min-width: 0; }
.case__visual > * { min-width: 0; max-width: 100%; }
@media (max-width: 767px) { .case__visual { padding: 20px 16px 0; height: 250px; } .mock__row .meta { font-size: 0.6875rem; } .meta__x { display: none; } }
.case__visual > * { transform-origin: 50% 100%; transition: transform var(--dur-slow) var(--ease-out-quint); }
.case__body { display: grid; gap: 14px; padding: 24px; min-width: 0; }
.case__body > .pill { justify-self: start; }
.case__body p { max-width: 48ch; }
.case__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case--featured { grid-template-columns: 1fr; }
@media (min-width: 900px) {
.case--featured { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.case--featured .case__body { padding: 40px; align-content: center; }
.case--featured .case__visual { padding: 32px 32px 0; height: auto; min-height: 360px; }
}
.case__visual .mock { transform-origin: 50% 100%; }
/* Featured: Case Folder Ablauf */
.casefolder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; border-radius: 16px 16px 0 0; background: var(--white); box-shadow: var(--shadow-md); padding: 14px; font-size: 0.8125rem; }
.casefolder__tree { display: grid; gap: 2px; align-content: start; }
.casefolder__tree div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.casefolder__tree div.is-sel { background: var(--soft-blue); color: var(--blue-deep); font-weight: 500; }
.casefolder__tree div.indent { padding-left: 24px; }
.casefolder__steps { display: grid; gap: 6px; align-content: start; }
.casefolder__step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--gray); color: var(--navy); font-weight: 500; }
.casefolder__step .icon { color: var(--blue); }
.casefolder__step .tick { margin-left: auto; color: #0f7a3e; }
@media (max-width: 480px) { .casefolder { grid-template-columns: 1fr; } .casefolder__tree { display: none; } }
/* Handskizze */
.sketch { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; padding-bottom: 20px; }
.sketch__paper svg { width: 100%; height: auto; }
.sketch__arrow { width: 32px; height: 32px; }
.sketch__paper { background: var(--white); border-radius: 12px 12px 0 0; padding: 12px; box-shadow: var(--shadow-md); }
.sketch__paper--hand path { stroke: var(--ink-2); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.sketch__paper--clean path, .sketch__paper--clean rect, .sketch__paper--clean line { stroke: var(--blue); stroke-width: 1.4; fill: none; }
.sketch__paper--clean text { font-family: var(--font-body); font-size: 7px; fill: var(--ink-3); }
.sketch__paper--clean .dim { stroke: var(--ink-3); stroke-width: 0.8; }
.sketch__arrow { color: var(--blue); }
/* Bautagebuch */
.voice { display: grid; gap: 10px; }
.voice__bubble { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--white); border-radius: 14px 14px 14px 4px; box-shadow: var(--shadow-sm); width: fit-content; }
.wave { display: flex; align-items: center; gap: 2px; height: 20px; }
.wave i { width: 2px; border-radius: 1px; background: var(--blue); height: calc(var(--h) * 1%); transform-origin: 50% 50%; transition: transform var(--dur-slow) var(--ease-out-quint); }
@media (hover: hover) { .case:hover .wave i:nth-child(odd) { transform: scaleY(1.35); } .case:hover .wave i:nth-child(even) { transform: scaleY(0.7); } }
.voice__doc { background: var(--white); border-radius: 12px 12px 0 0; padding: 14px; box-shadow: var(--shadow-md); display: grid; gap: 8px; }
.voice__doc h5 { margin: 0; font-family: var(--font-display); font-size: 0.875rem; color: var(--navy); }
.voice__doc .kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: 0.75rem; color: var(--ink-2); }
.voice__doc .kv b { color: var(--ink-3); font-weight: 500; }
.voice__photos { display: flex; gap: 6px; }
.voice__photos i { width: 36px; height: 28px; border-radius: 4px; background: var(--soft-blue); }
/* --------------------------------------------------------------------------
Zäsur: gepinnter Leitgedanke, Wörter blenden mit dem Scroll auf
-------------------------------------------------------------------------- */
/* Pin Box ist kleiner als der Viewport, damit vor und nach dem Text kein leerer Bildschirm steht */
.zaesur { position: relative; z-index: 2; --pin: 64vh; --pin-top: 18vh; height: 260vh; background: var(--gray); }
.zaesur__pin { position: sticky; top: var(--pin-top); display: grid; place-items: center; height: var(--pin); padding-inline: var(--gutter); }
.zaesur__pin .net-canvas { -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(110% 100% at 50% 50%, #000 55%, transparent 100%); }
.zaesur__text { position: relative; z-index: 1; }
.zaesur__text { max-width: 36ch; margin: 0; text-align: center; font-family: var(--font-display); font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; color: var(--navy); }
/* Jedes Wort kennt seinen Platz in der Reihe und rechnet seine Deckkraft aus --p selbst aus */
.zaesur__w { opacity: clamp(0.12, calc((var(--p, 0) * var(--count) - var(--i)) * 1.7), 1); transition: opacity 180ms linear; }
@media (max-width: 767px) { .zaesur { --pin: 50vh; --pin-top: 25vh; height: 230vh; } .zaesur__text { max-width: 16ch; } .zaesur__br { display: none; } }
@media (prefers-reduced-motion: reduce) { .zaesur { height: auto; } .zaesur__pin { position: static; height: auto; padding-block: clamp(80px, 9vw, 128px); } .zaesur__w { opacity: 1 !important; } }
/* --------------------------------------------------------------------------
Rechner (die Zahlen des Besuchers, nicht unsere)
-------------------------------------------------------------------------- */
.rechner { position: relative; z-index: 2; background: var(--gray); padding-top: 0; padding-bottom: clamp(120px, 14vw, 200px); }
.rechner__title { margin-bottom: 4px; }
.rechner__plate { display: grid; border-radius: 20px; background: var(--white); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(13, 27, 42, 0.05); overflow: hidden; }
@media (min-width: 900px) { .rechner__plate { grid-template-columns: 1.05fr 0.95fr; } }
.rechner__controls { padding: clamp(24px, 3vw, 44px); display: grid; gap: clamp(24px, 2.6vw, 36px); align-content: start; }
.ctrl__label { display: block; margin-bottom: 12px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.ctrl__row { display: flex; align-items: center; gap: 16px; }
.ctrl__value { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 4px; min-width: 5.2rem; padding: 8px 12px; border-radius: var(--r-sm); background: var(--gray); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctrl__unit { color: var(--ink-3); font-weight: 500; font-size: 0.875rem; }
.rechner input[type="range"] { flex: 1; height: 24px; margin: 0; background: transparent; cursor: grab; -webkit-appearance: none; appearance: none; }
.rechner input[type="range"]:active { cursor: grabbing; }
.rechner input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--blue) 0 var(--fill, 40%), var(--line-strong) var(--fill, 40%) 100%); }
.rechner input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--blue) 0 var(--fill, 40%), var(--line-strong) var(--fill, 40%) 100%); }
.rechner input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--blue), 0 2px 6px rgba(13, 27, 42, 0.18); transition: transform var(--dur-base) var(--ease-out-quint); }
.rechner input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--blue), 0 2px 6px rgba(13, 27, 42, 0.18); }
@media (hover: hover) { .rechner input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); } }
.rechner input[type="range"]:focus-visible { outline: none; }
.rechner input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px var(--blue-wash-2); }
.rechner__note { display: flex; align-items: flex-start; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; }
.rechner__note .icon { margin-top: 2px; color: var(--blue); }
.rechner__result { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); background: linear-gradient(180deg, rgba(214, 228, 255, 0.45), var(--gray)); }
.rechner__result-label { color: var(--ink-2); font-size: 0.9375rem; }
/* Die eine Leitzahl: der einzige Ort, an dem Electric Blue groß wird */
.rechner__total { display: block; margin-top: 10px; color: var(--blue); font-family: var(--font-display); font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner__breakdown { display: flex; gap: 40px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.rechner__breakdown dt { color: var(--ink-3); font-size: 0.8125rem; }
.rechner__breakdown dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.rechner__caveat { margin-top: auto; padding-top: 28px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; max-width: 40ch; }
.rechner__cta { margin-top: 20px; align-self: flex-start; }
@media (max-width: 899px) { .rechner__controls { border-bottom: 1px solid var(--line); } .rechner__cta { align-self: stretch; } .rechner__breakdown { gap: 28px; } }
/* --------------------------------------------------------------------------
Über uns (Navy, Curtain + Choreografie)
-------------------------------------------------------------------------- */
.about { position: relative; z-index: 1; margin-top: -100vh; height: calc(100vh + 100vh + 170vh); background: var(--navy); color: var(--on-navy); }
.about__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.about__light { position: absolute; left: 50%; top: 50%; width: 80vw; max-width: 900px; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(10, 102, 255, 0.32), rgba(10, 102, 255, 0.08) 50%, transparent 72%); filter: blur(30px); pointer-events: none; opacity: calc(0.5 + var(--ap, 0) * 0.5); }
.about__inner { position: relative; display: grid; gap: clamp(40px, 6vh, 72px); justify-items: center; text-align: center; width: min(100% - var(--gutter) * 2, 1040px); }
.about__title { display: grid; justify-items: center; }
.about__title .line { display: block; will-change: transform, opacity; }
.about__lead { max-width: 40ch; color: var(--on-navy-2); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
@media (max-width: 859px) {
.about { height: auto; padding-top: 100vh; }
.about__sticky { position: relative; height: auto; padding: 96px 0 112px; display: block; }
.about__inner { margin-inline: auto; gap: 40px; }
.about__light { top: 30%; }
}
.duo { position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; align-items: center; }
@media (min-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); gap: 0; } }
.role {
position: relative;
display: grid;
gap: 14px;
padding: 24px;
border-radius: 18px;
background: rgba(238, 243, 251, 0.05);
box-shadow: inset 0 0 0 1px var(--line-on-navy), inset 0 1px 0 rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
text-align: left;
will-change: transform, opacity;
}
.role__head { display: flex; align-items: center; gap: 14px; }
.role__mono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--soft-blue); color: var(--navy); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.role__mono--blue { background: var(--blue); color: var(--white); }
.role__avatar { width: 88px; height: 88px; flex: none; border-radius: 20px; object-fit: cover; background: var(--navy); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 20px -8px rgba(10, 102, 255, 0.55); }
.role__head strong { display: block; font-family: var(--font-display); font-size: 1.125rem; color: var(--on-navy); }
.role__head small { display: block; color: var(--on-navy-3); font-size: 0.875rem; }
.role__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 600; letter-spacing: -0.025em; color: var(--on-navy); }
.role ul { display: grid; gap: 6px; color: var(--on-navy-2); font-size: 0.9375rem; }
.role li { display: flex; gap: 10px; align-items: baseline; }
.role li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.55em; border-radius: 50%; background: var(--blue); }
.duo__link { position: relative; display: grid; place-items: center; height: 120px; }
@media (min-width: 860px) { .duo__link { height: 100%; min-height: 200px; } }
.duo__link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.duo__link path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--f, 0)); }
.duo__link .track { stroke: var(--line-on-navy); stroke-dashoffset: 0; }
.duo__mark { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 20px 48px -12px rgba(10, 102, 255, 0.6); will-change: transform, opacity; }
.duo__mark i { display: block; width: 40px; height: 48px; background: url("assets/faia-logo-hell.png") no-repeat 0 50% / 190px auto; }
/* --------------------------------------------------------------------------
Web und Commerce
-------------------------------------------------------------------------- */
.commerce { position: relative; z-index: 2; background: var(--white); }
.commerce__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .commerce__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; } }
.commerce__copy { display: grid; gap: 24px; }
/* Mobil: Regler unter das Preis Panel, direkt über die Geräte Ansicht */
@media (max-width: 959px) { .commerce__copy .toggle { order: 10; justify-self: center; margin-top: 8px; } }
.toggle { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-pill); background: var(--gray); box-shadow: inset 0 0 0 1px var(--line); width: fit-content; }
.toggle__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-sm); transform: translateX(calc(var(--t, 0) * 100%)); transition: transform var(--dur-base) var(--ease-out-quint); }
.toggle button { position: relative; z-index: 1; min-height: 44px; padding: 0 22px; border: 0; background: transparent; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--ink-3); cursor: pointer; transition: color var(--dur-fast); }
.toggle button[aria-pressed="true"] { color: var(--navy); }
.plan { position: relative; display: grid; }
.plan__panel { grid-area: 1 / 1; display: grid; gap: 16px; padding: 28px; border-radius: 20px; background: var(--gray); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur-fast), transform var(--dur-fast); }
.plan__panel.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out-quint) 100ms, transform var(--dur-base) var(--ease-out-quint) 100ms; }
.plan__summary { color: var(--ink-2); max-width: 40ch; }
.plan__more { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 0; border: 0; background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--blue); cursor: pointer; }
.plan__more .icon { transition: transform var(--dur-base) var(--ease-out-quint); }
.plan__more[aria-expanded="true"] .icon { transform: rotate(45deg); }
.plan__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out-quint); }
.plan__details > div { overflow: hidden; }
.plan__details ul { padding-top: 4px; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out-quint); }
.plan__details.is-open { grid-template-rows: 1fr; }
.plan__details.is-open ul { opacity: 1; transform: none; transition-delay: 80ms; }
.plan__price { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); }
.plan__price strong { font-size: clamp(2.25rem, 2rem + 1vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--ink-3); }
.plan ul { display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.plan li .icon { margin-top: 3px; }
.plan li .icon { color: var(--blue); }
/* Showcase: Desktop Device rechts, Phone davor links unten, unten angeschnitten wie ein Foto */
.showcase { position: relative; padding: 12px 0 28px clamp(56px, 16%, 96px); overflow: hidden; }
.device { position: relative; margin-left: auto; width: min(100%, 560px); border-radius: 20px; background: var(--navy); padding: 10px; box-shadow: var(--shadow-lg); }
.phone { position: absolute; left: 0; bottom: -40px; width: clamp(116px, 27%, 150px); border-radius: 28px; background: var(--navy); padding: 7px; box-shadow: 0 6px 12px rgba(13, 27, 42, 0.08), 0 36px 64px -20px rgba(13, 27, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35); z-index: 2; }
.phone__screen { position: relative; border-radius: 22px; overflow: hidden; background: var(--white); aspect-ratio: 39 / 66; }
.phone__page { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base), transform var(--dur-base); }
.phone__page.is-on { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-quint) 120ms, transform var(--dur-slow) var(--ease-out-quint) 120ms; }
.phone__page img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (max-width: 959px) { .showcase { padding-left: 40px; } .phone { bottom: -40px; } }
.device__screen { position: relative; border-radius: 12px; overflow: hidden; background: var(--white); aspect-ratio: 16 / 9.6; }
.device .site__hero--lg strong { font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); }
.device .site__tiles span { height: 72px; }
.device__page { position: absolute; inset: 0; padding: 16px; display: grid; gap: 12px; align-content: start; font-size: 0.8125rem; pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base), transform var(--dur-base); }
.device__page--shot { padding: 0; display: block; }
.device__page--shot img { width: 100%; height: 100%; object-fit: cover; object-position: 24% 0; }
.device__link { position: absolute; inset: 0; display: block; overflow: hidden; }
.device__link img { transition: transform var(--dur-slow) var(--ease-out-quint), filter var(--dur-slow); }
.device__live { position: absolute; right: 14px; bottom: 14px; height: 40px; padding: 0 16px 0 12px; color: var(--navy); font-weight: 600; font-family: var(--font-display); transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base); }
.device__play { width: 18px; height: 18px; fill: var(--blue); }
@media (hover: hover) {
.device__link:hover img { transform: scale(1.02); }
.device__link:hover .device__live { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(13, 27, 42, 0.06), 0 2px 4px rgba(13, 27, 42, 0.08), 0 14px 32px -12px rgba(13, 27, 42, 0.35); }
}
.device__link:focus-visible { outline: none; }
.device__link:focus-visible .device__live { outline: 2px solid var(--blue); outline-offset: 3px; }
.device__page.is-on { pointer-events: auto; opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-quint) 80ms, transform var(--dur-slow) var(--ease-out-quint) 80ms; }
.device__nav { display: flex; justify-content: space-between; align-items: center; }
.device__nav b { width: 54px; height: 10px; border-radius: 3px; background: var(--navy); }
.device__nav i { display: inline-block; width: 48px; height: 18px; border-radius: 4px; background: var(--blue); }
.device__hero { display: grid; gap: 6px; padding: 16px 0 6px; }
.device__hero .sk--title { width: 70%; height: 16px; }
.device__hero .sk { width: 50%; }
.device__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.device__cards i { display: block; height: 58px; border-radius: 8px; background: var(--gray); box-shadow: inset 0 0 0 1px var(--line); }
.device__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.device__products i { display: block; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--soft-blue); }
.device__products i::after { content: ""; display: block; margin: 70% 10px 0; height: 6px; border-radius: 3px; background: var(--white); }
.device__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.device__rows i { display: block; height: 40px; border-radius: 8px; background: var(--soft-blue); opacity: 0.6; }
.device__foot { align-self: end; height: 10px; border-radius: 3px; background: var(--gray); }
/* --------------------------------------------------------------------------
FAQ
-------------------------------------------------------------------------- */
.faq { background: var(--gray); }
.faq__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; } }
.faq__list { border-top: 1px solid var(--line-strong); }
.qa { border-bottom: 1px solid var(--line-strong); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; border: 0; background: transparent; text-align: left; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); cursor: pointer; }
.qa__q .icon { color: var(--blue); transition: transform var(--dur-base) var(--ease-out-quint); }
.qa[data-open="true"] .qa__q .icon { transform: rotate(45deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out-quint); }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 48px 24px 0; color: var(--ink-2); opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out-quint); }
.qa[data-open="true"] .qa__a { grid-template-rows: 1fr; }
.qa[data-open="true"] .qa__a p { opacity: 1; transform: none; transition-delay: 100ms; }
/* --------------------------------------------------------------------------
Final CTA
-------------------------------------------------------------------------- */
.cta { padding: var(--frame); background: var(--gray); }
.cta__card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--navy); color: var(--on-navy); padding: clamp(48px, 8vw, 112px) clamp(20px, 5vw, 80px); transform: scale(calc(0.96 + var(--cs, 0) * 0.04)); transform-origin: 50% 0; }
.cta__light { position: absolute; left: 60%; top: -10%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(10, 102, 255, 0.55), rgba(10, 102, 255, 0.12) 50%, transparent 72%); filter: blur(28px); pointer-events: none; transform: translateY(calc((var(--cp, 0) - 0.5) * -120px)); will-change: transform; }
.cta__grid { position: relative; display: grid; gap: 48px; }
@media (min-width: 960px) { .cta__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; } }
.cta__copy { display: grid; gap: 24px; }
.cta__copy .t-lead { color: var(--on-navy-2); }
.cta__alt { display: block; color: var(--on-navy-2); font-size: 0.9375rem; line-height: 1.7; }
.cta__alt .icon { display: inline-block; vertical-align: -5px; margin-right: 8px; }
.cta__alt a { margin-left: 4px; white-space: nowrap; }
.cta__alt a { color: var(--on-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blue); }
.form { display: grid; gap: 14px; padding: 24px; border-radius: 20px; background: rgba(238, 243, 251, 0.06); box-shadow: inset 0 0 0 1px var(--line-on-navy), inset 0 1px 0 rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--on-navy-2); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r-sm); background: rgba(13, 27, 42, 0.5); color: var(--on-navy); box-shadow: inset 0 0 0 1px rgba(238, 243, 251, 0.14); transition: box-shadow var(--dur-fast); }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-navy-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(10, 102, 255, 0.25); }
.form__foot { display: grid; gap: 12px; }
.form__note { color: var(--on-navy-3); font-size: 0.8125rem; }
.field__error { display: none; color: #ff9d9d; font-size: 0.8125rem; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { box-shadow: inset 0 0 0 1.5px var(--danger); }
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.footer { background: var(--gray); padding: 48px 0 32px; color: var(--ink-3); font-size: 0.9375rem; }
.footer__grid { display: grid; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.7fr 1.3fr 1fr 1fr; gap: 48px; } }
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand img { height: 26px; width: auto; }
.footer__brand p { max-width: 42ch; }
.footer__address { font-style: normal; color: var(--ink-2); line-height: 1.5; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col strong { font-family: var(--font-display); color: var(--navy); font-weight: 600; margin-bottom: 4px; }
.footer__col a { color: var(--ink-2); transition: color var(--dur-fast); }
@media (hover: hover) { .footer__col a:hover { color: var(--blue); } }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 0.875rem; }
/* --------------------------------------------------------------------------
Reduced Motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
.hero__title .word span, .hero__enter, .flow, .reveal { opacity: 1 !important; transform: none !important; }
.hero__copy, .board { transform: none !important; opacity: 1 !important; }
.deck { height: auto; }
.deck__sticky { position: static; height: auto; overflow: visible; display: grid; gap: 40px; padding-bottom: 80px; }
.deck__stage { perspective: none; display: grid; gap: 20px; }
.deck-card { position: static; transform: none !important; opacity: 1 !important; filter: none !important; --tint: 0 !important; margin-inline: auto; }
.deck__hint, .deck__progress { display: none; }
.about { margin-top: 0; height: auto; }
.about__sticky { position: static; height: auto; padding: 120px 0; }
.about__title .line, .role, .duo__mark { transform: none !important; opacity: 1 !important; }
.duo__link path { stroke-dashoffset: 0 !important; }
.cta__card, .cta__light { transform: none !important; }
}
/* Debug: statische Aufnahme (?at=), alle Übergänge sofort im Endzustand */
.is-static *, .is-static *::before, .is-static *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
/* --------------------------------------------------------------------------
Deck Illustrationen (.viz)
Drei animierte Vektor Szenen statt nachgestellter Oberflächen. Basiszustand
ist der Endzustand: bei prefers-reduced-motion und im Static Modus stehen
die Szenen still und vollständig. Loop 6 s, Ablauf über Keyframe Prozente.
-------------------------------------------------------------------------- */
.viz { position: relative; aspect-ratio: 13 / 8; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(160deg, #ffffff 0%, #f5f7fb 55%, #e9effc 100%); box-shadow: inset 0 0 0 1px var(--line); }
.viz::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(13, 27, 42, 0.09) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); }
.viz svg { position: relative; display: block; width: 100%; height: 100%; will-change: transform; transform: translateZ(0); }
/* Nur die vorderste Karte animiert, die anderen stehen still: spart Repaints beim Scrollen */
.deck-card:not(.is-front) .viz svg * { animation-play-state: paused; }
.viz svg * { transform-box: fill-box; transform-origin: center; animation-fill-mode: both; }
.viz .v-glass { fill: #fff; stroke: rgba(13, 27, 42, 0.16); stroke-width: 1; }
.viz .v-line { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; opacity: 0.45; }
.viz .v-track { fill: none; stroke: rgba(13, 27, 42, 0.2); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.viz .v-link { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0.55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.viz .v-link--ring { opacity: 0.3; }
.viz .v-node { fill: #fff; stroke: var(--blue); stroke-width: 1.5; }
.viz .v-glow { fill: url(#vz-glow); opacity: 0.55; }
.viz .v-core-c { fill: var(--blue); }
.viz .v-core-h { fill: #fff; opacity: 0.6; }
.viz .v-dot { fill: var(--blue); opacity: 0; offset-distance: 100%; }
.viz .v-ring { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; }
.viz .v-ico { fill: var(--soft-blue); }
.viz .v-ico-l { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
.viz .v-ico-d { fill: var(--blue); }
.viz .v-ico-b { fill: var(--blue); }
.viz .v-check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz .v-mod .v-check { stroke: var(--blue); }
.viz .v-bar { fill: rgba(13, 27, 42, 0.1); }
.viz .v-fill { fill: var(--blue); }
.viz .v-cb { fill: rgba(13, 27, 42, 0.16); }
.viz .v-cb--hot { fill: var(--blue); }
.viz .v-tog { fill: var(--blue); }
.viz .v-tog-k { fill: #fff; }
.viz .v-conn { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.viz .v-joint { fill: #fff; stroke: var(--blue); stroke-width: 1.5; }
.viz .v-frame { fill: #fff; stroke: rgba(13, 27, 42, 0.2); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.viz .v-soft { fill: var(--soft-blue); opacity: 0.7; }
.viz .v-title { fill: var(--navy); opacity: 0.85; }
.viz .v-btn { fill: var(--blue); }
.viz .v-tileb { fill: #fff; stroke: rgba(13, 27, 42, 0.12); }
.viz .v-pic { fill: rgba(10, 102, 255, 0.35); }
.viz .v-click { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; }
.viz .v-cursor { fill: var(--navy); stroke: #fff; stroke-width: 1; opacity: 0; offset-distance: 100%; }
@supports not (offset-path: path("M0 0h1")) { .viz .v-dot, .viz .v-cursor { display: none; } }
/* KI: Anfrage rein, Kern denkt, drei Ergebnisse raus */
.viz--ki .v-ring--in { animation: vz-ring 6s ease-out infinite; }
.viz--ki .v-dot--in { animation: vz1-in 6s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.viz--ki .v-link { animation: vz1-link 6s ease-out infinite; }
.viz--ki .v-link--ring { animation-name: vz1-linkring; }
@keyframes vz1-linkring { 0%, 24% { stroke-dashoffset: 1; opacity: 0.3; } 42%, 92% { stroke-dashoffset: 0; opacity: 0.3; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.viz--ki .v-core-c, .viz--ki .v-core-h { animation: vz1-core 6s var(--ease-out-quint) infinite; }
.viz--ki .v-glow { animation: vz1-glow 6s var(--ease-out-quint) infinite; }
.viz--ki .v-sat { animation: vz1-sat 6s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.07s); }
.viz--ki .v-dot--out { animation: vz1-out 6s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.viz--ki .v-tile { animation: vz1-tile 6s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.08s); }
@keyframes vz-ring { 0% { opacity: 0.6; transform: scale(0.5); } 14% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes vz1-in { 0%, 4% { offset-distance: 0%; opacity: 0; } 7% { opacity: 1; } 22% { offset-distance: 100%; opacity: 1; } 24%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vz1-link { 0%, 20% { stroke-dashoffset: 1; opacity: 0.55; } 38%, 92% { stroke-dashoffset: 0; opacity: 0.55; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vz1-core { 0%, 18% { transform: scale(0.55); opacity: 0.35; } 30%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes vz1-glow { 0%, 18% { opacity: 0; transform: scale(0.6); } 32% { opacity: 0.22; transform: scale(1.1); } 40%, 92% { opacity: 0.14; transform: scale(1); } 100% { opacity: 0; } }
@keyframes vz1-sat { 0%, 22% { transform: scale(0.3); opacity: 0; } 34%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes vz1-out { 0%, 38% { offset-distance: 0%; opacity: 0; } 41% { opacity: 1; } 54% { offset-distance: 100%; opacity: 1; } 56%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vz1-tile { 0%, 53% { opacity: 0; transform: translateX(8px) scale(0.92); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
/* Digitale Systeme: Module setzen sich zusammen, Verbindungen entstehen, Daten fließen */
.viz--sys .v-mod { animation: vz2-mod 6s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.12s); }
.viz--sys .v-conn { animation: vz2-conn 6s ease-out infinite; }
.viz--sys .v-joint { animation: vz2-joint 6s var(--ease-out-quint) infinite; }
.viz--sys .v-dot--flow { animation: vz2-flow 6s linear infinite; }
.viz--sys .v-dot--flow2 { animation-name: vz2-flow2; }
.viz--sys .v-cb { animation: vz2-cb 6s var(--ease-out-quint) infinite; transform-origin: 50% 100%; }
.viz--sys .v-fill { animation: vz2-fill 6s var(--ease-out-quint) infinite; transform-origin: 0 50%; }
.viz--sys .v-tog-k { animation: vz2-tog 6s var(--ease-out-quint) infinite; }
@keyframes vz2-mod { 0%, 4% { opacity: 0; transform: translateY(14px) scale(0.96); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes vz2-conn { 0%, 30% { stroke-dashoffset: 1; opacity: 0.5; } 46%, 92% { stroke-dashoffset: 0; opacity: 0.5; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vz2-joint { 0%, 40% { transform: scale(0); opacity: 0; } 50%, 92% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes vz2-flow { 0%, 50% { offset-distance: 0%; opacity: 0; } 53% { opacity: 1; } 74% { offset-distance: 100%; opacity: 1; } 76%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vz2-flow2 { 0%, 64% { offset-distance: 0%; opacity: 0; } 67% { opacity: 0.7; } 88% { offset-distance: 100%; opacity: 0.7; } 90%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vz2-cb { 0%, 22% { transform: scaleY(0.15); } 40%, 100% { transform: scaleY(1); } }
@keyframes vz2-fill { 0%, 30% { transform: scaleX(0.1); } 60%, 100% { transform: scaleX(1); } }
@keyframes vz2-tog { 0%, 40% { transform: translateX(-12px); } 52%, 100% { transform: translateX(0); } }
/* Web und Commerce: Rahmen entsteht, Seite baut sich, Klick, live */
.viz--web .v-frame { animation: vz3-frame 6s ease-in-out infinite; }
.viz--web .v-frame--phone { animation-name: vz3-phone; }
.viz--web .v-blk { animation: vz3-blk 6s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.1s); }
.viz--web .v-btn--cta { animation: vz3-cta 6s var(--ease-out-quint) infinite; }
.viz--web .v-cursor { animation: vz3-cursor 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.viz--web .v-click { animation: vz3-click 6s ease-out infinite; }
.viz--web .v-badge { animation: vz3-badge 6s var(--ease-out-quint) infinite; }
.viz--web .v-ring--badge { animation: vz3-badgering 6s ease-out infinite; }
@keyframes vz3-frame { 0% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 1; } 16% { stroke-dashoffset: 0; fill-opacity: 0; } 22%, 92% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; } 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; } }
@keyframes vz3-phone { 0%, 8% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 1; } 24% { stroke-dashoffset: 0; fill-opacity: 0; } 30%, 92% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; } 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; } }
@keyframes vz3-blk { 0%, 20% { opacity: 0; transform: translateY(8px); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes vz3-cta { 0%, 24% { opacity: 0; transform: translateY(8px); } 36%, 60% { opacity: 1; transform: none; } 64% { transform: scale(0.9); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes vz3-cursor { 0%, 46% { offset-distance: 0%; opacity: 0; } 49% { opacity: 1; } 61% { offset-distance: 100%; opacity: 1; } 70% { offset-distance: 100%; opacity: 1; } 76%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vz3-click { 0%, 62% { opacity: 0; transform: scale(0.4); } 64% { opacity: 0.8; transform: scale(0.6); } 76%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes vz3-badge { 0%, 68% { opacity: 0; transform: scale(0.4); } 76%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes vz3-badgering { 0%, 72% { opacity: 0; transform: scale(0.6); } 76% { opacity: 0.7; transform: scale(0.8); } 90%, 100% { opacity: 0; transform: scale(2.2); } }
@media (max-width: 859px) { .deck-card__mock { order: -1; } .deck-card__mock .viz { aspect-ratio: 2.3 / 1; } .deck-card__copy .icon-tile { display: none; } }
@media (prefers-reduced-motion: reduce) { .viz svg * { animation: none !important; } }
.is-static .viz svg * { animation: none !important; }
/* --------------------------------------------------------------------------
Leistungsseiten (leistungen/.html, gebaut aus content/leistungen.json)
Ruhigeres Template: gleicher Hero mit Illustration, dann Ausgangslage,
Leistungen, Ablauf, Praxis, FAQ, CTA. Keine gepinnten Szenen.
-------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--ink-3); margin-bottom: -8px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--blue); }
.crumbs span { color: var(--blue-deep); font-weight: 500; }
.crumbs i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.hero--sub .hero__card { min-height: 0; }
.hero--sub .hero__title { max-width: 18ch; }
.hero__visual { position: relative; z-index: 1; }
.hero__visual .viz { aspect-ratio: 13 / 8; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md); }
@media (min-width: 1024px) {
.hero--sub .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.hero--sub .hero__copy { max-width: 640px; }
}
@media (max-width: 1023px) { .hero__visual { max-width: 560px; } }
@media (max-width: 767px) { .hero__visual { display: none; } }
.is-loaded .hero__visual { transition-delay: 380ms; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-deep); font-weight: 500; font-size: 0.9375rem; }
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out-quint); }
.link-arrow:hover .icon { transform: translateX(3px); }
/* Ausgangslage: drei nummerierte Aussagen */
.pains { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.pain { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.pain__n { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--blue); }
.pain p { color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }
/* Leistungen: Karten, verlinkte Karten führen zur Leistungsseite */
.sub-features { background: var(--gray); }
.features { display: grid; gap: 16px; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); color: inherit; }
.feature .t-h4 { margin-top: 6px; }
.feature p { max-width: 40ch; }
.feature__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--blue-deep); font-size: 0.9375rem; font-weight: 500; }
.feature__more .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out-quint); }
.feature--link { transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint); }
@media (hover: hover) {
.feature--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature--link:hover .feature__more .icon { transform: translateX(3px); }
}
/* Praxis: Text Referenzen ohne Mockup */
.ref-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .ref-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } }
.ref { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.ref__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ref p { max-width: 44ch; }
.ref .link-arrow { margin-top: 4px; }
/* Verwandte Leistungen */
.related { display: grid; gap: 12px; margin-top: 32px; }
.related .t-label { color: var(--ink-3); }
.pill--link { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background-color var(--dur-fast), color var(--dur-fast); }
.pill--link:hover { background: var(--soft-blue); color: var(--blue-deep); }
/* Deck Karten der Startseite: Link zur Bereichsseite, verlinkte Chips */
.deck-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--blue-deep); font-weight: 500; font-size: 0.9375rem; }
.deck-card__link .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out-quint); }
.deck-card__link:hover .icon { transform: translateX(3px); }
.deck-card__copy .t-h3 a { color: inherit; }
.deck-card__copy .t-h3 a:hover { color: var(--blue-deep); }
.pills a.pill { color: var(--ink); }
.pills a.pill:hover { background: var(--soft-blue); color: var(--blue-deep); }
/* --------------------------------------------------------------------------
Use Cases (Startseite, #projekte)
Eine Karte pro Projekt: Prozess Visualisierung oben, darunter Kunde,
Ausgangslage und Umsetzung, abgesetzt der KPI Bereich. Kunden unter NDA
bekommen einen neutralen Marker statt Logo. Visualisierung als 10 s Loop,
Basiszustand ist der Endzustand (reduced motion, Static Modus).
-------------------------------------------------------------------------- */
.usecases { display: grid; gap: 24px; }
.usecase { display: grid; grid-template-rows: 1fr auto; min-width: 0; border-radius: 20px; background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(13, 27, 42, 0.05); overflow: hidden; }
.usecase__visual { position: relative; display: grid; align-content: center; padding: clamp(16px, 2.5vw, 32px); background: linear-gradient(160deg, #ffffff 0%, #f5f7fb 55%, #e9effc 100%); border-bottom: 1px solid var(--line); }
.usecase__visual::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(13, 27, 42, 0.09) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 100%); pointer-events: none; }
.usecase__body { display: grid; gap: 32px; padding: clamp(24px, 3vw, 40px); }
/* Kunde: neutraler Marker (vier Punkte im Raster) statt Logo */
.usecase__client { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.usecase__client > div { display: grid; gap: 2px; flex: 1 1 0; min-width: 0; }
.usecase__client strong { overflow-wrap: anywhere; }
.usecase__client strong { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--navy); }
.usecase__client small { font-size: 0.875rem; color: var(--ink-3); letter-spacing: 0.01em; }
.usecase__client .pill { margin-left: auto; }
.usecase__mark { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; width: 48px; height: 48px; padding: 13px; border-radius: var(--r-md); background: var(--soft-blue); flex: none; }
.usecase__mark i { border-radius: 50%; background: var(--blue); opacity: 0.85; }
.usecase__mark i:nth-child(2) { opacity: 0.45; }
.usecase__mark i:nth-child(3) { opacity: 0.45; }
@media (max-width: 599px) { .usecase__client strong { font-size: 1rem; } .usecase__client .pill { margin-left: 0; flex-basis: 100%; width: max-content; } }
/* Ausgangslage und Umsetzung */
.usecase__text { display: grid; gap: 24px; }
.usecase__text .t-h3 { max-width: 22ch; }
.usecase__story { display: grid; gap: 24px; margin: 0; }
.usecase__story dt { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 8px; }
.usecase__story dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
@media (min-width: 900px) {
.usecase__text { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.usecase__story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
/* KPIs: klar abgesetzt, Zahl dominiert */
.usecase__kpis { display: grid; gap: 20px; margin: 0; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.uc-kpi { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.uc-kpi dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -0.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.uc-kpi dt { font-size: 0.9375rem; color: var(--ink-3); }
.uc-kpi--text dd { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.375rem, 1rem + 1.3vw, 1.75rem); letter-spacing: -0.02em; color: var(--navy); }
.uc-kpi--text dd .icon { width: 22px; height: 22px; color: var(--blue); flex: none; }
@media (min-width: 640px) { .usecase__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .uc-kpi + .uc-kpi { padding-left: 32px; border-left: 1px solid var(--line-strong); } }
/* ---- Visualisierung: Projektnummer rein, prüffertige Ablage raus ---- */
.ucv { position: relative; display: grid; gap: 16px; font-size: 0.8125rem; color: var(--ink-2); }
@media (min-width: 900px) { .ucv { grid-template-columns: minmax(0, 4fr) 40px minmax(0, 5fr) 40px minmax(0, 6fr); align-items: stretch; gap: 0; } }
.ucv__card { position: relative; display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); min-width: 0; }
.ucv__col { display: grid; gap: 16px; align-content: start; }
.ucv__input { align-content: center; }
.ucv__folder { grid-template-rows: auto 1fr auto; }
.ucv__tag { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; color: var(--navy); }
.ucv__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 0.6875rem; font-weight: 600; flex: none; }
.ucv__label { font-size: 0.75rem; color: var(--ink-3); }
.ucv__hint { margin: 0; font-size: 0.75rem; color: var(--ink-3); }
.ucv__field { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 12px; border-radius: var(--r-sm); background: var(--gray); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; color: var(--navy); white-space: nowrap; overflow: hidden; }
.ucv__typed { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 100%; }
.ucv__caret { width: 1.5px; height: 18px; background: var(--blue); opacity: 0; }
.ucv__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-sm); background: var(--blue); color: var(--white); font-weight: 600; font-size: 0.8125rem; }
.ucv__btn .icon { width: 16px; height: 16px; }
.ucv__chapters { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ucv__chapters li { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--gray); color: var(--ink); font-weight: 500; }
.ucv__chapters li span { font-family: var(--font-display); font-size: 0.6875rem; color: var(--ink-3); }
.ucv__chapters li .icon { width: 14px; height: 14px; margin-left: auto; color: var(--blue); }
.ucv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ucv__chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--gray); color: var(--ink-3); font-weight: 500; }
.ucv__chips span.is-on { background: var(--blue); color: var(--white); }
.ucv__tree { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ucv__tree li { display: flex; align-items: center; gap: 8px; height: 24px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucv__tree li .icon { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.ucv__tree li.is-dir { color: var(--navy); font-weight: 500; }
.ucv__tree li.is-dir .icon { color: var(--blue); }
.ucv__tree li.lvl1 { padding-left: 18px; }
.ucv__tree li.lvl2 { padding-left: 36px; }
.ucv__status { position: relative; display: grid; gap: 4px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.ucv__status small { font-size: 0.75rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.ucv__status-wait, .ucv__status-done { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-weight: 600; width: max-content; }
.ucv__status-wait { position: absolute; top: 12px; left: 0; background: var(--gray); color: var(--ink-3); opacity: 0; }
.ucv__status-wait i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--blue); border-top-color: transparent; }
.ucv__status-done { background: #e6f7ee; color: #0f7a3e; }
.ucv__status-done .icon { width: 14px; height: 14px; }
/* Verbindungen: auf Desktop horizontal, mobil versteckt */
.ucv__link { display: none; position: relative; }
@media (min-width: 900px) {
.ucv__link { display: block; }
.ucv__link::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px dashed rgba(13, 27, 42, 0.22); }
.ucv__link i { position: absolute; top: 50%; left: 4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blue); opacity: 0; }
}
/* ---- Ablauf (10 s Loop). Basis = Endzustand; Keyframes beginnen leer. ---- */
.usecase__visual .ucv__typed { animation: uc-type 10s steps(11, end) infinite; }
.usecase__visual .ucv__caret { animation: uc-caret 10s linear infinite; }
.usecase__visual .ucv__btn { animation: uc-btn 10s var(--ease-out-quint) infinite; }
.usecase__visual .ucv__link--a i { animation: uc-dot 10s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.usecase__visual .ucv__link--b i { animation: uc-dot2 10s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.usecase__visual .ucv__chapters li { animation: uc-row 10s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.16s); }
.usecase__visual .ucv__chapters li .icon { animation: uc-check 10s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.16s); }
.usecase__visual .ucv__chips span.is-on { animation: uc-chip 10s var(--ease-out-quint) infinite; }
.usecase__visual .ucv__tree li { animation: uc-tree 10s var(--ease-out-quint) infinite; animation-delay: calc(var(--i) * 0.22s); }
.usecase__visual .ucv__status-wait { animation: uc-wait 10s linear infinite; }
.usecase__visual .ucv__status-wait i { animation: uc-spin 0.9s linear infinite; }
.usecase__visual .ucv__status-done { animation: uc-done 10s var(--ease-out-quint) infinite; }
.usecase__visual .ucv__typed, .usecase__visual .ucv__caret, .usecase__visual .ucv__btn, .usecase__visual .ucv__link i, .usecase__visual .ucv__chapters li, .usecase__visual .ucv__chapters li .icon, .usecase__visual .ucv__chips span.is-on, .usecase__visual .ucv__tree li, .usecase__visual .ucv__status-wait, .usecase__visual .ucv__status-done { animation-fill-mode: both; }
/* Läuft nur, wenn die Karte im Bild ist */
.usecase__visual:not(.is-live) * { animation-play-state: paused !important; }
@keyframes uc-type { 0%, 3% { max-width: 0; } 14%, 94% { max-width: 100%; } 100% { max-width: 100%; } }
@keyframes uc-caret { 0%, 2% { opacity: 0; } 3%, 15% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes uc-btn { 0%, 15% { transform: none; } 17% { transform: scale(0.96); } 19%, 100% { transform: none; } }
@keyframes uc-dot { 0%, 18% { left: 4px; opacity: 0; } 19% { opacity: 1; } 24% { left: calc(100% - 12px); opacity: 1; } 25%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes uc-dot2 { 0%, 48% { left: 4px; opacity: 0; } 49% { opacity: 1; } 54% { left: calc(100% - 12px); opacity: 1; } 55%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes uc-row { 0%, 24% { opacity: 0; transform: translateY(6px); } 30%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes uc-check { 0%, 30% { opacity: 0; transform: scale(0.4); } 36%, 100% { opacity: 1; transform: none; } }
@keyframes uc-chip { 0%, 40% { background: var(--gray); color: var(--ink-3); } 44%, 100% { background: var(--blue); color: var(--white); } }
@keyframes uc-tree { 0%, 54% { opacity: 0; transform: translateX(-6px); } 60%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes uc-wait { 0%, 48% { opacity: 0; } 50%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes uc-spin { to { transform: rotate(360deg); } }
@keyframes uc-done { 0%, 76% { opacity: 0; transform: scale(0.9); } 80%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .usecase__visual * { animation: none !important; } }
.is-static .usecase__visual * { animation: none !important; }
/* ---- Karussell: eine Slide im Fokus, Scroll Snap, Navigation ab zwei Cases ---- */
.uc-carousel { position: relative; }
.uc-track { display: flex; align-items: stretch; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.uc-track::-webkit-scrollbar { display: none; }
.uc-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; border-radius: 24px; }
.uc-track > .usecase { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
@media (min-width: 900px) { .uc-track { margin-inline: 0; padding-inline: 0; } }
@media (prefers-reduced-motion: reduce) { .uc-track { scroll-behavior: auto; } }
.uc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.uc-nav__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.uc-nav__btn .icon { width: 18px; height: 18px; }
.uc-nav__btn[data-uc-prev] .icon { transform: rotate(180deg); }
@media (hover: hover) { .uc-nav__btn:hover { background: var(--navy); color: var(--white); box-shadow: none; } }
.uc-nav__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.uc-nav__btn[disabled] { opacity: 0.35; cursor: default; }
.uc-nav__dots { display: flex; align-items: center; gap: 8px; }
.uc-nav__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-quint); }
.uc-nav__dot.is-active { background: var(--blue); transform: scale(1.25); }
.uc-nav__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 899px) { .uc-nav__btn { display: none; } .uc-nav { margin-top: 16px; } }
/* ---- Kompakt: Mobile in etwa eine Bildschirmhöhe ---- */
@media (max-width: 899px) {
.usecase { border-radius: 18px; }
.usecase__visual { padding: 14px; }
.usecase__body { gap: 18px; padding: 18px 18px 20px; }
.usecase__text { gap: 12px; }
.usecase__text .t-h3 { font-size: 1.25rem; }
.usecase__story { gap: 14px; }
.usecase__story dt { font-size: 0.6875rem; margin-bottom: 4px; }
.usecase__story dd { font-size: 0.9375rem; line-height: 1.5; }
.usecase__client { gap: 12px; }
.usecase__mark { width: 40px; height: 40px; padding: 11px; gap: 4px; }
.usecase__logo { height: 40px; max-width: 110px; padding: 5px 8px; }
.usecase__client strong { font-size: 1rem; }
.usecase__client small { font-size: 0.8125rem; }
.usecase__client .pill { display: none; }
.usecase__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.uc-kpi { gap: 4px; }
.uc-kpi dd { font-size: 1.25rem; letter-spacing: -0.02em; }
.uc-kpi--text dd { font-size: 0.9375rem; gap: 4px; }
.uc-kpi--text dd .icon { width: 14px; height: 14px; }
.uc-kpi dt { font-size: 0.75rem; line-height: 1.3; }
.usecase__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-kpi--text { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
}
.uc-kpi__short { display: none; }
@media (max-width: 599px) { .uc-kpi__long { display: none; } .uc-kpi__short { display: inline; } }
.usecase__logo { width: auto; height: 48px; max-width: 132px; padding: 6px 10px; border-radius: var(--r-md); object-fit: contain; background: #000; flex: none; }
/* ---- Visualisierung mobil: kompakter Stepper statt Board ---- */
.ucm { display: none; }
@media (max-width: 899px) {
.ucv { display: none; }
.ucm { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ucm__step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 10px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); font-size: 0.8125rem; }
.ucm__step + .ucm__step::before { content: ""; position: absolute; left: 26px; top: -8px; height: 8px; border-left: 1.5px dashed rgba(13, 27, 42, 0.25); }
.ucm__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--soft-blue); color: var(--blue); }
.ucm__ico .icon { width: 16px; height: 16px; }
.ucm__body { display: grid; gap: 2px; min-width: 0; }
.ucm__body strong { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 0.875rem; }
.ucm__body small { color: var(--ink-3); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucm__field { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--gray); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--navy); width: max-content; }
.ucm__typed { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 100%; }
.ucm__state { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft-blue); color: var(--blue); }
.ucm__state .icon { width: 12px; height: 12px; }
.ucm__step--done { background: #e6f7ee; box-shadow: inset 0 0 0 1px rgba(15, 122, 62, 0.15); }
.ucm__step--done .ucm__ico { background: #16a34a; color: var(--white); }
.ucm__step--done strong { color: #0f7a3e; }
/* Ablauf 8 s: Schritte erscheinen nacheinander, Haken folgen, Ende bleibt stehen */
.usecase__visual .ucm__step { animation: ucm-step 8s var(--ease-out-quint) infinite both; animation-delay: calc(var(--i) * 0.9s); }
.usecase__visual .ucm__state { animation: ucm-check 8s var(--ease-out-quint) infinite both; animation-delay: calc(var(--i) * 0.9s + 0.5s); }
.usecase__visual .ucm__typed { animation: ucm-type 8s steps(11, end) infinite both; }
}
@keyframes ucm-step { 0%, 4% { opacity: 0; transform: translateY(6px); } 12%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ucm-check { 0%, 8% { opacity: 0; transform: scale(0.5); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes ucm-type { 0%, 5% { max-width: 0; } 16%, 100% { max-width: 100%; } }
/* Desktop Board bleibt, etwas kompakter */
@media (min-width: 900px) {
.ucv__card { padding: 16px; gap: 10px; }
.ucv__chapters li, .ucv__tree li { height: 26px; }
.usecase__body { gap: 24px; padding: 28px clamp(24px, 3vw, 36px) 32px; }
.usecase__kpis { padding-top: 22px; }
}
/* Use Case Visualisierung als Screenshot: gerahmt, oben ausgerichtet, mobil im Ausschnitt */
.usecase__shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); aspect-ratio: 21 / 9; }
.usecase__shot picture, .usecase__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.usecase__shot-note { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.75rem; color: var(--ink-3); }
@media (max-width: 899px) { .usecase__shot { aspect-ratio: 1594 / 904; border-radius: 12px; } .usecase__shot-note { right: 8px; bottom: 8px; font-size: 0.6875rem; } }
/* ---- Smartphone: ein Use Case auf einen Blick, ohne Scrollen ----
Bild flacher, Titel entfällt (der Kundenname trägt), Ausgangslage und
Umsetzung als Fließtext mit Inline Label, Kennzahlen als drei Zeilen. */
@media (max-width: 767px) {
.usecase__visual { padding: 10px; }
.usecase__shot { aspect-ratio: 1594 / 904; border-radius: 8px; }
.usecase__shot-note { display: none; }
.usecase__body { gap: 10px; padding: 12px 14px 12px; }
.usecase__client { gap: 10px; }
.usecase__mark { width: 36px; height: 36px; padding: 10px; gap: 4px; border-radius: 10px; }
.usecase__logo { height: 36px; max-width: 100px; padding: 4px 8px; border-radius: 10px; }
.usecase__client strong { font-size: 0.9375rem; }
.usecase__client small { font-size: 0.75rem; }
.usecase__text { gap: 0; }
.usecase__text .t-h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.usecase__story { gap: 8px; }
.usecase__story > div { display: block; }
.usecase__story dt { display: inline; margin: 0 4px 0 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }
.usecase__story dt::after { content: ":"; }
.usecase__story dd { display: inline; font-size: 0.8125rem; line-height: 1.4; }
.usecase__kpis { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 4px; border-top: 1px solid var(--line-strong); }
.uc-kpi, .uc-kpi--text { display: grid; grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
.uc-kpi:first-child { border-top: 0; }
.uc-kpi dd { grid-column: 1; grid-row: 1; font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.2; }
.uc-kpi dt { grid-column: 2; grid-row: 1; }
.uc-kpi--text dd { font-size: 1rem; gap: 4px; }
.uc-kpi--text dd .icon { width: 13px; height: 13px; }
.uc-kpi dt { font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }
.uc-kpi__long { display: inline; }
.uc-kpi__short { display: none; }
.uc-nav { margin-top: 12px; }
}
/* --------------------------------------------------------------------------
Scroll Performance mobil: Deko Animationen pausieren, solange gescrollt
wird, leichteres Glas in der Navigation, Karten nur mit transform Layer.
-------------------------------------------------------------------------- */
@media (max-width: 899px) {
.deck-card { will-change: transform; box-shadow: 0 2px 6px rgba(13, 27, 42, 0.06), 0 18px 32px -16px rgba(13, 27, 42, 0.22), inset 0 0 0 1px rgba(13, 27, 42, 0.06); }
.deck__stage { perspective: none; }
}
@media (max-width: 767px) {
.nav.glass { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
/* ---- Use Case Einsatzplanung: Aufträge links, geordneter Plan mit Route rechts ---- */
@media (min-width: 900px) { .ucv--plan { grid-template-columns: minmax(0, 5fr) 40px minmax(0, 8fr); } }
.ucv__orders { align-content: center; }
.ucv__orderlist li { justify-content: flex-start; }
.ucv__orderlist li span { min-width: 26px; color: var(--blue); }
.ucv__orderlist li em { margin-left: auto; font-style: normal; font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; }
.ucv__plan { grid-template-rows: auto auto auto 1fr; }
.ucv__plan-meta { margin-left: auto; font-family: var(--font-body); font-weight: 400; font-size: 0.6875rem; color: var(--ink-3); }
.ucv__rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--gray); color: var(--ink); }
.ucv__rows li b { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.ucv__rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucv__rows li small { font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; }
.ucv__route { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 6px 6px 2px; height: 26px; }
.ucv__route-line { position: absolute; left: 12px; right: 12px; top: 50%; border-top: 1.5px dashed rgba(10, 102, 255, 0.45); }
.ucv__stop { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: var(--white); font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 0.6875rem; box-shadow: 0 0 0 3px var(--white); }
.ucv__stop:first-child { background: var(--navy); }
.usecase__visual .ucv__stop { animation: uc-tree 10s var(--ease-out-quint) infinite both; animation-delay: calc(var(--i) * 0.2s + 0.4s); }
.usecase__visual .ucv__route-line { animation: uc-tree 10s var(--ease-out-quint) infinite both; animation-delay: 0.3s; }
/* Kurzfassung der Texte nur auf dem Smartphone */
.uc-short { display: none; }
@media (max-width: 767px) { .uc-long--alt { display: none; } .uc-short { display: inline; } }
/* ---- Use Case mit Dokument (Hochformat): Desktop Bild neben dem Text, mobil kompakter Ausschnitt ---- */
.usecase__shot--doc { aspect-ratio: auto; cursor: zoom-in; }
.usecase__shot--doc img { object-fit: cover; object-position: var(--focus, center); }
.usecase__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); font-size: 0.75rem; font-weight: 500; color: var(--navy); }
.usecase__zoom .icon { width: 14px; height: 14px; color: var(--blue); }
@media (min-width: 900px) {
.usecase--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; }
.usecase--side .usecase__visual { border-bottom: 0; border-right: 1px solid var(--line); align-content: stretch; }
.usecase--side .usecase__shot--doc { height: 100%; }
.usecase--side .usecase__body { gap: 22px; }
.usecase--side .usecase__text { grid-template-columns: 1fr; gap: 16px; }
.usecase--side .usecase__story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.usecase--side .usecase__text .t-h3 { max-width: 26ch; font-size: 1.5rem; }
.usecase--side .uc-kpi dd { font-size: clamp(1.375rem, 1rem + 1.1vw, 1.75rem); }
.usecase--side .uc-kpi--text dd { font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.25rem); flex-wrap: wrap; }
.usecase--side .uc-kpi + .uc-kpi { padding-left: 24px; }
.usecase--side .usecase__kpis { gap: 24px; }
}
@media (max-width: 899px) {
.usecase__shot--doc { aspect-ratio: 16 / 10; }
.usecase__shot--doc img { object-fit: cover; object-position: var(--focus, center); }
.usecase__zoom { right: 8px; bottom: 8px; padding: 5px 10px; font-size: 0.6875rem; }
}
@media (max-width: 767px) { .usecase__shot--doc { aspect-ratio: 16 / 9; } }
/* Kürzere Slides: das Bild füllt den Rest der gemeinsamen Höhe, statt Leerraum zu lassen */
@media (max-width: 899px) { .usecase { grid-template-rows: auto minmax(0, 1fr); } .usecase__body { align-content: space-between; } .usecase__shot--doc { width: 100%; aspect-ratio: 16 / 9; } }
/* Lightbox: ganzes Bild, ohne Beschnitt */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; margin: auto; }
.lightbox::backdrop { background: rgba(13, 27, 42, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox__frame { position: relative; display: grid; border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-lg); }
.lightbox__frame img { display: block; width: auto; max-width: min(96vw, 1100px); max-height: 94vh; height: auto; object-fit: contain; }
.lightbox__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--navy); box-shadow: var(--shadow-md); cursor: pointer; }
.lightbox__close .icon { width: 18px; height: 18px; }
.lightbox__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* ---- Use Case Bild als Handy Mockup (gleiche Rahmenhöhe wie die Screenshot Variante) ---- */
.usecase__shot--phone { display: grid; place-items: center; background: transparent; box-shadow: none; overflow: hidden; }
.uc-phone { width: min(62%, 300px); border-radius: 28px; background: var(--navy); padding: 7px; box-shadow: 0 6px 12px rgba(13, 27, 42, 0.08), 0 36px 64px -20px rgba(13, 27, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35); }
.uc-phone__screen { position: relative; border-radius: 22px; overflow: hidden; background: var(--white); aspect-ratio: 39 / 66; }
.uc-phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@media (max-width: 899px) {
.usecase__shot--phone { place-items: start center; }
.uc-phone { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 62%; max-width: 230px; border-radius: 22px; padding: 5px; }
.uc-phone__screen img { object-position: 50% 24%; }
.uc-phone__screen { border-radius: 18px; }
}
/* --------------------------------------------------------------------------
Deck auf dem Smartphone mit Scroll Driven Animations (Safari 26+, Chrome).
Die Bewegung läuft dann auf dem Compositor, synchron zum Scroll, statt pro
Frame aus JavaScript. Prozente beziehen sich auf die "cover" Strecke der
Deck Section: Höhe 200vh + 3 * 80vh plus 100vh Viewport = 540vh.
p = 0 (Hero weg) bei 37.04 %, p = 1 bei 51.85 %, p = 2 bei 66.67 %,
p = 3 bei 81.48 %, p = 4.25 (Exit fertig) bei 100 %. Ohne Support bleibt
der JavaScript Pfad in motion.js aktiv (er prüft dieselbe Bedingung).
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
@supports (animation-timeline: view()) {
.deck { view-timeline-name: --deck; view-timeline-axis: block; }
.deck-card, .deck__head, .deck-card__tint { animation-timeline: --deck; animation-range: cover 0% cover 100%; animation-fill-mode: both; animation-duration: 1s; }
.deck-card[data-card="0"] { animation-name: deck-m-card-0; }
.deck-card[data-card="1"] { animation-name: deck-m-card-1; }
.deck-card[data-card="2"] { animation-name: deck-m-card-2; }
.deck-card[data-card="0"] .deck-card__tint { animation-name: deck-m-tint-0; }
.deck-card[data-card="1"] .deck-card__tint { animation-name: deck-m-tint-1; }
.deck__head { animation-name: deck-m-head; }
.deck-card { will-change: transform, opacity; }
}
}
/* Eintritt: von unten, leicht größer, Deckkraft in den ersten 12 % des Eintritts. Danach Stapel (16px, 6 % je Ebene), zuletzt Exit Parallax. */
@keyframes deck-m-card-0 {
0%, 37.04% { transform: translate(-50%, 0) translateY(60vh) scale(1.04); opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
38.81% { opacity: 1; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
51.85% { transform: translate(-50%, 0) translateY(0) scale(1); opacity: 1; animation-timing-function: linear; }
66.67% { transform: translate(-50%, 0) translateY(-16px) scale(0.94); opacity: 1; animation-timing-function: linear; }
81.48% { transform: translate(-50%, 0) translateY(-32px) scale(0.88); opacity: 1; animation-timing-function: linear; }
100% { transform: translate(-50%, 0) translateY(-32px) scale(0.88); opacity: 1; }
}
@keyframes deck-m-card-1 {
0%, 51.85% { transform: translate(-50%, 0) translateY(60vh) scale(1.04); opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
53.63% { opacity: 1; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
66.67% { transform: translate(-50%, 0) translateY(0) scale(1); opacity: 1; animation-timing-function: linear; }
81.48% { transform: translate(-50%, 0) translateY(-16px) scale(0.94); opacity: 1; animation-timing-function: linear; }
100% { transform: translate(-50%, 0) translateY(-16px) scale(0.94); opacity: 1; }
}
@keyframes deck-m-card-2 {
0%, 66.67% { transform: translate(-50%, 0) translateY(60vh) scale(1.04); opacity: 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
68.44% { opacity: 1; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
81.48% { transform: translate(-50%, 0) translateY(0) scale(1); opacity: 1; animation-timing-function: linear; }
100% { transform: translate(-50%, 0) translateY(0) scale(1); opacity: 1; }
}
@keyframes deck-m-tint-0 { 0%, 51.85% { opacity: 0; } 66.67% { opacity: 0.08; } 81.48%, 100% { opacity: 0.16; } }
@keyframes deck-m-tint-1 { 0%, 66.67% { opacity: 0; } 81.48%, 100% { opacity: 0.08; } }
/* Headline: erst mittig hinter dem Hero, rückt bis p = 0.7 nach oben, wird über die Sequenz kleiner und blasser */
@keyframes deck-m-head {
0%, 37.04% { transform: translateY(calc(50vh - 50% - var(--nav-h) - 12px)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
47.41% { transform: translateY(0) scale(0.977); opacity: 0.85; animation-timing-function: linear; }
81.48% { transform: translateY(0) scale(0.9); opacity: 0.35; animation-timing-function: linear; }
100% { transform: translateY(0) scale(0.9); opacity: 0.35; }
}
/* ==========================================================================
Use Cases v2
Mobil: Karussell mit Swipe (wie bisher), jede Slide in einem .uc-slot.
Desktop: gestapelte Karten. Jede Karte klebt unter der Navigation, die
nächste schiebt sich beim Scrollen darüber; die verdeckte Karte wird
leicht kleiner und dunkler (motion.js). Aufbau pro Karte: links Titel als
Label, Kunde, Ausgangslage und Umsetzung im Fließtext, Kennzahlen als
Zeilen; rechts das Projektbild im Panel.
========================================================================== */
.uc-slot { display: grid; }
.uc-track > .uc-slot { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.usecase__tint { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--navy); opacity: 0; pointer-events: none; }
.usecase { position: relative; }
.usecase__title { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--soft-blue); color: var(--blue-deep); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; width: max-content; margin: 0; }
/* Text: Label inline, Kennzahlen als Zeilen (alle Größen) */
.usecase__text { display: grid; grid-template-columns: 1fr; gap: 0; }
.usecase__story { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.usecase__story > div { display: block; }
.usecase__story dt { display: inline; margin: 0 4px 0 0; font-family: var(--font-body); font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }
.usecase__story dt::after { content: ":"; }
.usecase__story dd { display: inline; margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); max-width: none; }
.usecase__kpis { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 1px solid var(--line-strong); }
.uc-kpi, .uc-kpi--text { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
.uc-kpi:first-child { border-top: 0; }
.uc-kpi dd { grid-column: 1; grid-row: 1; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.uc-kpi dt { grid-column: 2; grid-row: 1; font-size: 0.875rem; line-height: 1.35; color: var(--ink-3); }
.uc-kpi--text dd { font-size: 1.125rem; gap: 6px; flex-wrap: wrap; }
.uc-kpi--text dd .icon { width: 15px; height: 15px; }
.uc-kpi__long { display: inline; } .uc-kpi__short { display: none; }
/* Mobil: Reihenfolge Kunde, Titel, Text, Kennzahlen; kompakt wie bisher */
@media (max-width: 899px) {
.usecase__client { order: 1; } .usecase__title { order: 2; } .usecase__text { order: 3; } .usecase__kpis { order: 4; }
.usecase__body { align-content: start; gap: 12px; }
.usecase__title { height: 26px; padding: 0 10px; font-size: 0.6875rem; }
.usecase__story dd { font-size: 0.875rem; line-height: 1.45; }
.uc-kpi, .uc-kpi--text { grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.uc-kpi dd { font-size: 1.125rem; } .uc-kpi dt { font-size: 0.75rem; } .uc-kpi--text dd { font-size: 1rem; }
.uc-kpi__long { display: inline; } .uc-kpi__short { display: none; }
}
/* Desktop: Stapel statt Karussell */
@media (min-width: 900px) {
.uc-track { display: block; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
.uc-nav { display: none; }
.uc-slot { height: 100vh; }
.uc-slot:last-child { height: auto; }
.usecase { position: sticky; top: calc(var(--nav-h) + 24px); grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); grid-template-rows: auto; align-items: stretch; transform-origin: 50% 0; will-change: transform; min-height: 560px; max-height: calc(100vh - var(--nav-h) - 48px); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(13, 27, 42, 0.05); }
.usecase__body { order: 1; gap: 22px; padding: clamp(28px, 3vw, 44px); align-content: center; }
.usecase__visual { order: 2; border-bottom: 0; border-left: 1px solid var(--line); padding: clamp(24px, 2.5vw, 36px); align-content: center; min-height: 0; }
.usecase__shot--doc { height: 100%; max-height: 100%; }
.usecase__shot--phone .uc-phone { width: min(60%, 290px); }
.usecase__client strong { font-size: 1.375rem; }
.usecase__text .t-h3 { display: none; }
.usecase__story dd { font-size: 1rem; line-height: 1.6; }
.usecase__kpis { margin-top: 4px; }
}
/* v2 Feinschliff Desktop: Kurztexte überall, feste Kartenhöhe, Kundenzeile ohne Wortbruch, KPI Zeilen ohne Spaltenlinien */
.uc-long--alt { display: none; } .uc-short { display: inline; }
.uc-kpi + .uc-kpi { border-left: 0; padding-left: 0; }
@media (min-width: 900px) {
.usecase { height: clamp(560px, calc(100vh - var(--nav-h) - 48px), 700px); min-height: 0; max-height: none; }
.usecase__client strong { overflow-wrap: normal; font-size: 1.25rem; }
.usecase__client .pill { margin-left: 0; }
.usecase__client { row-gap: 8px; }
}
@media (min-width: 900px) {
.usecase__visual { display: grid; grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.usecase__shot--doc { height: auto; min-height: 0; }
}
/* ==========================================================================
Use Cases v3: Desktop als gepinntes Deck (gleiche Mechanik wie die
Leistungen: Karten kommen nacheinander von unten, kippen ein, stapeln sich
mit Versatz und Abdunklung). Mobil bleibt das Karussell. Bilder als
Desktop oder Handy Mockup im Panel rechts.
========================================================================== */
/* Desktop Mockup (Browser Rahmen), passend zum Gerät in der Web Section */
.uc-device { width: 100%; max-width: 640px; border-radius: 18px; background: var(--navy); padding: 8px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.3); }
.uc-device__bar { display: flex; gap: 5px; padding: 4px 6px 8px; }
.uc-device__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.uc-device__screen { position: relative; border-radius: 10px; overflow: hidden; background: var(--white); aspect-ratio: 16 / 9.4; }
.uc-device__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.usecase__shot--device { display: grid; place-items: center; background: transparent; box-shadow: none; overflow: hidden; }
@media (max-width: 899px) {
.usecase__shot--device { place-items: start center; }
.usecase__shot--device .uc-device { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 88%; border-radius: 12px; padding: 5px; }
.usecase__shot--device .uc-device__bar { padding: 2px 4px 5px; } .usecase__shot--device .uc-device__bar i { width: 5px; height: 5px; }
.usecase__shot--device .uc-device__screen { border-radius: 7px; }
}
@media (min-width: 900px) {
.uc-carousel { height: calc(100vh + var(--n, 1) * 80vh); }
.uc-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 28px); }
.uc-stage__head { margin-bottom: 8px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 32px; }
.uc-stage__head h2 { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.5rem); }
.uc-track { position: relative; flex: 1; perspective: 1800px; perspective-origin: 50% 30%; display: block; overflow: visible; }
.uc-slot { display: contents; }
.usecase { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); transform-origin: 50% 0; will-change: transform, opacity; height: min(640px, calc(100vh - var(--nav-h) - 200px)); min-height: 0; max-height: none; }
.uc-nav { display: none; }
.usecase__body { padding: clamp(24px, 2.6vw, 40px); }
.usecase__shot--phone .uc-phone { width: min(56%, 260px); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
.uc-carousel { height: auto; }
.uc-stage { position: static; height: auto; overflow: visible; }
.uc-track { display: grid; gap: 24px; }
.usecase { position: static; transform: none !important; opacity: 1 !important; filter: none !important; }
.usecase__tint { display: none; }
}
/* v4 Desktop: eine Karte mit Innenabstand, links Text, rechts ein eingesetztes Bildpanel (kein Split, keine Trennlinie) */
@media (min-width: 900px) {
.usecase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 3vw, 48px); align-items: center; padding: clamp(28px, 3vw, 44px); height: auto; min-height: 0; }
.usecase__body { padding: 0; gap: 20px; }
.usecase__visual { order: 2; border: 0; border-radius: 16px; padding: clamp(20px, 2.5vw, 32px); height: clamp(360px, 46vh, 440px); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; overflow: hidden; }
.usecase__visual::before { border-radius: inherit; }
.usecase__shot--doc, .usecase__shot--device, .usecase__shot--phone { height: auto; max-height: 100%; width: 100%; }
.usecase__shot--device .uc-device { max-width: 100%; }
.usecase__shot--phone .uc-phone { width: min(44%, 220px); }
.usecase__body .usecase__title { margin-bottom: 2px; }
}
@media (min-width: 900px) {
.usecase { min-height: 564px; }
.usecase__shot--doc, .usecase__shot--device, .usecase__shot--phone { position: static; }
.usecase__zoom { right: 18px; bottom: 18px; }
}
/* v4.1: NDA Pill immer in eigener Zeile (kein Überlappen), Desktop Mockup zeigt das ganze Bild und bekommt mehr Fläche */
.usecase__client .pill { flex-basis: 100%; width: max-content; margin-left: 0; order: 3; }
.uc-device__screen { aspect-ratio: var(--screen, 16 / 9.4); }
.uc-device__screen img { object-fit: contain; object-position: center; background: var(--white); }
@media (min-width: 900px) {
.usecase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.usecase__visual { height: clamp(400px, 54vh, 500px); padding: clamp(16px, 2vw, 24px); }
.usecase__shot--device .uc-device { width: 100%; max-width: 640px; }
}
@media (max-width: 899px) {
.usecase__shot--device .uc-device { width: 92%; top: 8px; }
}
/* v4.2: Bildpanel als Flex Zentrierung, Figure ohne Höhenbegrenzung; Kundenzeile als Raster (Logo, Name, NDA darunter) */
@media (min-width: 900px) {
.usecase__visual { display: flex; align-items: center; justify-content: center; }
.usecase__shot--doc, .usecase__shot--device, .usecase__shot--phone { position: static; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; max-height: none; }
.usecase__shot--device .uc-device { width: min(100%, 640px); }
.usecase__shot--phone .uc-phone { width: min(40%, 210px); }
}
.usecase__client { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; }
.usecase__client > div { min-width: 0; }
.usecase__client .pill { grid-column: 2; justify-self: start; flex-basis: auto; width: auto; order: 0; }
@media (max-width: 899px) { .usecase__client { column-gap: 12px; } }
@media (min-width: 900px) {
.usecase__shot--doc, .usecase__shot--device, .usecase__shot--phone { aspect-ratio: auto; overflow: visible; }
.usecase__shot--device .uc-device { flex: none; width: 100%; max-width: 620px; }
.usecase__shot--phone .uc-phone { flex: none; }
}
@media (max-width: 899px) {
.usecase__shot--doc, .usecase__shot--device, .usecase__shot--phone { aspect-ratio: 16 / 10; }
.usecase__shot--device .uc-device { width: 94%; top: 8px; }
}
/* Reihenfolge: Use Cases folgen direkt auf das Deck, Vorgehen danach */
.cases { padding-top: clamp(48px, 6vw, 80px); }
.process { padding-top: clamp(80px, 9vw, 128px); }
/* Kennzahlen in Electric Blue, Pfeil in der Text Kennzahl bleibt blau, Beschreibung grau */
.uc-kpi dd, .uc-kpi--text dd { color: var(--blue); }
/* NDA Marker statt Logo: Schloss und Kürzel auf Soft Blue, gleiche Kachel wie ein Logo Chip */
.usecase__mark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 48px; padding: 0; border-radius: var(--r-md); background: var(--soft-blue); color: var(--blue-deep); }
.usecase__mark .icon { width: 16px; height: 16px; }
.usecase__mark b { font-family: var(--font-display); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
@media (max-width: 899px) { .usecase__mark { width: 40px; height: 40px; padding: 0; } .usecase__mark .icon { width: 14px; height: 14px; } .usecase__mark b { font-size: 0.5rem; } }
@media (max-width: 767px) { .usecase__mark { width: 36px; height: 36px; padding: 0; border-radius: 10px; } .usecase__mark .icon { width: 13px; height: 13px; } }
/* Mobil: kein Exit Parallax im Deck, die Use Cases schließen direkt an die letzte Karte an */
@media (max-width: 767px) { .cases { margin-top: var(--cases-pull, 0px); padding-top: 0; } }
/* Antwortzeit Chip: grüner pulsierender Punkt statt Uhr */
.chip__live { position: relative; flex: none; width: 9px; height: 9px; margin: 0 3px 0 1px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); }
.chip__live::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(22, 163, 74, 0.35); animation: chip-live 1.8s ease-out infinite; }
@keyframes chip-live { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chip__live::before { animation: none; opacity: 0; } }
/* Bewertung im Hero: Sternenreihe mit Wert, darunter Quelle und Anzahl */
.hero__trust { align-items: center; gap: 14px 20px; }
.rating { display: grid; gap: 4px; }
.rating__stars { display: flex; align-items: center; gap: 2px; }
.rating__stars .chip__star { width: 20px; height: 20px; margin: 0; fill: #f5b301; }
.rating__stars strong { margin-left: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.rating__stars strong span { font-weight: 500; color: var(--ink-3); }
.rating__meta { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.rating__meta .chip__g { width: 15px; height: 15px; }
.rating__meta b { font-weight: 600; color: var(--navy); }
@media (max-width: 767px) { .rating__stars .chip__star { width: 18px; height: 18px; } .rating__stars strong { font-size: 1.0625rem; } .rating__meta { font-size: 0.8125rem; } }
.rating__note { display: inline-flex; align-items: center; gap: 8px; align-self: end; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
@media (max-width: 767px) { .rating__note { font-size: 0.8125rem; } }
/* Kundenlogos als überlappende Kreise über der Bewertung */
.rating { gap: 10px; }
.rating__logos { display: flex; align-items: center; margin: 0 0 2px; padding: 0; list-style: none; }
.rating__logos li { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--white); box-shadow: 0 0 0 2.5px var(--white), 0 2px 6px rgba(13, 27, 42, 0.14); }
.rating__logos li + li { margin-left: -7px; }
.rating__logos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rating__more { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--blue); background: var(--soft-blue) !important; }
@media (max-width: 767px) { .rating__logos li { width: 40px; height: 40px; } .rating__logos li + li { margin-left: -6px; } .rating__more { font-size: 1rem; } }
/* Sterne in Electric Blue als Liquid Glass: Verlaufsfläche, heller Rand oben links, Glanzpunkt */
.rating__stars { gap: 3px; }
.rating__stars .chip__star { width: 22px; height: 22px; overflow: visible; filter: drop-shadow(0 2px 5px rgba(10, 102, 255, 0.26)); }
.rating__more { width: auto !important; min-width: 46px; padding: 0 12px; border-radius: 999px !important; font-size: 0.875rem; letter-spacing: -0.01em; }
@media (max-width: 767px) { .rating__stars .chip__star { width: 20px; height: 20px; } .rating__more { min-width: 40px; padding: 0 10px; font-size: 0.8125rem; } }
/* Sekundärer Button als Liquid Glass: getönter Verlauf, Blur, Verlaufskante, Lichtreflex (gleiche Sprache wie die Glass Chips) */
.btn--secondary {
--btn-bg: transparent; --btn-fg: var(--navy); --btn-fill: rgba(214, 228, 255, 0.55);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(243, 245, 247, 0.5) 45%, rgba(214, 228, 255, 0.62) 100%);
-webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(13, 27, 42, 0.06), inset 0 0 14px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(13, 27, 42, 0.06), 0 12px 28px -14px rgba(13, 27, 42, 0.3);
}
.btn--secondary::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(13, 27, 42, 0.22) 55%, rgba(255, 255, 255, 0.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.btn--secondary .btn__label, .btn--secondary .icon { position: relative; z-index: 3; }
@media (hover: hover) { .btn--secondary:hover { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(13, 27, 42, 0.06), inset 0 0 14px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(13, 27, 42, 0.06), 0 16px 32px -14px rgba(13, 27, 42, 0.34); } }
/* Primärer Button als blaues Liquid Glass: Electric Blue bleibt Fläche, dazu Verlauf, Lichtkante oben, Reflex, blauer Schein */
.btn--primary {
background: linear-gradient(135deg, #3d86ff 0%, var(--blue) 42%, #0852d6 100%);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -1px 1px rgba(7, 36, 96, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(10, 102, 255, 0.25), 0 10px 26px -10px rgba(10, 102, 255, 0.6);
}
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.btn--primary .btn__label, .btn--primary .icon { position: relative; z-index: 3; }
@media (hover: hover) { .btn--primary:hover { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(7, 36, 96, 0.35), inset 0 0 14px rgba(255, 255, 255, 0.16), 0 2px 4px rgba(10, 102, 255, 0.25), 0 14px 30px -10px rgba(10, 102, 255, 0.65); } }
/* Kundenlogos als Glas Kreise: Verlaufskante, Lichtreflex oben, weicher Schatten; das Logo liegt unter dem Reflex */
.rating__logos li { position: relative; isolation: isolate; box-shadow: 0 0 0 2.5px var(--white), inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 3px rgba(13, 27, 42, 0.08), 0 10px 22px -10px rgba(13, 27, 42, 0.32); }
.rating__logos li::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(13, 27, 42, 0.28) 58%, rgba(255, 255, 255, 0.85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.rating__logos li::after { content: ""; position: absolute; inset: 1px; z-index: 1; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 52%); pointer-events: none; }
.rating__more { background: linear-gradient(135deg, rgba(214, 228, 255, 0.85) 0%, rgba(243, 245, 247, 0.55) 45%, rgba(214, 228, 255, 0.7) 100%) !important; -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
.rating__more::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%); }
/* Aktive Prozessschritte: Ring pulsiert einmal beim Erscheinen, danach ruhiges Atmen */
.step__node::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--blue); opacity: 0; }
.step.is-in .step__node { animation: step-pop 700ms var(--ease-out-quint) both; }
.step.is-in .step__node::after { animation: step-ring 2.6s ease-out 500ms infinite; }
@keyframes step-pop { 0% { transform: scale(0.82); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes step-ring { 0% { transform: scale(1); opacity: 0.35; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .step.is-in .step__node, .step.is-in .step__node::after { animation: none; } }/* Zweiter Kontaktweg im CTA: WhatsApp als kurze Zeile wie der Termin Hinweis */
.cta__alt .icon--glyph { color: #25d366; width: 17px; height: 17px; vertical-align: -3px; }
.cta__copy .cta__alt + .cta__alt { margin-top: -12px; }
/* Sterne laufen beim Erscheinen von links nach rechts blau ein */
.rating__stars { position: relative; }
.rating__stars .chip__star { position: relative; }
.rating__stars .chip__star .st-fill { opacity: 1; }
[data-stars]:not(.is-on) .chip__star .st-fill, [data-stars]:not(.is-on) .chip__star .st-edge { opacity: 0; }
[data-stars] .chip__star .st-base { fill: rgba(13, 27, 42, 0.12); }
[data-stars].is-on .chip__star .st-fill, [data-stars].is-on .chip__star .st-edge { opacity: 1; transition: opacity 420ms var(--ease-out-quint); transition-delay: calc(var(--s) * 260ms); }
[data-stars].is-on .chip__star { animation: star-pop 560ms var(--ease-out-quint) both; animation-delay: calc(var(--s) * 260ms); }
@keyframes star-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { [data-stars] .chip__star .st-fill, [data-stars] .chip__star .st-edge { opacity: 1 !important; } [data-stars] .chip__star { animation: none !important; } }
.rating__note { align-self: start; margin-bottom: 2px; }
.hero__trust { flex-direction: column; align-items: flex-start; gap: 12px; }
/* Vorher und Nachher nebeneinander (Use Case Bildpanel) */
.uc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; align-items: start; }
.uc-ba__item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -12px rgba(13, 27, 42, 0.35); cursor: zoom-in; }
.uc-ba__item img { display: block; width: 100%; height: auto; }
.uc-ba__label { position: absolute; left: 8px; top: 8px; z-index: 2; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.uc-ba__label--on { background: var(--blue); color: var(--white); box-shadow: 0 2px 8px -2px rgba(10, 102, 255, 0.5); }
@media (max-width: 899px) { .uc-ba { gap: 8px; } .uc-ba__label { height: 19px; padding: 0 7px; font-size: 0.5625rem; } }
/* Logo Kachel: Hintergrund kommt aus dem Case (Standard weiß) */
.usecase__logo { background: var(--logo-bg, #fff); box-shadow: inset 0 0 0 1px var(--line); }
/* Gleiche Positionen über alle Use Cases: Bildfeld fest, Kennzahlen am Fuß */
.usecase__body { display: grid; align-content: stretch; }
@media (min-width: 900px) {
.usecase__body { grid-template-rows: auto auto 1fr auto; }
.usecase__visual { height: 100%; }
}
@media (max-width: 899px) {
.usecase { grid-template-rows: auto minmax(0, 1fr); }
.usecase__visual { height: 208px; display: grid; place-items: center; }
.usecase__visual > * { max-height: 100%; }
.usecase__body { grid-template-rows: auto auto 1fr auto; }
.uc-ba__item img { max-height: 176px; width: auto; margin-inline: auto; }
.uc-ba { justify-items: center; }
}
/* Harte Anker: Kopf oben, Kennzahlen am Fuß, gleiche Zeilenhöhe in allen Cases */
.usecase__body { grid-template-rows: auto auto minmax(0, 1fr) auto !important; align-content: stretch !important; }
.usecase__kpis { margin-top: auto; }
.uc-kpi, .uc-kpi--text { min-height: 52px; align-content: center; }
@media (max-width: 899px) { .uc-kpi, .uc-kpi--text { min-height: 44px; } }
@media (min-width: 900px) { .usecase__client { min-height: 48px; align-content: center; } }
@media (min-width: 900px) { .usecase { align-items: stretch; } }
@media (max-width: 899px) {
.usecase__visual { place-items: stretch; }
.usecase__visual > .usecase__shot { position: relative; width: 100%; height: 100%; aspect-ratio: auto; }
.usecase__visual > .uc-ba { align-content: center; height: 100%; }
}
/* Mobile: Mockups im Fluss statt absolut, damit das Bildfeld eine Höhe hat und nichts abgeschnitten wird */
@media (max-width: 899px) {
.usecase__visual > .usecase__shot { display: grid; place-items: center; align-content: center; height: 100%; min-height: 100%; overflow: hidden; }
.usecase__shot--device .uc-device, .usecase__shot--phone .uc-phone, .usecase__shot--doc img {
position: static; transform: none; left: auto; top: auto; margin: 0;
}
.usecase__shot--device .uc-device { width: 90%; max-width: 320px; }
.usecase__shot--phone .uc-phone { width: 54%; max-width: 150px; align-self: start; }
.usecase__shot--doc img { position: static; width: auto; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
}
@media (max-width: 899px) { .usecase__shot--phone .uc-phone { width: 118px; max-width: none; align-self: center; } }
/* Vorher und Nachher: beide im gleichen Browser Mockup, gleiche Größe, maximal breit */
.uc-ba { align-items: center; gap: 14px; }
.uc-ba__item { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.uc-ba__item .uc-device { width: 100%; max-width: none; }
.uc-ba__item .uc-device__screen img { object-fit: contain; background: var(--white); }
.uc-ba__label { left: 14px; top: 14px; }
@media (max-width: 899px) {
.uc-ba { gap: 8px; }
.usecase__visual > .uc-ba .uc-device { padding: 4px; border-radius: 9px; }
.usecase__visual > .uc-ba .uc-device__bar { padding: 2px 3px 4px; }
.usecase__visual > .uc-ba .uc-device__bar i { width: 4px; height: 4px; }
.usecase__visual > .uc-ba .uc-device__screen { border-radius: 6px; }
.uc-ba__label { left: 8px; top: 8px; }
}
/* Vorher und Nachher: schmalere Rahmen, damit die Bilder größer stehen */
.uc-ba { gap: 10px; }
.uc-ba__item .uc-device { padding: 5px; border-radius: 12px; }
.uc-ba__item .uc-device__bar { padding: 3px 4px 5px; }
.uc-ba__item .uc-device__bar i { width: 5px; height: 5px; }
.uc-ba__item .uc-device__screen { border-radius: 7px; }
@media (min-width: 900px) { .usecase--side .usecase__visual:has(.uc-ba) { padding: clamp(12px, 1.4vw, 18px); } }
/* Vorher und Nachher auf dem Handy: beide Rahmen füllen ihre Spalte, damit man
viel vom Bild sieht. Vorher schrumpften sie auf die Eigengröße zusammen. */
@media (max-width: 899px) {
.usecase__visual > .uc-ba { justify-items: stretch; gap: 10px; }
.usecase__visual > .uc-ba .uc-ba__item { width: 100%; }
.usecase__visual > .uc-ba .uc-ba__item img { width: 100%; height: 100%; max-height: none; margin-inline: 0; }
}
@media (max-width: 899px) {
.usecase__visual:has(.uc-ba) { padding-inline: 8px; }
.usecase__visual > .uc-ba { gap: 8px; }
}
/* Beide Spalten exakt gleich breit, auch wenn der Inhalt breiter drückt */
.uc-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Prozessschritte: Puls sichtbar, aber ruhiger als in der ersten Fassung */
@keyframes step-ring { 0% { transform: scale(1); opacity: 0.26; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
.step.is-in .step__node::after { animation-duration: 2.9s; }
/* Menü: die beiden Knöpfe im Fuß sind Buttons, keine Menüzeilen. Die Regel für
.sheet a hat sie vorher flach gezogen: linksbündig, dunkle Schrift, Trennlinie. */
.sheet__foot a.btn {
justify-content: center;
min-height: 56px;
padding: 0 28px;
border-bottom: 0;
font-size: 1rem;
color: var(--btn-fg);
}
.sheet__foot a.btn .btn__label { color: inherit; }
/* WhatsApp Button als grünes Liquid Glass, gleiche Machart wie der blaue */
.btn--whatsapp {
background: linear-gradient(135deg, #4fe391 0%, #25d366 42%, #12a150 100%);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(4, 60, 28, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(37, 211, 102, 0.25), 0 10px 26px -10px rgba(37, 211, 102, 0.6);
}
.btn--whatsapp::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.btn--whatsapp .btn__label, .btn--whatsapp .icon { position: relative; z-index: 3; }
@media (hover: hover) { .btn--whatsapp:hover { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -1px 1px rgba(4, 60, 28, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.16), 0 2px 4px rgba(37, 211, 102, 0.25), 0 14px 30px -10px rgba(37, 211, 102, 0.65); } }
/* Der runde WhatsApp Knopf im Header bleibt ein Umriss, kein grüner Block */
@media (max-width: 899px) {
.nav .nav__actions .nav__wa { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav .nav__actions .nav__wa::after { display: none; }
}
/* Hauptknopf mit zweiter Zeile: der Hinweis steht im Knopf, nicht darunter */
.btn--stack { flex-direction: column; gap: 2px; min-height: 68px; padding-top: 9px; padding-bottom: 10px; }
.btn--stack .btn__main { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; }
.btn--stack .btn__note { position: relative; z-index: 3; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: rgba(255, 255, 255, 0.82); }
.hero__actions { align-items: flex-start; }
@media (max-width: 767px) {
.hero__actions .btn--stack { min-height: 64px; padding-top: 8px; padding-bottom: 9px; }
.btn--stack .btn__note { font-size: 0.6875rem; }
}
/* ==========================================================================
Kontaktseite: Hero ohne Bildspalte, Kalender von meetergo in einer Karte
========================================================================== */
@media (min-width: 1024px) {
.hero--solo .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--solo .hero__copy { max-width: 720px; }
}
.booking__card { position: relative; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md); overflow: hidden; }
.booking__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(214, 228, 255, 0.28), rgba(214, 228, 255, 0)); list-style: none; }
.booking__meta li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.booking__meta .icon { width: 17px; height: 17px; color: var(--blue); flex: none; }
.booking__frame { display: block; width: 100%; height: clamp(600px, 74vh, 880px); border: 0; background: var(--white); }
.booking__note { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; font-size: 0.8125rem; color: var(--ink-3); }
.booking__note .link-arrow { font-size: 0.8125rem; }
@media (max-width: 767px) {
.booking__meta { gap: 8px 16px; padding: 12px 14px; }
.booking__meta li { font-size: 0.8125rem; }
.booking__frame { height: clamp(560px, 82vh, 760px); }
}
.section-head__title .t-label { display: block; margin-bottom: 14px; }
/* ==========================================================================
Sprachumschalter: statischer Link auf die englische Fassung, kein Skript
========================================================================== */
.nav__lang { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); transition: color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast); }
@media (hover: hover) { .nav__lang:hover { color: var(--blue); background: var(--blue-wash); box-shadow: inset 0 0 0 1px rgba(10, 102, 255, 0.35); } }
.nav__lang:active { transform: scale(0.94); }
.sheet__lang { display: none; }
@media (max-width: 899px) {
.nav .nav__actions .nav__lang { display: none; }
.sheet .sheet__lang { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 8px; padding: 0 8px; border-bottom: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink-3); }
.sheet .sheet__lang .icon { width: 18px; height: 18px; }
}
.ctrl__value > .ctrl__unit:first-child { margin-right: 1px; }
/* ==========================================================================
Rechtliche Seiten: schmale Lesespalte, ruhig, ohne Effekte
========================================================================== */
.page-legal .legal { padding-top: calc(var(--nav-h) + var(--frame) + 56px); }
.legal__wrap { max-width: 720px; }
.legal__title { margin: 18px 0 40px; }
.legal__block { margin-bottom: 40px; }
.legal__block > h2 { margin-bottom: 12px; color: var(--ink-1); }
.legal__block p { color: var(--ink-2); line-height: 1.7; }
.legal__adr { font-size: 1.0625rem; }
.legal__list { display: grid; gap: 10px; margin: 0; }
.legal__list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.legal__list dt { color: var(--ink-3); }
.legal__list dd { margin: 0; color: var(--ink-2); }
.legal__list a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
.legal__list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.legal__title { margin-bottom: 32px; }
}
html[lang="en"] [data-todo]::after { content: "to follow"; }
.legal__intro { margin: -20px 0 40px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
/* Absätze in den Rechtsseiten brauchen Luft, sonst kleben sie aneinander */
.legal__block > p { margin: 0; }
.legal__block > * + * { margin-top: 14px; }
.legal__block > h2 + * { margin-top: 0; }
.legal__block > .legal__list { margin-top: 16px; }
.legal__block p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
/* Die Regel oben war zu schwach gegen .legal__block > p, deshalb hier gezielt */
.page-legal .legal__block > p + p,
.page-legal .legal__block > dl + p,
.page-legal .legal__block > p + dl { margin-top: 15px; }
/* Kalender wird erst auf Klick geladen: bis dahin steht hier eine Erklärung */
.booking__consent { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: clamp(360px, 46vh, 460px); padding: 40px 24px; text-align: center; background: linear-gradient(180deg, rgba(214, 228, 255, 0.26), rgba(255, 255, 255, 0) 60%); }
.booking__consent p { max-width: 46ch; color: var(--ink-2); line-height: 1.65; }
.booking__consent .icon-tile { margin-bottom: 2px; }
.booking__consent .btn { margin-top: 6px; }
.booking__consent-alt { font-size: 0.875rem; color: var(--ink-3); }
.booking__consent-alt a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .booking__consent { min-height: 340px; padding: 32px 18px; gap: 12px; } }
/* Honigtopf gegen Bots: für Menschen unsichtbar, für Vorleseprogramme ausgeblendet */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }