/* ============================================================
HACT service • Design System
Cinematic Industrial • Editorial precision
============================================================ */
/* Geist Sans + Geist Mono werden seit Mai 2026 lokal ausgeliefert (assets/fonts/).
Variable Fonts: ein File pro Familie deckt alle Gewichte (100..900) ab.
Keine Anfrage an Google Fonts, keine IP-Übertragung an Dritte.
Lizenz: SIL Open Font License 1.1 (siehe assets/fonts/LICENSE.txt). */
@font-face {
font-family: 'Geist';
src: url('fonts/Geist-Variable.woff2') format('woff2-variations'),
url('fonts/Geist-Variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('fonts/GeistMono-Variable.woff2') format('woff2-variations'),
url('fonts/GeistMono-Variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* Brand */
--brand-red: #ff5757;
--brand-red-deep: #d83a3a;
--brand-blue: #38b6ff;
--brand-blue-deep: #1a8fd9;
/* Neutrals
Default-Werte sind visuell ausbalanciert und erreichen WCAG 2.1 AA.
AAA wird per Knopfdruck im Barrierefreiheits-Widget ausgelöst (body.a11y-contrast). */
--ink: #0d0d0f;
--ink-soft: #1c1c20;
--paper: #f6f3ec;
--paper-warm: #efe9dd;
--paper-cool: #f0eee7;
--line: rgba(13, 13, 15, 0.12);
--line-strong: rgba(13, 13, 15, 0.22);
--muted: #5a5750; /* AA Kontrast, visuell weich */
/* Dark surfaces */
--night: #0a0a0c;
--night-soft: #131318;
--night-line: rgba(255, 255, 255, 0.1);
--night-muted: rgba(255, 255, 255, 0.6);
--night-text: #ece8df;
/* Accent gradients */
--grad-fire: linear-gradient(135deg, #ff5757 0%, #ff8a3d 100%);
--grad-water: linear-gradient(135deg, #38b6ff 0%, #6c8cff 100%);
--grad-mix: linear-gradient(120deg, #38b6ff 0%, #ff5757 100%);
/* Type
Vor Consent: System-Stack (sehr lesbar, kein externes Loading)
Nach Consent: Geist (wird per JS Injection priorisiert über System-Fallback) */
--font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* Einheitliches Schriftsystem: keine Serife mehr. --font-serif zeigt als Sicherheitsnetz auf Geist. */
--font-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
/* Layout */
--maxw: 1320px;
--gutter: clamp(20px, 4vw, 56px);
--radius: 4px;
/* Transitions */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--paper);
overflow-x: hidden;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'ss02', 'cv11';
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--brand-red); color: white; }
/* ====================== Accessibility ====================== */
/* Skip Links Liste, sichtbar bei Fokus, ermöglicht Tastatur Sprung über Hauptbereiche
nach WCAG 2.4.1 (Bypass Blocks AAA) */
.skip-links {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: transparent;
}
.skip-link {
position: absolute;
top: -120px;
left: 16px;
background: var(--ink);
color: var(--paper);
padding: 14px 22px;
min-height: 44px;
display: inline-flex;
align-items: center;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
transition: top 0.15s var(--ease);
text-decoration: none;
white-space: nowrap;
}
.skip-link:nth-child(2) { left: 220px; }
.skip-link:nth-child(3) { left: 410px; }
.skip-link:focus,
.skip-link:focus-visible {
top: 12px;
outline: 3px solid var(--brand-blue);
outline-offset: 2px;
}
/* Strong focus für Tastatur Navigation, Standard nach WCAG 2.4.7 AAA */
:focus-visible {
outline: 3px solid var(--brand-blue);
outline-offset: 3px;
border-radius: 2px;
}
.btn:focus-visible,
.nav-cta:focus-visible,
.chip:focus-visible,
.consent-actions button:focus-visible {
outline: 3px solid var(--brand-blue);
outline-offset: 4px;
}
/* Auch im dunklen Layer den Fokus klar sichtbar machen */
.dark :focus-visible,
.hero :focus-visible,
.specs :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible {
outline: 3px solid var(--brand-blue);
outline-offset: 3px;
}
/* Screen reader only utility */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
.marquee-track { animation: none; }
.hero-media img { animation: none; transform: scale(1.02); }
}
/* ====================== Typography ====================== */
.eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: currentColor;
display: inline-block;
opacity: 0.6;
}
.eyebrow.no-line::before { display: none; }
.dark .eyebrow { color: rgba(255, 255, 255, 0.5); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 450;
letter-spacing: -0.022em;
line-height: 1.05;
}
/* Akzent: em-Hervorhebung in Markenrot. Ein Schriftsystem (Geist), kein Stilbruch. */
h1 em, h2 em, h3 em, .h-display em, .hero-title em, .article-title em, .cta-grid h2 em {
font-family: var(--font-display);
font-style: normal;
font-weight: inherit;
color: var(--brand-red-deep);
letter-spacing: inherit;
}
.h-display {
font-size: clamp(26px, 2.8vw, 42px);
font-weight: 430;
line-height: 1.04;
letter-spacing: -0.025em;
}
.h-1 { font-size: clamp(22px, 2.3vw, 32px); font-weight: 450; line-height: 1.08; letter-spacing: -0.022em; }
.h-2 { font-size: clamp(18px, 1.8vw, 25px); font-weight: 460; line-height: 1.12; letter-spacing: -0.018em; }
.h-3 { font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; line-height: 1.22; letter-spacing: -0.012em; }
.h-4 { font-size: clamp(15px, 1.05vw, 17px); font-weight: 550; line-height: 1.32; letter-spacing: -0.005em; }
.lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); font-weight: 400; max-width: 60ch; }
.mono {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
}
/* ====================== Layout ====================== */
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
.section {
padding: clamp(96px, 13vw, 180px) 0;
position: relative;
overflow: hidden;
}
.section-tight { padding: clamp(72px, 9vw, 120px) 0; }
.dark {
background: var(--night);
color: var(--night-text);
}
.dark .lead, .dark .muted { color: var(--night-muted); }
/* ====================== Navigation ====================== */
.topbar {
position: relative;
z-index: 50;
background: var(--ink);
color: var(--night-text);
font-size: 12px;
border-bottom: 1px solid var(--night-line);
font-weight: 400;
letter-spacing: -0.002em;
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px var(--gutter);
gap: 24px;
}
.topbar-left, .topbar-right {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
/* Topbar-right immer rechts, auch wenn topbar-left fehlt */
.topbar-right { margin-left: auto; }
.topbar a {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.78);
transition: color 0.2s var(--ease);
text-decoration: none;
}
.topbar a:hover { color: var(--brand-blue); }
.topbar a:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 4px; }
.topbar .pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--brand-red);
box-shadow: 0 0 0 0 rgba(255, 87, 87, 0.7);
animation: pulse 1.6s infinite;
display: inline-block;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 87, 87, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(255, 87, 87, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 87, 87, 0); }
}
.nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(246, 243, 236, 0.85);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--line);
transition: background 0.3s var(--ease);
}
.nav.scrolled { background: rgba(246, 243, 236, 0.96); }
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px var(--gutter);
gap: 32px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
}
.nav-brand img { height: 32px; width: auto; }
.nav-links {
display: flex;
gap: 8px;
align-items: center;
list-style: none;
}
.nav-links > li > a {
display: inline-flex;
align-items: center;
padding: 10px 4px;
margin: 0 8px;
min-height: 44px;
font-size: 13.5px;
font-weight: 450;
letter-spacing: -0.003em;
transition: color 0.2s var(--ease);
position: relative;
color: var(--ink);
text-decoration: none;
}
/* Dezenter roter Underline-Bar als Indikator, statt voller Background-Fläche */
.nav-links > li > a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 6px;
height: 1.5px;
background: var(--brand-red-deep);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > a[aria-current="page"],
.nav-links .has-sub:hover > a,
.nav-links .has-sub:focus-within > a {
color: var(--brand-red-deep);
background: transparent;
}
.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after,
.nav-links > li > a[aria-current="page"]::after,
.nav-links .has-sub:hover > a::after,
.nav-links .has-sub:focus-within > a::after {
transform: scaleX(1);
}
.nav-links .has-sub { position: relative; }
.nav-links .submenu {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
background: white;
border: 1px solid var(--line);
padding: 22px 24px 18px;
min-width: 640px;
max-width: 720px;
border-radius: 10px;
box-shadow: 0 24px 48px -18px rgba(0,0,0,0.16), 0 4px 10px -4px rgba(0,0,0,0.06);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
list-style: none;
z-index: 60;
}
/* 3-Spalten-Layout für die Kategorien */
.nav-links .submenu-grouped {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 8px 32px;
}
.nav-links .submenu-grouped .sm-col {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.nav-links .submenu-grouped .sm-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.nav-links .submenu-grouped .sm-cat {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
padding: 0 0 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
/* Footer-Bereich: dezent abgesetzt, schlanker Text-Link */
.nav-links .submenu-grouped .sm-foot {
grid-column: 1 / -1;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex;
justify-content: flex-end;
}
.nav-links .submenu-grouped .sm-hub-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13px;
font-weight: 500;
color: var(--brand-red-deep);
text-decoration: none;
letter-spacing: -0.003em;
border-radius: 0;
background: transparent;
min-height: auto;
transition: gap 0.2s var(--ease);
}
.nav-links .submenu-grouped .sm-hub-link::after { content: none; }
.nav-links .submenu-grouped .sm-hub-link:hover,
.nav-links .submenu-grouped .sm-hub-link:focus-visible {
color: var(--brand-red-deep);
background: transparent;
gap: 12px;
}
.nav-links .submenu-grouped .sm-hub-link span {
display: inline-block;
font-family: var(--font-mono);
font-size: 15px;
transition: transform 0.2s var(--ease);
}
.nav-links .has-sub:hover .submenu,
.nav-links .has-sub:focus-within .submenu {
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
/* Submenü rechtsbündig verankern, wenn nahe am rechten Rand */
.nav-links li:nth-last-child(-n+3) .submenu { left: auto; right: 0; }
.nav-links .has-sub:hover .submenu,
.nav-links .has-sub:focus-within .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-links .submenu-grouped .sm-col a {
display: block;
padding: 7px 0;
font-size: 13.5px;
font-weight: 450;
letter-spacing: -0.003em;
color: var(--ink);
text-decoration: none;
border-radius: 0;
min-height: auto;
transition: color 0.15s var(--ease), padding-left 0.18s var(--ease);
position: relative;
}
.nav-links .submenu-grouped .sm-col a::after { content: none; }
.nav-links .submenu-grouped .sm-col a:hover,
.nav-links .submenu-grouped .sm-col a:focus-visible {
color: var(--brand-red-deep);
background: transparent;
padding-left: 6px;
}
.nav-links .submenu-grouped .sm-col a[aria-current="page"] {
color: var(--brand-red-deep);
font-weight: 500;
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
min-height: 44px;
background: var(--ink);
color: var(--paper);
border-radius: 100px;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
transition: transform 0.2s var(--ease), background 0.2s var(--ease);
text-decoration: none;
}
.nav-cta:hover { background: var(--brand-red); transform: translateY(-1px); }
.nav-toggle {
display: none;
width: 44px; height: 44px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
}
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 1024px) {
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: inline-flex; }
}
/* Mobile menu */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--night);
color: var(--night-text);
z-index: 100;
padding: 28px var(--gutter);
transform: translateY(-100%);
transition: transform 0.4s var(--ease);
overflow-y: auto;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 48px;
}
/* Mobile-Menü-Logo: nutzt direkt logo-weiss.svg, kein Filter mehr nötig. */
.mobile-menu-close {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(255,255,255,0.1);
}
.mobile-menu nav { display: grid; gap: 4px; }
/* Direkter Link auf erster Ebene */
.mobile-menu .mm-nav > a,
.mobile-menu .mm-nav > details > summary {
font-family: var(--font-display);
font-size: 28px;
font-weight: 430;
letter-spacing: -0.02em;
padding: 16px 0;
border-bottom: 1px solid var(--night-line);
color: var(--night-text);
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
}
.mobile-menu .mm-nav > details > summary::-webkit-details-marker,
.mobile-menu .mm-nav > details > summary::marker { display: none; }
/* Chevron (+/×) als rein-CSS Pfeilersatz */
.mm-chev {
width: 18px; height: 18px;
position: relative;
flex-shrink: 0;
transition: transform 0.25s var(--ease);
}
.mm-chev::before, .mm-chev::after {
content: '';
position: absolute;
background: var(--night-text);
border-radius: 1px;
}
.mm-chev::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.mm-chev::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); transition: transform 0.25s var(--ease); }
details[open] > summary > .mm-chev::after { transform: translateX(-50%) scaleY(0); }
/* Sub-Block: animiert öffnen */
.mm-sub {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 0 16px;
border-bottom: 1px solid var(--night-line);
}
.mm-cat {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.48);
padding: 14px 0 6px;
}
.mm-cat:first-child { padding-top: 4px; }
.mm-sub a {
font-family: var(--font-body);
font-size: 17px;
font-weight: 450;
letter-spacing: -0.005em;
padding: 10px 0;
color: var(--night-text);
text-decoration: none;
border-bottom: none;
}
.mm-sub a:hover { color: var(--brand-red); }
/* Hub-Eintrag farblich abgesetzt */
.mm-sub a.mm-hub {
margin-top: 14px;
padding: 14px 16px;
border-radius: 8px;
background: rgba(255, 87, 87, 0.1);
border: 1px solid rgba(255, 87, 87, 0.25);
color: var(--brand-red);
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mm-sub a.mm-hub:hover {
background: var(--brand-red);
color: white;
border-color: var(--brand-red);
}
.mm-sub a.mm-hub span { font-family: var(--font-mono); font-size: 16px; }
.mobile-menu .mobile-cta {
margin-top: 32px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 28px;
background: var(--brand-red);
color: white;
border-radius: 100px;
font-weight: 600;
}
/* ====================== Buttons ====================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
min-height: 44px; /* WCAG 2.5.5 AAA Target Size */
min-width: 44px;
border-radius: 100px;
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
transition: all 0.25s var(--ease);
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-primary {
background: var(--ink);
color: var(--paper);
}
.btn-primary:hover { background: var(--brand-red); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(255,87,87,0.5); }
.btn-fire {
background: var(--brand-red);
color: white;
}
.btn-fire:hover { background: var(--brand-red-deep); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(255,87,87,0.55); }
.btn-water {
background: var(--brand-blue);
color: var(--ink);
}
.btn-water:hover { background: var(--brand-blue-deep); color: white; transform: translateY(-2px); }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dark .btn-ghost { color: var(--night-text); border-color: var(--night-line); }
.dark .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
font-weight: 600;
padding: 0;
position: relative;
}
.btn-arrow::after {
content: '→';
display: inline-block;
transition: transform 0.25s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(6px); }
/* ====================== Hero ====================== */
.hero {
position: relative;
background: var(--night);
color: var(--night-text);
overflow: hidden;
min-height: 88vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: clamp(48px, 6vw, 80px);
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-media img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.5;
filter: grayscale(0.85) contrast(1.18) brightness(0.78);
transform: scale(1.04);
animation: heroZoom 22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroZoom {
from { transform: scale(1.1); }
to { transform: scale(1.0); }
}
.hero-media::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,10,12,0.4) 0%, rgba(10,10,12,0.65) 50%, rgba(10,10,12,0.95) 100%);
}
/* Subtile Filmkorn Textur über dem ganzen Hero */
.hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: overlay;
z-index: 3;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 120px 120px;
z-index: 1;
pointer-events: none;
mask-image: linear-gradient(180deg, transparent 0%, black 40%, black 70%, transparent 100%);
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
.hero-meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 32px;
flex-wrap: wrap;
}
.hero-meta .badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
font-size: 12.5px;
font-weight: 500;
color: var(--night-text);
}
.hero-meta .badge .dot {
width: 22px; height: 22px;
background: var(--brand-red);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-size: 11px;
font-weight: 700;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(30px, 3.4vw, 52px);
font-weight: 380;
line-height: 1.02;
letter-spacing: -0.03em;
max-width: 16ch;
color: var(--night-text);
}
.hero-title em {
font-family: var(--font-display);
font-style: normal;
font-weight: inherit;
letter-spacing: -0.01em;
color: var(--brand-red);
}
.hero-title .accent {
background: var(--grad-mix);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
margin-top: 40px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: end;
}
.hero-sub p {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 50ch;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 900px) {
.hero-sub { grid-template-columns: 1fr; gap: 32px; }
.hero-actions { justify-content: flex-start; }
}
.hero-stats {
margin-top: clamp(60px, 8vw, 90px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
border-top: 1px solid var(--night-line);
padding-top: 28px;
}
.hero-stats .stat .num {
font-family: var(--font-display);
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.02em;
color: var(--night-text);
}
.hero-stats .stat .num span { color: var(--brand-blue); font-weight: 400; }
.hero-stats .stat:nth-child(2) .num span { color: var(--brand-red); }
.hero-stats .stat .lbl {
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.4;
}
@media (max-width: 700px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ====================== Marquee ====================== */
.marquee {
background: var(--ink);
color: var(--paper);
border-top: 1px solid var(--night-line);
border-bottom: 1px solid var(--night-line);
overflow: hidden;
padding: 18px 0;
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
display: flex;
gap: 60px;
width: max-content;
animation: marquee 38s linear infinite;
align-items: center;
}
.marquee-track span {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 400;
font-style: normal;
letter-spacing: -0.012em;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 48px;
color: rgba(236, 232, 223, 0.85);
}
.marquee-track span::after {
content: '';
width: 4px; height: 4px;
background: rgba(255,255,255,0.35);
border-radius: 50%;
display: inline-block;
}
.marquee-track span:nth-child(2n)::after { background: var(--brand-blue); opacity: 0.6; }
@keyframes marquee {
to { transform: translateX(-50%); }
}
/* ====================== Section heads ====================== */
.section-head {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: end;
margin-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 900px) {
.section-head { grid-template-columns: 1fr; gap: 28px; }
}
.section-head .col-l { display: flex; flex-direction: column; gap: 22px; max-width: 28ch; }
/* ====================== Services Grid ====================== */
.services-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.service-card {
position: relative;
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
transition: transform 0.5s var(--ease);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.service-card:hover { transform: translateY(-3px); }
.service-card .img {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--ink);
position: relative;
border-radius: 3px;
}
.service-card .img img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.7) contrast(1.15) brightness(0.78);
transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s var(--ease);
}
.service-card:hover .img img { transform: scale(1.05); filter: grayscale(0.1) contrast(1.05) brightness(0.95); }
.service-card .img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.32) 100%);
}
.service-card .img .num {
position: absolute;
top: 16px; left: 16px;
font-family: var(--font-mono);
font-style: normal;
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
}
.service-card .img .num::before {
content: '';
width: 14px; height: 1px;
background: rgba(255,255,255,0.7);
display: inline-block;
}
.service-card .body {
padding: 22px 0 0;
display: flex;
flex-direction: column;
flex: 1;
gap: 8px;
}
.service-card .body h3 {
font-family: var(--font-display);
font-size: clamp(17px, 1.3vw, 20px);
font-weight: 480;
line-height: 1.22;
letter-spacing: -0.014em;
}
.service-card .body p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.55;
}
.service-card .body .more {
margin-top: 14px;
padding-top: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 500;
color: var(--ink);
border-top: none;
letter-spacing: -0.005em;
text-transform: none;
}
.service-card .body .more::after {
content: '→';
margin-left: 4px;
transition: transform 0.25s var(--ease);
font-size: 14px;
}
.service-card:hover .body .more::after { transform: translateX(4px); }
.service-card.span-6 { grid-column: span 6; }
.service-card.span-4 { grid-column: span 4; }
.service-card.span-12 { grid-column: span 12; }
.service-card.span-8 { grid-column: span 8; }
@media (max-width: 900px) {
.service-card.span-6, .service-card.span-4, .service-card.span-8 { grid-column: span 12; }
}
/* Featured wide service card */
.service-card.feature .img { aspect-ratio: 16/9; }
.service-card.feature .body { padding: 36px; }
/* ====================== Specialization band (dark) ====================== */
.specs {
background: var(--night);
color: var(--night-text);
padding: clamp(80px, 12vw, 140px) 0;
position: relative;
overflow: hidden;
}
.specs::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 80% 20%, rgba(56,182,255,0.14), transparent 70%),
radial-gradient(50% 40% at 10% 80%, rgba(255,87,87,0.12), transparent 70%);
pointer-events: none;
}
.specs > .container { position: relative; z-index: 1; }
.specs-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid var(--night-line);
}
.spec-item {
border-bottom: 1px solid var(--night-line);
padding: 28px 0;
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 28px;
align-items: center;
cursor: pointer;
transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.spec-item:nth-child(odd) { border-right: 1px solid var(--night-line); padding-right: 36px; }
.spec-item:nth-child(even) { padding-left: 36px; }
.spec-item:hover { background: rgba(255,255,255,0.015); }
.spec-item .num {
font-family: var(--font-mono);
font-style: normal;
font-size: 11px;
color: var(--brand-blue);
font-weight: 500;
letter-spacing: 0.1em;
}
.spec-item h3 {
font-family: var(--font-display);
font-size: clamp(17px, 1.5vw, 22px);
font-weight: 480;
letter-spacing: -0.014em;
line-height: 1.18;
color: var(--night-text);
}
.spec-item p {
font-size: 14px;
color: rgba(255,255,255,0.5);
margin-top: 6px;
line-height: 1.55;
}
.spec-item .arrow {
font-family: var(--font-display);
font-size: 18px;
color: rgba(255,255,255,0.35);
transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.spec-item:hover .arrow { color: var(--brand-blue); transform: translate(4px, -4px); }
.spec-item { color: inherit; text-decoration: none; }
@media (max-width: 800px) {
.specs-list { grid-template-columns: 1fr; }
.spec-item:nth-child(odd) { border-right: none; padding-right: 0; }
.spec-item:nth-child(even) { padding-left: 0; }
.spec-item { grid-template-columns: 40px 1fr auto; gap: 18px; }
}
/* ====================== Process ====================== */
.process {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
}
.process-step {
padding: 36px 28px 36px 0;
border-right: 1px solid var(--line);
position: relative;
}
.process-step:last-child { border-right: none; padding-right: 0; }
.process-step:nth-child(n+2) { padding-left: 28px; }
.process-step .step-num {
font-family: var(--font-mono);
font-style: normal;
font-size: 11px;
color: var(--brand-red);
font-weight: 500;
letter-spacing: 0.12em;
margin-bottom: 16px;
text-transform: uppercase;
}
.process-step h3 {
font-family: var(--font-display);
font-size: clamp(16px, 1.2vw, 19px);
font-weight: 480;
line-height: 1.22;
margin-bottom: 12px;
letter-spacing: -0.014em;
}
.process-step p {
color: var(--muted);
font-size: 14.5px;
line-height: 1.55;
}
@media (max-width: 900px) {
.process { grid-template-columns: repeat(2, 1fr); }
.process-step:nth-child(2) { border-right: none; }
.process-step { padding: 28px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
.process { grid-template-columns: 1fr; }
.process-step { border-right: none; }
}
/* ====================== Editorial split ====================== */
.split {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.split.reverse { grid-template-columns: 1.1fr 1fr; }
.split.reverse .split-media { order: 2; }
.split-media {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 4px;
}
.split-media img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.5) contrast(1.1) brightness(0.88);
transition: filter 0.6s var(--ease);
}
.split-media:hover img { filter: grayscale(0.15) contrast(1.05) brightness(0.95); }
.split-media .badge-floating {
position: absolute;
bottom: 24px; left: 24px;
background: var(--paper);
color: var(--ink);
padding: 18px 22px;
border-radius: 4px;
max-width: 280px;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.25);
}
.split-media .badge-floating .num {
font-family: var(--font-display);
font-size: 26px;
font-weight: 450;
letter-spacing: -0.018em;
line-height: 1;
}
.split-media .badge-floating .lbl {
font-size: 12.5px;
margin-top: 6px;
color: var(--muted);
letter-spacing: 0.01em;
}
/* Erweiterte Kontakt-Karte (Firma + Adresse + Tel + Mail) im split-media Badge */
.split-media .badge-floating.badge-contact {
max-width: 320px;
padding: 20px 24px;
display: grid;
gap: 10px;
}
.split-media .badge-floating .bc-name {
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.05;
color: var(--ink);
}
.split-media .badge-floating .bc-addr {
font-size: 13px;
line-height: 1.45;
color: var(--muted);
letter-spacing: 0.005em;
}
.split-media .badge-floating .bc-line {
font-size: 13px;
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.split-media .badge-floating .bc-line a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.split-media .badge-floating .bc-line a:hover,
.split-media .badge-floating .bc-line a:focus-visible {
color: var(--brand-red-deep);
border-bottom-color: currentColor;
}
.split-text { display: flex; flex-direction: column; gap: 24px; }
.split-text ul {
list-style: none;
display: grid;
gap: 12px;
margin-top: 8px;
}
.split-text ul li {
padding-left: 28px;
position: relative;
font-size: 16px;
line-height: 1.5;
}
.split-text ul li::before {
content: '';
position: absolute;
left: 0; top: 11px;
width: 16px; height: 1px;
background: var(--brand-red);
}
.dark .split-text ul li::before { background: var(--brand-blue); }
@media (max-width: 900px) {
.split, .split.reverse { grid-template-columns: 1fr; gap: 36px; }
.split.reverse .split-media { order: 0; }
}
/* ====================== Region (Map block) ====================== */
.region {
background: var(--paper-warm);
}
.region-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 5vw, 72px);
align-items: center;
}
/* Region-Kategorie-Label */
.region-cat {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 12px;
}
.region-cat:not(:first-of-type) { margin-top: 28px; }
/* Saubere Stadt-Karten */
.region-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.region-cards a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 16px;
background: white;
border: 1px solid var(--line);
border-radius: 6px;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.region-cards a:hover {
border-color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 8px 20px -12px rgba(0,0,0,0.2);
}
.region-cards a .ar {
color: var(--muted);
font-size: 14px;
transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.region-cards a:hover .ar { color: var(--brand-red); transform: translateX(3px); }
@media (max-width: 800px) {
.region-grid { grid-template-columns: 1fr; }
.region-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.region-cards { grid-template-columns: 1fr; }
}
/* ====================== Einsatzgebiet, kompakte Variante ======================
2-spaltig: Karte links (kompakt), kleine Stats + CTA rechts.
Section-Head bleibt oben. Keine zweite Headline, kein Z-Pattern. */
.region-quiet .region-compact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 72px);
align-items: center;
}
.region-quiet .region-figure {
margin: 0;
max-width: 380px;
width: 100%;
display: block;
justify-self: end;
}
.region-quiet .region-figure svg {
width: 100%;
height: auto;
display: block;
}
.region-quiet .region-side {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 380px;
align-self: center;
}
.region-quiet .region-note {
font-size: 16px;
line-height: 1.55;
color: var(--ink);
margin: 0;
}
.region-quiet .region-cta-btn {
align-self: flex-start;
}
@media (max-width: 900px) {
.region-quiet .region-compact { grid-template-columns: 1fr; gap: 40px; }
.region-quiet .region-figure { max-width: 340px; margin: 0 auto; justify-self: center; }
.region-quiet .region-side { max-width: none; }
}
@media (max-width: 560px) {
.region-quiet .region-stats > div { grid-template-columns: 1fr; gap: 4px; }
}
.region-svg {
width: 100%;
height: auto;
background: white;
border-radius: 6px;
border: 1px solid var(--line);
padding: 30px;
}
/* ====================== Testimonials ====================== */
.quote-card {
background: transparent;
border: none;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 32px 0 0;
display: flex;
flex-direction: column;
gap: 22px;
height: 100%;
}
.quote-card .quote-mark {
font-family: var(--font-display);
font-size: 56px;
line-height: 0.4;
color: var(--brand-red);
font-style: normal;
margin-bottom: -6px;
}
.quote-card blockquote {
font-family: var(--font-display);
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.45;
font-weight: 400;
font-style: normal;
letter-spacing: -0.003em;
color: var(--ink);
flex: 1;
}
.quote-card .author {
display: flex;
align-items: center;
gap: 12px;
border-top: none;
padding-top: 0;
margin-top: 8px;
}
.quote-card .avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--line-strong);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.02em;
}
.quote-card .author .name { font-weight: 500; font-size: 14px; letter-spacing: -0.005em; }
.quote-card .author .role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.quotes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .quotes-grid { grid-template-columns: 1fr; } }
/* ====================== CTA section ====================== */
.cta-band {
background: var(--ink);
color: var(--paper);
padding: clamp(80px, 12vw, 140px) 0;
position: relative;
overflow: hidden;
}
.cta-band::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(80% 60% at 80% 50%, rgba(255,87,87,0.18), transparent 60%),
radial-gradient(70% 60% at 20% 50%, rgba(56,182,255,0.16), transparent 60%);
pointer-events: none;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 60px;
align-items: end;
}
.cta-grid h2 {
font-family: var(--font-display);
font-size: clamp(22px, 2.3vw, 32px);
font-weight: 450;
line-height: 1.08;
letter-spacing: -0.022em;
}
.cta-grid h2 em {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
}
.cta-actions {
display: flex;
flex-direction: column;
gap: 14px;
}
.cta-actions .btn { justify-content: center; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; gap: 32px; } }
/* ====================== Form ====================== */
.form {
display: grid;
gap: 18px;
background: white;
border: 1px solid var(--line);
border-radius: 10px;
padding: clamp(24px, 3vw, 36px);
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.field input, .field textarea, .field select {
font: inherit;
font-size: 16px;
background: white;
border: 1px solid var(--line-strong);
border-radius: 6px;
padding: 12px 14px;
min-height: 44px;
color: var(--ink);
width: 100%;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
/* Custom-Styling für select: native Browser-Pfeile abschalten, eigenen Chevron als SVG */
.field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
padding-right: 36px;
cursor: pointer;
}
.field select:disabled { cursor: not-allowed; opacity: 0.6; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(13,13,15,0.4); }
.field input:hover, .field textarea:hover, .field select:hover {
border-color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--brand-red);
box-shadow: 0 0 0 3px rgba(216,58,58,0.12);
background: white;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: 2px;
}
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown) {
border-color: var(--brand-red-deep);
}
.field .field-error {
display: none;
font-size: 12.5px;
color: var(--brand-red-deep);
margin-top: 4px;
font-weight: 500;
}
.field input:invalid:not(:placeholder-shown) ~ .field-error,
.field textarea:invalid:not(:placeholder-shown) ~ .field-error { display: block; }
.field textarea { resize: vertical; min-height: 110px; }
.field-checkbox {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 13.5px;
color: var(--ink);
line-height: 1.55;
cursor: pointer;
}
.field-checkbox input[type=checkbox] {
flex: 0 0 18px;
width: 18px;
height: 18px;
margin: 2px 0 0;
min-height: 0;
border: 1.5px solid var(--line-strong);
border-radius: 3px;
background: white;
accent-color: var(--brand-red-deep);
cursor: pointer;
}
.field-checkbox > span {
flex: 1 1 auto;
min-width: 0;
}
.field-checkbox a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.field-checkbox a:hover, .field-checkbox a:focus-visible {
color: var(--brand-red-deep);
}
/* Datenschutz-Consent als ruhiger Block mit Border, getrennt von der Form-Nav */
.form-consent {
margin-top: 8px;
padding: 16px 18px;
background: rgba(13,13,15,0.025);
border: 1px solid var(--line);
border-radius: 6px;
}
/* Form-Nav: klare Trennung mit Border-Top, ausgewogene Buttons */
.form-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 18px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.form-nav .btn-primary { min-width: 180px; }
/* Kleiner Fuß-Hinweis unter der Nav */
.form-foot-note {
font-size: 13px;
color: var(--muted);
margin: 12px 0 0;
text-align: right;
}
/* Service selection chips */
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
padding: 12px 16px;
min-height: 44px;
display: inline-flex;
align-items: center;
border: 1px solid var(--line-strong);
border-radius: 100px;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s var(--ease);
user-select: none;
background: transparent;
color: var(--ink);
}
.chip:hover { border-color: var(--ink); }
.chip.active {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* ====================== Contact band ====================== */
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
}
.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-block { display: flex; flex-direction: column; gap: 6px; }
.contact-block .label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.contact-block .value {
font-family: var(--font-display);
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 480;
letter-spacing: -0.014em;
line-height: 1.3;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
/* ====================== Footer ====================== */
.footer {
background: var(--ink);
color: var(--night-text);
padding: clamp(60px, 8vw, 100px) 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid var(--night-line);
}
.footer h4 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 20px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer ul a {
font-size: 14.5px;
color: rgba(255,255,255,0.78);
transition: color 0.2s var(--ease);
text-decoration: none;
}
.footer ul a:hover { color: var(--brand-blue); }
.footer ul a:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: 2px; }
.footer-brand p {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
font-style: normal;
letter-spacing: -0.003em;
margin-top: 18px;
max-width: 32ch;
line-height: 1.5;
color: rgba(255,255,255,0.85);
}
.footer-bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,0.5);
flex-wrap: wrap;
gap: 16px;
}
.footer-bottom a, .footer-bottom button { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-bottom a:hover, .footer-bottom button:hover { color: var(--brand-blue); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
/* ====================== Reveal animations ====================== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
/* Char-by-char hero reveal */
.hero-title {
opacity: 0;
animation: heroFade 1.2s var(--ease) 0.2s forwards;
}
.hero-split > * {
opacity: 0;
animation: heroFade 1s var(--ease) forwards;
}
.hero-split > *:nth-child(1) { animation-delay: 0.4s; }
.hero-split > *:nth-child(2) { animation-delay: 0.7s; }
.hero-meta { opacity: 0; animation: heroFade 1s var(--ease) 0.05s forwards; }
.coord-strip { opacity: 0; animation: heroFade 1s var(--ease) 1s forwards; }
@keyframes heroFade {
to { opacity: 1; }
}
/* ====================== Article (blog) styles ====================== */
.article-hero {
background: var(--night);
color: var(--night-text);
padding: 60px 0 80px;
position: relative;
overflow: hidden;
}
.article-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(70% 50% at 30% 30%, rgba(56,182,255,0.1), transparent 70%);
pointer-events: none;
}
.article-hero > .container { position: relative; z-index: 1; }
.article-meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
color: rgba(255,255,255,0.55);
margin-bottom: 24px;
}
.article-meta .tag {
padding: 4px 10px;
background: rgba(255,255,255,0.08);
border-radius: 100px;
color: var(--brand-blue);
font-weight: 500;
}
.article-title {
font-family: var(--font-display);
font-size: clamp(21px, 2.2vw, 30px);
font-weight: 450;
line-height: 1.12;
letter-spacing: -0.02em;
max-width: 24ch;
}
.article-feature-img {
width: 100%;
aspect-ratio: 16/8;
object-fit: cover;
margin: -40px 0 0;
}
.article-body {
max-width: 680px;
margin: 0 auto;
padding: 72px var(--gutter);
font-size: 17px;
line-height: 1.7;
color: var(--ink-soft);
}
.article-body h2 {
font-family: var(--font-display);
font-size: clamp(19px, 1.9vw, 24px);
font-weight: 480;
letter-spacing: -0.016em;
margin: 56px 0 16px;
line-height: 1.25;
color: var(--ink);
}
.article-body h3 {
font-family: var(--font-display);
font-size: clamp(16px, 1.3vw, 19px);
font-weight: 520;
letter-spacing: -0.01em;
margin: 36px 0 12px;
line-height: 1.3;
color: var(--ink);
}
.article-body p { margin-bottom: 22px; color: var(--ink-soft); }
.article-body ul, .article-body ol {
margin: 0 0 26px 22px;
display: grid;
gap: 10px;
}
.article-body li { padding-left: 8px; }
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body blockquote {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 26px);
font-weight: 400;
font-style: normal;
line-height: 1.35;
letter-spacing: -0.005em;
border-left: 2px solid var(--brand-red);
padding: 4px 0 4px 28px;
margin: 44px 0;
color: var(--ink);
}
.article-body .callout {
background: var(--paper-warm);
border-radius: 6px;
padding: 28px;
margin: 36px 0;
border-left: 3px solid var(--brand-blue);
}
.article-body .callout strong { display: block; margin-bottom: 8px; }
.related {
background: var(--paper-warm);
padding: clamp(60px, 8vw, 100px) 0;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }
.post-card {
background: white;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--line);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
display: flex;
flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -25px rgba(0,0,0,0.2); }
.post-card .img { aspect-ratio: 16/10; overflow: hidden; }
.post-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post-card:hover .img img { transform: scale(1.05); }
.post-card .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card .body .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.post-card .body h3 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 480;
letter-spacing: -0.012em;
line-height: 1.22;
}
.post-card .body .more { margin-top: auto; font-size: 13.5px; font-weight: 600; padding-top: 12px; }
/* ====================== Region page extras ====================== */
.region-hero {
background: var(--paper-warm);
padding: 80px 0 60px;
}
.breadcrumbs {
font-size: 13px;
color: var(--muted);
margin-bottom: 24px;
}
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span { margin: 0 8px; opacity: 0.5; }
/* ====================== Helpers ====================== */
.muted { color: var(--muted); }
.text-center { text-align: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.gap-l { gap: 24px; }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 48px; }
.fire { color: var(--brand-red); }
.water { color: var(--brand-blue); }
.divider {
width: 100%; height: 1px; background: var(--line); margin: 60px 0;
}
.dark .divider { background: var(--night-line); }
/* Scroll progress bar (optional accent) */
.scroll-progress {
position: fixed; top: 0; left: 0; height: 2px;
background: linear-gradient(90deg, var(--brand-blue), var(--brand-red));
width: 0%;
z-index: 200;
transition: width 0.1s linear;
}
/* Floating phone (mobile) */
.float-call {
position: fixed;
bottom: 24px; right: 24px;
width: 56px; height: 56px;
background: var(--brand-red);
color: white;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
z-index: 50;
box-shadow: 0 14px 28px -8px rgba(255,87,87,0.55);
}
@media (max-width: 700px) { .float-call { display: inline-flex; } }
/* Submenu Divider */
.nav-links .submenu-divider {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.nav-links .submenu-divider a { color: var(--brand-red); }
/* ====================== Regionen-Hub ====================== */
.hub-hero {
padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 72px);
background: var(--paper-warm);
border-bottom: 1px solid var(--line);
}
.hub-meta {
display: flex;
gap: 32px;
flex-wrap: wrap;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.hub-meta strong { color: var(--ink); font-weight: 600; }
.hub-section {
padding: clamp(56px, 7vw, 96px) 0;
border-bottom: 1px solid var(--line);
}
.hub-section:last-of-type { border-bottom: none; }
.hub-section-head {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 5vw, 72px);
margin-bottom: clamp(32px, 4vw, 56px);
align-items: end;
}
@media (max-width: 900px) { .hub-section-head { grid-template-columns: 1fr; gap: 16px; } }
/* ====================== Leistungs-Hub (leistungen.html) ====================== */
.hub-tldr {
background: white;
border: 1px solid var(--line);
border-radius: 10px;
padding: clamp(24px, 3vw, 36px);
max-width: 880px;
margin: 0 auto;
}
.hub-tldr h2 { margin-bottom: 14px; }
.hub-tldr p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; }
.tldr-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.tldr-list li {
padding: 12px 0;
border-top: 1px solid var(--line);
font-size: 14.5px;
color: var(--muted);
line-height: 1.5;
}
.tldr-list li:last-child { border-bottom: 1px solid var(--line); }
.tldr-list li strong { color: var(--ink); margin-right: 8px; }
.lh-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 900px) { .lh-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lh-cards { grid-template-columns: 1fr; } }
.lh-card {
display: flex;
flex-direction: column;
background: white;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lh-card:hover, .lh-card:focus-visible {
border-color: var(--ink);
transform: translateY(-3px);
box-shadow: 0 18px 30px -18px rgba(0,0,0,0.18);
}
.lh-card-media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ink);
}
.lh-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.35) contrast(1.05);
transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.lh-card:hover .lh-card-media img {
transform: scale(1.04);
filter: grayscale(0) contrast(1);
}
.lh-card-body {
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
}
.lh-card-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.15;
margin: 0;
}
.lh-card-desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--muted);
margin: 0;
flex: 1 1 auto;
}
.lh-card-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.lh-pill {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
background: rgba(13,13,15,0.05);
color: var(--muted);
}
.lh-card-more {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-red-deep);
margin-top: 6px;
}
.lh-card-more span { display: inline-block; transition: transform 0.25s var(--ease); }
.lh-card:hover .lh-card-more span { transform: translateX(4px); }
.hub-section-head .num {
font-family: var(--font-display);
font-style: normal;
font-size: clamp(48px, 6vw, 88px);
font-weight: 400;
color: var(--brand-red);
line-height: 0.85;
letter-spacing: -0.025em;
}
.hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.hub-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: white;
text-decoration: none;
color: var(--ink);
transition: background 0.25s var(--ease);
position: relative;
}
.hub-card:hover { background: var(--paper-warm); }
.hub-card:hover h3 { color: var(--brand-red); }
.hub-card:hover .hub-arrow { transform: translate(4px, -4px); color: var(--brand-red); }
.hub-card .hub-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.hub-card h3 {
font-family: var(--font-display);
font-size: clamp(19px, 1.6vw, 22px);
font-weight: 480;
letter-spacing: -0.014em;
line-height: 1.2;
color: var(--ink);
transition: color 0.2s var(--ease);
}
.hub-card .hub-arrow {
font-size: 18px;
color: var(--muted);
transition: transform 0.25s var(--ease), color 0.25s var(--ease);
font-weight: 300;
flex-shrink: 0;
}
.hub-card .hub-card-meta {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
display: flex;
gap: 8px;
}
.hub-card .hub-card-meta span:not(:last-child)::after { content: '·'; margin-left: 8px; opacity: 0.5; }
.hub-card .hub-card-desc {
font-size: 13.5px;
color: var(--muted);
line-height: 1.5;
margin-top: 4px;
}
.hub-card.featured {
background: var(--ink);
color: var(--paper);
grid-column: span 1;
}
.hub-card.featured h3 { color: var(--paper); }
.hub-card.featured .hub-arrow { color: var(--brand-blue); }
.hub-card.featured:hover { background: var(--ink-soft); }
.hub-card.featured:hover h3 { color: var(--brand-blue); }
.hub-card.featured .hub-card-meta { color: rgba(255,255,255,0.55); }
.hub-card.featured .hub-card-desc { color: rgba(255,255,255,0.7); }
/* CTA-Hint zur Erweiterung */
.hub-extend {
background: var(--paper-warm);
padding: clamp(40px, 5vw, 72px);
border-radius: 4px;
margin-top: clamp(56px, 7vw, 96px);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: center;
}
@media (max-width: 700px) { .hub-extend { grid-template-columns: 1fr; } }
.hub-extend p {
font-family: var(--font-display);
font-style: normal;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--ink);
}
/* ====================== Blog mit Sidebar (Editorial V1) ====================== */
.bx-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: clamp(40px, 5vw, 72px);
padding: clamp(56px, 7vw, 96px) 0 clamp(96px, 12vw, 160px);
}
@media (max-width: 900px) { .bx-layout { grid-template-columns: 1fr; } }
.bx-filter-bar {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.bx-filter {
background: transparent;
border: none;
padding: 10px 14px;
min-height: 40px;
font: inherit;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--muted);
cursor: pointer;
border-radius: var(--radius);
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s var(--ease);
}
.bx-filter:hover { color: var(--ink); }
.bx-filter.active { color: var(--ink); background: var(--paper-warm); }
.bx-filter .bx-count {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
letter-spacing: 0.05em;
color: var(--muted);
font-weight: 400;
}
.bx-filter.active .bx-count { color: var(--brand-red); }
.bx-articles { display: grid; gap: 0; }
.bx-article {
display: grid;
grid-template-columns: 280px 1fr;
gap: 36px;
padding: 36px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
transition: opacity 0.25s var(--ease);
}
.bx-article:first-child { padding-top: 0; }
.bx-article:hover { opacity: 0.92; }
.bx-article:hover .bx-img img { transform: scale(1.04); filter: grayscale(0.1); }
.bx-article:hover h3 { color: var(--brand-red); }
@media (max-width: 700px) {
.bx-article { grid-template-columns: 1fr; gap: 20px; }
}
.bx-img {
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 3px;
background: var(--paper-warm);
}
.bx-img img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.5) contrast(1.1) brightness(0.9);
transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.bx-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.bx-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.bx-cat { color: var(--brand-red); }
.bx-article h3 {
font-family: var(--font-display);
font-size: clamp(18px, 1.8vw, 23px);
font-weight: 480;
line-height: 1.22;
letter-spacing: -0.014em;
color: var(--ink);
transition: color 0.2s var(--ease);
}
.bx-article h3 em {
font-style: normal;
font-weight: 400;
letter-spacing: -0.012em;
}
.bx-article p {
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 60ch;
}
.bx-more {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.bx-more::after { content: '→'; transition: transform 0.2s var(--ease); }
.bx-article:hover .bx-more::after { transform: translateX(4px); }
.bx-article:hover .bx-more { color: var(--brand-red); }
/* Sidebar */
.bx-sidebar {
display: flex;
flex-direction: column;
gap: 40px;
position: sticky;
top: 100px;
height: fit-content;
}
@media (max-width: 900px) { .bx-sidebar { position: static; } }
.bx-side-block { display: flex; flex-direction: column; gap: 16px; }
.bx-side-head {
display: inline-flex;
align-items: center;
gap: 10px;
}
.bx-side-head .bx-line {
width: 24px; height: 1px;
background: var(--ink);
opacity: 0.4;
display: inline-block;
}
.bx-side-head h2 {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.bx-search { position: relative; }
.bx-search input {
width: 100%;
padding: 14px 16px 14px 44px;
min-height: 44px;
border: none;
border-bottom: 1px solid var(--line-strong);
background: transparent;
font: inherit;
font-size: 15px;
color: var(--ink);
border-radius: 0;
transition: border-color 0.2s var(--ease);
}
.bx-search input:focus { outline: none; border-bottom-color: var(--brand-red); }
.bx-search input::placeholder { color: var(--muted); }
.bx-search svg {
position: absolute;
top: 50%; left: 14px;
transform: translateY(-50%);
width: 18px; height: 18px;
color: var(--muted);
pointer-events: none;
}
.bx-side-cats { display: grid; gap: 0; }
.bx-side-cats button {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border: none;
border-bottom: 1px solid var(--line);
background: transparent;
font: inherit;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
text-align: left;
transition: padding-left 0.25s var(--ease), color 0.25s var(--ease);
cursor: pointer;
letter-spacing: -0.005em;
}
.bx-side-cats button:hover { color: var(--brand-red); padding-left: 6px; }
.bx-side-cats button.active { color: var(--brand-red); }
.bx-side-cats button .count {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
color: var(--muted);
font-weight: 400;
}
.bx-popular-list { display: grid; gap: 14px; }
.bx-popular {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: center;
text-decoration: none;
color: var(--ink);
transition: opacity 0.2s var(--ease);
}
.bx-popular:hover { opacity: 0.85; }
.bx-popular:hover .bx-pop-title { color: var(--brand-red); }
.bx-pop-img {
width: 56px; height: 56px;
background: var(--paper-warm);
overflow: hidden;
border-radius: 3px;
}
.bx-pop-img img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.4) contrast(1.05);
}
.bx-pop-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bx-pop-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--ink);
transition: color 0.2s var(--ease);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bx-pop-meta {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--muted);
margin-top: 2px;
}
.bx-cta-emergency {
background: var(--ink);
color: var(--paper);
padding: 28px 24px;
border-radius: 4px;
margin-top: 16px;
}
.bx-cta-emergency .bx-side-head h2 { color: rgba(255,255,255,0.6); }
.bx-cta-emergency .bx-cta-num {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 460;
letter-spacing: -0.018em;
color: white;
display: inline-block;
margin-top: 4px;
text-decoration: none;
}
.bx-cta-emergency .bx-cta-num:hover { color: var(--brand-red); }
.bx-cta-emergency p {
font-size: 13.5px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
margin-top: 8px;
}
.bx-articles .bx-empty {
padding: 56px 0;
text-align: center;
color: var(--muted);
font-style: normal;
font-size: 18px;
border-top: 1px solid var(--line);
}
/* ====================== Cookie / Consent Banner ====================== */
.consent-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(13,13,15,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: flex-end;
justify-content: center;
padding: 16px;
animation: consentFade 0.3s var(--ease);
}
.consent-overlay.active { display: flex; }
@keyframes consentFade { from { opacity: 0; } to { opacity: 1; } }
.consent {
background: var(--paper);
color: var(--ink);
width: 100%;
max-width: 720px;
border-radius: 10px;
border: 1px solid var(--line-strong);
padding: 28px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
display: grid;
gap: 20px;
}
.consent h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1.2;
color: var(--ink);
}
.consent p {
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 60ch;
}
.consent p a { text-decoration: underline; text-underline-offset: 3px; }
/* Toggle-Button für die Einstellungen (Akkordeon-Header) */
.consent-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 12px 16px;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
font: inherit;
font-size: 13.5px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
letter-spacing: -0.003em;
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.consent-toggle:hover,
.consent-toggle:focus-visible {
border-color: var(--ink);
background: rgba(13,13,15,0.03);
outline: none;
}
.consent-toggle-chev {
width: 14px; height: 14px;
position: relative;
flex-shrink: 0;
transition: transform 0.25s var(--ease);
}
.consent-toggle-chev::before,
.consent-toggle-chev::after {
content: '';
position: absolute;
top: 50%;
width: 8px; height: 1.5px;
background: currentColor;
border-radius: 1px;
}
.consent-toggle-chev::before { left: 0; transform: translateY(-50%) rotate(45deg); transform-origin: right center; }
.consent-toggle-chev::after { right: 0; transform: translateY(-50%) rotate(-45deg); transform-origin: left center; }
.consent-toggle[aria-expanded="true"] .consent-toggle-chev::before { transform: translateY(-50%) rotate(-45deg); }
.consent-toggle[aria-expanded="true"] .consent-toggle-chev::after { transform: translateY(-50%) rotate(45deg); }
/* Akkordeon-Container: animiert per max-height (öffnet nach oben relativ zu Actions) */
.consent-categories {
display: grid;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.32s var(--ease), opacity 0.22s var(--ease);
}
.consent-categories[data-open="true"] {
max-height: 480px;
opacity: 1;
}
.consent-categories-inner {
display: grid;
gap: 6px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 14px 0;
margin-top: 8px;
}
.consent-cat {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 16px;
padding: 10px 0;
}
.consent-cat .cat-info { display: grid; gap: 4px; }
.consent-cat .cat-name { font-weight: 550; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.consent-cat .cat-name .req {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--ink);
color: var(--paper);
padding: 2px 6px;
border-radius: 3px;
}
.consent-cat .cat-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }
/* Toggle switch wie a11y-option */
.consent-switch {
position: relative;
width: 40px; height: 22px;
background: rgba(13,13,15,0.18);
border-radius: 100px;
border: none;
cursor: pointer;
transition: background 0.2s var(--ease);
flex-shrink: 0;
margin-top: 4px;
}
.consent-switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
background: white;
border-radius: 50%;
transition: transform 0.2s var(--ease);
}
.consent-switch[aria-checked="true"] { background: var(--brand-blue); }
.consent-switch[aria-checked="true"]::after { transform: translateX(18px); }
.consent-switch[disabled] { opacity: 0.55; cursor: not-allowed; }
.consent-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.consent-actions button,
.consent-actions a {
padding: 12px 20px;
font-size: 13.5px;
font-weight: 500;
border-radius: 100px;
cursor: pointer;
letter-spacing: -0.005em;
transition: all 0.2s var(--ease);
border: 1px solid transparent;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.consent-btn-secondary {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.consent-btn-secondary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.consent-btn-primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.consent-btn-primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }
/* Footer Link um Settings wieder zu öffnen, optisch wie ein normaler Link */
.consent-reopen {
background: transparent;
border: none;
color: inherit;
font: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
text-decoration: none;
display: inline;
}
.consent-reopen:hover { color: var(--brand-blue); }
/* Bilder werden seit Mai 2026 ausschließlich lokal ausgeliefert (kein Unsplash, kein CDN).
Keine Consent-Sperre für externe Bilder mehr nötig. */
/* -Wrapper transparent fürs Layout machen, so dass ![]()
direkt mit dem
umschließenden Container (.split-media, .bx-img, .hero-media, .post-card .img,
.showcase-img) interagiert und bestehende object-fit/aspect-ratio-Regeln greifen. */
picture {
display: contents;
}
/* ====================== Editorial High End Komponenten ====================== */
/* Manifest Statement, riesige Aussage als eigenes Kapitel */
.manifest {
background: var(--paper);
padding: clamp(120px, 16vw, 220px) 0;
position: relative;
overflow: hidden;
}
.manifest::before, .manifest::after {
content: '';
position: absolute;
background: var(--brand-red);
border-radius: 50%;
filter: blur(80px);
opacity: 0.08;
z-index: 0;
}
.manifest::before { width: 400px; height: 400px; top: -100px; left: -100px; }
.manifest::after { width: 500px; height: 500px; bottom: -150px; right: -150px; background: var(--brand-blue); opacity: 0.07; }
.manifest > .container { position: relative; z-index: 1; }
.manifest-quote {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: clamp(22px, 2.6vw, 38px);
line-height: 1.25;
letter-spacing: -0.012em;
color: var(--ink);
max-width: 28ch;
margin: 0 auto;
text-align: center;
}
.manifest-quote em {
font-style: italic;
color: var(--brand-red-deep);
}
.manifest-attribution {
margin-top: clamp(40px, 5vw, 64px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.manifest-attribution .line {
width: 36px; height: 1px; background: var(--ink); opacity: 0.4;
}
.manifest-attribution .name {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
/* Chapter Marker, Roman Numeral als Kapitelnummer */
.chapter {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 48px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.chapter .num {
font-family: var(--font-display);
font-style: normal;
font-size: 48px;
font-weight: 400;
color: var(--brand-red);
letter-spacing: -0.02em;
line-height: 0.8;
text-transform: none;
}
.dark .chapter .num { color: var(--brand-blue); }
.dark .chapter { color: rgba(255,255,255,0.55); }
/* Live Status Panel: zeigt aktuelle Verfügbarkeit */
.live-status {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 14px 8px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 100px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.85);
}
.live-status .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #22c55e;
position: relative;
box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* Pull-Number, dramatisch übergroße Zahl */
.pull-number {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: clamp(120px, 18vw, 280px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--brand-red);
display: block;
}
.pull-number .unit {
font-family: var(--font-display);
font-style: normal;
font-size: 0.2em;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
vertical-align: super;
margin-left: 6px;
}
/* Editorial Two-Column für Hero */
.hero-split {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: end;
}
@media (max-width: 900px) {
.hero-split { grid-template-columns: 1fr; gap: 40px; }
}
.hero-creds {
display: grid;
gap: 24px;
padding-bottom: 12px;
}
.hero-creds .cred {
display: grid;
grid-template-columns: 50px 1fr;
align-items: baseline;
gap: 16px;
padding: 14px 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-creds .cred:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 14px; }
.hero-creds .num {
font-family: var(--font-display);
font-style: normal;
font-size: 24px;
color: var(--brand-blue);
font-weight: 400;
}
.hero-creds .desc {
font-size: 13.5px;
color: rgba(255,255,255,0.85);
line-height: 1.5;
}
.hero-creds .desc strong { color: var(--night-text); font-weight: 600; }
/* Time/Coordinates Strip */
.coord-strip {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
flex-wrap: wrap;
gap: 16px;
}
.coord-strip > span { display: inline-flex; align-items: center; gap: 8px; }
.coord-strip strong { color: rgba(255,255,255,0.8); font-weight: 500; }
/* Trust-Strip: konkrete Versprechen statt nackter Stats */
.hero .trust-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: clamp(48px, 6vw, 88px);
padding: 28px 0;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
background: transparent;
}
@media (max-width: 900px) { .hero .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; } }
@media (max-width: 500px) { .hero .trust-strip { grid-template-columns: 1fr; padding: 18px 0; } }
.trust-item {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.005em;
line-height: 1.3;
padding-right: 16px;
}
.trust-item svg {
width: 20px; height: 20px;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.92);
stroke-width: 1.7;
}
/* Light context (z.B. wenn outside hero verwendet) */
.section .trust-strip { color: var(--ink); border-color: var(--line); }
.section .trust-item { color: var(--ink); }
.section .trust-item svg { color: var(--ink); }
/* Editorial Service Showcase */
.showcase-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
}
.showcase-feature {
grid-column: span 7;
position: relative;
aspect-ratio: 16/12;
overflow: hidden;
border-radius: 4px;
background: var(--ink);
}
.showcase-side {
grid-column: span 5;
display: grid;
grid-template-rows: 1fr 1fr;
gap: 4px;
}
.showcase-side > article {
position: relative;
overflow: hidden;
border-radius: 4px;
background: var(--ink);
aspect-ratio: auto;
}
@media (max-width: 900px) {
.showcase-feature, .showcase-side { grid-column: span 12; }
.showcase-side { grid-template-rows: auto auto; aspect-ratio: auto; }
.showcase-side > article { aspect-ratio: 16/10; }
}
.showcase-card {
position: relative;
width: 100%; height: 100%;
text-decoration: none;
color: white;
display: block;
overflow: hidden;
}
.showcase-card img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.6) contrast(1.12) brightness(0.7);
transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.showcase-card:hover img { transform: scale(1.05); filter: grayscale(0.2) contrast(1.05) brightness(0.85); }
.showcase-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(10,10,12,0.85) 100%);
}
.showcase-card .meta {
position: absolute;
top: 20px; left: 20px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
}
.showcase-card .meta::before {
content: '';
width: 14px; height: 1px; background: rgba(255,255,255,0.7);
}
.showcase-card .label {
position: absolute;
bottom: 20px; left: 20px; right: 20px;
z-index: 2;
}
.showcase-card .label h3 {
font-family: var(--font-display);
font-size: clamp(20px, 2.4vw, 32px);
font-weight: 480;
line-height: 1.1;
letter-spacing: -0.02em;
color: white;
margin-bottom: 6px;
}
.showcase-card .label p {
font-size: 13.5px;
color: rgba(255,255,255,0.78);
line-height: 1.5;
max-width: 50ch;
}
.showcase-feature .showcase-card .label h3 { font-size: clamp(28px, 3.4vw, 44px); }
/* Decorative Numerical Mark als Hintergrund */
.deco-numeral {
position: absolute;
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: clamp(160px, 18vw, 320px);
line-height: 0.8;
color: rgba(255, 87, 87, 0.05);
top: 60px; right: clamp(20px, 4vw, 60px);
pointer-events: none;
z-index: 0;
letter-spacing: -0.04em;
}
.dark .deco-numeral, .specs .deco-numeral { color: rgba(56, 182, 255, 0.06); }
.section .container, .specs .container, .region .container { position: relative; z-index: 1; }
/* Editorial Quote Mark, full bleed */
.feature-quote {
background: var(--ink);
color: var(--paper);
padding: clamp(100px, 14vw, 180px) 0;
position: relative;
overflow: hidden;
}
.feature-quote::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 80% 30%, rgba(255,87,87,0.08), transparent 70%),
radial-gradient(50% 40% at 10% 80%, rgba(56,182,255,0.06), transparent 70%);
pointer-events: none;
}
.feature-quote > .container { position: relative; z-index: 1; }
.feature-quote blockquote {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: clamp(26px, 3.8vw, 56px);
line-height: 1.18;
letter-spacing: -0.014em;
max-width: 22ch;
color: var(--paper);
}
.feature-quote .quote-source {
margin-top: 48px;
display: flex;
align-items: center;
gap: 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.feature-quote .quote-source::before {
content: '';
width: 36px; height: 1px;
background: rgba(255,255,255,0.4);
}
/* Subtle Custom Cursor Idee, nur visueller Akzent für Links auf Bildern */
.showcase-card { cursor: pointer; }
/* ====================== Service detail page components ====================== */
/* TL;DR box, von KI bevorzugt extrahiert */
.tldr {
background: transparent;
border: none;
border-left: 2px solid var(--brand-blue);
border-radius: 0;
padding: 4px 0 4px 22px;
max-width: 680px;
}
.tldr-label {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-blue);
display: block;
margin-bottom: 8px;
}
.tldr p {
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
}
/* FAQ Accordion */
.faq-list {
display: grid;
gap: 4px;
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 24px 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
font-family: var(--font-display);
font-size: clamp(16px, 1.3vw, 19px);
font-weight: 460;
letter-spacing: -0.012em;
line-height: 1.35;
transition: color 0.2s var(--ease);
}
.faq-item summary:hover { color: var(--brand-red); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-icon {
font-size: 24px;
font-weight: 300;
color: var(--brand-red);
flex-shrink: 0;
transition: transform 0.25s var(--ease);
width: 24px;
text-align: center;
line-height: 1;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
padding: 0 28px 24px 4px;
max-width: 720px;
}
.faq-answer p {
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0;
}
/* Steps grid */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0;
border-top: 1px solid var(--night-line);
}
.step-card {
padding: 36px 28px;
border-right: 1px solid var(--night-line);
border-bottom: 1px solid var(--night-line);
}
.step-card:last-child { border-right: none; }
.step-num-big {
font-family: var(--font-display);
font-style: normal;
font-size: 38px;
font-weight: 400;
line-height: 1;
color: var(--brand-blue);
margin-bottom: 18px;
letter-spacing: -0.02em;
}
.step-card h3 { color: var(--night-text); margin-bottom: 10px; }
.step-card p { color: rgba(255,255,255,0.65); font-size: 14.5px; line-height: 1.55; }
/* Vergleichstabelle */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table th {
text-align: left;
background: transparent;
padding: 18px 20px 18px 0;
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--line-strong);
color: var(--muted);
}
.data-table td {
padding: 18px 20px 18px 0;
border-bottom: 1px solid var(--line);
color: var(--ink-soft);
vertical-align: top;
line-height: 1.5;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { color: var(--ink); }
.data-table td:first-child, .data-table th:first-child { padding-left: 4px; }
/* Standards list */
.standards-list {
list-style: none;
display: grid;
gap: 0;
max-width: 800px;
border-top: 1px solid var(--line);
}
.standards-list li {
padding: 22px 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
border-radius: 0;
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
}
.standards-list strong { color: var(--ink); margin-right: 4px; font-weight: 550; }
/* Cases grid for service pages */
.cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.case-card {
background: transparent;
border: none;
border-top: 1px solid var(--night-line);
border-radius: 0;
padding: 28px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.case-tag {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-blue);
}
.case-card h3 { color: var(--night-text); }
.case-card p { color: rgba(255,255,255,0.65); font-size: 14.5px; line-height: 1.55; }
/* ====================== Accessibility Widget ====================== */
.a11y-toggle {
position: fixed;
bottom: 24px; left: 24px;
width: 56px; height: 56px;
background: var(--ink);
color: var(--paper);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 60;
box-shadow: 0 14px 28px -8px rgba(0,0,0,0.45);
transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.a11y-toggle:hover { background: var(--brand-blue); transform: scale(1.05); }
.a11y-toggle svg { width: 26px; height: 26px; }
.a11y-panel {
position: fixed;
bottom: 96px; left: 24px;
width: 320px;
max-width: calc(100vw - 48px);
background: var(--paper);
color: var(--ink);
border: 1px solid var(--line-strong);
border-radius: 10px;
box-shadow: 0 30px 70px -20px rgba(0,0,0,0.35);
padding: 22px;
z-index: 65;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.a11y-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.a11y-panel h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 450;
letter-spacing: -0.015em;
margin-bottom: 4px;
}
.a11y-panel p.lead-small {
font-size: 13px;
color: var(--muted);
margin-bottom: 18px;
line-height: 1.5;
}
.a11y-options { display: grid; gap: 4px; }
.a11y-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.15s var(--ease);
text-align: left;
width: 100%;
color: inherit;
}
.a11y-option.a11y-aaa {
padding: 12px;
background: rgba(56,182,255,0.08);
border-color: rgba(56,182,255,0.25);
margin-bottom: 4px;
}
.a11y-option .opt-label { display: grid; gap: 2px; }
.a11y-option .opt-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.a11y-option .opt-desc { font-size: 12px; color: var(--muted); line-height: 1.45; font-weight: 400; }
.a11y-option:hover { background: rgba(13,13,15,0.05); }
.a11y-option .switch {
width: 36px; height: 20px;
background: rgba(13,13,15,0.18);
border-radius: 100px;
position: relative;
transition: background 0.2s var(--ease);
flex-shrink: 0;
}
.a11y-option .switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
background: white;
border-radius: 50%;
transition: transform 0.2s var(--ease);
}
.a11y-option[aria-pressed="true"] .switch { background: var(--brand-blue); }
.a11y-option[aria-pressed="true"] .switch::after { transform: translateX(16px); }
.a11y-reset {
margin-top: 14px;
width: 100%;
padding: 10px 14px;
border: 1px solid var(--line-strong);
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: transparent;
color: inherit;
}
.a11y-reset:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* === Modi: per Knopfdruck === */
/* AAA Modus per Knopfdruck. Setzt alles um, was für volle WCAG 2.1 / 2.2 AAA Konformität nötig ist:
- Kontraste >= 7:1 (1.4.6)
- Fokus klar erkennbar (2.4.7 + 2.4.13 Focus Appearance)
- Touch Targets >= 44x44 (2.5.5)
- Bewegungen reduziert (2.3.3)
- Großzügige Schrift, lesbare Zeilenlänge (1.4.8 Visual Presentation) */
body.a11y-contrast {
--paper: #ffffff;
--paper-warm: #ffffff;
--paper-cool: #ffffff;
--ink: #000000;
--ink-soft: #000000;
--muted: #1a1a1a;
--line: #000000;
--line-strong: #000000;
--night: #000000;
--night-soft: #000000;
--night-text: #ffffff;
--night-muted: #ffffff;
--night-line: #ffffff;
--brand-red: #cc0000;
--brand-red-deep: #a00000;
--brand-blue: #004fa8;
--brand-blue-deep: #003578;
}
body.a11y-contrast * { text-shadow: none !important; }
body.a11y-contrast img:not(.nav-brand img) { filter: contrast(1.2) brightness(0.92); }
body.a11y-contrast .service-card,
body.a11y-contrast .post-card,
body.a11y-contrast .quote-card,
body.a11y-contrast .nav { border: 2px solid #000 !important; }
body.a11y-contrast .nav { background: #fff !important; }
body.a11y-contrast .btn { border: 2px solid currentColor; }
body.a11y-contrast .btn-fire, body.a11y-contrast .btn-primary { background: #000; color: #fff; }
body.a11y-contrast .btn-water { background: #004fa8; color: #fff; border-color: #004fa8; }
body.a11y-contrast .btn-ghost { background: transparent; color: #000; border-color: #000; }
body.a11y-contrast .dark .btn-ghost { color: #fff; border-color: #fff; }
body.a11y-contrast .topbar a,
body.a11y-contrast .footer a,
body.a11y-contrast .footer h4,
body.a11y-contrast .hero-stats .stat .lbl,
body.a11y-contrast .spec-item p,
body.a11y-contrast .case-card p,
body.a11y-contrast .step-card p,
body.a11y-contrast .footer-bottom,
body.a11y-contrast .footer-bottom a { color: #ffffff !important; }
body.a11y-contrast .marquee-track span { color: #ffffff !important; }
body.a11y-contrast .hero-media img { opacity: 0.32; filter: grayscale(1) contrast(1.4) brightness(0.55); }
body.a11y-contrast .hero-meta .mono { color: #ffffff !important; }
body.a11y-contrast a:not(.btn):not(.nav-cta):not(.nav-brand) { text-decoration: underline; text-underline-offset: 3px; }
/* Im AAA Modus auch Focus Outline noch deutlicher (3.6:1 Mindestkontrast erreicht) */
body.a11y-contrast :focus-visible { outline: 4px solid #ffaa00 !important; outline-offset: 2px !important; }
body.a11y-contrast .dark :focus-visible { outline: 4px solid #ffaa00 !important; }
/* Buttons mind. 44x44 erzwingen (auch wenn schon Default) */
body.a11y-contrast .btn,
body.a11y-contrast .nav-cta,
body.a11y-contrast .chip,
body.a11y-contrast .nav-links a,
body.a11y-contrast .field input,
body.a11y-contrast .field textarea,
body.a11y-contrast .field select { min-height: 44px; min-width: 44px; }
/* Bewegungen automatisch reduzieren */
body.a11y-contrast *,
body.a11y-contrast *::before,
body.a11y-contrast *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
body.a11y-contrast .reveal { opacity: 1 !important; transform: none !important; }
body.a11y-contrast .marquee-track { animation: none !important; }
body.a11y-contrast .hero-media img { animation: none !important; transform: scale(1) !important; }
/* Große Schrift */
body.a11y-large { font-size: 20px; }
body.a11y-large .nav-links a, body.a11y-large .footer ul a { font-size: 17px; }
body.a11y-large .field input, body.a11y-large .field textarea { font-size: 19px; }
body.a11y-large .lead { font-size: clamp(20px, 1.8vw, 26px); }
/* Reduzierte Animationen */
body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
body.a11y-motion .reveal { opacity: 1 !important; transform: none !important; }
body.a11y-motion .marquee-track { animation: none !important; }
body.a11y-motion .hero-media img { animation: none !important; transform: scale(1.02) !important; }
/* Links unterstreichen */
body.a11y-underline a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
body.a11y-underline .btn, body.a11y-underline .nav-cta { text-decoration: none !important; }
/* Lesefreundliche Schrift */
body.a11y-readable {
font-family: 'Atkinson Hyperlegible', Verdana, sans-serif;
}
body.a11y-readable h1, body.a11y-readable h2, body.a11y-readable h3, body.a11y-readable h4,
body.a11y-readable .hero-title, body.a11y-readable .article-title {
font-family: 'Atkinson Hyperlegible', Verdana, sans-serif !important;
font-style: normal !important;
}
body.a11y-readable em { font-style: normal; font-weight: 700; }
/* Großer Cursor */
body.a11y-cursor, body.a11y-cursor * {
cursor: url('data:image/svg+xml;utf8,') 6 2, auto !important;
}
body.a11y-cursor a, body.a11y-cursor button, body.a11y-cursor .chip, body.a11y-cursor [role="button"] {
cursor: url('data:image/svg+xml;utf8,') 16 8, pointer !important;
}
/* Mindestgrößen für Bedienelemente (WCAG 2.5.5 AAA) */
body.a11y-large .btn,
body.a11y-large .chip,
body.a11y-large .nav-cta { min-height: 48px; padding: 14px 22px; }
/* region cards stack */
.region-cards.stack { grid-template-columns: 1fr; gap: 8px; }
.region-cards.stack a { align-items: center; padding: 15px 18px; }
.region-cards .rc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.region-cards .rc-name { font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.region-cards .rc-sub { font-weight: 400; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 800px) { .region-cards.stack { grid-template-columns: 1fr; } }
/* area chips (Regionsseiten) */
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chips span {
padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
background: white; font-size: 14px; color: var(--ink);
}
/* tldr box */
.tldr {
margin: 26px 0 34px;
padding: 20px 24px;
background: var(--paper-warm);
border-left: 3px solid var(--brand-red);
border-radius: 0 8px 8px 0;
}
.tldr-label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-red);
margin-bottom: 8px;
}
.tldr p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }
/* Kontaktformular: Honeypot + Fehlerhinweis */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error {
background: #fde8e8;
border: 1px solid #f3b4b4;
color: #9b1c1c;
padding: 11px 15px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
/* Hero-Einleitung (aufgeräumt, fokussiert) */
.hero-lede { opacity: 0; animation: heroFade 1s var(--ease) 0.35s forwards; max-width: 780px; }
.hero-lead {
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,0.85);
max-width: 56ch;
margin-top: 20px;
}
/* Hero-Kicker (Slogan als Eyebrow über der Keyword-H1) */
.hero-kicker {
font-family: var(--font-display);
font-style: normal;
font-size: clamp(20px, 2.4vw, 30px);
line-height: 1.15;
color: rgba(255,255,255,0.88);
margin: 0 0 14px;
}
.hero-kicker em { color: var(--brand-red); font-style: normal; }
/* ===== Hero Rückruf-Karte (Glas) ===== */
.hero-main { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.hero-main .hero-actions { justify-content: flex-start; }
@media (max-width: 900px) { .hero-main { grid-template-columns: 1fr; gap: 30px; } }
.hero-cb {
background: rgba(255,255,255,0.055);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
padding: 22px 22px 20px;
max-width: 380px; width: 100%; margin-left: auto;
}
@media (max-width: 900px) { .hero-cb { max-width: none; margin-left: 0; } }
.hero-cb-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hero-cb-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: #fff; margin: 6px 0 16px; }
.hero-cb-form .cb-row { margin-bottom: 12px; }
.hero-cb-form label { display: block; font-size: 11.5px; letter-spacing: 0.03em; color: rgba(255,255,255,0.62); margin: 0 0 6px; }
.hero-cb-form .opt { opacity: 0.6; }
.hero-cb-form input[type=text], .hero-cb-form input[type=tel], .hero-cb-form select {
width: 100%; background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
border-radius: 5px; color: #fff; font: inherit; font-size: 14px; padding: 10px 12px; outline: none;
}
.hero-cb-form select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; padding-right: 34px;
}
.hero-cb-form select option { background: #1a1a1c; color: #fff; }
.hero-cb-form input::placeholder { color: rgba(255,255,255,0.4); }
.hero-cb-form select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.hero-cb-form input:focus, .hero-cb-form select:focus { border-color: rgba(255,255,255,0.4); background-color: rgba(255,255,255,0.09); }
.hero-cb-form .cb-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.6); margin: 2px 0 14px; cursor: pointer; }
.hero-cb-form .cb-consent input { margin-top: 1px; accent-color: var(--brand-red); flex-shrink: 0; }
.hero-cb-form .cb-consent > span { flex: 1 1 auto; min-width: 0; }
.hero-cb-form .cb-consent a { color: rgba(255,255,255,0.85); text-decoration: underline; }
.hero-cb-form .cb-submit { width: 100%; background: rgba(255,255,255,0.92); color: #111; font: inherit; font-weight: 600; font-size: 14px; border: none; border-radius: 5px; padding: 12px; cursor: pointer; transition: background 0.2s var(--ease); }
.hero-cb-form .cb-submit:hover { background: #fff; }
.hero-cb-form .cb-note { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.5); }
/* ===== Kontakt Mehrschritt-Formular ===== */
.form-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.fstepbar { display: flex; gap: 6px; width: 140px; }
.fstepbar span { height: 4px; flex: 1; border-radius: 999px; background: var(--line); }
.fstepbar span.on { background: var(--ink); }
.fsteplabel { font-size: 12px; color: var(--muted); }
/* .form-nav wird oben (Block "Form-Nav") gestylt — diese alte Regel würde die neue
überschreiben (Spezifität gleich, kommt später), daher aufgehoben. */
#kNext { min-width: 180px; }