/* ============================================
NORQON — site-prod
palette: navy/blue, clean corporate
typo: Inter (text + display) + Michroma (logo accents)
============================================ */
:root {
--bg: #ffffff;
--bg-soft: #f5f6fa; /* faint blue tint */
--bg-card: #ffffff;
--fg: #143057; /* clear navy blue text */
--fg-muted: #4F6485;
--fg-subtle: #566B88; /* a11y: 5.45:1 auf Weiss (vorher #6B7C95 = 4.25:1, WCAG 1.4.3) */
--line: rgba(20, 48, 87, 0.10);
--line-strong: rgba(20, 48, 87, 0.18);
--accent: #2C5BB8; /* royal blue pill — primary */
--accent-hover: #1F4AA0;
--accent-fg: #FFFFFF; /* white text on blue */
--accent-soft: #E3ECFA;
--accent-glow: #C5D6F4;
--navy: #143057; /* secondary pill — investor-hub style */
--navy-hover: #1B3F6F;
--navy-fg: #FFFFFF;
--shadow-sm: 0 1px 2px rgba(15,34,54,.06);
--shadow-md: 0 2px 8px rgba(15,34,54,.06), 0 1px 2px rgba(15,34,54,.04);
--shadow-lg: 0 16px 48px -12px rgba(15,34,54,.12), 0 4px 12px -4px rgba(15,34,54,.06);
--shadow-pill: 0 6px 24px -8px rgba(15,34,54,.18), 0 2px 6px -2px rgba(15,34,54,.10);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
--container: 1520px;
--pad-section: 120px;
--pad-card: 22px;
/* 2-font system: Inter (text + display) + Michroma (logo accents).
--font-mono kept as an alias to --font-sans for legacy var(--font-mono) refs. */
--font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-logo: "Michroma", "Inter", system-ui, sans-serif;
--font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
padding:
env(safe-area-inset-top, 0)
env(safe-area-inset-right, 0)
env(safe-area-inset-bottom, 0)
env(safe-area-inset-left, 0);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
background: var(--bg); color: var(--fg);
font-family: var(--font-sans);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--accent-fg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* Umbruch-Sicherheitsnetz: lange deutsche Komposita duerfen nie aus dem Container ragen */
:where(h1, h2, h3, h4, h5, h6, p, li, a, dd, dt, figcaption) { overflow-wrap: break-word; }
/* Heading hygiene — consistent tracking + balanced wraps across all h2/h3 */
h2, h3 {
font-family: var(--font-display);
letter-spacing: -0.02em;
text-wrap: balance;
}
h2 { line-height: 1.1; }
h3 { line-height: 1.2; }
p { text-wrap: pretty; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 max(40px, env(safe-area-inset-right)) 0 max(40px, env(safe-area-inset-left));
}
/* Skip link */
.skip-link {
position: absolute; left: 12px; top: 12px;
background: var(--accent); color: var(--accent-fg);
padding: 8px 14px; border-radius: 6px;
font-family: var(--font-sans); font-size: 12px;
transform: translateY(-200%);
transition: transform .2s ease;
z-index: 100;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); }
/* Nur fuer Screenreader sichtbar (visuell ausgeblendet) */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* Display type */
.display {
font-family: var(--font-logo);
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
margin: 0;
text-wrap: balance;
/* Versuchshalber ohne Allcaps — Michroma in Mixed-Case ist ungewöhnlich,
wenn's nicht passt: text-transform: none wieder rein. */
text-transform: none;
}
.display em {
font-style: normal;
color: var(--fg);
font-weight: inherit;
}
/* ============== Nav (iren-style glass pill) ==============
Two states:
• Top of page: brand floats left, links + CTAs float right as bare items.
• After scroll (≥16px): the cluster on the right collapses into a
frosted-glass pill (backdrop-blur + translucent white).
*/
.nav {
position: sticky; top: 0; z-index: 50;
background: transparent;
transition: padding .2s ease;
padding-top: max(22px, env(safe-area-inset-top, 22px));
}
/* Nav extends wider than the content container but stays a bit inset
from the viewport edges for a more poised feel on large screens. */
.nav > .container {
max-width: none;
padding: 0 56px;
}
@media (min-width: 1440px) {
.nav > .container { padding: 0 96px; }
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
height: 80px;
}
.nav-cluster {
display: flex; align-items: center; gap: 32px;
padding: 8px 8px 8px 32px;
border-radius: var(--radius-pill);
background: transparent;
border: 1px solid transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled .nav-cluster {
background: rgba(248, 250, 253, 0.70);
backdrop-filter: saturate(120%) blur(18px);
-webkit-backdrop-filter: saturate(120%) blur(18px);
border-color: rgba(20, 48, 87, 0.10);
box-shadow: var(--shadow-pill);
}
.brand {
display: flex; align-items: center; gap: 12px;
color: var(--fg);
padding: 8px 16px;
border-radius: 999px;
transition: background .25s ease, backdrop-filter .25s ease;
}
/* Glas-Pill um das Logo erst beim Scrollen — analog zur Nav-Cluster-Pill rechts.
Über der dunklen Hero-Sektion mit dunklem Glas (Logo bleibt weiß lesbar),
über hellen Sektionen reicht das transparente Default-Layout. */
.nav.scrolled .brand {
/* Default-Pill auf hellen Sektionen — analog zur Nav-Cluster-Pill rechts. */
background: rgba(248, 250, 253, 0.55);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
border: 1px solid rgba(20, 48, 87, 0.05);
}
.nav.scrolled.over-dark .brand {
/* Dunkle Pill über Hero/Strip — weißes Logo bleibt lesbar. */
background: rgba(8, 18, 40, 0.48);
border-color: rgba(255, 255, 255, 0.04);
}
/* Inline NORQON logo. Strokes use currentColor (navy default, white over
dark sections); the Q tail keeps its fixed cyan. On mobile the wordmark
collapses to just the Q on scroll (see mobile block). */
.brand-logo-wrap { display: inline-block; }
.brand-logo-svg {
height: 32px;
width: auto;
display: block;
color: #282c64;
}
.nav.over-dark .brand-logo-svg { color: #FFFFFF; }
.nav.over-dark .nav-links { color: #FFFFFF; transition: color .2s ease; }
.nav.over-dark .nav-links a:hover,
.nav.over-dark .nav-links a:focus-visible { color: var(--accent-glow); }
/* Fokusring auf dunklem Hero sichtbar halten (heller Blauton statt --accent) */
.nav.over-dark .nav-links a:focus-visible { outline-color: var(--accent-glow); }
/* Scrolled + over-dark: swap glass pill to a darker tone so the cluster
doesn't read as a bright blob on the navy bg. */
.nav.scrolled.over-dark .nav-cluster {
background: rgba(20, 32, 60, 0.55);
border-color: rgba(255, 255, 255, 0.12);
}
.brand-mark {
width: 40px; height: 40px; border-radius: 11px;
background: var(--accent); color: #FFFFFF;
display: grid; place-items: center;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 2px rgba(15,34,54,0.10);
}
.brand-mark svg { width: 22px; height: 22px; }
.nav-links {
display: flex; gap: 28px;
font-size: 15px; font-weight: 500;
color: var(--fg);
}
.nav-links a {
position: relative; padding: 6px 4px;
transition: color .15s ease;
}
.nav-links a:hover { color: var(--accent-hover); }
.nav-links a:focus-visible {
color: var(--accent-hover);
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 2px;
}
.nav-cta { display: flex; gap: 8px; align-items: center; }
@media (max-width: 880px) { .nav-links { display: none; } }
/* Buttons — iren-style pills */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 22px;
font-size: 14px; font-weight: 500;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer; font-family: inherit;
transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
white-space: nowrap;
letter-spacing: -0.003em;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary {
background: var(--accent); color: var(--accent-fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 2px 8px -2px rgba(15,34,54,0.10);
}
.btn-primary:hover {
background: var(--accent-hover);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 8px 20px -4px rgba(15,34,54,0.18);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--navy); color: var(--navy-fg);
font-style: italic; font-weight: 500;
}
.btn-secondary:hover {
background: var(--navy-hover);
transform: translateY(-1px);
}
.btn-ghost { color: var(--fg); border-color: var(--line-strong); background: rgba(255,255,255,0.6); }
.btn-ghost:hover { background: var(--bg-card); border-color: var(--fg-muted); }
.btn-lg { padding: 13px 26px; font-size: 14px; }
.arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
/* Eyebrow */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px 5px 8px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-size: 12px; font-weight: 500;
color: var(--fg-muted);
background: var(--bg-card);
font-family: var(--font-sans);
letter-spacing: 0.10em;
text-transform: none;
}
.eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.eyebrow .dot { animation: none; }
}
/* ============== HERO V2 ============== */
/* Hero + EU-Strip füllen exakt den Viewport.
- Stack zieht sich mit margin-top: -102px hinter die Sticky-Nav, das Video
reicht so unter die Nav.
- height: 100vh/100dvh: der negative margin-top zieht den Stack in den von der
Sticky-Nav freigehaltenen Platz, sodass der sichtbare Bereich exakt 100vh ist
und die EU-Strip am unteren Rand sitzt.
- Grid 1fr/auto: Strip bekommt ihre natürliche Höhe garantiert, der Rest
geht ans Hero-Video. Bei kleinem Viewport schrumpft nur das Video. */
.hero-stack {
display: grid;
/* minmax(0, 1fr) entfernt den min-content-Floor, sodass das Hero-Track
wirklich schrumpft, wenn die EU-Strip ihren Platz braucht. */
grid-template-rows: minmax(0, 1fr) auto;
height: 100vh;
height: 100dvh;
margin-top: -102px;
}
.hero-stack .hero-v2 {
min-height: 0;
margin-top: 0;
}
.hero-v2 {
position: relative;
margin-top: -102px;
/* Reduziertes Padding, damit der Content auch bei kleinem Hero-Track
hochrutscht; overflow: hidden clipt was nicht reinpasst. */
padding: 110px 0 40px;
overflow: hidden;
display: flex;
align-items: center;
}
/* Dark-corporate variant: very dark navy base behind the video,
white headline text, slightly darkened video overlay. */
.hero-v2.hero-dark { background: #0E1F44; color: #FFFFFF; }
.hero-v2.hero-dark .hero-sub { color: rgba(255, 255, 255, 0.78); }
.hero-v2.hero-dark .eyebrow {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.88);
}
.hero-v2.hero-dark .eyebrow .dot { background: var(--accent-glow); }
.hero-v2.hero-dark .rotator-word { color: var(--accent-glow); }
.hero-v2 > .container { width: 100%; }
.hero-v2-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
pointer-events: none;
opacity: 1;
background: #0E1F44;
}
.hero-v2-bg {
position: absolute; inset: 0; pointer-events: none;
z-index: 1;
/* Dark-navy gradient veil — slightly transparent at top so the video
reads, opaque enough at bottom to anchor the section and let the
fade into the next section feel intentional. */
background:
linear-gradient(180deg, rgba(14, 31, 68, 0.45) 0%, rgba(14, 31, 68, 0.75) 100%),
radial-gradient(120% 80% at 50% 30%, rgba(14, 31, 68, 0.0) 0%, rgba(14, 31, 68, 0.35) 100%);
}
@media (prefers-reduced-motion: reduce) {
.hero-v2-video { display: none; }
}
.hero-dots {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-dots .dot {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: color-mix(in oklab, var(--fg) 22%, transparent);
animation: heroFloatDot 14s linear infinite;
}
@keyframes heroFloatDot {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-110%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-dots .dot { animation: none; opacity: 0.5; }
}
.hero-v2-content { position: relative; z-index: 2; }
.hero-v2-centered {
display: block;
position: relative;
z-index: 2;
text-align: center;
}
.hero-v2-centered .hero-v2-text {
display: flex; flex-direction: column; align-items: center;
text-align: center;
max-width: 880px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-v2-centered .hero-v2-text .eyebrow { margin-bottom: 28px; }
.hero-v2-centered .hero-v2-text h1.display { font-size: clamp(40px, 5.6vw, 80px); }
.hero-v2-centered .rotator { text-align: center; }
.hero-v2-centered .rotator-sizer { text-align: center; }
/* Center the absolutely-positioned rotator-word within the sizer-reserved
width so the swapped word always stays optically centered, regardless
of word length. */
.hero-v2-centered .rotator-word {
left: 50%;
transform: translateX(-50%);
text-align: center;
}
/* Rotating verb inside hero H1 — letter-by-letter "swirl" rotation.
Sizer (italic, hidden) reserves the maximum width and baseline.
Word is absolutely positioned over the sizer; JS injects letters as
L elements. Two classes drive the animation:
.is-out — current letters rotate out around Y axis with staggered delay
.is-in — new letters rotate in around Y axis with staggered delay
*/
.rotator {
--rotator-line: 1.3em;
--rotator-letter-stagger: 24ms;
--rotator-letter-dur: 220ms;
position: relative;
display: inline-block;
vertical-align: baseline;
text-align: left;
}
.rotator-sizer {
visibility: hidden;
display: inline-block;
white-space: nowrap;
line-height: var(--rotator-line);
}
.rotator-word {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
color: var(--accent-hover);
font-weight: inherit;
line-height: var(--rotator-line);
perspective: 800px;
}
.rotator-word > i {
display: inline-block;
font-style: inherit;
transform-origin: center;
backface-visibility: hidden;
will-change: transform, opacity;
}
.rotator-word.is-out > i {
animation: rotator-letter-out var(--rotator-letter-dur) cubic-bezier(0.7, 0, 0.84, 0) forwards;
animation-delay: calc(var(--idx, 0) * var(--rotator-letter-stagger));
}
.rotator-word.is-in > i {
/* Each incoming letter is delayed by the OUT duration so it starts its
in-rotation exactly when the outgoing letter at the same index has
finished — no overlap, no gap, a single continuous rotation per slot. */
opacity: 0;
animation: rotator-letter-in var(--rotator-letter-dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--idx, 0) * var(--rotator-letter-stagger) + var(--rotator-letter-dur));
}
@keyframes rotator-letter-out {
0% { opacity: 1; transform: rotateX(0deg) translateY(0); }
100% { opacity: 0; transform: rotateX(-90deg) translateY(-10px); }
}
@keyframes rotator-letter-in {
0% { opacity: 0; transform: rotateX(90deg) translateY(10px); }
100% { opacity: 1; transform: rotateX(0deg) translateY(0); }
}
@media (max-width: 640px) {
.rotator { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.rotator-word > i { animation: none !important; opacity: 1; transform: none; }
}
.hero-v2-text .hero-sub {
margin: 22px 0 32px; max-width: 540px;
font-size: 16.5px; color: var(--fg-muted); line-height: 1.6;
}
.hero-v2-text .hero-actions {
justify-content: flex-start; gap: 12px;
flex-wrap: wrap; display: flex;
}
.hero-v2-stage {
position: absolute;
top: 0; right: 3%; bottom: 0;
width: 75%;
max-width: 945px;
z-index: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: visible;
}
@media (max-width: 760px) {
.hero-v2 {
padding: 130px 0 80px;
}
.hero-v2-text .eyebrow {
font-size: 10.5px;
padding: 4px 10px 4px 8px;
margin-bottom: 18px;
}
.hero-v2-text h1.display { font-size: clamp(32px, 9vw, 42px); line-height: 1.05; }
.hero-v2-text .hero-sub { margin: 14px 0 0; font-size: 15px; }
.nav-cta .btn { padding: 8px 14px; font-size: 13px; gap: 6px; }
}
/* Hero marquee — scrolling label/value pills along the bottom of the hero.
Two copies of the pill set are rendered; translating the track by -50%
over the animation cycle produces a seamless infinite scroll. */
/* Soft bottom fade — covers the lowest 5% of the hero and blends from
fully transparent at the top edge of the band to solid page bg at the
very bottom, so the transition into the next (white) section is smooth.
Sits above the video/veil but below the marquee so the pills stay crisp. */
.hero-fade-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5%;
z-index: 2;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--bg) 100%);
}
.hero-v2.hero-dark .hero-fade-bottom {
background: linear-gradient(to bottom, rgba(14, 31, 68, 0) 0%, #0E1F44 100%);
}
/* Hero-Marquee — scrollende Trust-Pills am Hero-Boden */
.hero-marquee {
position: absolute;
left: 0; right: 0;
bottom: 12px;
z-index: 3;
pointer-events: none;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.hero-marquee-track {
display: flex;
width: max-content;
gap: 14px;
animation: hero-marquee-scroll 42s linear infinite;
will-change: transform;
}
.hero-marquee-pill {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
white-space: nowrap;
opacity: 0.88;
}
.hero-marquee-pill .lbl {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.10em;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.hero-marquee-pill .val {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
padding-left: 12px;
margin-left: 12px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
letter-spacing: -0.005em;
}
@keyframes hero-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-marquee-track { animation: none; }
}
@media (max-width: 640px) {
.hero-marquee { bottom: 24px; }
.hero-marquee-pill { padding: 7px 14px; }
.hero-marquee-pill .lbl { font-size: 10px; }
.hero-marquee-pill .val { font-size: 12px; padding-left: 10px; margin-left: 10px; }
}
/* ============== Focus brackets (compact ribbon directly below hero, dark) ============== */
.focus-brackets {
background: #0E1F44;
padding: 28px 0 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brackets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.bracket {
display: grid;
grid-template-columns: 96px 1fr;
gap: 20px;
align-items: start;
}
/* EU-AI-Act-Strip — prominent statement band below the hero. Distinct
sub-band bg (a shade darker than hero), icon left, eyebrow + statement,
CTA right. No card pill — just borders + bg to mark the band. */
.eu-strip {
padding: 0;
/* Same Navy als Hero, Strip liest sich als Fortsetzung der Hero-Section. */
background: #0E1F44;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
}
/* Akzentlinie am oberen Rand: Brand-Gradient von links nach rechts ausfading. */
.eu-strip::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-glow) 40%, transparent 100%);
}
.eu-strip-link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
padding: 26px 0 30px;
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
transition: opacity .2s ease;
border-radius: 4px;
}
.eu-strip-link:hover { opacity: 0.95; }
.eu-strip-link:focus-visible {
outline: 2px solid var(--accent-glow);
outline-offset: 6px;
}
/* Flag-shaped icon container — 3:2 aspect, EU-official blue background,
subtle wave-light gradient to suggest a flag rather than a static square.
The chip+stars SVG sits centered (square content on wider field). */
/* Flag-shape — official EU 3:2 aspect, but visibly banner-wide
(180×108). The SVG icon is centered using grid + auto margins, with
square aspect-ratio so it never gets stretched by the wider container. */
.eu-strip-flag {
width: 140px;
height: 84px;
border-radius: 2px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.18) 100%),
#003399;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
display: grid;
place-items: center;
flex-shrink: 0;
position: relative;
}
.eu-strip-flag img {
width: 72px;
height: 72px;
display: block;
object-fit: contain;
flex-shrink: 0;
}
.eu-strip-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.eu-strip-eyebrow {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: none;
color: var(--accent-glow);
}
.eu-strip-title {
font-family: var(--font-logo);
font-weight: 400;
font-size: clamp(26px, 2.6vw, 34px);
letter-spacing: 0.02em;
text-transform: none;
line-height: 1.05;
margin: 2px 0 4px;
color: #FFFFFF;
}
.eu-strip-statement {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
margin: 0;
max-width: 92ch;
}
.eu-strip-cta {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--accent-glow);
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(197, 214, 244, 0.55);
}
.eu-strip-arrow {
font-size: 18px;
transition: transform .25s ease;
}
.eu-strip-link:hover .eu-strip-arrow { transform: translateX(4px); }
@media (max-width: 880px) {
.eu-strip-link {
grid-template-columns: 120px 1fr;
grid-template-rows: auto auto;
gap: 18px 18px;
padding: 36px 0;
}
.eu-strip-flag { width: 120px; height: 72px; grid-row: 1; grid-column: 1; }
.eu-strip-body { grid-row: 1; grid-column: 2; }
.eu-strip-title { font-size: 22px; }
.eu-strip-statement { font-size: 15px; }
.eu-strip-cta { grid-row: 2; grid-column: 1 / span 2; padding-top: 6px; }
}
.bracket-image {
width: 96px;
height: 96px;
border-radius: 12px;
overflow: hidden;
display: grid;
place-items: center;
background: linear-gradient(135deg, #143057 0%, #2C5BB8 100%);
flex-shrink: 0;
}
.bracket-image img {
width: 64%;
height: 64%;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.bracket-image-placeholder {
/* gradient bg already provides a quiet visual until user supplies an
image; can be replaced with ![]()
later */
}
/* Photo bracket-image: full-colour image, fills the 96x96 box via cover. */
.bracket-image-photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
opacity: 1;
}
/* SVG bracket-image: the SVG carries its own colours (see eu-ai-act-icon.svg),
so no filter inversion. Fills almost the whole tile (uppercase mark feel). */
.bracket-image-svg img {
width: 88%;
height: 88%;
filter: none;
opacity: 1;
}
/* Head-portrait variant — the head subject sits upper-right in the source.
Scale up and translate to visually re-center the head within the 96x96 box. */
.bracket-image-head img {
transform: scale(1.4) translate(-7%, 8%);
transform-origin: center;
}
/* Blue-duotone variant — the image itself is pre-rendered in the
light→dark blue duotone palette (see ganzheitliche-ki.png), so the
tile keeps its standard gradient bg and the icon is the coloured
part. No CSS filter or blend mode needed. */
.bracket-image-blue img {
filter: none;
mix-blend-mode: normal;
}
.bracket-content {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 6px;
}
.bracket-content h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 21px;
letter-spacing: -0.015em;
line-height: 1.18;
margin: 0;
color: #FFFFFF;
}
.bracket-content p {
font-size: 14.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
@media (max-width: 900px) {
.brackets-grid { grid-template-columns: 1fr; gap: 18px; }
.focus-brackets { padding: 48px 0 40px; }
}
/* ============================================
HERO VISUAL — Auto-Hero (React/Vite mount)
============================================ */
.auto-hero-mount {
width: 100%;
height: auto;
background: none;
border: 0;
box-shadow: none;
padding: 0;
overflow: visible;
}
.auto-hero-mount svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* Tailwind-utility shims used by the imported component */
.w-full { width: 100%; }
.h-auto { height: auto; }
/* ============== EU AI Act / Compliance section ============== */
.compliance-section {
padding: 110px 0 120px;
background: #0E1F44;
color: #FFFFFF;
}
.compliance-section .compliance-head h2.display { color: #FFFFFF; }
.compliance-section .compliance-head p { color: rgba(255, 255, 255, 0.78); }
.compliance-section .compliance-items { border-top-color: rgba(255, 255, 255, 0.12); }
.compliance-section .compliance-item { border-bottom-color: rgba(255, 255, 255, 0.12); }
.compliance-section .compliance-item-body h3 { color: #FFFFFF; }
.compliance-section .compliance-item-body p { color: rgba(255, 255, 255, 0.78); }
.compliance-section .compliance-item-num { color: var(--accent-glow); }
.compliance-head {
margin: 0 0 64px;
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 28px 48px;
}
.compliance-head-text {
flex: 1 1 480px;
max-width: 1000px;
min-width: 0;
}
.compliance-head h2.display {
font-size: clamp(32px, 3.6vw, 48px);
line-height: 1.06;
margin: 0 0 20px;
}
.compliance-head p {
color: var(--fg-muted);
font-size: 17px;
line-height: 1.6;
margin: 0;
/* Füllt die breitere Textspalte natürlich aus; pretty verhindert nur
einzelne Wörter in der letzten Zeile, ohne die Zeilen zu stauchen. */
max-width: none;
text-wrap: pretty;
}
/* CTA rechts neben dem Text, unten bündig; bricht auf schmalen Screens darunter. */
.compliance-head-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, 0.30);
color: #FFFFFF;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.compliance-head-cta:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--accent-glow);
transform: translateY(-2px);
}
.compliance-head-cta .arrow { transition: transform .2s ease; }
.compliance-head-cta:hover .arrow { transform: translateX(3px); }
/* Editorial 2-col: dossier-card left, numbered list right */
.compliance-layout {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 64px;
align-items: stretch;
}
/* Linke Karte — Compliance-Dossier mit EU-Flagge-Background, dunkler Overlay.
align-stretch lässt sie auf die Höhe der rechten Bullet-Liste wachsen. */
.compliance-dossier {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
isolation: isolate;
min-height: 480px;
}
.compliance-dossier-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.compliance-dossier-overlay {
position: absolute;
inset: 0;
z-index: 1;
/* Lighter overlay top + middle so the EU flag / circuit pattern shines
through; darken slightly at the bottom for the footer-line legibility. */
background:
linear-gradient(180deg,
rgba(6, 17, 42, 0.50) 0%,
rgba(6, 17, 42, 0.55) 45%,
rgba(6, 17, 42, 0.82) 100%);
}
.compliance-dossier-inner {
position: relative;
z-index: 2;
padding: 38px 38px 32px;
display: flex;
flex-direction: column;
height: 100%;
min-height: inherit;
color: #FFFFFF;
}
.compliance-dossier-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
margin-bottom: 8px;
}
.compliance-dossier-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: none;
color: #FFFFFF;
}
.compliance-dossier-meta {
font-family: var(--font-sans);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: none;
color: rgba(255, 255, 255, 0.62);
}
.compliance-standards {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.compliance-standards li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 22px 0 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.compliance-standards li:last-child { border-bottom: 0; }
.compliance-standards-name {
font-family: var(--font-logo);
font-size: 19px;
letter-spacing: 0.04em;
text-transform: none;
color: #FFFFFF;
}
.compliance-standards-status {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: none;
color: var(--accent-glow);
position: relative;
/* Feste Spaltenbreite + Linksausrichtung: alle Punkte auf einer vertikalen
Linie, alle Worte starten an derselben Stelle (statt rechtsbuendig). */
width: 140px;
text-align: left;
padding-left: 18px;
}
.compliance-standards-status::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-glow);
transform: translateY(-50%);
animation: complianceDotPulse 2.4s ease-out infinite;
}
@keyframes complianceDotPulse {
0% { box-shadow: 0 0 0 0 rgba(197, 214, 244, 0.45); }
70% { box-shadow: 0 0 0 8px rgba(197, 214, 244, 0); }
100% { box-shadow: 0 0 0 0 rgba(197, 214, 244, 0); }
}
/* Versetzter Start, damit die Punkte nacheinander pulsieren statt im Gleichtakt. */
.compliance-standards li:nth-child(2) .compliance-standards-status::before { animation-delay: .35s; }
.compliance-standards li:nth-child(3) .compliance-standards-status::before { animation-delay: .7s; }
.compliance-standards li:nth-child(4) .compliance-standards-status::before { animation-delay: 1.05s; }
@media (prefers-reduced-motion: reduce) {
.compliance-standards-status::before {
animation: none;
box-shadow: 0 0 0 3px rgba(197, 214, 244, 0.18);
}
}
.compliance-dossier-foot {
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--font-sans);
font-size: 11.5px;
letter-spacing: 0.10em;
text-transform: none;
color: rgba(255, 255, 255, 0.62);
}
/* Rechte Spalte — nummerierte Detail-Zeilen, Editorial-Style */
.compliance-items {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.compliance-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 28px;
padding: 32px 0;
border-bottom: 1px solid var(--line);
align-items: start;
}
.compliance-item-num {
font-family: var(--font-logo);
font-size: 28px;
letter-spacing: 0.02em;
color: var(--accent);
line-height: 1;
padding-top: 4px;
}
.compliance-item-body h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 21px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0 0 8px;
color: var(--fg);
}
.compliance-item-body p {
font-size: 14.5px;
line-height: 1.6;
color: var(--fg-muted);
margin: 0;
max-width: 60ch;
}
@media (max-width: 980px) {
.compliance-layout { grid-template-columns: 1fr; gap: 36px; }
.compliance-dossier { min-height: 460px; }
}
@media (max-width: 640px) {
.compliance-section { padding: 72px 0 88px; }
.compliance-dossier { min-height: 420px; }
.compliance-dossier-inner { padding: 28px 26px 24px; }
.compliance-standards-name { font-size: 17px; }
.compliance-item { grid-template-columns: 56px 1fr; gap: 18px; padding: 26px 0; }
.compliance-item-num { font-size: 22px; }
.compliance-item-body h3 { font-size: 19px; }
}
/* ============== Section base ============== */
.section { padding: var(--pad-section) 0; position: relative; scroll-margin-top: 100px; }
[id] { scroll-margin-top: 100px; }
.section.is-soft { background: var(--bg-soft); }
.section-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
align-items: end; margin-bottom: 64px;
}
.section-head h2 { font-size: clamp(36px, 4.4vw, 64px); }
.section-head p {
font-size: 16px; color: var(--fg-muted);
max-width: 460px; text-wrap: pretty;
margin: 0;
}
@media (max-width: 880px) { .section-head { grid-template-columns: 1fr; gap: 18px; } }
.section-eyebrow {
display: block; font-family: var(--font-sans);
font-size: 12px; color: var(--fg-muted);
letter-spacing: 0.14em; margin-bottom: 18px;
text-transform: none; font-weight: 500;
}
/* ============== Leistungen — Split-Block Stack ============== */
.leistungen-section {
padding: 64px 0 120px;
background: var(--bg);
}
.leistungen-head {
max-width: 760px;
margin: 0 0 72px;
}
.leistungen-head .section-eyebrow { display: inline-block; margin-bottom: 18px; }
.leistungen-head h2.display {
font-size: clamp(32px, 3.4vw, 48px);
line-height: 1.06;
margin: 0 0 16px;
}
.leistungen-head p {
color: var(--fg-muted);
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.leistung {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"visual body"
"slogan body";
gap: 14px 48px;
align-items: stretch;
padding: 36px 0;
border-top: 1px solid var(--line);
}
.leistung-visual { grid-area: visual; }
.leistung-body { grid-area: body; }
/* Slogan als knappe Bildunterschrift direkt unter der Grafik (ohne „Norqon"/Trennlinie) */
.leistung-slogan {
grid-area: slogan;
margin: 0;
max-width: 460px;
font-size: 15px;
font-style: italic;
line-height: 1.45;
color: var(--fg-subtle);
}
.leistung:last-child { border-bottom: 1px solid var(--line); }
/* Left: visual area with gradient bg + a wireframe mock */
.leistung-visual {
position: relative;
height: 420px;
border-radius: 16px;
overflow: hidden;
display: grid;
place-items: center;
padding: 32px;
isolation: isolate;
}
.leistung-visual::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 60%),
radial-gradient(80% 60% at 80% 80%, rgba(0,0,0,0.18) 0%, transparent 60%);
pointer-events: none;
}
.leistung-visual-a {
background: linear-gradient(135deg, #1F4AA0 0%, #143057 60%, #0A1E40 100%);
}
.leistung-visual-b {
background: linear-gradient(135deg, #2C5BB8 0%, #1F4AA0 55%, #143057 100%);
}
/* Prev/Next-Nav für die Chat-Demo — zwei runde Glass-Buttons an den
Seitenrändern der Visual-Card, springen zur vorigen/nächsten Konversation. */
.leistung-chat-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);
color: #FFFFFF;
font-family: var(--font-display);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: background .2s ease, transform .2s ease, border-color .2s ease;
padding: 0;
}
.leistung-chat-nav:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-50%) scale(1.08);
}
.leistung-chat-nav:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 3px;
}
.leistung-chat-nav.prev { left: 14px; }
.leistung-chat-nav.next { right: 14px; }
.cprog-dot { cursor: pointer; }
.leistung-visual-c {
background: linear-gradient(135deg, #143057 0%, #0A1E40 55%, #0E1F44 100%);
}
/* Auto-Hero-Grafik soll bis an die Kartenränder laufen (kein 32px-Rahmen).
Höhere Spezifität, damit es auch die Mobile-Paddings übersteuert. */
.leistung-visual.leistung-visual-c { padding: 0; }
/* Leistung-Visual c → Auto-Hero direkt auf dem blauen Hintergrund.
Container hat fixe Maße (= .leistung-visual), wächst NICHT mit dem
animierten SVG-Inhalt. Cards, die bei der Animation aus dem Container
wandern, faden über eine Radial-Mask weich aus. */
.leistung-auto-hero {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
place-self: stretch;
-webkit-mask-image: radial-gradient(ellipse 80% 85% at 54% 50%, #000 35%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.2) 72%, transparent 90%);
mask-image: radial-gradient(ellipse 80% 85% at 54% 50%, #000 35%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.2) 72%, transparent 90%);
}
.leistung-auto-hero .auto-hero-mount {
width: 140%;
height: 140%;
display: grid;
place-items: center;
transform: translate(-17%, -17%);
}
/* Der Preact-Mount rendert einen Zwischen-Div .w-full ums SVG. Ohne Höhe
fällt das SVG auf seinen intrinsischen viewBox-Ratio zurück und überragt
bei schmalen Viewports den 420px-Container — die untere Icon-Reihe wird
dann durch overflow:hidden hart abgeschnitten. Stretch + 100%/100%, damit
das SVG die Container-Höhe respektiert. */
.leistung-auto-hero .auto-hero-mount > div {
width: 100%;
height: 100%;
/* Default min-height/min-width auto würde das Grid-Item auf die intrinsische
SVG-Größe blasen und die explizite 100%-Höhe übersteuern. */
min-width: 0;
min-height: 0;
align-self: stretch;
justify-self: stretch;
display: grid;
place-items: center;
}
.leistung-auto-hero .auto-hero-mount svg {
width: 100%;
height: 100%;
max-height: 100%;
min-height: 0;
display: block;
}
/* AI-Network SVG — KI-Knoten im Zentrum, 6 Datenquellen orbital, Nutzer links.
Verbindungen: dezente interne Linien (KI↔Daten), prominente Nutzer→KI-Linie
mit animiertem Flow-Dot, gestrichelte Bezier-Kurven Nutzer→Datenquellen. */
.ai-network {
--ai-text-color: #0E1F44;
width: 100%;
height: auto;
max-height: 100%;
color: #FFFFFF;
display: block;
position: relative;
z-index: 1;
}
.ai-net-internal line {
stroke: currentColor;
stroke-width: 0.6;
opacity: 0.22;
}
.ai-user-data path {
fill: none;
stroke: currentColor;
stroke-width: 1.25;
opacity: 0.4;
stroke-dasharray: 5 7;
animation: ai-dash-flow 22s linear infinite;
}
.ai-user-line {
stroke: currentColor;
stroke-width: 2.5;
opacity: 0.75;
}
.ai-pulse {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.ai-label {
fill: var(--ai-text-color);
font-family: var(--font-sans);
font-weight: 700;
font-size: 17px;
letter-spacing: 0.06em;
}
.ai-bubble {
/* Fill kommt vom Inline-Attribut (url(#bubbleFill) — Radialer Gradient).
Stroke dezent, damit das Icon dominiert und der Ring nur leise andeutet. */
stroke: currentColor;
stroke-width: 1;
stroke-opacity: 0.28;
}
.ai-data-label {
fill: currentColor;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
opacity: 0.85;
}
.ai-user-label {
fill: currentColor;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
opacity: 0.85;
}
@keyframes ai-dash-flow {
to { stroke-dashoffset: -240; }
}
@media (prefers-reduced-motion: reduce) {
.ai-user-data path { animation: none; }
}
/* ── Chat-Window (Wissensbasis-Leistung) ───────────────────────────────
Programmierte Chat-UI inspiriert vom Superkind-Beispiel:
Header mit Name + Meta-Tag (Wissensbasis-Score), User- und KI-Messages
in der Nachrichtenliste, deaktiviertes Eingabefeld mit Senden-Icon. */
.leistung-chat {
position: relative;
z-index: 1;
background: #FFFFFF;
border-radius: 14px;
padding: 18px 18px 12px;
width: 100%;
max-width: 380px;
font-family: var(--font-sans);
color: var(--fg);
box-shadow:
0 1px 2px rgba(15, 34, 54, 0.08),
0 22px 50px -16px rgba(15, 34, 54, 0.45);
display: flex;
flex-direction: column;
gap: 14px;
/* Beide Achsen mittig im umliegenden .leistung-visual-Grid */
place-self: center;
margin: auto;
}
.leistung-chat-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.leistung-chat-name {
font-size: 14px;
font-weight: 600;
color: var(--fg);
}
.leistung-chat-meta {
font-size: 12px;
color: var(--fg-muted);
}
.leistung-chat-meta-pct {
font-weight: 600;
color: #2D7A48;
}
.leistung-chat-stream {
display: flex;
flex-direction: column;
gap: 10px;
/* Fixe Höhe — passt mit Header + Input + Paddings in die 420px hohe
.leistung-visual, sodass die Chat-Card nicht unten herausragt. */
height: 200px;
overflow-y: auto;
overscroll-behavior: contain;
scroll-behavior: smooth;
/* Scrollbar visuell ausblenden, Scroll-Funktion bleibt (macOS-Style). */
scrollbar-width: none;
-ms-overflow-style: none;
}
.leistung-chat-stream::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Pin Messages zur Unterkante, solange der Stream nicht voll ist —
ohne justify-content: flex-end, das Scrolling kaputt machen würde. */
.leistung-chat-stream > :first-child { margin-top: auto; }
/* Sanftere Animation auf neu erscheinenden Nachrichten — länger + weiches Easing. */
.cmsg { animation: cmsg-slide-in 420ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.cmsg {
font-size: 13px;
line-height: 1.5;
max-width: 85%;
word-wrap: break-word;
}
.cmsg-user {
align-self: flex-end;
background: var(--accent);
border: none;
color: #FFFFFF;
padding: 8px 12px;
border-radius: 14px 14px 4px 14px;
box-shadow: 0 1px 2px rgba(15, 34, 54, 0.10);
}
.cmsg-ai {
align-self: flex-start;
background: #F1F4F9;
border: 1px solid rgba(15, 34, 54, 0.06);
color: var(--fg);
padding: 8px 12px;
border-radius: 14px 14px 14px 4px;
}
.cmsg-ai .cword {
display: inline;
opacity: 0;
animation: cword-in 220ms ease-out forwards;
}
@keyframes cword-in {
from { opacity: 0; }
to { opacity: 1; }
}
.ccursor {
display: inline-block;
width: 2px;
height: 0.95em;
background: var(--accent);
margin-left: 2px;
vertical-align: -0.12em;
border-radius: 1px;
animation: ccursor-blink 900ms steps(2, end) infinite;
}
@keyframes ccursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Slide+fade on each new message bubble */
.cmsg { animation: cmsg-slide-in 280ms ease-out backwards; }
@keyframes cmsg-slide-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* AI „tippt“-Indikator: drei pulsierende Punkte */
.cmsg-thinking {
display: inline-flex;
gap: 4px;
padding: 6px 2px;
}
.cmsg-thinking .cdot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fg-subtle);
animation: cdot-pulse 1s ease-in-out infinite;
}
.cmsg-thinking .cdot:nth-child(2) { animation-delay: 0.15s; }
.cmsg-thinking .cdot:nth-child(3) { animation-delay: 0.30s; }
@keyframes cdot-pulse {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.cmsg { animation: none; }
.cmsg-thinking .cdot { animation: none; opacity: 0.6; }
}
.leistung-chat-input {
display: flex;
align-items: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
pointer-events: none;
user-select: none;
}
.leistung-chat-fake-input {
flex: 1;
min-width: 0;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 12px;
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--fg-subtle);
}
.leistung-chat-fake-send {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--fg);
color: #FFFFFF;
display: grid;
place-items: center;
flex-shrink: 0;
}
/* Chat-Progress — Slider unter dem Chat, zeigt wann das nächste
Gespräch startet. Aktiver Dot ist eine Pille mit Fill-Animation. */
.leistung-chat-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding-top: 2px;
}
.cprog-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(15, 34, 54, 0.16);
position: relative;
overflow: hidden;
transition: width .4s cubic-bezier(0.22, 0.61, 0.36, 1), background .25s ease;
}
.cprog-dot.is-done { background: rgba(15, 34, 54, 0.30); }
.cprog-dot.is-active {
width: 24px;
background: rgba(15, 34, 54, 0.14);
}
.cprog-dot.is-active::after {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: var(--fg);
border-radius: inherit;
animation: cprog-fill linear forwards;
animation-duration: var(--cprog-dur, 22s);
}
@keyframes cprog-fill {
from { width: 0; }
to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cprog-dot.is-active::after { animation: none; width: 60%; }
}
/* Right: body content (headline, paragraph, link, meta block at bottom) */
.leistung-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 0 16px 12px;
}
.leistung-body h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(26px, 2.4vw, 34px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 16px;
color: var(--fg);
}
.leistung-body > p {
font-size: 16px;
line-height: 1.6;
color: var(--fg-muted);
margin: 0 0 22px;
}
.leistung-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 500;
color: var(--accent);
border-bottom: 1px solid var(--accent);
padding-bottom: 3px;
align-self: flex-start;
margin-bottom: 36px;
transition: gap .2s ease;
}
.leistung-link:hover { gap: 10px; }
.leistung-link .arrow { display: inline-block; }
.leistung-meta {
display: flex; align-items: flex-end;
gap: 24px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.leistung-meta > div { max-width: 360px; }
.leistung-eyebrow {
font-family: var(--font-logo);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: none;
color: var(--fg);
display: inline-block;
margin-bottom: 6px;
}
.leistung-meta p {
font-size: 13px;
color: var(--fg-muted);
line-height: 1.5;
margin: 0;
}
.leistung-stat {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(22px, 2vw, 30px);
letter-spacing: -0.01em;
color: var(--accent);
white-space: nowrap;
}
@media (max-width: 900px) {
.leistung { grid-template-columns: 1fr; grid-template-areas: "visual" "slogan" "body"; gap: 16px; padding: 28px 0; }
.leistung-visual { min-height: 280px; padding: 24px; }
.leistung-body { padding: 8px 0 8px 0; }
.leistung-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ============== Process ============== */
.process {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: start;
}
.process-list { display: flex; flex-direction: column; gap: 4px; }
.process-visual {
position: sticky; top: 90px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
min-height: 460px;
box-shadow: var(--shadow-md);
}
.process-visual-inner {
height: 100%; display: flex;
flex-direction: column; gap: 16px;
animation: fadeIn .4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 980px) {
.process { grid-template-columns: 1fr; gap: 32px; }
.process-visual { position: static; }
}
/* ============== Cases / Anwendungsbereiche ============== */
.cases {
display: grid;
grid-template-columns: 5fr 4fr 4fr;
gap: 16px;
grid-auto-rows: 1fr;
}
.case {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--pad-card);
display: flex; flex-direction: column; gap: 18px;
position: relative;
overflow: hidden;
min-height: 320px;
transition: border-color .2s, box-shadow .2s;
}
.case:hover {
border-color: var(--line-strong);
box-shadow: 0 14px 32px -10px rgba(20, 24, 32, 0.14), 0 2px 6px rgba(20,24,32,0.04);
transform: translateY(-2px);
}
.case { transition: border-color .2s, box-shadow .25s, transform .25s; }
.case.feature {
grid-column: span 1; grid-row: span 2;
background: var(--fg); color: #f0f2f4;
border-color: transparent;
}
.case.feature .case-meta { color: rgba(240,242,244,0.55); }
.case.feature .case-stat { color: #f0f2f4; }
.case.feature .case-stat .num { color: #f0f2f4; }
.case-meta {
font-family: var(--font-sans); font-size: 12px;
text-transform: none; letter-spacing: 0.14em;
color: var(--fg-subtle); font-weight: 500;
}
.case h3 {
font-family: var(--font-display); font-weight: 600;
font-size: 22px; letter-spacing: -0.015em;
line-height: 1.25; margin: 0;
}
.case h3 em { font-style: normal; color: var(--fg); font-weight: inherit; }
.case.feature h3 { font-size: 28px; color: #f0f2f4; }
.case.feature h3 em { color: #f0f2f4; }
.case-stat {
display: flex; align-items: baseline; gap: 12px;
margin-top: auto; padding-top: 18px;
border-top: 1px solid var(--line);
}
.case.feature .case-stat { border-top-color: rgba(240,242,244,0.12); }
.case-stat .num {
font-family: var(--font-display); font-weight: 600;
font-size: 36px; line-height: 1.05;
letter-spacing: -0.02em; color: var(--fg);
}
.case.feature .case-stat .num { font-size: 44px; }
.case-stat .lbl {
font-size: 13px; color: var(--fg-muted);
max-width: 200px; line-height: 1.4;
}
.case.feature .case-stat .lbl { color: rgba(240,242,244,0.6); }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tag {
display: inline-flex; align-items: center;
padding: 5px 10px;
border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
border-radius: 999px;
font-size: 11px;
font-family: var(--font-sans);
letter-spacing: 0.02em;
opacity: 0.8;
}
@media (max-width: 980px) {
.cases { grid-template-columns: 1fr; }
.case.feature { grid-row: auto; }
}
/* ============== Founders / Team ============== */
.founders-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin-bottom: 64px;
}
@media (max-width: 980px) {
.founders-top { grid-template-columns: 1fr; gap: 32px; }
}
.founders-top-text { display: flex; flex-direction: column; align-items: flex-start; }
.founders-top-text h2.display { margin: 14px 0 18px; }
.founders-lead {
font-size: 16.5px;
color: var(--fg-muted);
line-height: 1.6;
margin: 0 0 28px;
max-width: 560px;
text-wrap: pretty;
}
.founders-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 12px;
width: 100%;
max-width: 480px;
}
.founders-stat {
border-top: 1px solid var(--line-strong);
padding-top: 18px;
}
.founders-stat .num {
font-family: var(--font-display); font-weight: 600;
font-size: 44px; letter-spacing: -0.025em;
line-height: 1; color: var(--fg);
}
.founders-stat .lbl {
margin-top: 10px; font-size: 12px;
color: var(--fg-muted);
font-family: var(--font-sans);
text-transform: none; letter-spacing: 0.10em;
font-weight: 500;
}
/* Visual placeholder where the youtube embed used to be */
.founders-visual {
display: flex; flex-direction: column;
gap: 16px;
position: sticky; top: 90px;
}
@media (max-width: 980px) {
.founders-visual { position: static; }
}
.founders-visual-card {
position: relative;
aspect-ratio: 16 / 10;
width: 100%;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(13,16,20,0.04), transparent 60%),
var(--bg-card);
overflow: hidden;
box-shadow: var(--shadow-lg);
display: grid; place-items: center;
padding: 40px;
text-align: center;
}
.founders-visual-card .pulse {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--accent);
display: grid; place-items: center;
color: var(--accent-fg);
margin-bottom: 20px;
}
.founders-visual-card .pulse svg { width: 28px; height: 28px; }
.founders-visual-card h3 {
font-family: var(--font-display);
font-weight: 500; font-size: 22px;
letter-spacing: -0.015em; line-height: 1.25;
margin: 0 0 12px;
}
.founders-visual-card h3 em { font-style: normal; }
.founders-visual-card p {
color: var(--fg-muted);
font-size: 14px; line-height: 1.55;
margin: 0; max-width: 360px;
}
.founders-list-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 880px) {
.founders-list-row { grid-template-columns: 1fr; }
}
.founder-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 30px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.founder-photo {
width: 100%;
aspect-ratio: 3 / 2; /* Original-Querformat, ganzes Bild, so breit wie der Text */
border-radius: 18px;
overflow: hidden;
background: var(--bg-soft);
box-shadow: var(--shadow-md);
margin-bottom: 24px;
}
.founder-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block; filter: saturate(1.04);
}
@media (max-width: 540px) {
.founder-card { padding: 22px; }
.founder-photo { width: 100%; }
}
.founder-body {
display: flex; flex-direction: column;
align-items: flex-start;
gap: 10px; width: 100%; min-width: 0;
flex: 1;
}
.founder-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.founder-meta h3 {
font-family: var(--font-display);
font-weight: 600; font-size: 26px;
letter-spacing: -0.02em; line-height: 1.1;
margin: 0;
}
.founder-role {
font-family: var(--font-sans);
font-size: 12px; letter-spacing: 0.1em;
color: var(--accent); font-weight: 600;
text-transform: none;
}
.founder-loc {
font-size: 12px; color: var(--fg-subtle);
}
.founder-quote {
font-family: var(--font-display);
font-style: italic; font-weight: 500;
font-size: 19.5px; line-height: 1.38;
color: var(--fg);
margin: 14px 0 2px;
padding: 0; border: 0;
max-width: none;
}
.founder-quote::before {
content: "";
display: block;
width: 30px; height: 2px;
background: var(--accent);
border-radius: 2px;
margin: 2px 0 14px;
}
.founder-text {
font-size: 15px; color: var(--fg-muted);
line-height: 1.6; margin: 0;
max-width: 42ch; text-wrap: pretty;
}
.founder-tags {
display: flex; flex-wrap: wrap; gap: 7px;
justify-content: flex-start;
margin-top: auto; /* Tags unten buendig, beide Karten gleiche Hoehe */
padding-top: 20px;
}
.founder-tag {
display: inline-flex; align-items: center;
padding: 5px 11px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 11.5px;
letter-spacing: 0.10em;
color: var(--fg-muted);
background: var(--bg);
}
.founder-contact {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px 14px;
margin-top: 18px;
}
.founder-contact-note {
font-family: var(--font-sans);
font-size: 14px;
color: var(--fg-muted);
}
.founder-link {
display: inline-flex; align-items: center; gap: 9px;
align-self: flex-start;
margin-top: 0;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid #0a66c2;
background: var(--bg);
font-family: var(--font-sans);
font-size: 13.5px; font-weight: 600;
color: #0a66c2;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.founder-link:hover {
background: #0a66c2;
color: #fff;
box-shadow: 0 4px 14px rgba(10, 102, 194, 0.22);
}
.founder-link-icon { width: 18px; height: 18px; flex: none; }
/* ============== CTA ============== */
.cta-band {
margin: var(--pad-section) 0;
padding: 80px 48px;
}
/* Unterseiten: CTA dichter an den Inhalt, weniger Weißraum drumherum. */
.cta-tight .cta-band {
margin: 36px 0 44px;
}
.cta-band {
background: var(--fg); color: #f0f2f4;
border-radius: var(--radius-lg);
position: relative; overflow: hidden;
text-align: center;
}
.cta-band::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 60%, color-mix(in oklab, var(--accent) 30%, transparent) 100%);
pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .eyebrow {
background: rgba(240,242,244,0.08);
border: 1px solid rgba(240,242,244,0.15);
color: rgba(240,242,244,0.75);
margin-bottom: 28px;
}
.cta-band .eyebrow .dot { background: oklch(0.62 0.15 145); }
.cta-band h2 {
color: #f0f2f4;
font-size: clamp(32px, 4vw, 52px);
margin: 0 0 20px;
}
.cta-band h2 em {
font-style: normal;
color: #f0f2f4;
font-weight: inherit;
}
.cta-band p {
color: rgba(240,242,244,0.65);
max-width: 540px; margin: 0 auto 32px;
font-size: 16px;
}
.cta-band .actions {
display: inline-flex; gap: 12px;
flex-wrap: wrap; justify-content: center;
}
.cta-band .btn-primary { background: #f0f2f4; color: var(--fg); }
.cta-band .btn-primary:hover { background: #ffffff; }
.cta-band .btn-ghost {
color: #f0f2f4;
border-color: rgba(240,242,244,0.25);
background: transparent;
}
.cta-band .btn-ghost:hover { background: rgba(240,242,244,0.08); }
/* ============== Footer ============== */
.footer {
padding: 80px 0 calc(40px + env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--line);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 64px;
}
.footer-grid h3 {
font-family: var(--font-sans);
font-size: 12px; text-transform: none;
letter-spacing: 0.1em; color: var(--fg-subtle);
margin: 0 0 18px; font-weight: 500;
}
.footer-grid ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.footer-grid a {
font-size: 14px; color: var(--fg-muted);
transition: color .15s;
}
.footer-grid a:hover { color: var(--fg); }
.footer-blurb {
color: var(--fg-muted); font-size: 15px;
max-width: 320px; margin-top: 16px;
}
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 32px; border-top: 1px solid var(--line);
font-size: 13px; color: var(--fg-subtle);
flex-wrap: wrap; gap: 16px;
}
.footer-bottom .links { display: flex; gap: 24px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* Fallback: ohne JS bleibt der IntersectionObserver aus, Inhalt muss trotzdem sichtbar sein */
@media (scripting: none) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================
COMPANY PAGE / LEGAL PAGES
============================================ */
.company-hero {
padding: 72px 0 36px;
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.company-hero .meta {
font-family: var(--font-sans); font-size: 11px;
text-transform: none; letter-spacing: 0.08em;
color: var(--fg-subtle); margin: 0 0 18px;
}
.company-hero h1 {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(40px, 5.4vw, 72px);
letter-spacing: -0.025em; line-height: 1.04;
margin: 0 0 22px; max-width: 18ch;
text-wrap: balance;
}
.company-hero h1 em { font-style: normal; }
.company-hero .lead {
max-width: 620px; font-size: 18px;
color: var(--fg-muted); line-height: 1.55;
margin: 0; text-wrap: pretty;
}
/* Unternehmen-Hero: zweispaltig mit Koeln-Bild (nur hier via .company-hero-media,
andere Subpages bleiben unveraendert) */
.company-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 48px;
align-items: center;
}
.company-hero-media h1 { font-size: clamp(32px, 3.6vw, 48px); max-width: none; }
.company-hero-media .lead { max-width: none; }
.company-hero-figure {
margin: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-lg);
line-height: 0;
}
.company-hero-figure img { width: 100%; height: auto; display: block; }
@media (max-width: 880px) {
.company-hero-grid { grid-template-columns: 1fr; gap: 28px; }
.company-hero-media h1 { font-size: clamp(30px, 7.5vw, 42px); }
}
.company-section {
padding: 48px 0;
border-bottom: 1px solid var(--line);
}
.company-section:last-of-type { border-bottom: 0; }
.company-section h2 {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.022em; line-height: 1.05;
margin: 0 0 20px; max-width: 18ch;
text-wrap: balance;
}
.company-section h2 em { font-style: normal; }
.company-section p {
max-width: 65ch; font-size: 16px;
color: var(--fg-muted); line-height: 1.7;
margin: 0 0 16px; text-wrap: pretty;
}
.company-section p strong { color: var(--fg); font-weight: 500; }
/* Zweispaltige Sektionen: Überschrift links, Inhalt rechts — füllt die
Desktop-Breite, statt alles linksbündig am Rand kleben zu lassen. */
.section-split {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 32px 72px;
align-items: start;
}
.section-split .split-head h2 { margin-bottom: 0; }
.section-split .split-body > :first-child { margin-top: 0; }
.section-split .split-body > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.section-split { grid-template-columns: 1fr; gap: 16px; }
}
/* Abwechselnde Sektions-Hintergründe wie auf der Startseite:
weiß / zartes Blau / kräftiges Navy. */
.company-section.is-soft { background: var(--bg-soft); border-bottom: 0; }
.company-section.is-navy {
background: #0E1F44; color: #FFFFFF; border-bottom: 0;
}
.company-section.is-navy h2 { color: #FFFFFF; }
.company-section.is-navy p { color: rgba(255, 255, 255, 0.78); }
.company-section.is-navy .section-eyebrow { color: var(--accent-glow); }
.company-section.is-navy .specs { color: rgba(255, 255, 255, 0.72); }
.company-section.is-navy .specs strong { color: #FFFFFF; }
.company-section.is-navy .specs .sep { color: rgba(255, 255, 255, 0.3); }
.company-section.is-navy .steps-compact h3 { color: #FFFFFF; }
.company-section.is-navy .steps-compact p { color: rgba(255, 255, 255, 0.75); }
.company-section.is-navy .steps-compact .n { color: var(--accent-glow); }
.fact-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin-top: 32px;
}
.fact {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 28px;
}
.fact .label {
font-family: var(--font-sans); font-size: 11px;
color: var(--fg-subtle);
text-transform: none; letter-spacing: 0.08em;
margin: 0 0 8px;
}
.fact .value {
font-size: 17px; color: var(--fg);
line-height: 1.5; margin: 0;
}
@media (max-width: 900px) {
.fact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.fact-grid { grid-template-columns: 1fr; }
}
/* ============== Subpage extras (Lösungen/Detailseiten) ============== */
/* Tool-Leiste direkt unter dem Hero: leichte Logo-Zeile, zeigt sofort und
ohne Kachel-Ballast, in welche Systeme die Lösung eingebettet wird. */
.tool-strip {
padding: 28px 0 32px;
border-bottom: 1px solid var(--line);
}
.tool-strip-head {
display: flex;
align-items: baseline;
gap: 6px 26px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.tool-strip-head .section-eyebrow { margin: 0; }
.tool-strip-head p {
margin: 0; max-width: 60ch;
font-size: 15px; line-height: 1.5;
color: var(--fg-muted);
}
.tool-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 13px 30px;
}
.tool-logo { display: inline-flex; align-items: center; gap: 10px; }
.tool-logo img { width: 28px; height: 28px; object-fit: contain; display: block; flex: none; }
.tool-logo span { font-size: 15px; font-weight: 500; color: var(--fg); }
.tool-strip-note {
margin: 16px 0 0;
font-size: 14px;
color: var(--fg-subtle);
}
/* Kompakter Prozess: schlanke nummerierte Liste statt großer Kacheln. */
.steps-compact { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; max-width: 720px; }
.steps-compact li { display: flex; gap: 14px; }
.steps-compact .n {
font-family: var(--font-display); font-weight: 600;
font-size: 15px; color: var(--accent);
flex: none; width: 1.8em; line-height: 1.5;
}
.steps-compact h3 { font-size: 16px; font-weight: 600; margin: 0 0 3px; color: var(--fg); }
.steps-compact p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--fg-muted); }
/* Specs auf den Punkt: eine Zeile statt vier Kacheln. */
.specs { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--fg-muted); max-width: 70ch; }
.specs strong { color: var(--fg); font-weight: 500; }
.specs .sep { color: var(--line-strong); margin: 0 4px; }
.integration-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.integration {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 13px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--bg-card);
font-size: 14px;
font-weight: 500;
color: var(--fg);
}
.integration img { width: 24px; height: 24px; object-fit: contain; display: block; }
.company-section .integration-note {
font-size: 13px;
color: var(--fg-subtle);
margin: 16px 0 0;
}
.related-solutions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.related-solutions a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--bg-soft);
font-size: 14px;
font-weight: 500;
color: var(--fg);
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.related-solutions a:hover {
background: var(--accent);
border-color: var(--accent);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 20px -8px rgba(44, 91, 184, 0.25);
}
.related-solutions a .arrow { transition: transform .2s ease; }
.related-solutions a:hover .arrow { transform: translateX(3px); }
/* Solution tiles: full-card link overlay (Startseite #solutions) */
.tile-cover { position: absolute; inset: 0; z-index: 3; }
.tile-cover:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: var(--radius-lg);
}
/* Compliance-Section: "Mehr zum EU AI Act"-Button auf dunklem Grund */
.compliance-more { margin-top: 48px; }
.compliance-more a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #FFFFFF;
font-size: 15px;
font-weight: 500;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.compliance-more a:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.40);
transform: translateY(-2px);
}
.compliance-more a .arrow { transition: transform .2s ease; }
.compliance-more a:hover .arrow { transform: translateX(3px); }
/* Legal pages */
.legal {
max-width: 65ch;
margin: 0 auto;
padding: 96px 32px 120px;
}
.legal .meta {
font-family: var(--font-sans); font-size: 11px;
letter-spacing: 0.08em; text-transform: none;
color: var(--fg-subtle); margin: 0 0 14px;
}
.legal h1 {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(30px, 5.2vw, 60px);
letter-spacing: -0.025em; line-height: 1.05;
margin: 0 0 48px;
hyphens: auto;
}
.legal h2 {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.018em; line-height: 1.25;
margin: 56px 0 14px;
text-wrap: balance;
}
.legal h2 .num {
font-family: var(--font-display); font-size: 15px;
font-weight: 500; letter-spacing: -0.005em;
color: var(--fg-subtle); margin-right: 12px;
vertical-align: 4px;
}
.legal h3 {
font-family: var(--font-sans); font-weight: 600;
font-size: 16.5px; margin: 24px 0 6px;
text-wrap: balance;
}
.legal p, .legal li {
font-size: 15.5px; line-height: 1.7;
color: var(--fg-muted); margin: 0 0 14px;
}
.legal strong { color: var(--fg); font-weight: 500; }
.legal a {
color: var(--fg);
border-bottom: 1px solid var(--line-strong);
transition: border-color .15s;
}
.legal a:hover { border-color: var(--accent); }
.legal ul { padding-left: 20px; margin: 8px 0 18px; }
.legal li { margin-bottom: 6px; }
.legal address {
font-style: normal;
font-size: 15.5px; line-height: 1.7;
color: var(--fg);
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 22px;
margin: 8px 0 18px;
}
.legal hr {
border: 0; border-top: 1px solid var(--line);
margin: 56px 0 0;
}
/* ============================================
PARTNERS / LOGOS MARQUEE
============================================ */
.logos {
padding: 64px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-soft);
overflow: hidden;
}
/* Logos when embedded inside the Philosophie / team section — no separate
bordered band, just a thin divider above and breathing room below the team CTA. */
.team-logos {
margin-top: 72px;
padding-top: 56px;
border-top: 1px solid var(--line);
overflow: hidden;
}
/* ============== Branchen / Sectors (uniform photo tile grid) ============== */
.branchen-section {
padding: 100px 0 110px;
background: var(--bg);
}
.branchen-head {
max-width: 760px;
margin: 0 0 56px;
}
.branchen-head .section-eyebrow { display: inline-block; margin-bottom: 18px; }
.branchen-head h2.display {
font-size: clamp(32px, 3.4vw, 44px);
line-height: 1.08;
margin: 0 0 16px;
}
.branchen-head p {
color: var(--fg-muted);
font-size: 16px;
line-height: 1.6;
margin: 0;
max-width: 620px;
}
.branchen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.branche {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 4 / 3;
isolation: isolate;
border: 1px solid var(--line);
transition: transform .25s ease, border-color .25s ease;
}
.branche:hover {
transform: translateY(-2px);
border-color: rgba(20, 48, 87, 0.18);
}
.branche-image {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1F4AA0 0%, #143057 60%, #0A1E40 100%);
z-index: 0;
}
.branche-image::after {
/* Bottom→top dark gradient so text remains legible without an
all-over heavy overlay (keeps photographic feel for real images). */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 17, 42, 0) 30%, rgba(6, 17, 42, 0.78) 80%, rgba(6, 17, 42, 0.92) 100%);
}
.branche-content {
position: relative;
z-index: 1;
height: 100%;
padding: 24px 24px 22px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #FFFFFF;
}
.branche-eyebrow {
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: none;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 10px;
}
.branche-content h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0 0 6px;
color: #FFFFFF;
}
.branche-content p {
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
margin: 0;
max-width: 38ch;
}
@media (max-width: 900px) {
.branchen-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
.branchen-grid { grid-template-columns: 1fr; }
.branche { aspect-ratio: 16 / 10; }
}
.logos-label {
font-family: var(--font-sans);
font-size: 12px; font-weight: 500;
letter-spacing: 0.14em;
text-transform: none;
color: var(--fg-subtle);
text-align: center;
margin: 0 0 36px;
display: flex; align-items: center; justify-content: center; gap: 12px;
}
.logos-label::before,
.logos-label::after {
content: ""; flex: 0 0 24px; height: 1px; background: var(--line-strong);
}
.logos-strip {
position: relative;
-webkit-mask: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
mask: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.logos-track {
display: flex;
align-items: center;
gap: 72px;
width: max-content;
animation: logos-scroll 50s linear infinite;
}
.logos-track:hover { animation-play-state: paused; }
@keyframes logos-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logos-track { animation: none; }
}
.logo {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
height: 32px;
}
.logo img {
max-height: 100%;
width: auto;
display: block;
filter: grayscale(45%);
opacity: 0.85;
mix-blend-mode: multiply;
transition: opacity .25s, filter .25s;
}
.logo:hover img {
filter: grayscale(0);
opacity: 1;
}
/* ============================================
PHILOSOPHIE VIDEO (placeholder)
============================================ */
.founders-visual-card.has-video {
padding: 0;
background: transparent;
border: 0;
display: block;
}
.founders-visual-card video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================================
FAQ
============================================ */
/* FAQ-Layout: Liste links, Kontaktformular rechts (2-Spalter) */
.faq-layout {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 760px;
}
.faq-contact {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
position: sticky;
top: 110px;
}
.faq-contact h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 0 0 8px;
color: var(--fg);
}
.faq-contact > p {
font-size: 14px;
line-height: 1.55;
color: var(--fg-muted);
margin: 0 0 20px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.cf-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.cf-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--fg-muted);
letter-spacing: 0.01em;
}
.cf-optional {
font-weight: 400;
color: var(--fg-subtle);
}
.contact-form input,
.contact-form textarea {
font-family: var(--font-sans);
font-size: 16px; /* >=16px verhindert iOS-Auto-Zoom beim Fokus */
color: var(--fg);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 8px;
padding: 11px 12px;
min-height: 44px; /* komfortable Touch-Zielgroesse */
outline: none;
transition: border-color .15s, box-shadow .15s;
resize: vertical;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(44, 91, 184, 0.12);
}
.cf-submit {
margin-top: 6px;
align-self: flex-start;
}
.cf-meta {
font-size: 11.5px;
color: var(--fg-subtle);
line-height: 1.5;
margin: 4px 0 0;
}
@media (max-width: 880px) {
.faq-layout { grid-template-columns: 1fr; gap: 32px; }
.faq-contact { position: static; }
}
.faq-item {
border-radius: 10px;
background: var(--bg);
border: 1px solid var(--line);
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] {
border-color: var(--line-strong);
box-shadow: var(--shadow-sm);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 22px 60px 22px 22px;
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
position: relative;
color: var(--fg);
transition: background .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-soft); }
.faq-item summary::after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: grid;
place-items: center;
font-family: var(--font-sans);
font-size: 22px;
font-weight: 400;
color: var(--fg-subtle);
transition: transform .25s var(--ease, ease), color .15s;
line-height: 0;
}
.faq-item[open] summary::after {
transform: translateY(-50%) rotate(45deg);
color: var(--fg);
}
.faq-item summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.faq-item p {
padding: 0 22px 22px;
margin: 0;
font-size: 15px;
color: var(--fg-muted);
line-height: 1.7;
max-width: 65ch;
}
.faq-item p strong { color: var(--fg); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
.faq-item summary::after { transition: none; }
}
/* ============================================
404 ERROR PAGE
============================================ */
.error-page {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
padding: 96px 0;
}
.error-page .error-code {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(80px, 14vw, 160px);
letter-spacing: -0.05em;
line-height: 1;
color: var(--fg);
margin: 0 0 8px;
opacity: 0.06;
}
.error-page h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 5vw, 60px);
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0 0 24px;
max-width: 18ch;
text-wrap: balance;
}
.error-page h1 em { font-style: normal; color: var(--fg); }
.error-page .lead {
font-size: 17px;
color: var(--fg-muted);
line-height: 1.6;
max-width: 65ch;
margin: 0 0 32px;
}
.error-actions {
display: flex; gap: 12px; flex-wrap: wrap;
margin-bottom: 40px;
}
.error-help {
font-size: 14px;
color: var(--fg-subtle);
max-width: 65ch;
margin: 0;
}
.error-help a {
color: var(--fg);
border-bottom: 1px solid var(--line-strong);
}
.error-help a:hover { border-color: var(--fg); }
/* ============================================
Team / Founders — kompakte Variante (B-Adaption von A's Layout)
============================================ */
.team-video {
position: relative;
margin: 56px auto;
max-width: 880px;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 16/9;
box-shadow:
0 30px 60px -20px rgba(20, 24, 32, 0.18),
0 8px 24px -8px rgba(20, 24, 32, 0.08);
background: var(--bg-card);
}
.team-video video {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 880px;
margin: 0 auto;
}
.team-member {
display: grid;
grid-template-columns: 112px 1fr;
gap: 22px;
align-items: start;
padding: 24px;
border-radius: 14px;
background: var(--bg-card);
border: 1px solid var(--line);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.team-member:hover {
border-color: var(--line-strong);
box-shadow: 0 6px 24px -10px rgba(15, 34, 54, 0.18);
transform: translateY(-1px);
}
.team-photo {
width: 112px;
height: 112px;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: var(--bg-soft);
border: 1px solid var(--line);
flex-shrink: 0;
}
.team-photo img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.team-content {
padding-top: 2px;
min-width: 0;
}
.team-content h4 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.012em;
line-height: 1.2;
margin: 0 0 3px;
color: var(--fg);
}
.team-role {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--accent);
margin: 0 0 10px;
}
.team-bio {
font-size: 13px;
line-height: 1.55;
color: var(--fg-muted);
margin: 0 0 10px;
max-width: 42ch;
}
.team-meta {
font-size: 11.5px;
color: var(--fg-subtle);
letter-spacing: 0.02em;
margin: 0;
padding-top: 10px;
border-top: 1px solid var(--line);
}
@media (max-width: 880px) {
.team-grid { grid-template-columns: 1fr; gap: 18px; max-width: 520px; }
}
@media (max-width: 460px) {
.team-member { grid-template-columns: 1fr; gap: 16px; }
.team-photo { width: 88px; height: 88px; }
}
.team-cta {
margin-top: 40px;
display: flex;
justify-content: center;
}
/* ============== Philosophie (Front) — Gründer-Band ============== */
.founders-band {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
gap: 24px 72px;
align-items: center;
margin-bottom: 72px;
}
.founders-intro .section-eyebrow { margin-bottom: 16px; }
.founders-intro h2 {
font-size: clamp(30px, 3.4vw, 50px);
margin: 0 0 24px;
}
.founders-intro .founders-lead { margin: 0 0 32px; max-width: 48ch; }
.founders-intro .founders-stats { margin-top: 0; }
.founders-photo {
margin: 0;
position: relative;
}
.founders-photo img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: 0 24px 60px -28px rgba(15, 34, 54, 0.30);
}
.founders-photo figcaption {
margin-top: 14px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--fg-subtle);
}
@media (max-width: 880px) {
.founders-band {
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 48px;
}
.founders-intro h2 { margin-bottom: 16px; }
.founders-photo { max-width: 560px; }
}
/* ============== Philosophie (Front) — redaktionelle Dreier-Reihe ============== */
.philosophy-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px;
max-width: 980px;
margin: 0 auto;
border-top: 1px solid var(--line);
padding-top: 40px;
}
.philosophy-item h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.012em;
line-height: 1.25;
margin: 0 0 12px;
color: var(--fg);
}
.philosophy-item p {
font-size: 14px;
line-height: 1.62;
color: var(--fg-muted);
margin: 0;
}
@media (max-width: 880px) {
.philosophy-row {
grid-template-columns: 1fr;
gap: 28px;
max-width: 560px;
padding-top: 28px;
}
}
/* ============== SOLUTIONS (2-col: aside + image-top tiles) ============== */
.solutions-section {
padding: 96px 0 64px;
background: var(--bg);
}
.solutions-layout {
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
gap: 72px;
align-items: start;
}
.solutions-aside {
position: sticky;
top: 110px;
}
.solutions-aside .section-eyebrow { margin-bottom: 18px; display: inline-block; }
.solutions-aside h2.display {
font-size: clamp(28px, 2.8vw, 40px);
line-height: 1.08;
margin: 0 0 18px;
}
.solutions-lead {
color: var(--fg-muted);
font-size: 15.5px;
line-height: 1.6;
margin: 0 0 28px;
}
.solutions-quicklinks ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.solutions-quicklinks li { display: flex; }
/* Bereiche als anklickbare Pill-Chips: dezenter Default, beim Hover
füllt sich der Chip mit Accent, hebt leicht ab, Pfeil nudgt mit. */
.solutions-quicklinks a {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
padding: 9px 14px;
border-radius: var(--radius-pill);
background: var(--bg-soft);
border: 1px solid var(--line);
color: var(--fg);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
transition: background .2s ease, border-color .2s ease, color .2s ease,
transform .2s ease, box-shadow .2s ease;
}
.solutions-quicklinks a::after {
content: "↗";
font-size: 13px;
line-height: 1;
color: var(--accent);
opacity: 0.55;
transition: transform .2s ease, opacity .2s ease, color .2s ease;
}
.solutions-quicklinks a:hover {
background: var(--accent);
border-color: var(--accent);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 20px -8px rgba(44, 91, 184, 0.25);
}
.solutions-quicklinks a:hover::after {
color: #FFFFFF;
opacity: 1;
transform: translate(2px, -2px);
}
.solutions-quicklinks a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.solutions-tiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
gap: 20px;
}
/* Reihenfolge nach Nachfrage/Nutzen: Vertrieb → Kundenservice → Finanzen
→ Betrieb → Personal → Recht. */
#tile-vertrieb { order: 1; }
#tile-support { order: 2; }
#tile-finance { order: 3; }
#tile-operations { order: 4; }
#tile-hr { order: 5; }
#tile-recht { order: 6; }
/* Photo-as-bg style — same treatment as .branche tiles: full-bleed
photo, bottom dark gradient for legibility, content overlaid at bottom
in white. Uniform size, corporate feel, no white card chrome. */
.solutions-tile {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 4 / 3;
isolation: isolate;
border: 0;
transition: transform .25s ease;
scroll-margin-top: 100px;
background: linear-gradient(135deg, #1F4AA0 0%, #143057 60%, #0A1E40 100%);
}
.solutions-tile:hover {
transform: translateY(-2px);
}
.tile-image {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.tile-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.tile-image::after {
/* Bottom→top dark gradient over the photo for text legibility while
keeping the photo recognisable. */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 17, 42, 0) 30%, rgba(6, 17, 42, 0.78) 80%, rgba(6, 17, 42, 0.92) 100%);
}
.tile-content {
position: relative;
z-index: 1;
height: 100%;
padding: 24px 24px 22px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
color: #FFFFFF;
}
.tile-eyebrow {
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: none;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 4px;
}
.solutions-tile h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
color: #FFFFFF;
}
.solutions-tile p {
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
margin: 0;
max-width: 38ch;
hyphens: auto;
}
/* Drop the floating arrow box — the bottom-overlay text now is the only
visual layer over the photo, no need for a corner CTA chip. */
.tile-arrow { display: none; }
@media (max-width: 980px) {
.solutions-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.solutions-aside { position: static; }
}
@media (max-width: 640px) {
.solutions-tiles { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
.solutions-tile { aspect-ratio: 16 / 10; }
}
/* ─── Solutions tile overrides (white cards, photo top, dark text below) ── */
.lsg-v-c .solutions-tile {
background: #FFFFFF;
aspect-ratio: auto;
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(15, 34, 54, 0.04);
display: flex;
flex-direction: column;
}
.lsg-v-c .solutions-tile:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px -18px rgba(15, 34, 54, 0.22);
border-color: rgba(20, 48, 87, 0.18);
}
.lsg-v-c .tile-image {
position: relative;
inset: auto;
aspect-ratio: 16 / 9;
border-bottom: 1px solid var(--line);
width: 100%;
}
/* Soften the photos: stronger de-saturation, lower contrast and a hair of
blur take the over-sharp, hyperreal "AI" edge off; a navy gradient in the
EU-AI-Act blue (#0E1F44) tints the photos and fades them into the brand
colour toward the bottom. */
.lsg-v-c .tile-image img {
filter: saturate(0.9) contrast(0.98) brightness(1.02);
}
.lsg-v-c .tile-image::after {
display: block;
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(14, 31, 68, 0) 0%,
rgba(14, 31, 68, 0.05) 40%,
rgba(14, 31, 68, 0.38) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
.lsg-v-c .tile-content {
position: static;
height: auto;
flex: 1 1 auto;
padding: 22px 24px 24px;
justify-content: flex-start;
color: var(--fg);
gap: 8px;
}
.lsg-v-c .tile-eyebrow { color: var(--accent); }
.lsg-v-c .solutions-tile h3 { color: var(--fg); font-size: 19px; }
.lsg-v-c .solutions-tile p { color: var(--fg-muted); }
.lsg-v-c .tile-arrow {
display: grid;
position: absolute;
top: 14px; right: 16px;
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.94);
color: var(--accent);
font-size: 14px; font-weight: 600;
place-items: center;
border: 1px solid var(--line);
z-index: 2;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.lsg-v-c .solutions-tile:hover .tile-arrow {
background: var(--accent); color: #FFFFFF;
transform: translate(2px, -2px);
}
/* Toolstack-Reihe je Use-Case-Tile. Original-Brand-Logos (Markenfarbe),
damit sie wiedererkennbar bleiben. */
.tile-tools {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.tile-tools-label {
display: block;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--fg-subtle);
margin-bottom: 10px;
}
.tile-tools-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.tile-tool {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
transition: transform .2s ease;
}
.solutions-tile:hover .tile-tool {
transform: translateY(-2px);
}
/* ============================================
MOBILE — touch-first overrides
Desktop bleibt unverändert.
============================================ */
/* Eliminate 300ms tap delay + subtle tap highlight */
a, button, [role="button"], summary {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(44, 91, 184, 0.12);
}
/* ── Hamburger button (hidden on desktop) ── */
.nav-burger {
display: none;
width: 44px;
height: 44px;
border: none;
background: none;
cursor: pointer;
padding: 10px;
flex-direction: column;
justify-content: center;
gap: 5px;
z-index: 52;
}
.burger-line {
display: block;
width: 22px;
height: 2px;
background: var(--fg);
border-radius: 1px;
transition: transform .25s ease, opacity .25s ease;
}
.nav.over-dark .burger-line { background: #FFFFFF; }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .burger-line:nth-child(2) {
opacity: 0;
}
.nav-burger[aria-expanded="true"] .burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Mobile menu (hidden on desktop) ── */
.mobile-menu {
display: none;
}
@media (max-width: 880px) {
.nav-burger { display: flex; }
.nav-cluster { display: none; }
/* Logo collapse on scroll: NOR + ON slide out & fade, only the Q remains.
The wrapper clips and shrinks to Q width; the SVG slides left so the Q
lands at the pill's left edge. */
.brand-logo-wrap {
display: block;
overflow: hidden;
width: 172px;
transition: width .45s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-logo-svg {
transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1);
}
.lg-left, .lg-right {
transform-box: fill-box;
transition: opacity .4s ease, transform .45s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.scrolled .brand { padding: 6px 10px; }
.nav.scrolled .brand-logo-wrap { width: 30px; }
.nav.scrolled .brand-logo-svg { transform: translateX(-85px); }
.nav.scrolled .lg-left { opacity: 0; transform: translateX(-90px); }
.nav.scrolled .lg-right { opacity: 0; transform: translateX(90px); }
.mobile-menu {
position: fixed;
inset: 0;
z-index: 51;
background: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(24px) saturate(150%);
backdrop-filter: blur(24px) saturate(150%);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: calc(96px + env(safe-area-inset-top, 0)) 32px calc(48px + env(safe-area-inset-bottom, 0));
}
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu a {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
color: var(--fg);
padding: 14px 24px;
border-radius: 12px;
width: 100%;
max-width: 320px;
text-align: center;
transition: background .15s ease;
}
.mobile-menu a:hover,
.mobile-menu a:active { background: var(--bg-soft); }
.mobile-menu-cta {
margin-top: 16px;
justify-content: center;
}
/* Impressum als dezenter Legal-Link unter dem Kontakt-Button */
.mobile-menu a.mobile-menu-legal {
margin-top: 10px;
font-size: 14px;
font-weight: 500;
color: var(--fg-subtle);
padding: 10px 24px;
}
}
/* ── Mobile: phone-sized screens ── */
@media (max-width: 640px) {
.container { padding: 0 20px; }
.nav > .container { padding: 0 16px; }
/* ── Hero ── */
.hero-v2-centered .hero-v2-text h1.display,
.hero-v2-text h1.display {
font-size: clamp(24px, 7vw, 34px);
line-height: 1.1;
}
.hero-v2-text .hero-sub { font-size: 14px; max-width: 100%; }
/* ── EU AI Act Strip ── */
.focus-brackets.eu-strip { padding: 0; }
.eu-strip-link {
grid-template-columns: 72px 1fr;
gap: 6px 14px;
padding: 14px 0 18px;
}
.eu-strip-flag {
width: 72px;
height: 46px;
grid-row: 1 / -1;
align-self: center;
}
.eu-strip-flag img { width: 40px; height: 40px; }
.eu-strip-body { grid-column: 2; }
.eu-strip-eyebrow { font-size: 10px; letter-spacing: 0.14em; margin-bottom: 0; }
.eu-strip-title { font-size: 17px; margin: 0 0 2px; }
.eu-strip-statement { font-size: 13px; line-height: 1.4; }
.eu-strip-cta { grid-column: 2; font-size: 13px; padding-top: 2px; border: 0; }
/* ── Solutions ── */
.solutions-aside h2.display { font-size: 24px; }
/* ── Leistungen ── */
:root { --pad-section: 72px; }
.leistungen-section { padding: 64px 0 52px; }
.leistungen-head h2.display { font-size: 26px; }
.leistung-visual { height: 320px; padding: 20px; }
/* Chat-Demo darf auf Mobile mitwachsen, damit die Karte (inkl. Eingabezeile)
nicht unten abgeschnitten wird (Chat-Card ~328px > 320px). */
.leistung-visual-b { height: auto; min-height: 340px; }
.leistung-body h3 { font-size: 22px; }
/* ── Compliance ── */
.compliance-head h2.display { font-size: 24px; }
/* ── Section heads ── */
.section-head h2 { font-size: clamp(24px, 6vw, 36px); }
/* ── CTA band ── */
.cta-band { padding: 56px 24px; }
.cta-band h2 { font-size: clamp(24px, 6vw, 36px); }
.cta-band .actions { flex-direction: column; width: 100%; }
.cta-band .btn { width: 100%; justify-content: center; }
/* ── Buttons: min 44px touch target ── */
.btn { min-height: 44px; padding: 12px 22px; }
.btn-lg { min-height: 48px; padding: 14px 26px; }
/* ── Chat nav: enlarge touch target ── */
.leistung-chat-nav { width: 44px; height: 44px; }
/* ── Quicklinks chips: a touch more padding for tap comfort ── */
.solutions-quicklinks a { padding: 11px 18px; }
/* ── Footer: tappable links ── */
.footer-grid a { display: block; padding: 10px 0; }
.footer-grid ul { gap: 8px; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-bottom .links { gap: 24px; }
.footer-bottom .links a { display: inline-block; padding: 10px 0; }
/* ── FAQ: tappable summary ── */
.faq-item summary { padding: 18px 52px 18px 18px; min-height: 44px; font-size: 15px; }
/* ── Team ── */
.section-head .display { font-size: 22px; }
.founders-stat .num { font-size: 32px; }
}