* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-black: #000000;
--primary-dark: #1a1a1a;
--primary-gray: #2D3748;
--accent-red: #E53E3E;
--accent-blue: #4299E1;
--light-gray: #F7FAFC;
--text-dark: #1A202C;
--text-light: #718096;
--white: #FFFFFF;
--shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);
--shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);
--shadow-heavy: 0 20px 50px rgba(0, 0, 0, 0.15);
--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--emergency-red: #DC2626;
--success-green: #059669;
--bg-primary: #FFFFFF;
--bg-secondary: #F7FAFC;
--bg-tertiary: #E5E7EB;
--text-primary: #1A202C;
--text-secondary: #718096;
--border-color: #E5E7EB;
}
/* Dark Mode Variables */
body.dark-mode {
--bg-primary: #0F172A;
--bg-secondary: #1E293B;
--bg-tertiary: #334155;
--text-primary: #F1F5F9;
--text-secondary: #CBD5E1;
--border-color: #475569;
--white: #0F172A;
--light-gray: #1E293B;
--text-dark: #F1F5F9;
--text-light: #94A3B8;
}
html {
font-size: 14px;
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
/* Globale Schriftgröße dynamisch */
font-size: clamp(1rem, 1.2vw, 1.125rem);
}
/* Emergency Banner - Updated */
.emergency-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, var(--emergency-red) 0%, #B91C1C 100%);
color: white;
padding: 0.4rem 1rem;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
animation: slideDown 0.5s ease-out;
transition: transform 0.3s ease;
}
.emergency-banner.hidden {
transform: translateY(-100%);
}
.emergency-banner .content {
display: flex;
align-items: center;
gap: 1.5rem;
}
.emergency-text {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 0.95rem;
}
.call-button {
background: white;
color: var(--emergency-red);
padding: 0.5rem 1.5rem;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
animation: pulseButton 2s infinite;
box-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}
@keyframes pulseButton {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.call-button:hover {
transform: scale(1.1);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
}
.call-icon {
animation: ring 1s ease-in-out infinite;
}
@keyframes ring {
0%, 100% { transform: rotate(0deg); }
10%, 30% { transform: rotate(-15deg); }
20%, 40% { transform: rotate(15deg); }
}
.emergency-info {
font-size: 0.9rem;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.pulse-dot {
width: 10px;
height: 10px;
background: #10B981;
border-radius: 50%;
position: relative;
animation: pulse-dot 1.5s infinite;
}
.pulse-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: rgba(16, 185, 129, 0.3);
border-radius: 50%;
animation: pulse-ring 1.5s infinite;
}
@keyframes pulse-dot {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes pulse-ring {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
.emergency-close {
position: absolute;
right: 1rem;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
font-size: 1.5rem;
}
.emergency-close:hover {
opacity: 1;
}
/* Navigation - Updated for transparency and dynamic positioning */
nav {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: var(--shadow-light);
position: fixed;
width: 100%;
top: 43px;
z-index: 1000;
transition: all 0.3s ease;
}
nav.scrolling {
background: transparent;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: none;
}
nav.no-banner {
top: 0;
}
body.dark-mode nav {
background: rgba(15, 23, 42, 0.85);
}
body.dark-mode nav.scrolling {
background: transparent;
}
.nav-container {
max-width: 2000px;
margin: 0 auto;
padding: 0.8rem 1.25rem;
display: grid;
grid-template-columns: auto 1fr auto;
justify-content: space-between;
align-items: center;
column-gap: 1.5rem;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
padding: 5px;
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background: var(--text-primary);
transition: all 0.3s ease;
border-radius: 2px;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.logo-container {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
}
.logo-img {
width: 45px;
height: 45px;
animation: logoReveal 1s ease-out;
}
@keyframes logoReveal {
from {
transform: scale(0) rotate(-180deg);
opacity: 0;
}
to {
transform: scale(1) rotate(0);
opacity: 1;
}
}
.logo-text {
font-size: 1rem;
color: var(--text-secondary);
font-weight: 500;
opacity: 0;
animation: fadeInRight 0.8s ease-out 0.3s forwards;
}
.logo-text .zmn {
color: var(--text-primary);
font-weight: 800;
font-size: 1.1rem;
}
@keyframes fadeInRight {
from {
transform: translateX(-20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.nav-center {
display: flex;
gap: clamp(1.2rem, 2.5vw, 3rem);
list-style: none;
align-items: center;
justify-self: center;  /* harte Zentrierung im Grid */
width: max-content;    /* verhindert Strecken durch 1fr */
}
.nav-center a {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: var(--transition);
position: relative;
font-size: 0.95rem;
letter-spacing: 0.3px;
}
.nav-center a::before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--accent-blue);
transition: width 0.3s ease;
}
.nav-center a:hover {
color: var(--accent-blue);
}
.nav-center a:hover::before {
width: 100%;
}
/* Right side nav items */
.nav-right {
display: flex;
align-items: center;
gap: 1.2rem;
}
/* Dark Mode Toggle */
.dark-mode-toggle {
width: 45px;
height: 24px;
background: var(--bg-tertiary);
border-radius: 30px;
position: relative;
cursor: pointer;
transition: background 0.3s ease;
border: 1px solid var(--border-color);
}
.dark-mode-toggle::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: var(--white);
border-radius: 50%;
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
body.dark-mode .dark-mode-toggle::before {
transform: translateX(21px);
background: var(--accent-red);
}
.dark-mode-toggle .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
}
.dark-mode-toggle .sun {
left: 4px;
opacity: 1;
transition: opacity 0.3s ease;
}
.dark-mode-toggle .moon {
right: 4px;
opacity: 0;
transition: opacity 0.3s ease;
}
body.dark-mode .dark-mode-toggle .sun {
opacity: 0;
}
body.dark-mode .dark-mode-toggle .moon {
opacity: 1;
}
/* Language Selector - Smaller and better design */
.lang-selector {
display: flex;
gap: 0.3rem;
align-items: center;
background: var(--bg-tertiary);
border-radius: 20px;
padding: 0.2rem;
}
.lang-btn {
padding: 0.3rem 0.6rem;
border: none;
background: transparent;
color: var(--text-primary);
border-radius: 15px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
transition: var(--transition);
}
.lang-btn:hover,
.lang-btn:focus {
background: var(--accent-blue);
color: white;
transform: translateY(-2px);
}
/* Social Media Icons */
.social-icons {
display: flex;
gap: 0.6rem;
align-items: center;
}
.social-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border-radius: 50%;
text-decoration: none;
transition: var(--transition);
}
.social-icon:hover {
background: var(--accent-blue);
transform: translateY(-2px);
}
.social-icon svg {
width: 16px;
height: 16px;
fill: var(--text-primary);
transition: var(--transition);
}
.social-icon:hover svg {
fill: white;
}
/* Hero Section - adjusted for emergency banner */
.hero {
margin-top: 105px;
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
transition: margin-top 0.3s ease;
}
.hero.no-banner {
margin-top: 60px;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transform: translateX(-100%);
animation: slideInBg 1.2s ease-out 0.3s forwards;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@keyframes slideInBg {
to {
opacity: 1;
transform: translateX(0);
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.85) 0%, rgba(45, 55, 72, 0.85) 100%);
z-index: 1;
}
body.dark-mode .hero::before {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
}
.circuit-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.05;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(66, 153, 225, 0.1) 2px,
rgba(66, 153, 225, 0.1) 4px
);
z-index: 2;
animation: circuitFlow 20s linear infinite;
}
@keyframes circuitFlow {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 3;
text-align: center;
}
.hero h1 {
font-size: clamp(3rem, 6vw, 5rem);
margin-bottom: 1.5rem;
line-height: 1.1;
color: white;
font-weight: 800;
letter-spacing: -2px;
}
.hero h1 span {
display: inline-block;
opacity: 0;
animation: slideInUp 0.8s ease-out forwards;
}
.hero h1 span:nth-child(1) { animation-delay: 0.2s; }
.hero h1 span:nth-child(2) { animation-delay: 0.4s; }
.hero h1 span:nth-child(3) { animation-delay: 0.6s; }
.hero h1 .highlight {
color: var(--accent-blue);
position: relative;
}
.hero h1 .highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
width: 100%;
height: 3px;
background: var(--accent-blue);
transform: scaleX(0);
transform-origin: left center;
animation: underlineGrow 1s ease-out 0.8s forwards;
}
@keyframes expandWidth {
from { width: 0; }
to { width: 100%; }
}
@keyframes underlineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* SAFETY NET: Hero-Überschrift muss nach Animation IMMER sichtbar sein.
Verhindert "Hängenbleiben" bei Sprachwechsel oder Re-Render. */
.hero h1.zmn-anim-done span {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.hero h1.zmn-anim-done .highlight::after {
animation: none !important;
transform: scaleX(1) !important;
}
.hero p {
font-size: 1.4rem;
margin-bottom: 3rem;
opacity: 0;
color: rgba(255, 255, 255, 0.9);
animation: slideInUp 1s ease-out 0.8s forwards;
font-weight: 300;
}
.cta-button {
display: inline-block;
background: var(--accent-red);
color: white;
padding: 1.3rem 3.5rem;
border-radius: 60px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition);
opacity: 0;
animation: slideInUp 1s ease-out 1s forwards;
box-shadow: 0 10px 30px rgba(229, 62, 62, 0.3);
position: relative;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.cta-button:hover::before {
width: 300px;
height: 300px;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(229, 62, 62, 0.4);
}
/* Services Section */
.services{
padding:7rem 2rem;
background:var(--bg-primary);
position:relative;
}
.section-header{ text-align:center; margin-bottom:4rem; }
.section-header h2{
font-size:clamp(2.5rem,4vw,3.5rem);
color:var(--text-primary);
margin-bottom:1rem; font-weight:800;
}
.section-header p{
font-size:1.2rem; color:var(--text-secondary);
max-width:700px; margin:0 auto;
}
/* 3er-Grid darunter -- feste 3 Spalten für exakte Bündigkeit */
.services-grid{
max-width:1400px; margin:0 auto;
display:grid;
grid-template-columns:repeat(3, minmax(360px,1fr));
gap:3rem;
}
/* Karten-Style */
.service-card{
background:var(--bg-primary);
padding:3.5rem; border-radius:20px;
box-shadow:var(--shadow-light);
transition:var(--transition);
position:relative; border:1px solid var(--border-color);
opacity:0; animation:fadeInUp .8s ease-out forwards;
}
body.dark-mode .service-card{ background:var(--bg-secondary); }
.service-card:nth-child(1){ animation-delay:.1s; }
.service-card:nth-child(2){ animation-delay:.2s; }
.service-card:nth-child(3){ animation-delay:.3s; }
.service-card:hover{
transform:translateY(-10px);
box-shadow:var(--shadow-heavy);
border-color:var(--accent-blue);
}
.service-icon{
width:70px; height:70px;
background:linear-gradient(135deg,var(--accent-blue),#667eea);
border-radius:20px; display:flex; align-items:center; justify-content:center;
font-size:2rem; margin-bottom:2rem;
box-shadow:0 10px 20px rgba(66,153,225,.2);
transition:var(--transition);
}
.service-card:hover .service-icon{ transform:scale(1.1) rotate(5deg); animation:wiggle .5s ease-in-out; }
@keyframes wiggle{ 0%,100%{transform:scale(1.1) rotate(5deg);} 25%{transform:scale(1.1) rotate(-5deg);} 75%{transform:scale(1.1) rotate(10deg);} }
.service-card h3{ font-size:1.6rem; color:var(--text-primary); margin-bottom:1.2rem; font-weight:700; }
.service-card ul{ list-style:none; color:var(--text-secondary); line-height:2.2; }
.service-card ul li{
position:relative; padding-left:2rem; margin-bottom:.8rem; font-size:.95rem;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.service-card ul li::before{
content:'→'; position:absolute; left:0; color:var(--accent-blue); font-weight:bold;
transition:transform .3s ease;
}
.service-card:hover ul li::before{ transform:translateX(5px); }
/* NOTDIENST: Icon links, Titel daneben, Listen rechts; alles vertikal mittig */
.service-card.notdienst{
grid-column: 1 / -1; /* über alle 3 Spalten des Grids */
display: grid;
grid-template-columns: 70px auto 1fr; /* Icon | Titel | Listen */
column-gap: 3rem;
align-items: center; /* vertikal zentriert */
padding: 2.75rem 3.5rem;
min-height: 180px;
background: #fff5f5;
border-left: 6px solid #e53935;
}
/* Icon links */
.service-card.notdienst .service-icon{
margin: 0;
width: 70px; height: 70px; border-radius: 20px;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; background: #ffe3e3;
box-shadow: 0 10px 20px rgba(229,57,53,.15);
justify-self: start;
}
/* Titel daneben */
.service-card.notdienst .notdienst-title{
margin: 0; line-height: 1.2;
font-size: 1.6rem; font-weight: 700; color: var(--text-primary);
align-self: center;
}
/* Listen rechts: 3 Spalten, Inhalte fließen innerhalb jeder Spalte */
.service-card.notdienst .notdienst-lists{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 Spalten */
column-gap: 3rem;
row-gap: .6rem;
align-self: start;
}
/* Spalten-Inhalt: fließend, aber ohne Überlappung */
.service-card.notdienst .notdienst-col{
display: flex;
flex-wrap: wrap; /* fließt in der Spalte */
gap: .4rem 1.8rem; /* Abstand zwischen „Badges" */
padding: 0;
margin: 0;
list-style: none;
min-width: 0; /* wichtig bei Flex-Gruppen */
}
/* Einzel-Item: darf umbrechen, Pfeil mit identischem Abstand wie Karten */
.service-card.notdienst .notdienst-col li{
display: inline-flex;
align-items: flex-start;
position: relative;
padding-left: 2rem; /* = Karten */
margin: 0; /* Abstand kommt über gap */
line-height: 1.7;
font-size: .95rem;
color: var(--text-secondary);
min-width: 0;
white-space: normal; /* erlaubt Umbruch */
word-break: break-word; /* bricht lange Begriffe (DE) */
}
.service-card.notdienst .notdienst-col li::before{
content: '→';
position: absolute;
left: .25rem; /* = Karten */
top: .15em; /* Pfeil nicht am Text „kleben" */
color: var(--accent-blue);
font-weight: 700;
transition: transform .3s ease;
}
/* HOVER: Pfeil bewegt sich wieder -- subtiler als global */
.service-card.notdienst:hover .notdienst-col li::before{
transform: translateX(5px); /* statt none / statt 5px */
}
/* Responsive bleibt wie gehabt -- optional die Spalten früher reduzieren */
@media (max-width: 992px){
.service-card.notdienst .notdienst-lists{
grid-template-columns: repeat(2, minmax(0,1fr));
column-gap: 2rem;
}
}
@media (max-width: 640px){
.service-card.notdienst .notdienst-lists{
grid-template-columns: 1fr;
}
}
/* ===== Notdienst: Desktop unverändert ===== */
@media (min-width: 992px){
.service-card.notdienst{ grid-column: 1 / -1; }
}
/* ===== Mobile: Card-Form, rot, mit Hover-Animation & großen Größen ===== */
@media (max-width: 768px){
.service-card.notdienst{
display:block; grid-template-columns:none; min-height:auto;
padding:1.25rem !important; border-radius:16px !important;
box-shadow:var(--shadow-small, 0 6px 18px rgba(0,0,0,.06));
background: color-mix(in oklab, #ff4d4f 6%, var(--bg-primary));
border:1.5px solid color-mix(in oklab, #ff4d4f 35%, var(--border-color));
}
/* Resets ohne transform (damit Animation bleibt) */
.service-card.notdienst, .service-card.notdienst *{
writing-mode: horizontal-tb !important;
text-orientation: initial !important;
white-space: normal !important;
}
/* Icon: groß wie Web + Bewegung */
.service-card.notdienst .service-icon{
width:70px; height:70px; border-radius:20px;
font-size:2rem; margin-bottom:1rem; background:#ffe3e3;
}
@media (hover:hover){
.service-card.notdienst:hover .service-icon{
transform: scale(1.1) rotate(5deg) !important;
animation: wiggle .5s ease-in-out;
}
}
@media (hover:none){
.service-card.notdienst:active .service-icon{
transform: scale(1.06) rotate(4deg);
}
}
/* Titel: groß wie Web */
.service-card.notdienst .notdienst-title{
font-size:1.6rem; line-height:1.25; margin:0 0 .6rem 0;
}
/* Liste wie Standard-Card */
.service-card.notdienst .notdienst-lists{ display:block; margin-top:.25rem; }
.service-card.notdienst .notdienst-col{ display:block; padding:0; margin:0; list-style:none; }
.service-card.notdienst .notdienst-col li{
display:block; padding-left:2rem; margin:.35rem 0; line-height:1.6; font-size:.95rem;
}
.service-card.notdienst .notdienst-col li::before{ left:0; }
}
/* Mini-Bugfix: Tippfehler beseitigen (falls noch vorhanden) */
.service-card.notdienst .notdienst-col li::before{ left:.25rem; } /* statt .25rm */
/* === NEUER REFERENZBEREICH === */
.references {
padding: 7rem 0; /* Mehr vertikaler Platz, kein seitlicher */
background: var(--bg-secondary);
overflow: hidden; /* Verhindert horizontales Scrollen */
}
.references h2 {
text-align: center;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 4rem;
font-weight: 800;
}
.references { padding: clamp(3rem,5vw,6rem) 0; }
.references-container {
max-width: 1200px; /* Breiter für mehr Bilder */
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.reference-slide { width: calc(100% / 3); padding: 0 10px; }
.references-slider {
position: relative;
overflow: hidden;
/* Maske für weiche Kanten, optional für Eleganz */
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.references-wrapper {
display: flex;
transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); /* Weichere Animation */
}
.reference-slide {
flex-shrink: 0;
box-sizing: border-box;
padding: 0 10px; /* Abstand zwischen den Bildern */
width: calc(100% / 3); /* 3 Bilder auf dem Desktop */
}
.reference-slide img{
width: 100%;
height: clamp(420px, 62vh, 580px); /* harte Obergrenze */
aspect-ratio: 2 / 3;               /* weniger hoch als 9/16 */
object-fit: cover;
object-position: center;
border-radius: 15px;
box-shadow: var(--shadow-medium);
transition: transform .4s ease, box-shadow .4s ease;
}
.reference-slide:hover img {
transform: scale(1.03);
box-shadow: var(--shadow-heavy);
}
/* === SLIDER-PFEILE (NEU) === */
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.slider-arrow:hover {
background: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.slider-arrow.prev {
left: 25px;
}
.slider-arrow.next {
right: 25px;
}
/* Thumbnail Navigation */
.reference-thumbnails-container {
max-width: 1200px;
margin: 3rem auto 0;
padding: 0 2rem;
}
.reference-thumbnails {
display: flex;
gap: 15px;
padding: 10px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--accent-blue) var(--bg-tertiary);
-webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
justify-content: flex-start; /* Startet linksbündig */
}
.reference-thumbnails::-webkit-scrollbar {
height: 8px;
}
.reference-thumbnails::-webkit-scrollbar-track {
background: var(--bg-tertiary);
border-radius: 4px;
}
.reference-thumbnails::-webkit-scrollbar-thumb {
background: var(--accent-blue);
border-radius: 4px;
border: 2px solid var(--bg-tertiary);
}
.reference-thumbnail {
flex-shrink: 0;
width: 70px;
height: calc(70px * 16 / 9); /* 9:16 Seitenverhältnis */
cursor: pointer;
border-radius: 8px;
overflow: hidden;
opacity: 0.6;
transition: all 0.4s ease;
border: 3px solid transparent;
position: relative;
}
.reference-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reference-thumbnail.active {
opacity: 1;
border-color: var(--accent-blue);
transform: scale(1.1);
box-shadow: 0 0 15px rgba(66, 153, 225, 0.5);
}
.reference-thumbnail:hover {
opacity: 0.9;
transform: scale(1.05);
}
/* === ENDE NEUER REFERENZBEREICH === */
/* Trust Badges Section */
.trust-section {
padding: 4rem 2rem;
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.trust-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.trust-header {
margin-bottom: 3rem;
}
.trust-header h3 {
font-size: 1.8rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.trust-header p {
color: var(--text-secondary);
font-size: 1.1rem;
}
.trust-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
flex-wrap: wrap;
}
.trust-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: fadeIn 0.8s ease-out forwards;
}
.trust-badge:nth-child(1) { animation-delay: 0.1s; }
.trust-badge:nth-child(2) { animation-delay: 0.2s; }
.trust-badge:nth-child(3) { animation-delay: 0.3s; }
.trust-badge:nth-child(4) { animation-delay: 0.4s; }
.trust-badge-icon {
width: 80px;
height: 80px;
background: var(--bg-secondary);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
}
.trust-badge:hover .trust-badge-icon {
transform: translateY(-5px);
border-color: var(--accent-blue);
box-shadow: 0 10px 20px rgba(66, 153, 225, 0.2);
}
.trust-badge span {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
/* Video Section - Zoom-aware & Fullscreen */
.video-section {
position: relative;
width: 100%;
height: 45rem;       /* rem statt vh → skaliert mit Strg ± */
min-height: 25rem;
overflow: hidden;
margin: 0;
}
.video-autoplay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;   /* Video füllt den Bereich proportional */
z-index: 1;
}
.video-controls {
position: absolute;
bottom: 2rem;
right: 2rem;
z-index: 2;
}
/* Mobil kleiner machen */
@media (max-width: 768px) {
.video-section {
height: 30rem;
min-height: 18rem;
}
}
#muteBtn {
background: rgba(0, 0, 0, 0.5);
border: 2px solid white;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
#muteBtn:hover {
background: rgba(0, 0, 0, 0.8);
}
#muteBtn svg {
width: 24px;
height: 24px;
}
#unmutedIcon {
display: none;
}
#muteBtn.muted #mutedIcon {
display: block;
}
#muteBtn.muted #unmutedIcon {
display: none;
}
#muteBtn:not(.muted) #mutedIcon {
display: none;
}
#muteBtn:not(.muted) #unmutedIcon {
display: block;
}
/* Why ZMN Section -- NEU GESTALTET */
.why-zmn{
padding:7rem 2rem;
background:var(--bg-secondary);
}
.zemin-container{
max-width:900px;
margin:0 auto;
text-align:center;
}
.prinzip-logo {
text-align: center;
margin-bottom: 0rem; /* Abstand zur Überschrift */
}
.prinzip-logo img {
max-width: 120px;
height: auto;
animation: floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.why-zmn h2{
text-align:center;
font-size:clamp(2.5rem,4vw,3.5rem);
color:var(--text-primary);
margin-bottom:2rem;
font-weight:800;
position:relative;
}
.why-zmn h2::after{
content:'';
position:absolute;
bottom:-10px; left:50%;
transform:translateX(-50%);
width:100px; height:4px;
background:var(--accent-blue);
border-radius:2px;
}
.why-services-intro{
margin: 1.25rem 0 .5rem 0;
color: var(--text-primary);
font-weight: 600;
font-size: 1.05rem;
}
/* ZEMIN Animation: Z, M, N laufen blau an und zurück */
.zmn-letter{
color: var(--text-primary);
transition: color .3s ease, text-shadow .3s ease;
}
.zmn-letter.inview{
animation: zmnPulseColor 6s ease-in-out infinite;
}
@keyframes zmnPulseColor{
0%, 100%{
color: var(--text-primary);
text-shadow: none;
}
50%{
color: var(--accent-blue);
text-shadow: 0 2px 8px color-mix(in oklab, var(--accent-blue) 45%, transparent);
}
}
/* Container */
.why-services-links{
display:flex; flex-wrap:wrap; gap:.8rem 1rem;
justify-content:center; margin:1rem 0 2.25rem;
}
.why-link{
--c: var(--accent-blue);
display:inline-flex; align-items:center; gap:.5rem;
padding:.65rem 1.1rem; border-radius:14px;
border:1px solid color-mix(in oklab, var(--c) 35%, transparent);
background: color-mix(in oklab, var(--c) 8%, transparent);
color: color-mix(in oklab, var(--text-primary) 92%, var(--c));
text-decoration:none; font-weight:600; line-height:1;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .2s ease;
box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.why-link:hover,
.why-link:focus-visible{
background: var(--c); color:#fff; border-color: var(--c);
transform: translateY(-2px);
box-shadow: 0 8px 20px color-mix(in oklab, var(--c) 35%, transparent);
}
/* === DARK MODE: Notdienst nur mit rotem Schimmer (kein Vollrot) === */
:root[data-theme="dark"] .why-services-links .why-link-emergency:hover,
:root[data-theme="dark"] .why-services-links .why-link-emergency:focus-visible,
body.dark-mode .why-services-links .why-link-emergency:hover,
body.dark-mode .why-services-links .why-link-emergency:focus-visible{
/* KEIN Vollrot-Fill: */
background: transparent !important;
/* zarter Rand + roter Glow: */
border-color: #ff6a65 !important;
color:#fff;
box-shadow: 0 0 0 2px rgba(230,73,69,.35), 0 12px 36px rgba(230,73,69,.45);
transform: translateY(-2px);
}
/* Optional: „ausgewählt/aktiv“ (falls du einen Active-State setzt) – dezent, nicht vollrot */
:root[data-theme="dark"] .why-services-links .why-link--emergency[aria-current="true"],
:root[data-theme="dark"] .why-services-links .why-link-emergency[aria-current="true"],
body.dark-mode .why-services-links .why-link--emergency.is-active,
body.dark-mode .why-services-links .why-link-emergency.is-active{
background: rgba(230,73,69,.10) !important; /* leichte Tönung */
border-color:#E64945 !important;
color:#fff;
box-shadow: 0 0 0 2px rgba(230,73,69,.28), 0 10px 28px rgba(230,73,69,.35);
}
/* Nur Notdienst rot lassen */
.why-link-emergency{ --c:#ef4444; }
/* Dark-Mode Fine-Tuning (generisch) */
body.dark-mode .why-link{
background: color-mix(in oklab, var(--c) 14%, transparent);
border-color: color-mix(in oklab, var(--c) 45%, transparent);
color: #e8eefb;
}
.why-link:focus-visible{ outline:3px solid color-mix(in oklab, var(--c) 60%, white); outline-offset:3px; }
.zemin-text{
font-size:1.2rem;
color:var(--text-secondary);
line-height:1.8;
margin-top:3rem;
margin-bottom:4rem;
}
.zemin-text strong{
color:var(--text-secondary);font-weight:700;
}
.zemin-text p:last-child {
margin-bottom: 0;
}
.zemin-text p {
margin: 0 0 1.6rem;   /* Abstand nach jedem Absatz */
}
.zemin-text em {
font-style: italic;
font-weight: 500;
}
.zemin-pillars{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:3rem;
}
.pillar-card{
background:var(--bg-secondary);
padding:2.5rem;
border-radius:15px;
border:1px solid var(--border-color);
transition:var(--transition);
}
.pillar-card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-medium);
}
body.dark-mode .pillar-card{
background: var(--bg-secondary);           /* dunklere Basisfläche */
padding:2.5rem;
border: 1px solid var(--border-color);    /* gleicher dezenter Rand */
transition: var(--transition);            /* gleiche Übergänge wie Light */
}
body.dark-mode .pillar-card:hover{
transform: translateY(-8px);              /* nach vorn */
box-shadow: var(--shadow-medium);         /* stärkerer Schatten */
background: rgba(255, 255, 255, 0.05);
}
.pillar-icon{
font-size:2.5rem;
margin-bottom:1.5rem;
color:var(--accent-blue);
}
.pillar-card h3{
font-size:1.5rem;
color:var(--text-primary);
margin-bottom:1rem;
}
.pillar-card p{
color:var(--text-secondary);
font-size:.95rem;
}
/* ===== Layout & Card ===== */
#zmn-faq-section{background-color: var(--bg-primary) !important;padding: 72px 16px;display: flow-root;position: relative}
#zmn-faq-section > *:first-child{margin-top: 0 !important}
#zmn-faq{max-width:920px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
#zmn-faq .faq-card{border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1C2D4E 0%,#0E1A31 60%,#0A1323 100%);box-shadow:0 24px 60px rgba(0,0,0,.33)}
#zmn-faq .faq-hero{color:#fff;padding:28px 20px 16px;background:
radial-gradient(150% 110% at 50% -20%, rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 62%),
linear-gradient(180deg,#1C2D4E 0%,#0E1A31 60%,#0A1323 100%)}
#zmn-faq .faq-title{margin:0 0 10px;text-align:center;font-size:clamp(32px,5vw,46px);font-weight:800;color:#fff}
#zmn-faq .faq-subtitle{margin:0 0 14px;text-align:center;color:#eaf1ff;opacity:.96;font-size:15.5px}
/* ===== Suche ===== */
#zmn-faq .faq-search{display:flex;gap:.5rem;max-width:760px;margin:16px auto 10px;background:#fff;border-radius:18px;padding:.5rem .6rem;box-shadow:0 6px 26px rgba(0,0,0,.18)}
#zmn-faq .faq-search input{flex:1;border:0;outline:0;padding:1rem;border-radius:12px;background:#fff;color:#0f172a;font-size:15px}
#zmn-faq .faq-search input::placeholder{color:#64748B;opacity:.9}
#zmn-faq .faq-search button{border:0;background:transparent;cursor:pointer;color:#2563eb;padding:0 10px}
/* ===== Tabs ===== */
#zmn-faq .faq-tabs{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:12px;padding:0 10px}
#zmn-faq .faq-tab{border:1px solid rgba(15,23,42,.12);background:#fff;color:#0f172a;font-weight:700;font-size:14px;border-radius:999px;padding:.6rem 1.05rem;cursor:pointer;user-select:none;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}
#zmn-faq .faq-tab:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
#zmn-faq .faq-tab[aria-selected="true"]{outline:2px solid #3b82f6;box-shadow:0 8px 22px rgba(59,130,246,.2)}
/* ===== Panels ===== */
#zmn-faq .faq-panels{background:linear-gradient(180deg,#152541 0%,#0E1A31 70%,#0A1323 100%);color:#EAF1FF;border-top:1px solid rgba(155,185,236,.28);padding:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .48s cubic-bezier(.16,1,.3,1),opacity .28s ease,padding .28s ease}
#zmn-faq .faq-panels.is-open{opacity:1;max-height:2400px;padding:18px 18px 22px}
#zmn-faq .faq-panel[hidden]{display:none}
#zmn-faq .faq-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){#zmn-faq .faq-grid{grid-template-columns:1fr}}
#zmn-faq .faq-item{background:#0f1b30;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;box-shadow:0 8px 18px rgba(0,0,0,.22);cursor:pointer;transition:all .2s}
#zmn-faq .faq-item:hover{border-color:rgba(155,185,236,.5);transform:translateY(-1px)}
#zmn-faq .faq-item[open]{border-color:rgba(155,185,236,.6)}
#zmn-faq .faq-question{font-weight:700;color:#fff;display:flex;justify-content:space-between;align-items:center}
#zmn-faq .faq-question::after{content:'▶';font-size:12px;opacity:.9;transition:transform .3s;margin-left:10px}
#zmn-faq .faq-item[open] .faq-question::after{transform:rotate(90deg)}
#zmn-faq .faq-answer{color:#cfe0ff;margin-top:10px;line-height:1.55;font-size:14px}
/* ===== FAB Button ===== */
#zmn-fab{
position:fixed;right:36px;bottom:36px;z-index:9999;border:none;cursor:pointer;
display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem;
color:#fff;font-weight:700;font-size:15px;border-radius:999px;
background:linear-gradient(135deg,#E64945,#F56B68);
box-shadow:0 22px 48px rgba(0,0,0,.35);
transition:transform .15s,box-shadow .2s;
}
#zmn-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 26px 56px rgba(0,0,0,.4)}
#zmn-fab .fab-icon{width:20px;height:20px}
#zmn-fab::after{
content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid rgba(255,255,255,.9);
opacity:.55;box-shadow:0 0 0 2px rgba(255,255,255,.25);animation:zmnFabBlink 1.4s ease-in-out infinite
}
@keyframes zmnFabBlink{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.85;transform:scale(1.03)}}
/* ===== MOBILE ONLY ===== */
@media (max-width:480px){
/* runder, kleiner FAB – wie bisher */
#zmn-fab{padding:0;width:56px;height:56px;justify-content:center}
/* Zusatzlabel neben dem FAB – Basis: versteckt */
#zmn-fab .fab-label{
position:absolute;
right:calc(100% + 10px);  /* Text rechts neben dem Button */
top:50%; transform:translateY(-50%);
display:none; opacity:0;
font:700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
color:#fff; white-space:nowrap; pointer-events:none;
/* Sichtbarkeit auf hellem Hintergrund + dünner blauer Rand */
text-shadow:0 0 6px rgba(0,0,0,.6);
border:1px solid #1C2D4E; border-radius:6px; padding:2px 6px;
}
/* Wird per JS gesetzt, wenn FAQ sichtbar ist */
#zmn-fab.fab-show-label .fab-label{
display:inline-block !important;       /* überstimmt evtl. display:none */
animation:kiBlink 1.6s infinite;
opacity:1;
}
@keyframes kiBlink{0%,100%{opacity:.3}50%{opacity:1}}
}
/* ===== Chat ===== */
.zmn-chat{position:fixed;right:20px;bottom:100px;z-index:10000;display:none}
.zmn-chat.is-open{display:block}
.zmn-chat-card{width:min(420px,90vw);height:min(600px,80vh);background:linear-gradient(180deg,#1C2D4E 0%,#0E1A31 60%,#0A1323 100%);color:#fff;border:1px solid rgba(165,180,207,.4);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
.zmn-chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(165,180,207,.3)}
.zmn-chat-title{font-weight:700;font-size:16px}
.zmn-chat-controls{display:flex;align-items:center;gap:10px}
.zmn-chat-domain{appearance:none;padding:.4rem .8rem;border-radius:8px;border:1px solid rgba(165,180,207,.3);background:rgba(14,26,49,.9);color:#fff;font-size:13px;cursor:pointer}
.zmn-chat-close{border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer;padding:0 5px}
.zmn-chat-log{flex:1;overflow-y:auto;padding:16px;background:rgba(15,22,38,.95)}
.zmn-chat-msg{display:flex;margin:8px 0}
.zmn-chat-msg.user{justify-content:flex-end}
.zmn-chat-bubble{max-width:75%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5}
.zmn-chat-msg.user .zmn-chat-bubble{background:rgba(37,99,235,.92);color:#fff} /* Blau statt Rot */
.zmn-chat-msg.ai .zmn-chat-bubble{background:rgba(14,31,56,.85);color:#fff;border:1px solid rgba(165,180,207,.2)}
.zmn-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(165,180,207,.3);background:rgba(0,0,0,.2)}
.zmn-chat-input{flex:1;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(14,31,56,.9);color:#fff;padding:10px 12px;font-size:14px}
.zmn-chat-input::placeholder{color:rgba(255,255,255,.7)}
.zmn-chat-send{border:none;border-radius:10px;padding:10px 20px;background:#E64945;color:#fff;font-weight:600;cursor:pointer;transition:background .2s}
.zmn-chat-send:hover{background:#D43935}
/* Mobile Chat-Fix (jede Regel als Einzeiler) */
@media (max-width:640px){.zmn-chat{left:6px;right:6px;bottom:calc(8px + env(safe-area-inset-bottom));max-width:100vw}}
@media (max-width:640px){.zmn-chat-card{display:flex;flex-direction:column;width:calc(100vw - 12px);max-height:min(68svh,68dvh);height:auto;box-sizing:border-box;overflow:hidden;border-radius:16px}}
@media (max-width:640px){.zmn-chat-header{padding:10px 14px;gap:8px}}
@media (max-width:640px){.zmn-chat-title{flex:1;min-width:0}}
@media (max-width:640px){.zmn-chat-controls{display:flex;align-items:center;gap:8px;min-width:0}}
@media (max-width:640px){.zmn-chat-domain{flex:0 1 55vw;max-width:55vw;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.32rem .6rem;font-size:14px;line-height:1.2}}
@media (max-width:640px){.zmn-chat-close{font-size:22px;margin-left:auto;background:none;border:none;padding:0;color:#fff;line-height:1;cursor:pointer;appearance:none}}
@media (max-width:640px){.zmn-chat-log{flex:1;min-height:0;overflow-y:auto;padding:12px 14px}}
@media (max-width:640px){.zmn-chat-form{gap:8px;padding:10px 12px;border-top:1px solid rgba(165,180,207,.3);background:rgba(0,0,0,.2)}}
@media (max-width:640px){.zmn-chat-input{font-size:16px}}
/* Weißer, weicher Puls-Ring, der vom Button ausstrahlt */
#zmn-fab::after{
content:"";
position:absolute;
inset:-6px; /* leicht größer als der Button */
border-radius:999px;
pointer-events:none; /* Klicks nicht blockieren */
box-shadow: 0 0 0 0 rgba(255,255,255,.35);
animation: whitePulse 2.2s ease-out infinite;
}
@keyframes whitePulse{
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); opacity:.8; }
60% { box-shadow: 0 0 0 22px rgba(255,255,255,0); opacity:0; }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity:0; }
}
/* Optional: weißer „Glare"-Schimmer, der beim Puls kurz sichtbar ist */
#zmn-fab::before{
content:"";
position:absolute;
inset:0;
border-radius:999px;
background:
radial-gradient(120% 100% at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
opacity:0;
pointer-events:none;
animation: whiteGlare 2.2s ease-in-out infinite;
}
@keyframes whiteGlare{
0% { opacity:0; transform: scale(1); }
35% { opacity:.5; transform: scale(1.02); }
60% { opacity:0; transform: scale(1.015); }
100% { opacity:0; transform: scale(1); }
}
/* Barrierefreiheit: Animationen respektieren */
@media (prefers-reduced-motion: reduce){
#zmn-fab, #zmn-fab::before, #zmn-fab::after{
animation: none !important;
}
}
/* ===== MOBILE ONLY: Zusatzlabel neben FAB ===== */
/* Desktop bleibt unverändert; hier wird nichts überschrieben */
@media (max-width:768px){
/* Mobile FAB-Größe (dein aktuelles Verhalten beibehalten) */
#zmn-fab{ padding:0; width:56px; height:56px; justify-content:center; }
/* Zusatzlabel – standardmäßig versteckt */
#zmn-fab .fab-label{
position:absolute;
right:calc(100% + 10px);   /* Text rechts neben dem kleinen runden Button */
top:50%; transform:translateY(-50%);
display:none; opacity:0;
font:700 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
color:#fff; white-space:nowrap; pointer-events:none;
/* Sichtbarkeit auf hellen Hintergründen */
text-shadow:0 0 6px rgba(0,0,0,.6);
border:1px solid #4299E1; border-radius:6px; padding:2px 6px;
}
/* Wird per JS gesetzt, wenn die FAQ-Section im Viewport ist */
#zmn-fab.fab-show-label .fab-label{
display:inline-block !important;
animation:kiBlink 1.6s infinite;
}
@keyframes kiBlink{
0%,100%{ opacity:.3; }
50%{ opacity:1; }
}
}
/* =========================
Reviews Section -- Ready for real data
========================= */
.reviews{
padding:7rem 2rem;
background:var(--bg-secondary);
overflow:hidden;
}
/* Header */
.reviews .reviews-header{
max-width:920px;
margin:0 auto 2rem;
text-align:center;
}
.reviews h2{
text-align:center;
font-size:clamp(2.5rem,4vw,3.2rem);
color:var(--text-primary);
margin-bottom:.5rem;
font-weight:800;
}
.reviews .muted{ color:var(--text-secondary); }
/* Aggregate row (Sterne, Score, Count) */
.rating-row{
display:flex; gap:.5rem; justify-content:center; align-items:center;
margin:.25rem 0 1rem;
}
.rating-row .stars{ letter-spacing:2px; color:#fbbc04; }
.rating-row .score{ font-weight:700; }
.rating-row .count{ color:var(--text-secondary); }
/* CTAs */
.review-ctas{
display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
margin:1rem 0 2rem;
}
.review-ctas .btn{
display:inline-block;
padding:.8rem 1.1rem;
border-radius:999px;
font-weight:600;
text-decoration:none;
border:1px solid var(--border-color);
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.review-ctas .btn:hover{ transform:translateY(-1px); }
.review-ctas .btn:active{ transform:translateY(0); }
.review-ctas .btn-google:hover{ background:#f6f9fe; border-color:#4285f4; color:#1a73e8; }
.review-ctas .btn-fb:hover{ background:#eef2ff; border-color:#1877f2; color:#1877f2; }
/* Grid (Standard) */
.reviews-grid{
max-width:1100px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:1.25rem;
}
/* Optional: endloses Scrolling, wenn sehr viele Einträge.
Füge der reviews-grid zusätzlich .has-marquee hinzu, um es zu aktivieren. */
.reviews-grid.has-marquee{
display:flex; gap:1.25rem;
animation:reviewsMarquee 45s linear infinite;
will-change:transform;
}
.reviews-grid.has-marquee:hover{ animation-play-state:paused; }
@keyframes reviewsMarquee{
from{ transform:translateX(0); }
to { transform:translateX(-50%); }
}
/* Karten */
.review-card{
background:var(--bg-primary);
border:1px solid var(--border-color);
border-radius:14px;
padding:1.25rem 1.25rem 1.1rem;
box-shadow:var(--shadow-light);
position:relative;
transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
body.dark-mode .review-card{ background:var(--bg-tertiary); }
.review-card::before{
content:'';
position:absolute; inset:0 0 auto 0; height:3px;
background:linear-gradient(90deg, var(--accent-blue), var(--accent-red));
transform:scaleX(0);
transform-origin:left;
transition:transform .45s ease;
}
.review-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-medium); border-color:var(--accent-blue); }
.review-card:hover::before{ transform:scaleX(1); }
/* Kopf */
.review-head{ display:flex; gap:.75rem; align-items:center; margin-bottom:.35rem; }
.avatar{
width:44px; height:44px; border-radius:50%;
background:#e5edff; color:#2746ff;
display:flex; align-items:center; justify-content:center;
font-weight:800;
}
.name{ font-weight:700; color:var(--text-primary); }
.meta{ color:var(--text-secondary); font-size:.9rem; }
/* Text */
.review-text{
color:var(--text-primary);
line-height:1.65;
margin-top:.35rem;
/* lange Texte elegant kürzen */
display:-webkit-box;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;
overflow:hidden;
position:relative;
padding-left:1rem;
font-style:italic;
}
.review-text::before{
content:'"';
position:absolute;
left:-10px; top:-10px;
font-size:3rem;
color:var(--accent-blue);
opacity:.2; /* hier ggf. anpassen */
}
/* Skeleton (während echtes JSON lädt) */
.review-skel{
background:var(--bg-primary);
border:1px solid var(--border-color);
border-radius:14px;
padding:1.25rem;
overflow:hidden;
position:relative;
}
.review-skel .shimmer{
height:10px; border-radius:6px; background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
animation:shimmer 1.3s infinite linear;
margin:.5rem 0;
}
@keyframes shimmer{ 0%{ background-position:-200px 0 } 100%{ background-position:200px 0 } }
/* Badges (falls weiter verwendet werden) */
.reviews-trust-badges{
display:flex; justify-content:center; gap:2rem; margin-bottom:.5rem; flex-wrap:wrap;
}
.review-trust-badge{ display:flex; align-items:center; gap:.5rem; color:var(--text-secondary); }
.review-trust-badge img{ width:26px; height:26px; object-fit:contain; opacity:1; filter:none; transition:opacity .2s ease; }
.review-trust-badge:hover img{ opacity:.85; }
/* Responsives Feintuning */
@media (max-width:640px){
.avatar{ width:40px; height:40px; }
.review-text{ -webkit-line-clamp:7; }
}
/* About Section */
.about {
padding: 7rem 2rem;
background: var(--bg-primary);
}
.about-container {
max-width: 1100px;
margin: 0 auto;
}
.about h2 {
text-align: center;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 3rem;
font-weight: 800;
}
/* Basis: unverändert für Mobile/Tablet */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-text {
opacity: 0;
animation: fadeInLeft 1s ease-out forwards;
max-width: 600px;
justify-self: center;
}
.about-text p {
font-size: 1.1rem;
color: var(--text-secondary);
line-height: 1.9;
margin-bottom: 1.5rem;
}
.about-text .highlight-text {
color: var(--accent-blue);
font-weight: 600;
}
.about-image {
opacity: 0;
animation: fadeInRight 1s ease-out forwards;
justify-self: center;
}
.about-image img {
width: 85%;
max-width: 560px;
opacity: 0.9;
border-radius: 20px;
box-shadow: var(--shadow-heavy);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.about-image img:hover {
transform: translateY(-2px) scale(1.01);
}
body.dark-mode .about-image img {
opacity: 0.7 !important;
}
@media (max-width: 992px) {
.about-content { gap: 2.5rem; }
}
@media (max-width: 768px) {
.about-content { grid-template-columns: 1fr; text-align: center; }
.about-text { justify-self: center; }
.about-image { justify-self: center; }
.about-image img {
width: 85%;
height: 360px;
object-fit: cover;
object-position: center;
}
body.dark-mode .about-image img { opacity: 0.6 !important; }
}
@media (min-width: 993px) {
.about-container { overflow: visible; } /* erlaubt Bild-Überstand rechts */
.about h2 {
margin-bottom: 2.6rem; /* enger zur Section */
}
/* Exakte Achse: fixe Spaltenbreiten unter derselben Container-Mitte */
.about-content {
grid-template-columns: 620px 360px;  /* Text | Bild */
gap: 40px;                            /* Gasse zwischen beiden */
justify-content: center;              /* unter H2 zentriert */
}
/* Text: minimaler linker Einzug, bündig zur Mittelachse */
.about-text {
max-width: none;
justify-self: end;                    /* an Innenkante (Mitte) */
padding-left: 12px;                   /* leichter Einzug */
text-align: left;
}
/* Bild: kleiner + weiter rechts, leichtes Überstehen */
.about-image {
justify-self: start;                  /* ab Mittelachse */
margin-right: -18px;                  /* übersteht den Container leicht */
}
.about-image img {
display: block;
width: 340px;                         /* kleiner als vorher */
max-width: 340px;                     /* fixe Breite = stabile Kante */
margin-left: 18px;                    /* zusätzlicher Rechtsversatz */
height: 420px;
object-fit: contain;
object-position: center;
}
}
/* Contact Section */
.contact {
padding: 7rem 2rem;
background: var(--bg-secondary);
}
.contact-container {
max-width: 800px;
margin: 0 auto;
}
.contact h2 {
text-align: center;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 4rem;
font-weight: 800;
}
/* Intro/Info-Karte */
.contact-info {
background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(66,153,225,.05) 100%);
padding: 3rem;
border-radius: 20px;
margin-bottom: 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
body.dark-mode .contact-info {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(66,153,225,.10) 100%);
}
.contact-info::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(66,153,225,.10) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.1);opacity:.8} }
.contact-info p {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
position: relative;
z-index: 1;
opacity: 0;
animation: fadeInScale 1s ease-out forwards;
}
@keyframes fadeInScale { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
/* Form-Container */
.contact-form {
background: var(--bg-primary);
padding: 3.5rem;
border-radius: 20px;
box-shadow: var(--shadow-medium);
border: 1px solid var(--border-color);
position: relative;
}
body.dark-mode .contact-form { background: var(--bg-secondary); }
/* Progress Bar */
.form-progress {
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
position: relative;
}
.form-progress::before {
content: '';
position: absolute;
top: 20px; left: 0; right: 0;
height: 2px;
background: var(--border-color);
z-index: 0;
}
.progress-step {
width: 40px; height: 40px;
background: var(--bg-primary);
border: 2px solid var(--border-color);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 600;
color: var(--text-secondary);
position: relative; z-index: 1;
transition: all .3s ease;
}
.progress-step.active {
background: var(--accent-blue);
border-color: var(--accent-blue);
color: #fff;
}
.progress-step.completed {
background: var(--success-green);
border-color: var(--success-green);
color: #fff;
}
.progress-step span {
position: absolute; bottom: -25px;
white-space: nowrap; font-size: .8rem;
color: var(--text-secondary);
}
/* Security Badge */
.form-security {
display: flex; align-items: center; justify-content: center;
gap: .5rem; margin-bottom: 2rem; padding: .75rem;
background: var(--bg-secondary);
border-radius: 10px; font-size: .9rem; color: var(--text-secondary);
}
.form-security .icon { color: var(--success-green); font-size: 1.2rem; }
/* Steps */
.form-step { display: none; animation: fadeIn .5s ease-out; }
.form-step.active { display: block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.form-group { margin-bottom: 2rem; }
.form-group label {
display: block; margin-bottom: .8rem;
color: var(--text-primary); font-weight: 600; font-size: .95rem;
}
/* Service-Auswahl (Step 1 & 2) */
.service-selection { display: grid; gap: 1rem; }
/* Grundkachel */
.service-option {
background: var(--bg-secondary);
border: 2px solid var(--border-color);
padding: 2rem; border-radius: 15px;
cursor: pointer; transition: var(--transition);
text-align: center;
}
.service-option:hover {
border-color: var(--accent-blue);
transform: translateY(-3px);
box-shadow: var(--shadow-light);
}
/* Standard-Texte in Kachel (heller Modus) */
.service-option .service-option-title span { color: var(--text-primary); font-weight: 600; }
.service-option p { color: var(--text-secondary); }
/* Ausgewählte Kachel -- immer Weiß */
.service-option.selected {
background: var(--accent-blue);
border-color: var(--accent-blue);
color: #fff;
}
.service-option.selected h4 span,
.service-option.selected p { color: #fff; }
/* Dark Mode: bessere Lesbarkeit */
body.dark-mode .service-option {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.12);
color: #e9edf3;
}
body.dark-mode .service-option:hover {
background: rgba(255,255,255,.10);
border-color: var(--accent-blue);
}
/* Texte innerhalb der nicht-ausgewählten Kacheln */
body.dark-mode .service-option .service-option-title span { color: #fff; }
body.dark-mode .service-option p { color: rgba(255,255,255,.78); }
/* Ausgewählte Kachel bleibt kräftig mit weißer Typo */
body.dark-mode .service-option.selected {
background: var(--accent-blue);
border-color: var(--accent-blue);
color: #fff;
box-shadow: 0 8px 24px rgba(37,99,235,.35);
}
body.dark-mode .service-option.selected h4 span,
body.dark-mode .service-option.selected p { color: #fff; }
/* Inputs */
.form-input, .form-textarea {
width: 100%;
padding: 1.2rem 1.5rem;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 1rem;
transition: var(--transition);
background: var(--bg-primary);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.dark-mode .form-input,
body.dark-mode .form-textarea { background: var(--bg-tertiary); }
.form-input:focus, .form-textarea:focus {
outline: none; border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(66,153,225,.1);
}
/* Validation */
.form-input.valid { border-color: var(--success-green); }
.form-input.invalid { border-color: var(--emergency-red); }
.validation-message { font-size: .85rem; margin-top: .5rem; display: none; }
.validation-message.error { color: var(--emergency-red); display: block; }
.validation-message.success { color: var(--success-green); display: block; }
/* Flatpickr -- beide Modi */
.flatpickr-calendar {
box-shadow: var(--shadow-medium) !important;
border: none !important; border-radius: 15px !important;
background: var(--bg-primary) !important;
}
body.dark-mode .flatpickr-calendar { background: var(--bg-secondary) !important; }
.flatpickr-months { background: var(--bg-secondary) !important; }
body.dark-mode .flatpickr-months { background: var(--bg-tertiary) !important; }
body.dark-mode .flatpickr-current-month,
body.dark-mode .flatpickr-weekdays,
body.dark-mode .flatpickr-weekday { color: var(--text-primary) !important; }
.flatpickr-day { color: var(--text-primary) !important; border: none !important; }
body.dark-mode .flatpickr-day { color: var(--text-primary) !important; }
body.dark-mode .flatpickr-day:hover { background: var(--accent-blue) !important; color: #fff !important; }
.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay.disabled,
.flatpickr-day.nextMonthDay.disabled {
background: rgba(128,128,128,.2) !important;
color: rgba(128,128,128,.6) !important;
cursor: not-allowed !important;
position: relative; opacity: .5 !important;
text-decoration: line-through;
text-decoration-color: var(--emergency-red);
}
body.dark-mode .flatpickr-day.disabled,
body.dark-mode .flatpickr-day.prevMonthDay.disabled,
body.dark-mode .flatpickr-day.nextMonthDay.disabled {
background: rgba(71,85,105,.4) !important;
color: rgba(150,163,184,.5) !important;
opacity: .5 !important;
text-decoration-color: var(--text-light);
}
.flatpickr-day.disabled::before {
content: '';
position: absolute; top: 50%; left: 10%; right: 10%;
height: 1.5px; background: var(--emergency-red);
transform: rotate(-20deg); opacity: .7;
}
body.dark-mode .flatpickr-day.disabled::before { background: var(--text-light); }
.flatpickr-day.flatpickr-weekend { background: rgba(229,62,62,.05) !important; position: relative; }
body.dark-mode .flatpickr-day.flatpickr-weekend { background: rgba(229,62,62,.1) !important; }
.flatpickr-day.flatpickr-weekend.disabled::after {
content: 'n.V.'; position: absolute; font-size: 8px; bottom: 2px; left: 50%;
transform: translateX(-50%); color: var(--accent-red); font-weight: 700;
}
.flatpickr-day.selected { background: var(--accent-blue) !important; color: #fff !important; border: none !important; }
.flatpickr-day.today { border: 2px solid var(--accent-blue) !important; }
.flatpickr-time { background: var(--bg-primary) !important; }
body.dark-mode .flatpickr-time { background: var(--bg-secondary) !important; }
body.dark-mode .flatpickr-time input,
body.dark-mode .flatpickr-time .flatpickr-am-pm { color: var(--text-primary) !important; }
/* Honeypot */
.form-honeypot { position: absolute; left: -9999px; }
/* Datenschutz-Checkbox */
.form-checkbox {
display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 2rem;
}
.form-checkbox input[type="checkbox"] {
margin-top: .3rem; cursor: pointer; width: 18px; height: 18px;
}
.form-checkbox label { font-size: .9rem; color: var(--text-secondary); cursor: pointer; }
body.dark-mode .form-checkbox label { color: rgba(255,255,255,.78); }
.form-checkbox label a { color: var(--accent-blue); text-decoration: none; }
.form-checkbox label a:hover { text-decoration: underline; }
/* Form-Feedback */
#form-feedback {
margin-top: 1rem; padding: 1rem; border-radius: 8px;
text-align: center; font-weight: 600; display: none;
}
#form-feedback.success {
background: rgba(5,150,105,.10);
color: var(--success-green); border: 1px solid var(--success-green);
display: block;
}
#form-feedback.error {
background: rgba(220,38,38,.10);
color: var(--emergency-red); border: 1px solid var(--emergency-red);
display: block;
}
/* Buttons */
.form-buttons { display: flex; gap: 1rem; margin-top: 2rem; }
.btn {
padding: 1.2rem 2.5rem; border: none; border-radius: 60px;
font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.btn:focus-visible { outline: 3px solid rgba(66,153,225,.35); outline-offset: 2px; }
.btn-primary {
background: var(--accent-blue); color: #fff; flex: 1;
box-shadow: 0 5px 20px rgba(66,153,225,.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(66,153,225,.40); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-secondary:hover { background: var(--border-color); }
/* Success Screen */
.success-message { display: none; text-align: center; padding: 3rem; }
.success-message.show { display: block; }
.success-icon {
width: 80px; height: 80px; background: var(--success-green); border-radius: 50%;
display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem;
animation: scaleIn .5s ease-out; color: #fff; font-size: 2.5rem;
}
@keyframes scaleIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
body.dark-mode .success-message {
display: none;
text-align: center;
padding: 3rem;
}
body.dark-mode .success-message.show { display: block; }
body.dark-mode .success-icon {
width: 80px;
height: 80px;
background: var(--success-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
animation: scaleIn .5s ease-out;
color: #fff;
font-size: 2.5rem;
}
@media (prefers-color-scheme: dark) {
body.dark-mode .success-message {
color: #fff;
}
}
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-primary);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
z-index: 1050;
transform: translateY(100%);
transition: transform 0.5s ease;
border-top: 1px solid var(--border-color);
}
body.dark-mode .cookie-banner {
background: var(--bg-secondary);
}
.cookie-banner.show {
transform: translateY(0);
}
.cookie-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.cookie-text {
flex: 1;
min-width: 300px;
}
.cookie-text h3 {
color: var(--text-primary);
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.cookie-text p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
.cookie-text a {
color: var(--accent-blue);
text-decoration: none;
}
.cookie-text a:hover {
text-decoration: underline;
}
.cookie-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.cookie-btn {
padding: 0.8rem 2rem;
border: none;
border-radius: 30px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.cookie-accept {
background: var(--accent-blue);
color: white;
}
.cookie-accept:hover {
background: #3182ce;
transform: translateY(-2px);
}
.cookie-settings {
background: transparent;
color: var(--text-primary);
border: 2px solid var(--border-color);
}
.cookie-settings:hover {
border-color: var(--accent-blue);
color: var(--accent-blue);
}
/* Footer with Trust Elements */
footer {
background: var(--primary-dark);
color: white;
padding: 4rem 2rem 2rem;
position: relative;
justify-content: center;   /* horizontal mittig */
align-items: center;       /* vertikal mittig (für eine Zeile) */
text-align: center;
}
body.dark-mode footer {
background: #020617;
}
/* Footer Trust Badges */
.footer-trust {
background: rgba(255, 255, 255, 0.05);
padding: 2rem;
margin-bottom: 3rem;
border-radius: 15px;
text-align: center;
}
.footer-trust h4 {
color: white;
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.footer-trust-badges {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.footer-trust-badge {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.footer-trust-badge .icon {
font-size: 1.5rem;
color: var(--accent-blue);
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section h3 {
margin-bottom: 1.5rem;
color: var(--accent-blue);
font-size: 1.3rem;
}
.footer-section p,
.footer-section li {
color: rgba(255, 255, 255, 0.8);
line-height: 2;
margin-bottom: 0.5rem;
}
.footer-section a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
cursor: pointer;
}
.footer-section a:hover {
color: var(--accent-blue);
}
/* === KORRIGIERTE FOOTER SOCIAL ICONS === */
.footer-socials {
display: flex;
gap: 1.5rem;
align-items: center;
margin-top: 1rem; /* Abstand nach oben */
justify-content: center;   /* horizontal mittig */
align-items: center;       /* vertikal mittig (für eine Zeile) */
text-align: center;        /* Text auch mittig */
}
.footer-socials .social-icon {
background: transparent;
width: auto;
height: auto;
border-radius: 0;
}
.footer-socials .social-icon:hover {
background: transparent;
transform: none; /* Überschreibt den Hover-Effekt der Header-Icons */
}
.footer-socials .social-icon svg {
fill: rgba(255, 255, 255, 0.8); /* Farbe passend zu den Footer-Links */
width: 16px; /* Verkleinert */
height: 16px; /* Verkleinert */
transition: fill 0.3s ease;
}
.footer-socials .social-icon:hover svg {
fill: var(--accent-blue); /* Hover-Farbe passend zu den Footer-Links */
}
/* === ENDE FOOTER ICONS KORREKTUR === */
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
}
/* Legal Pages Modal */
.legal-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 2000;
overflow-y: auto;
}
.legal-modal.active {
display: block;
}
.legal-content {
background: var(--bg-primary);
max-width: 800px;
margin: 2rem auto;
padding: 3rem;
border-radius: 20px;
position: relative;
color: var(--text-primary);
}
.legal-content h2 {
color: var(--text-primary);
margin-bottom: 2rem;
font-size: 2rem;
}
.legal-content h3 {
color: var(--text-primary);
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-content p, .legal-content li {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 1rem;
}
.close-modal {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2rem;
cursor: pointer;
color: var(--text-secondary);
transition: color 0.3s ease;
}
.close-modal:hover {
color: var(--accent-red);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Responsive */
@media (max-width: 1024px) {
.nav-container {
padding: 0.8rem 1rem;
}
.nav-center {
gap: 1.5rem;
}
.nav-right {
gap: 1rem;
}
.social-icons {
display: none;
}
.reference-slide {
width: calc(100% / 2); /* 2 Bilder auf Tablets */
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-trust-badges {
flex-direction: column;
gap: 1rem;
}
.cookie-content {
flex-direction: column;
text-align: center;
}
.cookie-actions {
width: 100%;
justify-content: center;
}
}
@media (max-width: 768px) {
.emergency-banner {
padding: 0.55rem 0.5rem;
}
.emergency-banner .content {
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.emergency-text {
font-size: 0.85rem;
}
.call-button {
padding: 0.4rem 0.6rem;
font-size: 0.9rem;
}
.emergency-info {
display: none;
}
/* Mobile Navigation */
.mobile-menu-toggle {
display: flex;
}
.nav-center {
position: fixed;
top: 105px; /* Default for banner */
left: -100%;
width: 80%;
max-width: 300px;
height: calc(100vh - 105px);
background: var(--bg-primary);
flex-direction: column;
padding: 2rem;
gap: 2rem;
box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease, top 0.3s ease, height 0.3s ease;
overflow-y: auto;
z-index: 999;
align-items: flex-start;
/* Override desktop absolute positioning */
position: fixed;
transform: none;
left: -100%;
}
nav.no-banner .nav-center {
top: 60px;
height: calc(100vh - 60px);
}
body.dark-mode .nav-center {
background: var(--bg-secondary);
}
.nav-center.active {
left: 0;
}
/* Mobile nav overlay */
.nav-overlay {
display: none;
position: fixed;
top: 105px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
transition: top 0.3s ease;
}
nav.no-banner .nav-overlay {
top: 60px;
}
.nav-overlay.active {
display: block;
}
.nav-center a {
font-size: 1.1rem;
padding: 0.5rem 0;
}
.nav-right {
gap: 0.8rem;
justify-self: end;
}
.logo-text {
font-size: 0.85rem;
}
.logo-text .zmn {
font-size: 1rem;
}
/* --- Hero: Basis-Mobile (sanfter als Desktop) --- */
.hero h1{
font-size:2.5rem;          /* wird mobil via MQ weiter justiert */
letter-spacing:-1px;
}
.hero h1 span{
display:block;
margin-bottom:.5rem;
}
.hero p{
font-size:1.1rem;
padding:0 1rem;            /* seitliche Luft auf kleineren Screens */
}
/* ========= Mobile Optimierung (<=768px) ========= */
@media (max-width:768px){
/* Hero-Container: mehr vertikale Luft, kein Quetschen */
.hero{
min-height:auto;               /* überschreibt 100vh */
margin-top:90px;               /* etwas kleiner als Desktop (Bannerhöhe) */
padding:5rem 1.25rem 9rem;     /* extra Bottom-Padding für mehr Raum */
}
.hero-content{
max-width:92%;
padding:0;
text-align:center;
}
/* Headline kompakter, aber markant */
.hero h1{
font-size:clamp(2rem,9vw,3rem);
line-height:1.15;
letter-spacing:-1px;
margin-bottom:1rem;
}
/* Fließtext: luftiger und minimal kleiner */
.hero p{
font-size:1.05rem;
line-height:1.7;
padding:0;                    /* kein zusätzliches Innenpadding */
margin-bottom:2rem;
}
/* Call-to-Action angenehmer skaliert */
.cta-button{
padding:1rem 2rem;
font-size:1rem;
}
}
/* ========= Sehr kleine Geräte (<=360px) ========= */
@media (max-width:360px){
.hero{
padding:4.5rem 1rem 9.5rem;
}
.hero h1{
font-size:clamp(1.8rem,10vw,2.6rem);
}
.hero p{
font-size:1rem;
line-height:1.75;
}
}
.video-section {
width: 100vw;
max-width: 100vw;
height: 48vw; /* Verhältnis ca. 2:1, je nach Bedarf */
min-height: 180px; /* Minimalhöhe für kleine Screens */
max-height: 55vh; /* verhindert, dass das Video zu groß wird */
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.video-autoplay {
width: 100%;
height: 100%;
object-fit: cover; /* Deckt gesamte Section ab, kein schwarzer Rand */
border-radius: 0px;
display: block;
margin: 0 auto;
}
.services-grid,
.zemin-pillars {
grid-template-columns: 1fr;
gap: 2rem;
}
.service-card {
padding: 2.5rem 2rem;
}
.trust-badges {
flex-direction: column;
gap: 1.5rem;
}
.reference-slide {
width: calc(100% / 1.5); /* 1.5 Bilder auf dem Handy, um das nächste anzudeuten */
}
.reviews-carousel {
animation: none;
flex-direction: column;
}
.review-card {
min-width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.footer-socials {
justify-content: center;
}
.contact-info p {
font-size: 1.2rem;
}
.contact-form {
padding: 2rem;
}
.form-progress {
margin-bottom: 2rem;
}
.progress-step {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.progress-step span {
font-size: 0.7rem;
}
.form-buttons {
flex-direction: column;
}
.btn {
width: 100%;
}
.reviews-trust-badges {
gap: 1.5rem;
}
.review-trust-badge {
font-size: 0.9rem;
}
.cookie-banner {
padding: 1.5rem 1rem;
}
.cookie-text h3 {
font-size: 1.1rem;
}
.cookie-text p {
font-size: 0.9rem;
}
.cookie-btn {
padding: 0.7rem 1.5rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.logo-img {
width: 35px;
height: 35px;
}
.lang-btn {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.hero h1 {
font-size: 2rem;
}
.cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
.section-header h2, .why-zmn h2, .about h2, .contact h2, .reviews h2, .references h2 {
font-size: 2rem;
}
.service-card h3 {
font-size: 1.3rem;
}
.legal-content {
padding: 2rem 1.5rem;
margin: 1rem;
}
.reference-slide {
width: 100%; /* 1 Bild auf sehr kleinen Bildschirmen */
}
.reference-thumbnails {
gap: 10px;
}
/* Bilder, Logos und Videos: nicht kopierbar */
img, video {
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.reference-thumbnail {
width: 60px;
height: calc(60px * 16 / 9);
}
}
/* ===== Layout-Variablen ===== */
:root{
--rib-top-base: 100px;   /* Grundhöhe (feintunen) */
--rib-right: 0px;        /* am rechten Rand "kleben" */
--rib-radius: 14px;
--rib-font: 800 .95rem/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
/* Kontaktfarben (Rot) */
--rib-red1:#E53E3E; --rib-red2:#C53030;
/* Newsletterfarben (Blau/Cyan) */
--rib-blue1:#0EA5E9; --rib-blue2:#2563EB;
}
/* ===== Container (fixiert rechts oben) ===== */
.ribbons{
position: fixed;
top: var(--rib-top-base);
right: var(--rib-right);
z-index: 1300;
pointer-events: none; /* Ribbons selbst erlauben Pointer, Wrapper nicht */
}
/* ===== Ribbon-Basis ===== */
.ribbon{
position: absolute;
right: 0;
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .7rem 1.05rem .7rem .75rem;
font: var(--rib-font);
color: #fff;
text-decoration: none;
border-top-left-radius: var(--rib-radius);
border-bottom-left-radius: var(--rib-radius);
box-shadow:
0 0 0 2px rgba(255,255,255,.14) inset,
0 16px 42px rgba(0,0,0,.35);
transform: translateX(calc(100% + 12px)); /* <-- FIX */
opacity: 0;
visibility: hidden;
pointer-events: auto;
transition: transform .28s ease, opacity .28s ease, visibility .28s ease, filter .25s ease;
}
/* ⛔️ ALT (bitte entfernen):  .ribbon[data-gap]{ top: calc(var(--rib-top-base) + attr(data-gap px)); } */
/* ✅ NEU: feste Positionen */
#ribbonContact{ top: var(--rib-top-base); }
#ribbonNews{    top: calc(var(--rib-top-base) + 60px); }
.ribbon-contact{
background: linear-gradient(180deg, var(--rib-red1), var(--rib-red2));
box-shadow:
0 0 0 2px rgba(255,255,255,.14) inset,
0 16px 42px rgba(229,62,62,.45),
0 0 36px rgba(66,153,225,.30);
}
.ribbon-news{
background: linear-gradient(180deg, var(--rib-blue1), var(--rib-blue2));
box-shadow:
0 0 0 2px rgba(255,255,255,.14) inset,
0 16px 42px rgba(37,99,235,.45),
0 0 36px rgba(14,165,233,.35);
}
/* Sichtbarkeitszustände */
.ribbon.show{ transform: translateX(0); opacity: 1; visibility: visible; }
.ribbon.peek{ transform: translateX(calc(100% - 48px)); opacity: 1; visibility: visible; }
/* Hover (Desktop) */
@media (hover:hover){ .ribbon.show:hover{ filter: brightness(1.05); } }
/* Emoji-Button (Klick = ein/ausfahren) */
.rib-emoji{
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; min-width:32px;
border: none; border-radius: 50%;
cursor: pointer;
background: radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.92), rgba(255,255,255,.25));
color:#0f172a;
font-size: 14px; line-height: 1;
box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.06);
padding: 0;
}
.rib-emoji:focus{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
/* Text */
.rib-text{ color:#fff; text-decoration:none; white-space:nowrap; cursor:pointer; }
.rib-text, .rib-emoji{
font-family: var(--rib-font), "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", sans-serif;
}
/* Peel (Sticker) */
.rib-peel{
position:absolute; right:-10px; bottom:-10px; width:24px; height:24px;
background: radial-gradient(100% 100% at 0 0, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
border-bottom-left-radius: 6px;
box-shadow: 0 6px 10px rgba(0,0,0,.25);
}
/* Dark Mode */
body.dark-mode .ribbon-contact{
background: linear-gradient(180deg, #DC2626, #991B1B);
box-shadow:
0 0 0 2px rgba(255,255,255,.1) inset,
0 16px 42px rgba(220,38,38,.55),
0 0 36px rgba(56,189,248,.35);
}
body.dark-mode .ribbon-news{
background: linear-gradient(180deg, #0891B2, #1D4ED8);
box-shadow:
0 0 0 2px rgba(255,255,255,.1) inset,
0 16px 42px rgba(30,64,175,.55),
0 0 36px rgba(56,189,248,.4);
}
body.dark-mode .rib-emoji{
background: radial-gradient(120% 120% at 20% 20%, #0B1220, #0F172A);
color:#e5e7eb;
}
/* Mobile */
@media (max-width:640px){
:root{ --rib-top-base: 70px; }
.ribbon{ padding:.55rem .8rem .55rem .65rem; font: 800 .9rem/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.rib-emoji{ width:32px; height:32px; min-width:32px; }
#ribbonContact{ top: var(--rib-top-base); }
#ribbonNews{    top: calc(var(--rib-top-base) + 60px); }
}
/* Motion-Preference */
@media (prefers-reduced-motion: reduce){ .ribbon{ transition: none; } }
/* Blink im Peek-Zustand */
@keyframes ribBlink {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0), 0 0 0 2px rgba(255,255,255,0.0); }
50%      { box-shadow: 0 0 12px 4px rgba(255,255,255,0.8), 0 0 0 2px rgba(255,255,255,0.6); }
}
.ribbon.peek .rib-emoji { animation: ribBlink 1.8s ease-in-out infinite; }
/* === Popup === */
:root{
--nl-bg: #0b1220;
--nl-card: #0e1627;
--nl-card-2: #0b1220;
--nl-border: rgba(148,163,184,.16);
--nl-text: #e5e7eb;
--nl-dim: rgba(2,6,23,.6);
--nl-accent: #4f80ff;
--nl-accent-2: #6ea8ff;
--nl-green: #22c55e;
--nl-red: #f43f5e;
}
.newsletter-popup{
position: fixed; inset:0; z-index:1500;
display:grid; place-items:center;
visibility:hidden; opacity:0; pointer-events:none;
transition: opacity .28s ease, visibility .28s ease;
}
.newsletter-popup.active{
visibility:visible; opacity:1; pointer-events:auto;
}
.popup-overlay{
position:absolute; inset:0;
background: radial-gradient(1200px 600px at 20% 10%, rgba(79,128,255,.18), transparent 60%),
radial-gradient(900px 500px at 80% 90%, rgba(110,168,255,.14), transparent 60%),
var(--nl-dim);
backdrop-filter: blur(4px);
}
.popup-shell{
position:relative; z-index:2;
width:min(680px, 92vw);
background: linear-gradient(180deg, var(--nl-card), var(--nl-card-2));
border:1px solid var(--nl-border);
border-radius:18px; color:var(--nl-text);
box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
padding:22px 22px 18px;
transform: translateY(8px) scale(.98);
opacity:.98; animation: nlIn .28s ease forwards;
}
@keyframes nlIn{ to{ transform:translateY(0) scale(1); opacity:1; } }
.popup-close{
position:absolute; top:10px; right:10px;
width:34px; height:34px; border-radius:10px;
background: transparent; color:#94a3b8;
border:1px solid var(--nl-border);
display:grid; place-items:center; font-size:20px; line-height:1;
cursor:pointer; transition:all .2s ease;
}
.popup-close:hover{ color:#cbd5e1; background:#0b1324; }
.popup-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.popup-badge{
width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:22px;
background: linear-gradient(180deg, rgba(79,128,255,.16), rgba(79,128,255,.03));
border:1px solid var(--nl-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#popupTitle{ margin:2px 0 6px; font-size:1.35rem; }
#popupDesc{ margin:0; color:#a8b1c3; }
.popup-benefits{
display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;
padding:34px; margin:12px 0 8px;
background: rgba(79,128,255,.06);
border:1px dashed rgba(79,128,255,.28);
border-radius:14px; color:#cfe0ff; font-size:.95rem;
}
@media (max-width:420px){ .popup-benefits{ grid-template-columns:1fr; } }
#popupForm{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.popup-field{ display:block; }
.popup-label{ display:block; font-size:.9rem; color:#9fb0c7; margin:0 0 6px; }
#popupEmail{
width:100%; background:#0c1528; color:#e7ecf7;
border:1px solid var(--nl-border); border-radius:12px;
padding:12px 14px; outline:none;
transition:border .18s ease, box-shadow .18s ease;
}
#popupEmail:focus{ border-color: var(--nl-accent); box-shadow: 0 0 0 3px rgba(79,128,255,.25); }
.checkbox{ display:flex; align-items:flex-start; gap:10px; color:#b9c5d9; font-size:.9rem; }
.checkbox input{ width:18px; height:18px; margin-top:2px; }
.popup-btn{
width:100%; border:0; cursor:pointer;
padding:12px 16px; font-weight:700; border-radius:12px;
background: linear-gradient(180deg, var(--nl-accent), var(--nl-accent-2));
color:#fff; box-shadow: 0 10px 24px rgba(79,128,255,.35);
transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
}
.popup-btn:hover{ filter: brightness(1.05); box-shadow: 0 12px 28px rgba(79,128,255,.45); }
.popup-btn:active{ transform: translateY(1px); }
.popup-msg{ min-height:1.2em; margin:.6rem 0 0; font-size:.95rem; }
.popup-msg.ok{ color: var(--nl-green); }
.popup-msg.err{ color: var(--nl-red); }
.popup-trust{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0; color:#a7b7ce; font-size:.9rem; }
.popup-trust .trust-item{
padding:8px 10px; border-radius:999px; border:1px solid var(--nl-border); background:#0b1324;
}
.popup-quote{ margin:12px 0 0; color:#9fb0c7; font-size:.9rem;
border-left:3px solid rgba(79,128,255,.4); padding-left:10px; }
.popup-quote blockquote{ margin:0 0 2px; }
.popup-quote figcaption{ color:#7f8fa4; font-size:.85rem; }
body.popup-open { overflow: hidden; }
/* ============================
STATS / NUMBERS SECTION
============================ */
.stats-section {
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
position: relative;
overflow: hidden;
}
body.dark-mode .stats-section {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}
.stats-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(66, 153, 225, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.stats-section::after {
content: '';
position: absolute;
bottom: -50%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(229, 62, 62, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.stats-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}
.stat-card {
background: var(--bg-primary);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-light);
transition: var(--transition);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
body.dark-mode .stat-card {
background: var(--bg-tertiary);
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-red));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-heavy);
border-color: var(--accent-blue);
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: inline-block;
}
.stat-number {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 800;
color: var(--accent-blue);
line-height: 1;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--accent-blue), #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
color: var(--text-secondary);
font-size: 1rem;
font-weight: 500;
}
/* ============================
PROCESS / WORKFLOW SECTION
============================ */
.process-section {
padding: 7rem 2rem;
background: var(--bg-secondary);
position: relative;
}
.process-container {
max-width: 1200px;
margin: 0 auto;
}
.process-header {
text-align: center;
margin-bottom: 4rem;
}
.process-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 800;
}
.process-header p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.process-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
}
.process-timeline::before {
content: '';
position: absolute;
top: 40px;
left: 12%;
right: 12%;
height: 2px;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-red) 50%, var(--accent-blue) 100%);
z-index: 0;
opacity: 0.3;
}
.process-step {
position: relative;
text-align: center;
z-index: 1;
}
.process-step-number {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--bg-primary);
border: 3px solid var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
color: var(--accent-blue);
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(66, 153, 225, 0.2);
}
body.dark-mode .process-step-number {
background: var(--bg-tertiary);
}
.process-step:hover .process-step-number {
transform: scale(1.1) rotate(360deg);
background: var(--accent-blue);
color: white;
box-shadow: 0 10px 30px rgba(66, 153, 225, 0.4);
}
.process-step h3 {
font-size: 1.3rem;
color: var(--text-primary);
margin-bottom: 0.8rem;
font-weight: 700;
}
.process-step p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.7;
}
@media (max-width: 768px) {
.process-timeline {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.process-timeline::before {
display: none;
}
}
/* ============================
REGIONS / SERVICE AREAS
============================ */
.regions-section {
padding: 6rem 2rem;
background: var(--bg-primary);
text-align: center;
}
.regions-container {
max-width: 1200px;
margin: 0 auto;
}
.regions-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 800;
}
.regions-header p {
color: var(--text-secondary);
font-size: 1.15rem;
margin-bottom: 3rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.regions-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
margin-bottom: 3rem;
}
.region-tag {
padding: 0.7rem 1.4rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
color: var(--text-primary);
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: default;
}
body.dark-mode .region-tag {
background: var(--bg-tertiary);
}
.region-tag:hover {
background: var(--accent-blue);
color: white;
border-color: var(--accent-blue);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 20px rgba(66, 153, 225, 0.3);
}
.region-info {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, rgba(66, 153, 225, 0.1), rgba(102, 126, 234, 0.05));
border-radius: 60px;
color: var(--text-primary);
font-weight: 600;
border: 1px solid rgba(66, 153, 225, 0.2);
}
/* ============================
TARGET AUDIENCE SECTION
============================ */
.audience-section {
padding: 7rem 2rem;
background: var(--bg-secondary);
}
.audience-container {
max-width: 1400px;
margin: 0 auto;
}
.audience-header {
text-align: center;
margin-bottom: 4rem;
}
.audience-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 800;
}
.audience-header p {
color: var(--text-secondary);
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto;
}
.audience-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.audience-card {
background: var(--bg-primary);
padding: 2.5rem;
border-radius: 20px;
border: 1px solid var(--border-color);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
body.dark-mode .audience-card {
background: var(--bg-tertiary);
}
.audience-card:nth-child(1) { animation-delay: 0.1s; }
.audience-card:nth-child(2) { animation-delay: 0.2s; }
.audience-card:nth-child(3) { animation-delay: 0.3s; }
.audience-card:nth-child(4) { animation-delay: 0.4s; }
.audience-card:nth-child(5) { animation-delay: 0.5s; }
.audience-card:nth-child(6) { animation-delay: 0.6s; }
.audience-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(66, 153, 225, 0.05), transparent);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.audience-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-heavy);
border-color: var(--accent-blue);
}
.audience-card:hover::after {
opacity: 1;
}
.audience-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--accent-blue), #667eea);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 1.5rem;
transition: transform 0.4s ease;
}
.audience-card:hover .audience-icon {
transform: scale(1.1) rotate(-5deg);
}
.audience-card h3 {
font-size: 1.3rem;
color: var(--text-primary);
margin-bottom: 0.8rem;
font-weight: 700;
}
.audience-card p {
color: var(--text-secondary);
line-height: 1.7;
font-size: 0.95rem;
}
/* ============================
GUARANTEE / TRUST BOOSTER
============================ */
.guarantee-section {
padding: 5rem 2rem;
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
color: white;
position: relative;
overflow: hidden;
}
body.dark-mode .guarantee-section {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.guarantee-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(66, 153, 225, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(229, 62, 62, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.guarantee-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.guarantee-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
}
.guarantee-item {
text-align: center;
padding: 1.5rem;
}
.guarantee-item .icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
transition: all 0.3s ease;
}
.guarantee-item:hover .icon {
transform: scale(1.1);
background: var(--accent-blue);
border-color: var(--accent-blue);
box-shadow: 0 10px 30px rgba(66, 153, 225, 0.4);
}
.guarantee-item h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
.guarantee-item p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
line-height: 1.6;
}
/* ============================
ENHANCED SERVICE CARDS
============================ */
.service-card {
position: relative;
overflow: hidden;
}
.service-card::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, transparent 60%, rgba(66, 153, 225, 0.03) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.service-card:hover::after {
opacity: 1;
}
/* Smooth scroll improvements */
html { scroll-padding-top: 120px; }
/* Better animation timing */
@media (prefers-reduced-motion: no-preference) {
.service-card,
.pillar-card,
.stat-card,
.audience-card,
.process-step {
will-change: transform;
}
}
/* MOBILE OPTIMIZATIONS for new sections */
@media (max-width: 768px) {
.stats-section,
.process-section,
.regions-section,
.audience-section,
.guarantee-section {
padding: 4rem 1.25rem;
}
.stats-grid { gap: 1rem; }
.stat-card { padding: 2rem 1.5rem; }
.stat-number { font-size: 2.5rem; }
}
/* ============================
PREMIUM VISUAL ENHANCEMENTS
============================ */
/* Smoother global typography */
body {
font-feature-settings: "kern", "liga", "calt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* HERO: Enhanced gradient overlay */
.hero::before {
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.92) 0%,
rgba(30, 41, 59, 0.85) 50%,
rgba(15, 23, 42, 0.92) 100%);
}
/* HERO: Enhanced CTA Button with glow */
.cta-button {
background: linear-gradient(135deg, var(--accent-red), #C53030);
position: relative;
box-shadow:
0 10px 30px rgba(229, 62, 62, 0.4),
0 0 0 1px rgba(255,255,255,0.1) inset,
0 0 60px rgba(229, 62, 62, 0.3);
}
.cta-button:hover {
background: linear-gradient(135deg, #DC2626, #991B1B);
box-shadow:
0 15px 40px rgba(229, 62, 62, 0.5),
0 0 80px rgba(229, 62, 62, 0.4);
transform: translateY(-3px) scale(1.02);
}
/* SECTION HEADERS: Premium underline animation */
.section-header h2,
.process-header h2,
.regions-header h2,
.audience-header h2 {
position: relative;
display: inline-block;
}
.section-header h2::after,
.process-header h2::after,
.audience-header h2::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--accent-blue), #667eea);
border-radius: 2px;
margin: 1rem auto 0;
animation: expandBar 0.8s ease-out;
}
@keyframes expandBar {
from { width: 0; opacity: 0; }
to { width: 80px; opacity: 1; }
}
/* SERVICE CARDS: Premium glass effect */
.service-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(66, 153, 225, 0.08);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode .service-card {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border-color: rgba(66, 153, 225, 0.15);
}
.service-card:hover {
transform: translateY(-12px);
border-color: var(--accent-blue);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(66, 153, 225, 0.2),
0 0 80px rgba(66, 153, 225, 0.1);
}
/* SERVICE ICON: Better gradient with shimmer */
.service-icon {
background: linear-gradient(135deg, var(--accent-blue) 0%, #667eea 50%, #764ba2 100%);
background-size: 200% auto;
box-shadow:
0 10px 25px rgba(66, 153, 225, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.service-icon::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.service-card:hover .service-icon::before {
transform: translateX(100%);
}
/* STATS: Premium card glow */
.stat-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.1);
}
body.dark-mode .stat-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.stat-card::before {
height: 4px;
background: linear-gradient(90deg, var(--accent-blue) 0%, #667eea 50%, var(--accent-red) 100%);
}
.stat-card:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.1),
0 0 60px rgba(66, 153, 225, 0.15);
}
.stat-icon {
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
transition: transform 0.4s ease;
}
.stat-card:hover .stat-icon {
transform: scale(1.15) rotate(-5deg);
}
/* PROCESS TIMELINE: Premium step circles */
.process-step-number {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 3px solid transparent;
background-image:
linear-gradient(var(--bg-primary), var(--bg-primary)),
linear-gradient(135deg, var(--accent-blue), #667eea);
background-origin: border-box;
background-clip: padding-box, border-box;
position: relative;
}
body.dark-mode .process-step-number {
background-image:
linear-gradient(var(--bg-tertiary), var(--bg-tertiary)),
linear-gradient(135deg, var(--accent-blue), #667eea);
}
.process-step-number::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-blue), #667eea);
opacity: 0;
z-index: -1;
filter: blur(15px);
transition: opacity 0.4s ease;
}
.process-step:hover .process-step-number::before {
opacity: 0.4;
}
.process-step:hover .process-step-number {
background-image:
linear-gradient(135deg, var(--accent-blue), #667eea),
linear-gradient(135deg, var(--accent-blue), #667eea);
color: white;
transform: scale(1.1) rotate(360deg);
}
/* AUDIENCE CARDS: Stunning hover effect */
.audience-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.08);
}
body.dark-mode .audience-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.audience-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--accent-blue) 0%, #667eea 50%, var(--accent-red) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.audience-card:hover::before {
transform: scaleX(1);
}
.audience-icon {
background: linear-gradient(135deg, var(--accent-blue) 0%, #667eea 50%, #764ba2 100%);
box-shadow:
0 10px 25px rgba(66, 153, 225, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* REGIONS: Premium tags */
.region-tag {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
border: 1px solid rgba(66, 153, 225, 0.1);
position: relative;
overflow: hidden;
}
body.dark-mode .region-tag {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.region-tag::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--accent-blue) 0%, #667eea 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.region-tag:hover {
color: white;
border-color: transparent;
box-shadow:
0 10px 25px rgba(66, 153, 225, 0.3),
0 0 0 1px rgba(66, 153, 225, 0.5);
}
.region-tag:hover::before {
opacity: 1;
}
/* GUARANTEE: Premium glow */
.guarantee-item .icon {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.guarantee-item:hover .icon {
background: linear-gradient(135deg, var(--accent-blue) 0%, #667eea 100%);
border-color: transparent;
box-shadow:
0 15px 40px rgba(66, 153, 225, 0.5),
0 0 60px rgba(66, 153, 225, 0.3);
}
/* PILLAR CARDS: Premium look */
.pillar-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.08);
position: relative;
overflow: hidden;
}
body.dark-mode .pillar-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.pillar-card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(66, 153, 225, 0.05) 0%, transparent 60%);
transition: transform 0.6s ease;
pointer-events: none;
}
.pillar-card:hover::after {
transform: translateX(-30%) translateY(-30%);
}
.pillar-card:hover {
border-color: rgba(66, 153, 225, 0.2);
}
.pillar-icon {
display: inline-block;
filter: drop-shadow(0 5px 15px rgba(66, 153, 225, 0.3));
transition: transform 0.4s ease;
}
.pillar-card:hover .pillar-icon {
transform: scale(1.1) rotate(-5deg);
}
/* CONTACT FORM: Premium look */
.contact-form {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.1);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(66, 153, 225, 0.05);
}
body.dark-mode .contact-form {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}
/* FORM INPUTS: Premium focus */
.form-input:focus,
.form-textarea:focus {
border-color: var(--accent-blue);
box-shadow:
0 0 0 4px rgba(66, 153, 225, 0.15),
0 5px 20px rgba(66, 153, 225, 0.1);
transform: translateY(-1px);
}
/* REVIEWS: Premium cards */
.review-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.08);
}
body.dark-mode .review-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
/* SCROLL: Hidden scrollbar - clean modern look */
html {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
body {
scrollbar-width: none;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* Scroll progress indicator at top */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue) 0%, #667eea 50%, var(--accent-red) 100%);
z-index: 9999;
width: 0%;
transition: width 0.1s ease-out;
box-shadow: 0 0 10px rgba(66, 153, 225, 0.5);
}
/* SELECTION: Premium text selection */
::selection {
background: var(--accent-blue);
color: white;
}
::-moz-selection {
background: var(--accent-blue);
color: white;
}
/* IMAGES: Smooth fade-in */
img {
opacity: 0;
transition: opacity 0.5s ease;
}
img.loaded,
img[src*="/bilder/"]:not([loading="lazy"]) {
opacity: 1;
}
img[loading="lazy"] {
opacity: 1;
}
/* TRUST BADGES: Premium icons */
.trust-badge-icon {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
border: 2px solid rgba(66, 153, 225, 0.15);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.trust-badge:hover .trust-badge-icon {
transform: translateY(-8px) scale(1.05);
border-color: var(--accent-blue);
box-shadow:
0 20px 40px rgba(66, 153, 225, 0.2),
0 0 60px rgba(66, 153, 225, 0.15);
}
/* FAQ: Premium card */
#zmn-faq .faq-card {
background: linear-gradient(180deg, #1e3a8a 0%, #0E1A31 60%, #0A1323 100%);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(66, 153, 225, 0.1);
}
/* RIBBON: Enhanced look */
.ribbon {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ribbon-contact {
background: linear-gradient(135deg, #E53E3E 0%, #C53030 100%);
}
.ribbon-news {
background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%);
}
/* NAVIGATION: Premium look */
nav {
border-bottom: 1px solid rgba(66, 153, 225, 0.08);
}
body.dark-mode nav {
border-bottom-color: rgba(66, 153, 225, 0.15);
}
/* WHY-LINK: Enhanced */
.why-link {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-link:hover {
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.15),
0 0 30px rgba(66, 153, 225, 0.3);
}
/* FOOTER: Better gradient */
footer {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
}
/* SMOOTH FADE-IN for sections on scroll */
.fade-in-section {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.visible {
opacity: 1;
transform: translateY(0);
}
/* MOBILE: Better touch targets */
@media (max-width: 768px) {
.service-card,
.stat-card,
.audience-card,
.pillar-card {
transform: none !important;
}
.service-card:active,
.stat-card:active,
.audience-card:active {
transform: scale(0.98) !important;
transition: transform 0.2s ease;
}
}
/* PRINT styles */
@media print {
.emergency-banner,
nav,
.ribbon,
.cookie-banner,
.video-section,
footer {
display: none !important;
}
body {
background: white;
color: black;
}
}
/* ============================
FLOATING ACTION BUTTONS
============================ */
100% { transform: scale(1); }
}
}
/* Back to top button */
.back-to-top {
position: fixed;
right: 24px;
bottom: 170px;
z-index: 9997;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: white;
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--accent-blue);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(66, 153, 225, 0.4);
}
@media (max-width: 768px) {
.back-to-top {
right: 16px;
bottom: 150px;
width: 42px;
height: 42px;
font-size: 18px;
}
}
/* Ribbons remain visible on mobile (smaller) */
@media (max-width: 768px) {
.ribbons {
right: 0;
}
}
/* ============================
BENEFITS SECTION
============================ */
.benefits-section {
padding: 7rem 2rem;
background: var(--bg-primary);
position: relative;
overflow: hidden;
}
.benefits-section::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(66, 153, 225, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.benefits-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.benefits-header {
text-align: center;
margin-bottom: 4rem;
}
.benefits-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 800;
}
.benefits-header p {
font-size: 1.15rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.benefit-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.1);
border-radius: 20px;
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode .benefit-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
border-color: rgba(66, 153, 225, 0.2);
}
.benefit-card::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, var(--accent-blue), #667eea);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s ease;
}
.benefit-card:hover {
transform: translateY(-10px);
border-color: var(--accent-blue);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1), 0 0 60px rgba(66, 153, 225, 0.1);
}
.benefit-card:hover::after {
transform: scaleY(1);
}
.benefit-number {
position: absolute;
top: 1.5rem;
right: 2rem;
font-size: 4rem;
font-weight: 900;
color: var(--accent-blue);
opacity: 0.08;
line-height: 1;
transition: opacity 0.3s ease;
}
.benefit-card:hover .benefit-number {
opacity: 0.15;
}
.benefit-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
display: inline-block;
transition: transform 0.3s ease;
}
.benefit-card:hover .benefit-icon {
transform: scale(1.15) rotate(-5deg);
}
.benefit-card h3 {
font-size: 1.4rem;
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 700;
}
.benefit-card p {
color: var(--text-secondary);
line-height: 1.7;
}
/* ============================
INFO/FAQ SECTION
============================ */
.info-section {
padding: 7rem 2rem;
background: var(--bg-secondary);
}
.info-container {
max-width: 1300px;
margin: 0 auto;
}
.info-header {
text-align: center;
margin-bottom: 4rem;
}
.info-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 800;
}
.info-header p {
font-size: 1.15rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 1.5rem;
}
.info-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border-radius: 16px;
padding: 2rem;
border: 1px solid rgba(66, 153, 225, 0.08);
transition: all 0.4s ease;
}
body.dark-mode .info-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.info-card:hover {
transform: translateY(-5px);
border-color: var(--accent-blue);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.info-card-icon {
font-size: 2rem;
margin-bottom: 1rem;
width: 60px; height: 60px;
background: linear-gradient(135deg, rgba(66, 153, 225, 0.1), rgba(102, 126, 234, 0.05));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.info-card h3 {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 0.8rem;
font-weight: 700;
}
.info-card p {
color: var(--text-secondary);
line-height: 1.7;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.benefits-section, .info-section {
padding: 4rem 1.25rem;
}
.info-grid {
grid-template-columns: minmax(0, 1fr);
}
.benefit-card {
padding: 2rem 1.5rem;
}
.benefit-number {
top: 1rem;
right: 1.5rem;
font-size: 3rem;
}
}
/* ============================
PREMIUM CTA SECTION
============================ */
.cta-section {
padding: 6rem 2rem;
background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #0F172A 100%);
position: relative;
overflow: hidden;
color: white;
}
.cta-bg-pattern {
position: absolute;
inset: 0;
opacity: 0.1;
background-image:
radial-gradient(circle at 20% 30%, #4299E1 0%, transparent 40%),
radial-gradient(circle at 80% 70%, #E53E3E 0%, transparent 40%);
pointer-events: none;
}
.cta-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
text-align: center;
}
.cta-content h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.cta-content p {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 3rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.cta-buttons {
display: flex;
gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3.5rem;
}
.cta-btn-primary, .cta-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 2.5rem;
border-radius: 60px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-btn-primary {
background: linear-gradient(135deg, var(--accent-red), #C53030);
color: white;
box-shadow:
0 10px 30px rgba(229, 62, 62, 0.4),
0 0 0 1px rgba(255,255,255,0.1) inset;
}
.cta-btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 15px 40px rgba(229, 62, 62, 0.5),
0 0 80px rgba(229, 62, 62, 0.4);
}
.cta-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.4);
}
.cta-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
flex-wrap: wrap;
}
.cta-stat {
text-align: center;
}
.cta-stat strong {
display: block;
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--accent-blue), #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 0.3rem;
}
.cta-stat span {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cta-stat-divider {
width: 1px;
height: 50px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2), transparent);
}
@media (max-width: 768px) {
.cta-section { padding: 4rem 1.25rem; }
.cta-buttons {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.cta-btn-primary, .cta-btn-secondary {
justify-content: center;
padding: 1.1rem 2rem;
}
.cta-stats {
gap: 1.5rem;
}
.cta-stat-divider { display: none; }
.cta-stat strong { font-size: 2rem; }
}
/* ============================
HERO CTA GROUP
============================ */
.hero-cta-group {
display: flex;
gap: 1.25rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.hero-phone-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1.75rem;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 60px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
opacity: 0;
animation: slideInUp 1s ease-out 1.2s forwards;
}
.hero-phone-btn:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.4);
}
.hero-phone-icon {
font-size: 1.75rem;
animation: phoneRing 2s ease-in-out infinite;
}
@keyframes phoneRing {
0%, 100% { transform: rotate(0); }
10%, 30% { transform: rotate(-15deg); }
20%, 40% { transform: rotate(15deg); }
}
.hero-phone-text {
display: flex;
flex-direction: column;
text-align: left;
}
.hero-phone-text small {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.8;
margin-bottom: 2px;
}
.hero-phone-text strong {
font-size: 1.05rem;
font-weight: 700;
}
.hero-trust {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
opacity: 0;
animation: fadeIn 1s ease-out 1.5s forwards;
}
.hero-trust-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-weight: 500;
}
.hero-trust-icon {
font-size: 1.15rem;
}
@media (max-width: 768px) {
.hero-cta-group {
flex-direction: column;
gap: 1rem;
width: 100%;
}
.hero-phone-btn {
width: 100%;
justify-content: center;
}
.hero-trust {
gap: 1.25rem;
font-size: 0.85rem;
}
}
/* ============================
CONTACT CHANNELS SECTION
============================ */
.contact-channels-section {
padding: 6rem 2rem;
background: var(--bg-primary);
}
.contact-channels-container {
max-width: 1400px;
margin: 0 auto;
}
.contact-channels-header {
text-align: center;
margin-bottom: 4rem;
}
.contact-channels-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--text-primary);
margin-bottom: 1rem;
font-weight: 800;
}
.contact-channels-header p {
font-size: 1.15rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
.contact-channels-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.contact-channel-card {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
border: 1px solid rgba(66, 153, 225, 0.1);
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
text-decoration: none;
color: inherit;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: block;
}
body.dark-mode .contact-channel-card {
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}
.contact-channel-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: linear-gradient(90deg, var(--accent-blue), #667eea);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.contact-channel-card:hover {
transform: translateY(-10px);
border-color: var(--accent-blue);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.1),
0 0 60px rgba(66, 153, 225, 0.15);
}
.contact-channel-card:hover::before {
transform: scaleX(1);
}
.contact-channel-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(66, 153, 225, 0.1), rgba(102, 126, 234, 0.05));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.5rem;
transition: all 0.4s ease;
}
.contact-channel-card:hover .contact-channel-icon {
background: linear-gradient(135deg, var(--accent-blue), #667eea);
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 10px 30px rgba(66, 153, 225, 0.3);
}
.contact-channel-card h3 {
font-size: 1.3rem;
color: var(--text-primary);
margin-bottom: 0.8rem;
font-weight: 700;
}
.contact-channel-value {
color: var(--accent-blue);
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.6rem;
word-break: break-word;
}
.contact-channel-desc {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
@media (max-width: 768px) {
.contact-channels-section {
padding: 4rem 1.25rem;
}
.contact-channel-card {
padding: 2rem 1.5rem;
}
}
/* ============================
ORIGINAL NAVIGATION SCROLL BEHAVIOR
============================ */
/* Default: solid glassmorphism background with shadow */
nav {
transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
/* When scrolling - becomes transparent with strong blur */
/* Scrolling state - frosted glass effect like original */
nav.scrolling {
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}
body.dark-mode nav.scrolling {
background: rgba(15, 23, 42, 0.55) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}
/* When emergency banner closed */
nav.no-banner {
top: 0 !important;
}
/* ============================
FIX BLACK GAP BETWEEN NAV AND HERO
============================ */
.hero {
margin-top: 0 !important;
padding-top: 130px !important; /* Account for emergency banner + nav */
}
body:not(.has-emergency-banner) .hero,
nav.no-banner ~ section.hero,
nav.no-banner + .hero {
padding-top: 90px !important; /* Just nav when banner closed */
}
/* Hero should extend up to nav (no gap) */
.hero {
margin-top: -1px;  /* Subtle overlap to remove gap */
}
/* Make sure body has no extra top margin */
body { margin: 0 !important; padding: 0 !important; }
/* Hero background should fill area between top and content */
.hero::before {
top: -10px !important;
height: calc(100% + 20px) !important;
}
/* Remove any potential gap from hero img */
.hero img {
vertical-align: top;
}
/* ============================
CONTACT FORM - PREMIUM FOCUS COLORS
Wie im Original mit blauen Akzenten beim Ausfüllen
============================ */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input.flatpickr-input,
.contact-form textarea,
.contact-form select,
.form-input, .form-textarea {
border: 2px solid #E2E8F0 !important;
background: #FFFFFF !important;
color: #2D3748 !important;
transition: all 0.3s ease !important;
}
.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.contact-form input[type="date"]:hover,
.contact-form textarea:hover,
.form-input:hover, .form-textarea:hover {
border-color: #CBD5E0 !important;
background: #F7FAFC !important;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="date"]:focus,
.contact-form input.flatpickr-input:focus,
.contact-form textarea:focus,
.form-input:focus, .form-textarea:focus {
border-color: #4299E1 !important;
background: #FFFFFF !important;
box-shadow:
0 0 0 4px rgba(66, 153, 225, 0.15),
0 5px 20px rgba(66, 153, 225, 0.1) !important;
outline: none !important;
transform: translateY(-1px) !important;
}
/* Beim Tippen wird das Feld leicht blau hinterlegt für besseres Feedback */
.contact-form input[type="text"]:focus:not(:placeholder-shown),
.contact-form input[type="email"]:focus:not(:placeholder-shown),
.contact-form textarea:focus:not(:placeholder-shown),
.form-input:focus:not(:placeholder-shown),
.form-textarea:focus:not(:placeholder-shown) {
background: #F0F8FF !important;
}
/* Valid state - grünlicher Tint */
.contact-form input:valid:not(:placeholder-shown):not(:focus),
.form-input:valid:not(:placeholder-shown):not(:focus) {
border-color: #38A169 !important;
background: #F0FFF4 !important;
}
/* Invalid state - rötlicher Tint */
.contact-form input:invalid:not(:placeholder-shown):not(:focus),
.form-input:invalid:not(:placeholder-shown):not(:focus) {
border-color: #E53E3E !important;
background: #FFF5F5 !important;
}
/* DARK MODE Adjustments */
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .form-input, body.dark-mode .form-textarea {
background: #2D3748 !important;
color: #F7FAFC !important;
border-color: #4A5568 !important;
}
body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus,
body.dark-mode .form-input:focus, body.dark-mode .form-textarea:focus {
background: #1A202C !important;
border-color: #4299E1 !important;
}
body.dark-mode .contact-form input:focus:not(:placeholder-shown),
body.dark-mode .form-input:focus:not(:placeholder-shown) {
background: #1E3A5F !important;
}
/* Service options when selected */
.service-option.active,
.service-option[aria-pressed="true"] {
border-color: #4299E1 !important;
background: linear-gradient(135deg, rgba(66, 153, 225, 0.1), rgba(102, 126, 234, 0.05)) !important;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15) !important;
transform: translateY(-2px);
}
/* Flatpickr Calendar - Custom styling */
.flatpickr-calendar {
border-radius: 12px !important;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
background: #F7FAFC !important;
color: #A0AEC0 !important;
text-decoration: line-through !important;
cursor: not-allowed !important;
opacity: 0.4 !important;
}
.flatpickr-day.disabled[aria-label*="booked"]::after,
.flatpickr-day[data-booked="true"]::after {
content: '🔒';
position: absolute;
top: 2px;
right: 2px;
font-size: 8px;
}
/* ============================
LOGO DARK MODE - CSS Fallback
Falls JS noch nicht geladen ist
============================ */
.zmn-logo {
transition: filter 0.3s ease, opacity 0.3s ease;
}
/* Smooth logo transition */
img.zmn-logo {
will-change: filter;
}
/* Anti-Flash: html.dark-mode-init aktiviert sofort Dark-Mode-Styles auf body */
html.dark-mode-init body { background: #0F172A; color: #E2E8F0; }
/* ============================================
PREMIUM KONTAKTFORMULAR — Light & Dark Mode
Kompakter, moderner, passend zur Seite
============================================ */
.contact-form {
padding: 2.75rem 2.5rem !important;
border-radius: 24px !important;
position: relative;
overflow: hidden;
border: 1px solid rgba(66,153,225,0.12) !important;
background:
radial-gradient(120% 120% at 0% 0%, rgba(66,153,225,0.06) 0%, transparent 45%),
radial-gradient(120% 120% at 100% 100%, rgba(229,73,69,0.05) 0%, transparent 45%),
var(--bg-primary) !important;
box-shadow:
0 20px 60px -20px rgba(15,23,42,0.18),
0 1px 0 rgba(255,255,255,0.6) inset !important;
}
body.dark-mode .contact-form {
border: 1px solid rgba(255,255,255,0.08) !important;
background:
radial-gradient(120% 120% at 0% 0%, rgba(66,153,225,0.10) 0%, transparent 45%),
radial-gradient(120% 120% at 100% 100%, rgba(229,73,69,0.08) 0%, transparent 45%),
var(--bg-secondary) !important;
box-shadow:
0 24px 70px -24px rgba(0,0,0,0.6),
0 1px 0 rgba(255,255,255,0.05) inset !important;
}
/* dekorativer Top-Streifen */
.contact-form::before {
content: '';
position: absolute; inset: 0 0 auto 0; height: 4px;
background: linear-gradient(90deg, var(--accent-blue), #667eea 50%, var(--accent-red));
opacity: 0.9;
}
/* Eingabefelder kompakter & edler */
.contact-form .form-input,
.contact-form .form-textarea {
padding: 0.95rem 1.1rem !important;
border-radius: 14px !important;
border: 1.5px solid rgba(15,23,42,0.10) !important;
background: rgba(255,255,255,0.7) !important;
font-size: 0.97rem !important;
backdrop-filter: blur(4px);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
body.dark-mode .contact-form .form-input,
body.dark-mode .contact-form .form-textarea {
background: rgba(255,255,255,0.04) !important;
border: 1.5px solid rgba(255,255,255,0.10) !important;
color: #E2E8F0 !important;
}
.contact-form .form-input:hover,
.contact-form .form-textarea:hover {
border-color: rgba(66,153,225,0.5) !important;
}
.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
outline: none !important;
border-color: var(--accent-blue) !important;
background: #fff !important;
box-shadow: 0 0 0 4px rgba(66,153,225,0.14) !important;
}
body.dark-mode .contact-form .form-input:focus,
body.dark-mode .contact-form .form-textarea:focus {
background: rgba(255,255,255,0.06) !important;
box-shadow: 0 0 0 4px rgba(66,153,225,0.22) !important;
}
/* gültige / ungültige Felder dezent markieren */
.contact-form .form-input:valid:not(:placeholder-shown) {
border-color: rgba(56,161,105,0.55) !important;
}
.contact-form .form-input:invalid:not(:placeholder-shown):not(:focus) {
border-color: rgba(229,73,69,0.5) !important;
}
/* Labels kompakter */
.contact-form .form-group { margin-bottom: 1.4rem !important; }
.contact-form .form-group label {
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
margin-bottom: 0.5rem !important;
color: var(--text-secondary) !important;
}
/* Service-Auswahl-Karten kompakter & cooler */
.contact-form .service-option,
.service-selection .service-option {
padding: 1.25rem 1.1rem !important;
border-radius: 16px !important;
border: 1.5px solid rgba(15,23,42,0.10) !important;
background: rgba(255,255,255,0.6) !important;
transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
body.dark-mode .contact-form .service-option,
body.dark-mode .service-selection .service-option {
background: rgba(255,255,255,0.04) !important;
border: 1.5px solid rgba(255,255,255,0.10) !important;
}
.service-option:hover {
transform: translateY(-3px) !important;
border-color: var(--accent-blue) !important;
box-shadow: 0 12px 28px -12px rgba(66,153,225,0.45) !important;
}
.service-option.selected,
.service-option[aria-pressed="true"],
.service-option.active {
border-color: var(--accent-blue) !important;
background: linear-gradient(135deg, rgba(66,153,225,0.12), rgba(102,126,234,0.06)) !important;
box-shadow: 0 0 0 3px rgba(66,153,225,0.16) !important;
}
/* Submit-Button im Formular */
.contact-form button[type="submit"],
.contact-form .submit-btn {
border-radius: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
padding: 1rem 1.6rem !important;
background: linear-gradient(135deg, var(--accent-red), #C53030) !important;
box-shadow: 0 14px 30px -12px rgba(229,73,69,0.6) !important;
transition: transform .15s ease, box-shadow .2s ease !important;
}
.contact-form button[type="submit"]:hover,
.contact-form .submit-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 18px 38px -12px rgba(229,73,69,0.7) !important;
}
/* etwas kompakter auf großen Screens, voller Breite mobil */
@media (min-width: 992px) {
.contact-form { max-width: 880px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
.contact-form { padding: 1.75rem 1.25rem !important; border-radius: 20px !important; }
.contact-form .form-input,
.contact-form .form-textarea { padding: 0.85rem 1rem !important; }
}


/* =====================================================================
   ZMN NEXT – Design-Layer (Blueprint-Tech)
   Liegt über dem bestehenden CSS, ersetzt nichts Wesentliches –
   bei Bedarf kann dieser Block einfach entfernt werden.
   ===================================================================== */
:root {
  --z-blue: #4299E1;
  --z-indigo: #667EEA;
  --z-cyan: #63D3FF;
  --z-red: #E53E3E;
  --z-ink: #0A0F1C;
  --z-line: rgba(148, 178, 255, .12);
  --z-line-2: rgba(148, 178, 255, .22);
  --z-grad: linear-gradient(135deg, #63D3FF 0%, #4299E1 45%, #667EEA 100%);
  --z-ease: cubic-bezier(.2, .8, .2, 1);
  --z-ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-radius: 22px;
  --z-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Barrierefreiheit ---------- */
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 100000;
  background: #fff; color: #0B1220; padding: .7rem 1.1rem; border-radius: 10px;
  font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: top .2s var(--z-ease);
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--z-cyan); outline-offset: 3px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.hero p strong { font-weight: 700; color: #fff; }

/* Buttons, die früher <span>/<div> waren */
.emergency-close { background: none; border: 0; color: inherit; line-height: 1; padding: .2rem .45rem; border-radius: 8px; }
.emergency-close:hover { background: rgba(255, 255, 255, .15); }
button.mobile-menu-toggle { background: none; border: 0; }
button.close-modal { background: none; border: 0; line-height: 1; width: 44px; height: 44px; border-radius: 50%; top: 1.25rem; right: 1.25rem; }
button.close-modal:hover { background: rgba(229, 62, 62, .1); }

/* ---------- Seitenhintergrund (Dark): Blueprint-Raster + Lichtakzente ---------- */
html.dark-mode-init body, body.dark-mode { background-color: var(--z-ink); }
body.dark-mode::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(66, 153, 225, .16), transparent 62%),
    radial-gradient(900px 560px at -12% 38%, rgba(102, 126, 234, .11), transparent 60%),
    radial-gradient(800px 500px at 110% 85%, rgba(99, 211, 255, .07), transparent 60%),
    linear-gradient(rgba(148, 178, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(148, 178, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--z-ink);
}
body.dark-mode :is(.services, .benefits-section, .process-section, .audience-section, .references, .trust-section, .why-zmn, .info-section, .reviews, .regions-section, .about, .contact-channels-section, .contact, .pc-section) {
  background: transparent;
}
body.dark-mode #zmn-faq-section { background: transparent !important; }
body.dark-mode :is(.process-section, .references, .why-zmn, .info-section, .reviews, .contact) {
  background: linear-gradient(180deg, rgba(30, 41, 59, .38), rgba(15, 23, 42, .12));
}
body.dark-mode :is(.services, .benefits-section, .process-section, .audience-section, .references, .why-zmn, #zmn-faq-section, .info-section, .reviews, .regions-section, .about, .contact-channels-section, .pc-section, .contact) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(99, 179, 237, .28), transparent) 1;
}
body.dark-mode .stats-section { background: linear-gradient(180deg, rgba(15, 23, 42, .2), rgba(30, 41, 59, .35)); }

/* Light-Mode: dezentes Raster auf alternierenden Bereichen */
body:not(.dark-mode) :is(.process-section, .references, .why-zmn, .info-section, .reviews, .contact) {
  background-image:
    linear-gradient(rgba(66, 153, 225, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 153, 225, .05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- Typografie ---------- */
:is(.section-header, .benefits-header, .process-header, .audience-header, .info-header, .regions-header, .contact-channels-header, .reviews-header, .pc-header) h2,
.references > h2, .about-container > h2, .contact-container > h2, .zemin-container > h2, .cta-content h2 {
  letter-spacing: -.035em; line-height: 1.06; font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  text-wrap: balance;
}
body.dark-mode :is(.section-header, .benefits-header, .process-header, .audience-header, .info-header, .regions-header, .contact-channels-header, .reviews-header, .pc-header) h2,
body.dark-mode :is(.references > h2, .about-container > h2, .contact-container > h2, .zemin-container > h2) {
  background: linear-gradient(180deg, #FFFFFF 35%, #A9BEDD 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
p { text-wrap: pretty; }
.z-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  font: 600 .74rem/1 var(--z-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--z-blue); margin: 0 auto 1.1rem; width: fit-content;
}
.z-eyebrow::before, .z-eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
body.dark-mode .z-eyebrow { color: var(--z-cyan); }
.faq-hero .z-eyebrow { color: #93C5FD; }

/* ---------- Navigation ---------- */
.nav-center a.is-active { color: var(--z-blue); }
.nav-center a.is-active::before { width: 100%; }
body.dark-mode .nav-center a.is-active { color: var(--z-cyan); }
nav.scrolling .nav-container { transition: padding .35s var(--z-ease); }
@media (min-width: 1025px) {
  nav.scrolling .nav-container { padding-top: .55rem; padding-bottom: .55rem; }
}
body.menu-open { overflow: hidden; }

/* ---------- HERO ---------- */
.hero { isolation: isolate; }
.hero-3d {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  mix-blend-mode: screen; pointer-events: none;
  opacity: 0; animation: zFadeIn 1.4s .2s var(--z-ease) forwards;
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(rgba(99, 179, 237, .07) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(99, 179, 237, .07) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 30%, transparent 80%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--z-ink));
}
body:not(.dark-mode) .hero::after { background: linear-gradient(180deg, transparent, rgba(10, 15, 28, .55)); }
.hero-bg img { transform: scale(calc(1.06 + var(--hp, 0) * .08)) translate3d(calc(var(--mx, 0) * -14px), calc(var(--hp, 0) * 90px + var(--my, 0) * -10px), 0); transition: transform .2s linear; }
.hero-content {
  z-index: 4;
  transform: translate3d(0, calc(var(--hp, 0) * -70px), 0);
  opacity: calc(1 - var(--hp, 0) * 1.25);
  will-change: transform, opacity;
}
.hero h1 .highlight {
  background: linear-gradient(100deg, #63D3FF 0%, #4299E1 40%, #A5B4FC 60%, #63D3FF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: slideInUp .8s ease-out .6s forwards, zShimmer 6s linear 2.4s infinite;
}
.hero h1.zmn-anim-done .highlight { animation: zShimmer 6s linear infinite !important; opacity: 1 !important; }
.hero h1 .highlight::after { background: var(--z-grad); height: 4px; border-radius: 4px; box-shadow: 0 0 18px rgba(99, 211, 255, .6); }
.hero-check-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1.15rem 1.8rem; border-radius: 60px; text-decoration: none; font-weight: 700;
  color: #E6F4FF; border: 1px solid rgba(99, 211, 255, .45);
  background: linear-gradient(135deg, rgba(99, 211, 255, .14), rgba(102, 126, 234, .14));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 30px rgba(66, 153, 225, .18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; animation: slideInUp 1s ease-out 1.1s forwards;
  transition: background .3s, border-color .3s, box-shadow .3s, translate .25s var(--z-ease);
}
.hero-check-btn:hover { border-color: rgba(99, 211, 255, .9); box-shadow: 0 0 0 4px rgba(99, 211, 255, .12), 0 14px 36px rgba(66, 153, 225, .3); }
.hero-status { margin-top: 1.4rem; opacity: 0; animation: fadeIn 1s ease-out 1.8s forwards; }
.magnet { transition: translate .25s var(--z-ease), transform .3s var(--z-ease), box-shadow .3s; }

/* CTA-Glanz */
.cta-button, .cta-btn-primary, .btn-primary {
  background-image: linear-gradient(110deg, #E53E3E 0%, #F56565 42%, #FF9A9A 50%, #F56565 58%, #E53E3E 100%) !important;
  background-size: 260% 100% !important;
  animation-name: slideInUp, zShine; animation-duration: 1s, 5s; animation-delay: 1s, 2.5s;
  animation-timing-function: ease-out, linear; animation-iteration-count: 1, infinite; animation-fill-mode: forwards, none;
}
.cta-btn-primary, .btn-primary { animation: zShine 5s linear 1s infinite; }
.btn-primary:disabled { animation: none; filter: grayscale(.4); opacity: .6; }

/* HUD */
.hero-hud { display: none; }
@media (min-width: 1100px) {
  .hero-hud {
    display: block; position: absolute; right: clamp(1.5rem, 3vw, 3.5rem); bottom: clamp(5.5rem, 12vh, 8rem); z-index: 4;
    width: 290px; padding: 1rem 1.1rem 1.1rem; border-radius: 16px;
    font: 500 .72rem/1.4 var(--z-mono); color: #BFD6F6; letter-spacing: .04em;
    background: linear-gradient(180deg, rgba(11, 18, 32, .72), rgba(11, 18, 32, .5));
    border: 1px solid rgba(99, 179, 237, .25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0; animation: zFadeUp 1s 1.2s var(--z-ease-out) forwards;
    transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px + var(--hp, 0) * -40px), 0);
  }
  .hud-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff; margin-bottom: .7rem; letter-spacing: .14em; }
  .hud-id { margin-left: auto; color: #7DA2D6; font-weight: 500; letter-spacing: .06em; }
  .hud-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: zPing 1.8s infinite; }
  .hud-row { display: flex; justify-content: space-between; padding: .28rem 0; border-bottom: 1px dashed rgba(99, 179, 237, .16); }
  .hud-row b { color: #fff; font-weight: 600; }
  .hud-bar { height: 4px; margin: .75rem 0 .7rem; border-radius: 4px; background: rgba(99, 179, 237, .15); overflow: hidden; }
  .hud-bar i { display: block; height: 100%; background: var(--z-grad); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgba(99, 211, 255, .8); }
  .hud-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: 0; padding: 0; }
  .hud-steps li { text-align: center; padding: .35rem .1rem; border-radius: 6px; border: 1px solid rgba(99, 179, 237, .15); color: #6F8DB8; font-size: .62rem; transition: all .3s; }
  .hud-steps li.done { color: #D6E9FF; border-color: rgba(99, 211, 255, .45); background: rgba(99, 211, 255, .08); }
  .hud-steps li.now { color: #0B1220; background: #63D3FF; border-color: #63D3FF; }
  .hud-replay { margin-top: .75rem; width: 100%; padding: .45rem; border-radius: 8px; border: 1px solid rgba(99, 179, 237, .3); background: transparent; color: #9CC3F5; font: inherit; cursor: pointer; opacity: 0; transition: opacity .4s, background .2s; }
  .hero.build-done .hud-replay { opacity: 1; }
  .hud-replay:hover { background: rgba(99, 211, 255, .12); color: #fff; }
}
.hero-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-label {
  position: absolute; left: 0; top: 0; translate: -50% -150%;
  font: 600 .7rem/1 var(--z-mono); letter-spacing: .08em; color: #E6F4FF; white-space: nowrap;
  padding: .3rem .5rem; border-radius: 6px; background: rgba(11, 18, 32, .72); border: 1px solid rgba(99, 211, 255, .35);
  opacity: 0; transition: opacity .6s;
}
.hero-label.lbl-key { color: #0B1220; background: #63D3FF; border-color: #63D3FF; translate: -20% 60%; box-shadow: 0 0 20px rgba(99, 211, 255, .5); }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 4; translate: -50% 0;
  width: 26px; height: 42px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .45);
  opacity: calc(.9 - var(--hp, 0) * 3);
}
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: zScrollCue 1.8s infinite; }

@media (min-width: 1100px) {
  .hero { justify-content: flex-start; }
  .hero-content { text-align: left; margin: 0; max-width: 900px; padding-left: clamp(2rem, 6vw, 7.5rem); padding-right: 1rem; }
  .hero h1 { font-size: clamp(3.2rem, 4.8vw, 5.4rem); letter-spacing: -.045em; margin-bottom: 1.6rem; line-height: 1.02; }
  .hero-3d { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.35) 30%, #000 52%); mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.35) 30%, #000 52%); }
  .hero h1 span { display: block; width: fit-content; }
  .hero p { font-size: 1.1rem; max-width: 640px; margin-bottom: 1.15rem; line-height: 1.7; }
  .hero p + p { font-size: 1rem; color: rgba(226, 236, 250, .78); }
  .hero-cta-group, .hero-trust { justify-content: flex-start; }
  .hero-cta-group { margin-top: 2rem; gap: .9rem; }
  .hero .cta-button { padding: 1.1rem 2.3rem; font-size: 1.02rem; }
  .hero-check-btn { padding: 1.05rem 1.5rem; }
  .hero-phone-btn { padding: .75rem 1.4rem; }
}
@media (max-width: 1099px) {
  .hero-3d { opacity: 0; animation: zFadeInSoft 1.4s .2s var(--z-ease) forwards; }
  .hero-labels { display: none; }
  .hero-status { display: flex; justify-content: center; }
}
@media (max-width: 768px) {
  .hero-check-btn { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }
}

/* ---------- Live-Status ---------- */
.open-status { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 600; color: #FCD34D; }
.open-status:empty { display: none; }
.open-status.is-open { color: #6EE7B7; }
.os-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: zPing 2s infinite; }
.hero-status { padding: .5rem .9rem; border-radius: 999px; background: rgba(11, 18, 32, .55); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.contact-channel-card .open-status { margin-top: .6rem; font-size: .8rem; }
body:not(.dark-mode) .contact-channel-card .open-status { color: #B45309; }
body:not(.dark-mode) .contact-channel-card .open-status.is-open { color: #047857; }

/* ---------- Laufband ---------- */
.zmn-marquee {
  position: relative; overflow: hidden; padding: clamp(1.6rem, 4vw, 3rem) 0; user-select: none;
  border-block: 1px solid var(--z-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.zmn-marquee { perspective: 900px; }
.zm-row { transform: rotateX(16deg) skewX(var(--skew, 0deg)); transform-origin: 50% 50%; transition: transform .5s var(--z-ease); }
.zm-row + .zm-row { margin-top: .4rem; }
.zm-track { display: flex; width: max-content; animation: zMarquee 42s linear infinite; }
.zm-row.rev .zm-track { animation-direction: reverse; animation-duration: 48s; }
.zm-seq { display: flex; align-items: center; flex-shrink: 0; }
.zm-item {
  font-size: clamp(2rem, 5.2vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.15;
  padding: 0 .35em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.2px rgba(66, 153, 225, .55);
}
.zm-item.fill { color: var(--text-primary); -webkit-text-stroke: 0; }
body.dark-mode .zm-item { -webkit-text-stroke-color: rgba(148, 190, 255, .38); }
body.dark-mode .zm-item.fill { background: linear-gradient(180deg, #fff, #9DB6DA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zm-sep { color: var(--z-red); font-size: clamp(1rem, 2.4vw, 2rem); padding: 0 .3em; }
.zmn-marquee:hover .zm-track { animation-play-state: paused; }

/* ---------- Karten: Glas, Verlaufsrahmen, Lichtkegel, 3D-Tilt ---------- */
body.dark-mode :is(.benefit-card, .service-card, .audience-card, .info-card, .pillar-card, .stat-card, .contact-channel-card, .review-card) {
  background: linear-gradient(180deg, rgba(30, 41, 59, .86), rgba(15, 23, 42, .82)) !important;
  border: 1px solid rgba(148, 178, 255, .13) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -24px rgba(0, 0, 0, .7) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.dark-mode .service-card.notdienst {
  background: linear-gradient(120deg, rgba(229, 62, 62, .16), rgba(30, 41, 59, .7) 45%) !important;
  border-color: rgba(229, 62, 62, .35) !important; border-left: 6px solid #E53E3E !important;
}
:is(.benefit-card, .service-card, .audience-card, .info-card, .pillar-card, .stat-card, .contact-channel-card, .guarantee-item).tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s var(--z-ease), border-color .35s, box-shadow .35s, opacity .9s var(--z-ease-out), translate .9s var(--z-ease-out), scale .9s var(--z-ease-out), rotate .9s var(--z-ease-out), filter .9s;
}
.tilt.is-tilting { transition: transform .12s linear, border-color .35s, box-shadow .35s; }
.tilt:hover { border-color: rgba(99, 179, 237, .5) !important; box-shadow: 0 30px 70px -30px rgba(66, 153, 225, .55), 0 0 0 1px rgba(99, 179, 237, .2) !important; }
.tilt { position: relative; }
.spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 211, 255, .13), transparent 45%);
  mix-blend-mode: screen; transition: opacity .35s;
}
.tilt:hover > .spot { opacity: 1; }
body:not(.dark-mode) .spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(66, 153, 225, .12), transparent 45%); }
.service-card.tilt:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }

/* Raster-Korrekturen: 6 Karten = 3 + 3 statt 4 + 2 */
@media (min-width: 1025px) {
  .benefits-grid, .audience-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  .benefits-grid, .audience-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1180px) and (min-width: 769px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Ablauf: Linie füllt sich beim Scrollen ---------- */
.process-timeline::after {
  content: ""; position: absolute; top: 40px; left: 12%; right: 12%; height: 2px; z-index: 0;
  background: var(--z-grad); transform-origin: left; transform: scaleX(var(--fill, 0));
  box-shadow: 0 0 14px rgba(99, 211, 255, .7);
}
@media (max-width: 768px) {
  .process-timeline::after { top: 0; bottom: 0; left: 40px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--fill, 0)); }
  .process-step { text-align: left; padding-left: 96px; min-height: 80px; }
  .process-step .process-step-number { position: absolute; left: 0; top: 0; margin: 0 !important; }
}
.process-step .process-step-number { transition: background .5s, color .5s, box-shadow .5s, transform .5s var(--z-ease); }
.process-step.lit .process-step-number {
  background: var(--z-grad) !important; color: #fff !important;
  box-shadow: 0 0 0 6px rgba(99, 211, 255, .12), 0 0 30px rgba(99, 211, 255, .5) !important;
  transform: scale(1.06);
}

/* ---------- Zahlen ---------- */
.stat-number { font-variant-numeric: tabular-nums; }
body.dark-mode .stat-number { background: var(--z-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ---------- Video: wächst beim Scrollen auf volle Breite ---------- */
.video-section { overflow: hidden; }
.video-section video {
  clip-path: inset(calc((1 - min(1, var(--p, 1) * 2.1)) * 9%) calc((1 - min(1, var(--p, 1) * 2.1)) * 14%) round calc((1 - min(1, var(--p, 1) * 2.1)) * 32px));
  transform: scale(calc(1.08 - min(1, var(--p, 1) * 2.1) * .08));
}

/* ---------- Referenzen: 3D-Coverflow ---------- */
.references-wrapper { transform-style: preserve-3d; }
.references-slider { perspective: 1400px; }
.reference-slide { transition: opacity .6s; }
.reference-slide img { cursor: zoom-in; transition: transform .8s var(--z-ease-out), box-shadow .5s, filter .6s; }
.reference-slide[data-pos="left"] img { transform: perspective(1200px) rotateY(16deg) scale(.9); filter: brightness(.8); }
.reference-slide[data-pos="right"] img { transform: perspective(1200px) rotateY(-16deg) scale(.9); filter: brightness(.8); }
.reference-slide[data-pos="center"] img { transform: scale(1.02); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(99, 179, 237, .25); }
.reference-slide[data-pos="left"]:hover img, .reference-slide[data-pos="right"]:hover img { filter: brightness(1); }
.slider-arrow { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .2) !important; }
.ref-count { text-align: center; margin-top: 1.2rem; font: 600 .8rem/1 var(--z-mono); letter-spacing: .12em; color: var(--text-secondary); }

/* Lightbox */
.zmn-lightbox {
  position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center;
  background: rgba(5, 8, 16, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.zmn-lightbox.open { opacity: 1; pointer-events: auto; }
.zmn-lightbox figure { margin: 0; max-width: min(92vw, 1100px); max-height: 86vh; display: grid; place-items: center; overflow: hidden; border-radius: 14px; touch-action: pan-y; }
.zmn-lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 14px; transition: transform .35s var(--z-ease), opacity .25s; user-select: none; -webkit-user-drag: none; }
.zmn-lightbox img.zoom { transform: scale(1.8); cursor: zoom-out; }
.zmn-lightbox button { position: absolute; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.zmn-lightbox button:hover { background: rgba(255, 255, 255, .2); }
.zmn-lightbox .lb-close { top: 18px; right: 18px; }
.zmn-lightbox .lb-prev { left: 18px; top: 50%; translate: 0 -50%; }
.zmn-lightbox .lb-next { right: 18px; top: 50%; translate: 0 -50%; }
.zmn-lightbox .lb-count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; color: #CBD5E1; font: 600 .85rem/1 var(--z-mono); letter-spacing: .15em; }
@media (max-width: 640px) { .zmn-lightbox .lb-prev, .zmn-lightbox .lb-next { top: auto; bottom: 14px; translate: 0; } }

/* ---------- Einsatzgebiet: Karte + Orts-Check ---------- */
.regions-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: 2.5rem; }
.regions-layout .regions-grid { justify-content: flex-start; }
.region-map-wrap { position: relative; border-radius: var(--z-radius); overflow: hidden; border: 1px solid var(--z-line-2); background: radial-gradient(120% 120% at 30% 20%, rgba(66, 153, 225, .1), transparent 60%), #0B1220; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.region-map { aspect-ratio: 150 / 112; width: 100%; }
.region-map svg { display: block; width: 100%; height: 100%; }
.region-map .rm-grid line { stroke: rgba(99, 179, 237, .09); stroke-width: .25; }
.region-map .rm-ring { fill: none; stroke: rgba(99, 211, 255, .35); stroke-width: .35; stroke-dasharray: 1.4 1.4; }
.region-map .rm-ring.outer { stroke: rgba(99, 211, 255, .6); stroke-dasharray: none; fill: rgba(66, 153, 225, .07); }
.region-map .rm-ring.hann { stroke: rgba(165, 180, 252, .4); fill: rgba(102, 126, 234, .05); }
.region-map .rm-ringlbl { fill: rgba(147, 197, 253, .7); font: 600 2.3px var(--z-mono); letter-spacing: .1px; }
.region-map .rm-link { stroke: rgba(99, 211, 255, .45); stroke-width: .3; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; }
.region-map.in .rm-link { animation: zDraw 1.4s var(--z-ease-out) forwards; animation-delay: calc(var(--d, 0) * 45ms + .3s); }
.region-map .rm-city circle { fill: #93C5FD; transition: r .25s, fill .25s; }
.region-map .rm-city text { fill: #CFE3FF; font: 600 2.6px system-ui, sans-serif; opacity: 0; transition: opacity .25s; paint-order: stroke; stroke: #0B1220; stroke-width: .8px; }
.region-map .rm-city.major text, .region-map .rm-city.hot text { opacity: 1; }
.region-map .rm-city.hot circle { fill: #63D3FF; r: 1.8; }
.region-map .rm-city { cursor: pointer; }
.region-map .rm-hq circle.core { fill: #E53E3E; }
.region-map .rm-hq circle.pulse { fill: none; stroke: #E53E3E; stroke-width: .5; transform-box: fill-box; transform-origin: center; animation: zPulseRing 2.2s infinite; }
.region-map .rm-hq text { fill: #fff; font: 800 3px system-ui, sans-serif; paint-order: stroke; stroke: #0B1220; stroke-width: .9px; }
.region-map .rm-sweep { transform-origin: var(--cx) var(--cy); animation: zSpin 8s linear infinite; }
.map-legend { display: flex; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; font: 600 .72rem/1 var(--z-mono); color: #9FB9DC; border-top: 1px solid var(--z-line); letter-spacing: .06em; }
.map-legend .lg::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; vertical-align: -1px; }
.lg-hq::before { background: #E53E3E; } .lg-city::before { background: #93C5FD; } .lg-ring::before { border: 1px dashed #63D3FF; }
.region-tag { cursor: pointer; }
.region-tag.hot { background: var(--z-blue) !important; color: #fff !important; border-color: var(--z-blue) !important; transform: translateY(-2px); }
.region-check { margin-bottom: 1.5rem; padding: 1.25rem; border-radius: 18px; border: 1px solid var(--z-line-2); background: var(--bg-secondary); }
body.dark-mode .region-check { background: rgba(30, 41, 59, .6); }
.region-check label { display: block; font-weight: 700; margin-bottom: .7rem; color: var(--text-primary); }
.rc-row { display: flex; gap: .6rem; }
.rc-row input { flex: 1; min-width: 0; padding: .85rem 1rem; border-radius: 12px; border: 2px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; }
.rc-row input:focus { outline: none; border-color: var(--z-blue); box-shadow: 0 0 0 4px rgba(66, 153, 225, .15); }
.rc-row button { padding: .85rem 1.3rem; border-radius: 12px; border: 0; background: var(--z-blue); color: #fff; font-weight: 700; cursor: pointer; }
.rc-result { margin-top: .75rem; font-weight: 600; min-height: 1.4em; color: var(--text-secondary); }
.rc-result.ok { color: #059669; } body.dark-mode .rc-result.ok { color: #6EE7B7; }
.rc-result.maybe { color: #B45309; } body.dark-mode .rc-result.maybe { color: #FCD34D; }
@media (max-width: 900px) { .regions-layout { grid-template-columns: 1fr; } }

/* ---------- PROJEKT-CHECK ---------- */
.pc-section { padding: clamp(4rem, 8vw, 7rem) 1.25rem; position: relative; }
.pc-container { max-width: 1200px; margin: 0 auto; }
.pc-header { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.pc-header h2 { color: var(--text-primary); margin-bottom: 1rem; }
.pc-header p { color: var(--text-secondary); font-size: 1.1rem; }
.pc-card {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); border-radius: 28px; overflow: hidden;
  border: 1px solid var(--z-line-2); background: var(--bg-primary);
  box-shadow: 0 40px 100px -50px rgba(15, 23, 42, .45);
}
body.dark-mode .pc-card { background: linear-gradient(180deg, rgba(30, 41, 59, .9), rgba(15, 23, 42, .9)); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8); }
.pc-main { padding: clamp(1.5rem, 3.5vw, 3rem); display: flex; flex-direction: column; min-height: 520px; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; font: 600 .74rem/1 var(--z-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--z-blue); }
body.dark-mode .pc-top { color: var(--z-cyan); }
.pc-progress { flex: 1; height: 4px; border-radius: 4px; background: var(--z-line-2); overflow: hidden; max-width: 260px; }
.pc-progress i { display: block; height: 100%; width: 0; background: var(--z-grad); transition: width .5s var(--z-ease); }
.pc-q { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: .4rem; line-height: 1.2; }
.pc-hint { color: var(--text-secondary); margin-bottom: 1.4rem; }
.pc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .8rem; align-items: stretch; }
.pc-opt {
  position: relative; text-align: left; padding: 1.05rem 1.1rem; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);
  font: inherit; font-weight: 600; display: flex; align-items: center; gap: .85rem;
  padding-right: 2.9rem; min-height: 78px; line-height: 1.25;
  transition: border-color .2s, background .2s, transform .2s var(--z-ease), box-shadow .2s;
}
.pc-opt > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
body.dark-mode .pc-opt { background: rgba(15, 23, 42, .55); border-color: rgba(148, 178, 255, .16); }
.pc-opt:hover { border-color: var(--z-blue); transform: translateY(-2px); }
.pc-opt[aria-pressed="true"] { border-color: var(--z-blue); background: linear-gradient(135deg, rgba(66, 153, 225, .16), rgba(102, 126, 234, .1)); box-shadow: 0 0 0 4px rgba(66, 153, 225, .14); }
.pc-opt[aria-pressed="true"]::after { content: "✓"; position: absolute; right: .9rem; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--z-blue); color: #fff; font-size: .75rem; }
.pc-opt .pc-ico { font-size: 1.35rem; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; background: rgba(66, 153, 225, .12); border: 1px solid rgba(66, 153, 225, .18); }
.pc-opt.urgent .pc-ico { background: rgba(229, 62, 62, .14); border-color: rgba(229, 62, 62, .3); }
.pc-opt small { display: block; font-weight: 500; color: var(--text-secondary); font-size: .8rem; margin-top: .15rem; }
.pc-opt.urgent { border-color: rgba(229, 62, 62, .45); }
.pc-opt.urgent[aria-pressed="true"] { border-color: #E53E3E; background: rgba(229, 62, 62, .12); box-shadow: 0 0 0 4px rgba(229, 62, 62, .15); }
.pc-opt.urgent[aria-pressed="true"]::after { background: #E53E3E; }
.pc-range { margin: .5rem 0 1.4rem; }
.pc-range-val { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; background: var(--z-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pc-range input[type=range] { width: 100%; accent-color: var(--z-blue); height: 28px; }
.pc-range-scale { display: flex; justify-content: space-between; font: .72rem var(--z-mono); color: var(--text-secondary); }
.pc-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.pc-chip { padding: .6rem .95rem; border-radius: 999px; border: 1.5px solid var(--border-color); background: transparent; color: var(--text-primary); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.pc-chip[aria-pressed="true"] { background: var(--z-blue); border-color: var(--z-blue); color: #fff; }
.pc-nav { margin-top: auto; padding-top: 1.8rem; display: flex; gap: .8rem; justify-content: space-between; align-items: center; }
.pc-back { background: none; border: 0; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; padding: .8rem .4rem; }
.pc-back:hover { color: var(--text-primary); }
.pc-next, .pc-cta { padding: .95rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; background: var(--z-grad); box-shadow: 0 12px 30px -10px rgba(66, 153, 225, .7); transition: transform .2s var(--z-ease), box-shadow .2s, opacity .2s; }
.pc-next:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.pc-next:not(:disabled):hover, .pc-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(66, 153, 225, .8); }
.pc-cta.red { background: linear-gradient(135deg, #E53E3E, #F56565); box-shadow: 0 12px 30px -10px rgba(229, 62, 62, .7); }
.pc-cta.ghost { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-color); box-shadow: none; }
.pc-cta.wa { background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .6); }
.pc-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.pc-step { animation: zStepIn .45s var(--z-ease-out); }
.pc-emergency { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(229, 62, 62, .1); border: 1px solid rgba(229, 62, 62, .35); color: var(--text-primary); }
.pc-emergency strong { color: #E53E3E; }
body.dark-mode .pc-emergency strong { color: #FCA5A5; }
.pc-steps-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; counter-reset: pcs; }
.pc-steps-list li { counter-increment: pcs; display: flex; gap: .8rem; align-items: flex-start; color: var(--text-secondary); }
.pc-steps-list li::before { content: counter(pcs); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--z-mono); color: #fff; background: var(--z-grad); }
/* Steckbrief (rechte Spalte) */
.pc-side {
  position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); color: #D6E6FB;
  background:
    linear-gradient(rgba(99, 179, 237, .08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(99, 179, 237, .08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(160deg, #0E1A31, #0A1323);
  border-left: 1px solid var(--z-line-2);
  font-family: var(--z-mono);
}
.pc-side h3 { font: 700 .78rem/1 var(--z-mono); letter-spacing: .2em; text-transform: uppercase; color: #63D3FF; margin-bottom: 1.2rem; display: flex; justify-content: space-between; }
.pc-side h3 span { color: #7DA2D6; letter-spacing: .08em; }
.pc-sheet { display: grid; gap: .1rem; }
.pc-row { display: grid; grid-template-columns: 110px 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed rgba(99, 179, 237, .2); font-size: .82rem; }
.pc-row dt { color: #7DA2D6; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; padding-top: .15rem; }
.pc-row dd { margin: 0; color: #fff; font-weight: 600; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.pc-row dd.empty { color: #3E5A82; font-weight: 400; }
.pc-row.flash dd { animation: zFlash .8s; }
.pc-stamp { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1.5px solid #34D399; color: #34D399; border-radius: 8px; font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; rotate: -4deg; opacity: 0; scale: 1.4; transition: all .5s var(--z-ease-out); }
.pc-stamp.on { opacity: 1; scale: 1; }
.pc-tips { margin-top: 1.2rem; font-size: .78rem; color: #9FB9DC; line-height: 1.6; }
.pc-tips b { color: #fff; }
@media (max-width: 1100px) {
  .pc-card { grid-template-columns: 1fr; }
  .pc-side { border-left: 0; border-top: 1px solid var(--z-line-2); }
  .pc-main { min-height: 0; }
}
@media (max-width: 560px) { .pc-opts { grid-template-columns: 1fr; } .pc-row { grid-template-columns: 90px 1fr; } }

/* ---------- Terminwahl (ersetzt Flatpickr) ---------- */
.slot-picker { border: 2px solid var(--border-color); border-radius: 16px; padding: .9rem; background: var(--bg-primary); }
body.dark-mode .slot-picker { background: #1F2937; border-color: #4A5568; }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; font-weight: 700; color: var(--text-primary); font-size: .92rem; }
.sp-arrows { display: flex; gap: .35rem; }
.sp-arrows button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 1rem; }
.sp-arrows button:disabled { opacity: .35; cursor: default; }
.sp-days { display: flex; gap: .45rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; scrollbar-width: thin; }
.sp-day { scroll-snap-align: start; flex: 0 0 auto; width: 66px; padding: .55rem .2rem; border-radius: 12px; border: 1.5px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; text-align: center; font: inherit; line-height: 1.15; transition: all .2s; }
.sp-day small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.sp-day b { display: block; font-size: 1.15rem; }
.sp-day span { display: block; font-size: .68rem; color: var(--text-secondary); }
.sp-day[aria-pressed="true"] { background: var(--z-blue); border-color: var(--z-blue); color: #fff; }
.sp-day[aria-pressed="true"] small, .sp-day[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }
.sp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .4rem; margin-top: .7rem; }
.sp-time { padding: .5rem 0; border-radius: 10px; border: 1.5px solid var(--border-color); background: transparent; color: var(--text-primary); cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: all .15s; }
.sp-time:hover:not(:disabled) { border-color: var(--z-blue); }
.sp-time:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.sp-time[aria-pressed="true"] { background: var(--z-blue); border-color: var(--z-blue); color: #fff; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; font-size: .88rem; color: var(--text-secondary); min-height: 1.6em; }
.sp-foot b { color: var(--text-primary); }
.sp-clear { background: none; border: 0; color: var(--z-blue); cursor: pointer; font: inherit; font-weight: 600; }
.sp-hint { font-size: .78rem; color: var(--text-secondary); margin-top: .4rem; }

/* ---------- Datei-Upload ---------- */
.dropzone { position: relative; border: 2px dashed var(--border-color); border-radius: 16px; padding: 1.3rem; text-align: center; transition: border-color .2s, background .2s; background: var(--bg-primary); }
body.dark-mode .dropzone { background: #1F2937; border-color: #4A5568; }
.dropzone.drag, .dropzone:hover { border-color: var(--z-blue); background: rgba(66, 153, 225, .07); }
.dz-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dz-inner { pointer-events: none; display: grid; gap: .3rem; color: var(--text-secondary); }
.dz-icon { font-size: 1.8rem; }
.dz-text { color: var(--text-primary); font-weight: 600; }
.dz-text u { color: var(--z-blue); text-decoration-thickness: 2px; }
.dz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .6rem; margin-top: .7rem; }
.dz-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-secondary); display: grid; place-items: center; font-size: .7rem; color: var(--text-secondary); text-align: center; padding: .3rem; }
.dz-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dz-item .dz-size { position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .62rem; padding: .1rem .35rem; border-radius: 6px; }
.dz-item button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; line-height: 1; }
.dz-msg { grid-column: 1 / -1; font-size: .82rem; color: #E53E3E; }

/* ---------- Überlagerungen: Cookie, Chat-Button, Mobile-Leiste ---------- */
.cookie-banner { z-index: 10002 !important; }
body.cookie-visible #zmn-fab { opacity: 0; pointer-events: none; }
#zmn-fab { transition: transform .15s, box-shadow .2s, opacity .3s, bottom .3s var(--z-ease); }
.zmn-mbar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9990;
  display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px;
  border-radius: 20px; background: rgba(11, 18, 32, .88); border: 1px solid rgba(148, 178, 255, .18);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  translate: 0 140%; transition: translate .45s var(--z-ease-out);
}
@media (max-width: 768px) { .zmn-mbar { display: grid; } }
.zmn-mbar.show { translate: 0 0; }
.zmn-mbar a { display: grid; justify-items: center; gap: 2px; padding: .45rem 0; border-radius: 14px; color: #E6EEF9; text-decoration: none; font-size: .68rem; }
.zmn-mbar a span { font-size: 1.15rem; line-height: 1; }
.zmn-mbar a b { font-weight: 600; }
.zmn-mbar a:first-child { background: linear-gradient(135deg, #E53E3E, #F56565); color: #fff; }
.zmn-mbar a:active { background: rgba(255, 255, 255, .1); }
@media (max-width: 768px) {
  body.has-mbar #zmn-fab { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  body.has-mbar .back-to-top { bottom: calc(160px + env(safe-area-inset-bottom)); }
  body.has-mbar footer { padding-bottom: 90px; }
}

/* Zurück-nach-oben mit Fortschrittsring */
.back-to-top::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--z-cyan) calc(var(--sp, 0) * 1turn), rgba(148, 178, 255, .15) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.scroll-progress { background: var(--z-grad) !important; box-shadow: 0 0 12px rgba(99, 211, 255, .7); }

/* Toast */
#zmnToast { position: fixed; left: 50%; bottom: 28px; translate: -50% 20px; z-index: 100002; padding: .8rem 1.2rem; border-radius: 12px; background: #0B1220; color: #fff; font-weight: 600; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); border: 1px solid rgba(99, 211, 255, .3); opacity: 0; pointer-events: none; transition: all .35s var(--z-ease-out); }
#zmnToast.show { opacity: 1; translate: -50% 0; }

/* Maus-Lichtschein */
#zmnGlow { position: fixed; left: 0; top: 0; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s; background: radial-gradient(closest-side, rgba(66, 153, 225, .09), transparent); }
body.dark-mode #zmnGlow.on { opacity: 1; }

/* Teilen */
.share-btn { margin: 0 auto 1rem; display: block; padding: .6rem 1.2rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #E2E8F0; font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.share-btn:hover { background: rgba(99, 211, 255, .12); border-color: rgba(99, 211, 255, .5); }

/* Chat: Vorschläge */
.zmn-chat-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 .6rem; }
.zmn-chat-chips button { text-align: left; padding: .5rem .75rem; border-radius: 12px; border: 1px solid rgba(165, 180, 207, .35); background: rgba(255, 255, 255, .05); color: #E2E8F0; font: inherit; font-size: .85rem; cursor: pointer; transition: background .2s, border-color .2s; }
.zmn-chat-chips button:hover { background: rgba(99, 211, 255, .12); border-color: rgba(99, 211, 255, .5); }
.zmn-chat-bubble a { color: #93C5FD; }

/* ---------- Reveal-System ---------- */
.js .rv {
  opacity: 0; animation: none !important;
  transition: opacity .9s var(--z-ease-out), translate .9s var(--z-ease-out), scale .9s var(--z-ease-out), rotate .9s var(--z-ease-out), filter .9s var(--z-ease-out), transform .5s var(--z-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .rv-up { translate: 0 42px; }
.js .rv-flip { translate: 0 30px; rotate: x 38deg; transform-origin: 50% 100%; }
.js .rv-pop { scale: .7; }
.js .rv-right { translate: 60px 0; }
.js .rv-scale { scale: .9; }
.js .rv-clip { translate: 0 34px; scale: .96; filter: blur(10px); }
@media (min-width: 769px) { .js .rv-up, .js .rv-flip { filter: blur(6px); } }
.js .rv.in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: none; }
.js .rv.in.tilt.is-tilting { transition-delay: 0s; }

/* ---------- View Transition: Hell/Dunkel als Kreis ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation: zCircle .7s var(--z-ease-out); }

/* ---------- Keyframes ---------- */
@keyframes zFadeIn { to { opacity: 1; } }
@keyframes zFadeInSoft { to { opacity: .38; } }
@keyframes zFadeUp { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes zShimmer { to { background-position: -220% 0; } }
@keyframes zShine { 0% { background-position: 100% 0; } 30%, 100% { background-position: -160% 0; } }
@keyframes zMarquee { to { transform: translateX(-50%); } }
@keyframes zPing { 0% { box-shadow: 0 0 0 0 currentColor; } 80%, 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes zScrollCue { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
@keyframes zDraw { to { stroke-dashoffset: 0; } }
@keyframes zPulseRing { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@keyframes zSpin { to { transform: rotate(360deg); } }
@keyframes zStepIn { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes zFlash { 0% { color: #63D3FF; text-shadow: 0 0 12px #63D3FF; } 100% { color: #fff; text-shadow: none; } }
@keyframes zCircle { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); } }

/* ---------- Bewegung reduzieren / Drucken ---------- */
@media (prefers-reduced-motion: reduce) {
  .zm-track, .os-dot, .hud-dot, .hero-scroll span, .region-map .rm-sweep, .region-map .rm-hq circle.pulse { animation: none !important; }
  /* Einblend-Animationen im Hero sofort im Endzustand anzeigen (sonst blieben Elemente unsichtbar) */
  .hero h1 span, .hero h1 .highlight, .hero p, .cta-button, .hero-phone-btn, .hero-check-btn, .hero-trust, .hero-status, .hero-hud, .hero-bg, .logo-text, .cta-btn-primary, .btn-primary { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero h1 .highlight::after { animation: none !important; transform: scaleX(1) !important; }
  .js .rv { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; clip-path: none !important; }
  .hero-content, .hero-bg img, .video-section video, .references-container { transform: none !important; opacity: 1 !important; clip-path: none !important; scale: 1 !important; }
  .hero-3d { opacity: .8; animation: none; }
}
@media print {
  .hero-3d, .hero-hud, .hero-labels, .zmn-mbar, #zmnGlow, .zmn-marquee, .ribbons, #zmn-fab { display: none !important; }
  .js .rv { opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important; }
}


/* =====================================================================
   RUNDE 2 – Schrift, Fallbacks, neue 3D-Szenen
   ===================================================================== */
/* Poppins (SIL Open Font License) – eingebettet, keine externen Anfragen; nur zwei Schnitte, Latin + Latin-Ext */
@font-face { font-family: "ZMN Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(data:font/woff;base64,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) format("woff"); }
@font-face { font-family: "ZMN Display"; font-style: normal; font-weight: 500; font-display: swap; src: url(data:font/woff;base64,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) format("woff"); }
:root { --z-display: "ZMN Display", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, h4, .stat-number, .pc-q, .pc-range-val, .zm-item, .logo-text .zmn, .cta-stat strong, .hero-phone-text strong, .contact-channel-value, .why-word, .faq-title {
  font-family: var(--z-display); font-weight: 700; letter-spacing: -.02em;
}
.cta-button, .cta-btn-primary, .cta-btn-secondary, .hero-check-btn, .btn, .pc-next, .pc-cta, .popup-btn, .nav-center a, .faq-tab, .lang-btn, .zmn-mbar a b, .rc-row button, .call-button, .region-tag, .pc-opt, .pc-chip, .sp-day, .sp-time, #zmn-fab {
  font-family: var(--z-display); font-weight: 500;
}
.cta-button, .cta-btn-primary, .btn-primary, .pc-next, .pc-cta, .hero-check-btn, #zmn-fab, .call-button { font-weight: 700; }
.hero h1 { font-weight: 700; }
.logo-text { font-family: var(--z-display); font-weight: 500; }

/* Nav-Logo: Fallback-Zeichen, wenn das Bild fehlt (z. B. lokale Vorschau ohne bilder/-Ordner) */
.logo-fallback { display: none; width: 45px; height: 45px; border-radius: 10px; place-items: center; font: 800 1rem/1 var(--z-display); letter-spacing: -.04em; color: #fff; background: linear-gradient(135deg, #16223D, #0B1220); border: 1px solid rgba(148, 178, 255, .25); }
.logo-img.is-missing { display: none; }
.logo-img.is-missing + .logo-fallback { display: grid; }
#zmnCoin img.is-missing { visibility: hidden; }

/* Hero-Abstand, wenn der Notfall-Banner geschlossen wurde (Hero liegt jetzt in <main>) */
body.banner-closed .hero { padding-top: 90px !important; }

/* Feine Körnung für einen "gedruckten" Look (sehr dezent) */
body.dark-mode::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- Prinzip: großes Outline-Wort im Hintergrund ---------- */
.why-zmn { position: relative; overflow: hidden; }
.why-word {
  position: absolute; left: 50%; top: 30%; translate: -50% -50%; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--z-display); font-weight: 700; font-size: clamp(6rem, 24vw, 22rem); line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(66, 153, 225, .22); white-space: nowrap;
  transform: translate3d(0, calc((var(--p, .5) - .5) * -160px), 0);
}
body.dark-mode .why-word { -webkit-text-stroke-color: rgba(148, 190, 255, .2); }
.why-zmn .zemin-container { position: relative; z-index: 1; }

/* ---------- 3D-Logo-Münze (Prinzip) ---------- */
.coin { position: relative; display: inline-block; width: 120px; height: 120px; transform-style: preserve-3d; transform: perspective(700px) rotateY(var(--ry, -20deg)) rotateX(8deg); transition: transform .12s linear; }
.coin img { position: absolute; inset: 0; width: 120px !important; height: 120px !important; max-width: none !important; animation: none !important; transform: translateZ(calc(var(--z, 0) * 1.6px)); backface-visibility: visible; filter: drop-shadow(0 0 0 transparent); }
.coin img:not(:first-child) { filter: brightness(.55) saturate(.6); }
.coin img:first-child { filter: drop-shadow(0 0 18px rgba(99, 211, 255, .45)); }
.prinzip-logo { perspective: 900px; }
@media (hover: hover) { .coin:hover { transition: transform .6s var(--z-ease); transform: perspective(700px) rotateY(calc(var(--ry, -20deg) + 40deg)) rotateX(8deg); } }

/* ---------- CTA: WebGL-Terrain ---------- */
.cta-terrain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 80%, transparent); }
.cta-section { isolation: isolate; }
.cta-container { z-index: 2; }

/* ---------- Iso-Haus (Ablauf) ---------- */
.iso-stage {
  position: relative; height: 420px; margin: -1rem auto 2.5rem; max-width: 720px;
  perspective: 1400px; perspective-origin: 50% 40%;
  --fill: 0; --mx: 0; --my: 0;
}
.iso-caption {
  position: absolute; left: 50%; bottom: .2rem; translate: -50% 0; padding: .45rem .9rem; border-radius: 999px;
  font: 600 .72rem/1 var(--z-mono); letter-spacing: .16em; text-transform: uppercase; color: #9CC3F5;
  background: rgba(11, 18, 32, .75); border: 1px solid rgba(99, 179, 237, .3); opacity: 0; transition: opacity .4s; white-space: nowrap;
}
body:not(.dark-mode) .iso-caption { background: rgba(255, 255, 255, .9); color: #1D4ED8; border-color: rgba(66, 153, 225, .35); }
.iso-caption.on { opacity: 1; }
.iso-scene {
  position: absolute; left: 50%; top: 50%; width: 220px; height: 160px;
  transform-style: preserve-3d;
  transform: translate(-50%, -34%) scale(1.14) rotateX(calc(53deg + var(--my) * -6deg)) rotateZ(calc(-34deg + var(--mx) * 10deg));
  transition: transform .5s var(--z-ease);
}
.iso-floor {
  position: absolute; left: -190px; top: -190px; width: 600px; height: 540px; transform: translateZ(-1px);
  background:
    linear-gradient(rgba(99, 179, 237, .12) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(99, 179, 237, .12) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
}
.iso-layer { position: absolute; left: 0; top: 0; width: 220px; height: 160px; transform-style: preserve-3d;
  /* Einblenden je Schicht: --on läuft von 0..1, sobald --fill den Schwellwert der Schicht überschreitet.
     Wichtig: Deckkraft nur auf den Flächen (Blättern) – opacity < 1 auf einem 3D-Container würde die Szene plattdrücken. */
  --on: clamp(0, calc((var(--fill) - var(--k) * .23) * 4.2), 1);
  transform: translateZ(calc((1 - var(--on)) * 160px));
  transition: transform .35s var(--z-ease-out);
}
.iso-layer .iso-f, .iso-layer .iso-rf, .iso-layer .iso-grid, .iso-layer .iso-label, .iso-layer .iso-check, .iso-layer .iso-pin, .iso-layer .iso-ring { opacity: var(--on); transition: opacity .25s linear; }
.iso-box { position: absolute; left: 0; top: 0; width: var(--w); height: var(--d); transform-style: preserve-3d; }
.iso-f { position: absolute; left: 0; top: 0; box-sizing: border-box; background: rgba(66, 153, 225, .10); border: 1px solid rgba(99, 211, 255, .75); transform-origin: 0 0; backface-visibility: visible; }
.iso-f.t { width: var(--w); height: var(--d); transform: translateZ(var(--h)); background: rgba(99, 211, 255, .16); }
.iso-f.n { width: var(--w); height: var(--h); transform: rotateX(90deg); }
.iso-f.s { width: var(--w); height: var(--h); transform: translateY(var(--d)) rotateX(90deg); background: rgba(66, 153, 225, .16); }
.iso-f.w { width: var(--h); height: var(--d); transform: rotateY(-90deg); }
.iso-f.e { width: var(--h); height: var(--d); transform: translateX(var(--w)) rotateY(-90deg); background: rgba(66, 153, 225, .18); }
.iso-found .iso-f { border-color: #63D3FF; background: rgba(99, 211, 255, .18); }
.iso-found .iso-f.t { background: linear-gradient(135deg, rgba(99, 211, 255, .3), rgba(66, 153, 225, .14)); }
.iso-grid { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: linear-gradient(rgba(99, 211, 255, .35) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(99, 211, 255, .35) 1px, transparent 1px) 0 0 / 30px 30px; pointer-events: none; }
.iso-label { position: absolute; left: 0; top: 0; transform-origin: 0 0; font: 700 .95rem/1 var(--z-mono); letter-spacing: .38em; color: #63D3FF; padding: .4rem 0; text-shadow: 0 0 12px rgba(99, 211, 255, .7); }
.iso-slab .iso-f { border-color: rgba(99, 211, 255, .9); background: rgba(99, 211, 255, .2); }
.iso-open { position: absolute; box-sizing: border-box; border: 1px solid rgba(230, 244, 255, .9); background: rgba(11, 18, 32, .55); box-shadow: inset 0 0 0 1px rgba(99, 211, 255, .2); }
.iso-open::before, .iso-open::after { content: ""; position: absolute; background: rgba(230, 244, 255, .35); }
.iso-open::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.iso-open::after { top: 50%; left: 0; right: 0; height: 1px; }
.iso-open.door { background: rgba(229, 62, 62, .25); border-color: rgba(255, 180, 180, .9); }
.iso-open.door::before, .iso-open.door::after { display: none; }
.iso-roof { position: absolute; left: 0; top: 0; width: var(--w); height: var(--d); transform-style: preserve-3d; }
.iso-rf { position: absolute; left: 0; top: 0; box-sizing: border-box; transform-origin: 0 0; border: 1.5px solid rgba(165, 180, 252, .95); background: rgba(102, 126, 234, .18); backface-visibility: visible; }
.iso-rf.rn { width: var(--w); height: var(--slant); transform: rotateX(var(--ang)); background: repeating-linear-gradient(90deg, rgba(199, 210, 254, .45) 0 1px, transparent 1px 14px), repeating-linear-gradient(0deg, rgba(199, 210, 254, .25) 0 1px, transparent 1px 12px), rgba(99, 102, 241, .42); }
.iso-rf.rs { width: var(--w); height: var(--slant); transform: translateY(var(--d)) rotateX(calc(180deg - var(--ang))); background: repeating-linear-gradient(90deg, rgba(199, 210, 254, .45) 0 1px, transparent 1px 14px), repeating-linear-gradient(0deg, rgba(199, 210, 254, .25) 0 1px, transparent 1px 12px), rgba(99, 102, 241, .5); }
.iso-rf.gw, .iso-rf.ge { width: var(--rh); height: var(--d); clip-path: polygon(0 0, 100% 50%, 0 100%); background: rgba(99, 102, 241, .45); border: 0; }
.iso-rf.gw { transform: rotateY(-90deg); }
.iso-rf.ge { transform: translateX(var(--w)) rotateY(-90deg); }
.iso-rf.ridge { width: var(--w); height: 2px; border: 0; background: #63D3FF; box-shadow: 0 0 10px #63D3FF; transform: translate3d(0, calc(var(--d) / 2), var(--rh)); }
.iso-chim .iso-f { border-color: rgba(255, 190, 120, .9); background: rgba(255, 170, 80, .18); }
.iso-flag { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.iso-pin { position: absolute; left: -1px; top: 0; width: 2px; height: 46px; background: linear-gradient(180deg, #34D399, transparent); transform: rotateX(-90deg); transform-origin: 0 0; }
.iso-check { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0B1220; background: #34D399; box-shadow: 0 0 0 6px rgba(52, 211, 153, .18), 0 0 30px rgba(52, 211, 153, .6); transform: translateZ(50px) rotateZ(34deg) rotateX(-53deg); animation: isoBob 2.4s ease-in-out infinite; }
.iso-ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .55); animation: isoRing 2.2s ease-out infinite; }
.iso-scan { position: absolute; left: -40px; top: -40px; width: 300px; height: 240px; background: linear-gradient(180deg, transparent, rgba(99, 211, 255, .12), transparent); border-top: 1px solid rgba(99, 211, 255, .5); border-bottom: 1px solid rgba(99, 211, 255, .5); opacity: calc(var(--fill) * .9); animation: isoScan 5s ease-in-out infinite; pointer-events: none; }
.iso-stage.static .iso-layer { opacity: 1; transform: none; }
@keyframes isoBob { 0%, 100% { transform: translateZ(50px) rotateZ(34deg) rotateX(-53deg); } 50% { transform: translateZ(64px) rotateZ(34deg) rotateX(-53deg); } }
@keyframes isoRing { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.1); opacity: 0; } }
@keyframes isoScan { 0%, 100% { transform: translateZ(6px); } 50% { transform: translateZ(190px); } }
body:not(.dark-mode) .iso-f { border-color: rgba(37, 99, 235, .7); background: rgba(66, 153, 225, .12); }
body:not(.dark-mode) .iso-open { background: rgba(255, 255, 255, .8); border-color: rgba(37, 99, 235, .8); }
body:not(.dark-mode) .iso-floor { background-image: linear-gradient(rgba(37, 99, 235, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .12) 1px, transparent 1px); }
@media (max-width: 768px) {
  .iso-stage { height: 300px; margin-bottom: 1.5rem; }
  .iso-scene { transform: translate(-50%, -34%) scale(.8) rotateX(53deg) rotateZ(-34deg); }
  .zm-row { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iso-check, .iso-ring, .iso-scan, .coin { animation: none !important; transition: none !important; }
  .why-word { transform: none; }
}

/* Bewertungs-Buttons: deutlich sichtbar (vorher nur dünner Rahmen) */
.review-ctas .btn { color: #fff; background: linear-gradient(135deg, #4285F4, #1A73E8); border-color: transparent; box-shadow: 0 10px 26px -12px rgba(66, 133, 244, .8); font-family: var(--z-display); }
.review-ctas .btn-fb { background: linear-gradient(135deg, #1877F2, #0B5ED7); }
.review-ctas .btn:hover { color: #fff !important; background: linear-gradient(135deg, #5B9BFF, #2B7BFF) !important; }
.review-ctas .btn-fb:hover { background: linear-gradient(135deg, #3B8CFF, #1877F2) !important; }
.reviews-grid[hidden] { display: none; }

/* =====================================================================
   ZMN – Zahlen-Bereich ("Zahlen & Fakten")
   Kopfzeile + vier Karten: Icon-Kachel, große Zahl, Bezeichnung,
   Zusatzzeile und ein Füllbalken, der beim Einblenden anläuft.
   Alles andere auf der Seite bleibt unverändert.
   ===================================================================== */
.stats-section { padding: clamp(4.5rem, 7vw, 7rem) 2rem; }
.stats-section::before { top: -40%; right: -8%; width: 720px; height: 720px; background: radial-gradient(circle, rgba(99, 211, 255, .10) 0%, transparent 68%); }
.stats-section::after { bottom: -40%; left: -8%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(229, 62, 62, .07) 0%, transparent 68%); }

/* Kopfzeile */
.stats-head { text-align: center; max-width: 780px; margin: 0 auto clamp(2.4rem, 4vw, 3.6rem); }
.stats-head h2 {
  font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800;
  color: var(--text-primary); margin: 0 0 1rem; text-wrap: balance;
}
body.dark-mode .stats-head h2 { background: linear-gradient(180deg, #FFFFFF 35%, #A9BEDD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-head p { font-size: 1.08rem; line-height: 1.7; color: var(--text-secondary); margin: 0 auto; max-width: 640px; }

/* Raster */
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats-grid { gap: .8rem; } }

/* Karte */
.stat-card {
  text-align: left; padding: 1.9rem 1.8rem 1.6rem; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; gap: .45rem;
  opacity: 1; transform: none; animation: none;
}
.stat-card::before { display: none; }
.stat-card::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(99, 211, 255, .18), transparent 65%); opacity: .7; transition: opacity .4s, transform .6s var(--z-ease-out);
}
.stat-card:hover::after { opacity: 1; transform: scale(1.15); }
.stat-card:hover { transform: translateY(-6px); }
.stat-card > * { position: relative; z-index: 1; }
.stat-card > .spot { z-index: 0; }

/* Icon-Kachel */
.stat-icon {
  width: 52px; height: 52px; border-radius: 16px; margin: 0 0 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.55rem; line-height: 1;
  background: linear-gradient(135deg, rgba(66, 153, 225, .18), rgba(99, 211, 255, .08));
  border: 1px solid rgba(99, 211, 255, .22);
  box-shadow: 0 10px 26px -14px rgba(66, 153, 225, .7); filter: none;
}
body:not(.dark-mode) .stat-icon { background: linear-gradient(135deg, rgba(66, 153, 225, .14), rgba(66, 153, 225, .05)); border-color: rgba(66, 153, 225, .25); }
.stat-card:hover .stat-icon { transform: translateY(-3px) scale(1.06); }

/* Zahl + Text */
.stat-number { font-size: clamp(2.5rem, 3.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 .25rem; }
.stat-label { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.stat-note { font-size: .84rem; color: var(--text-secondary); opacity: .85; }

/* Füllbalken – läuft an, sobald die Karte eingeblendet wird */
.stat-bar { margin-top: auto; padding-top: 1.1rem; }
.stat-bar i { display: block; height: 4px; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--z-blue, #4299E1), var(--z-cyan, #63D3FF)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 120ms + 250ms); }
.stat-card.in .stat-bar i, html:not(.js) .stat-bar i { width: var(--w, 100%); }
.stat-bar::before { content: ""; display: block; height: 4px; border-radius: 999px; background: rgba(148, 178, 255, .14); margin-bottom: -4px; }
body:not(.dark-mode) .stat-bar::before { background: rgba(66, 153, 225, .14); }

/* Handy: kompakter, 2 x 2 */
@media (max-width: 640px) {
  .stat-card { padding: 1.25rem 1.1rem 1.1rem; border-radius: 18px; }
  .stat-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1.25rem; margin-bottom: .8rem; }
  .stat-number { font-size: 2.1rem; }
  .stat-label { font-size: .9rem; }
  .stat-note { font-size: .76rem; }
  .stat-bar { padding-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-bar i { transition: none; width: var(--w, 100%); }
  .stat-card:hover, .stat-card:hover .stat-icon { transform: none; }
}



html:not(.js) #zmn-faq .faq-panels { max-height: none; opacity: 1; overflow: visible; padding: 18px; }


/* Scroll repair: progress is composited, revealing text never requires blur. */
#scrollProgress { width: 100%; transform: scaleX(0); transform-origin: left; transition: none; pointer-events: none; }
.js .rv { opacity: 1; translate: none; scale: none; rotate: none; filter: none !important; clip-path: none !important; transition: opacity .45s ease, translate .45s ease; transition-delay: 0s; }
.js .rv.rv-pending { opacity: 0; translate: 0 18px; }
.js .rv.in { opacity: 1; translate: none; }
/* A fixed blurred surface repaints the scrolling page behind it. */
nav, nav.scrolling, body.dark-mode nav, body.dark-mode nav.scrolling,
.zmn-mbar, .ribbons { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
nav.scrolling { background: rgba(255,255,255,.97) !important; }
body.dark-mode nav.scrolling { background: rgba(15,23,42,.97) !important; }
.hero-3d, .hero-grid-overlay, .hero-labels, .cta-terrain, .iso-scene, #zmnGlow, .spot { pointer-events: none !important; }
.video-section video { clip-path: none !important; transform: none !important; }
.video-section { background: #080b0e; }
.video-controls { display: flex; align-items: center; gap: .75rem; }
#videoPlayBtn { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
#videoPlayBtn:hover { background: rgba(0,0,0,.85); }
#videoPlayBtn:focus-visible, #muteBtn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Keep the normal marquee speed and suspend background animation work. */
.zm-track, .region-map .rm-sweep, .region-map .rm-hq circle.pulse,
.iso-check, .iso-ring, .iso-scan, .reviews-grid.has-marquee { animation-play-state: paused; }
.zmn-motion-visible .zm-track, .zmn-motion-visible .rm-sweep, .zmn-motion-visible .rm-hq circle.pulse,
.zmn-motion-visible .iso-check, .zmn-motion-visible .iso-ring, .zmn-motion-visible .iso-scan,
.zmn-motion-visible .reviews-grid.has-marquee { animation-play-state: running; }
.zmn-marquee:hover .zm-track, .reviews-grid.has-marquee:hover { animation-play-state: paused; }
.hero h1.zmn-anim-done .highlight { animation: none !important; }
.cta-button, .cta-btn-primary, .btn-primary { animation-iteration-count: 1 !important; }
.hero-bg img, .hero-content, img.zmn-logo { will-change: auto; }
@media (pointer: coarse), (max-width: 768px) {
  .hero-content { transform: none !important; opacity: 1 !important; }
  .hero-bg img { transform: none !important; }
  .hero-3d { mix-blend-mode: normal; }
  .hero-check-btn, .hero-status, .slider-arrow, .iso-caption { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rv.rv-pending { opacity: 1; translate: none; }
  .hero-content { opacity: 1 !important; transform: none !important; }
  .tilt, .tilt:hover { transform: none !important; }
  .magnet { translate: none !important; }
  .iso-stage { --mx: 0 !important; --my: 0 !important; }
  .iso-layer { --on: 1 !important; transform: none !important; }
  .coin, .coin:hover { transform: perspective(700px) rotateY(0deg) rotateX(8deg) !important; }
}


.dropzone:focus-within{outline:3px solid var(--accent-blue);outline-offset:5px}
.dz-item .dz-size{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.dz-msg p{margin:8px 0!important}.dz-status{font-size:.9rem;color:var(--text-secondary)}
.upload-reset,.upload-accept-visible{display:block;position:relative;z-index:2;min-height:44px;width:100%;padding:10px 14px;margin-top:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary);color:var(--text-primary);font:inherit;line-height:1.5;cursor:pointer}
.upload-reset:focus-visible,.upload-accept-visible:focus-visible{outline:3px solid var(--accent-blue);outline-offset:3px}
.dropzone[aria-disabled="true"]{cursor:wait}.dropzone button:disabled{opacity:.55;cursor:wait}

.review-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:700}.review-avatar img{width:44px;height:44px;object-fit:cover}.review-info h4{margin:0}.review-info h4 a{color:inherit}.review-date{display:block;font-size:.85rem;color:var(--text-secondary)}.review-card .review-text{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:pre-line;overflow-wrap:anywhere}.reviews-grid.has-marquee{animation:none}.review-source{display:inline-flex;gap:.4rem}.review-translation{display:block;color:var(--text-secondary)}


/* Secondary copy remains legible on white and alternating pale surfaces. */
body { --zmn-focus-colour: #1D4ED8; }
body:not(.dark-mode) { --text-secondary: #526174; }
body.dark-mode { --zmn-focus-colour: #93C5FD; }
.popup-shell, .zmn-chat-card, .cta-section,
body:not(.zmn-service-page) .hero { --zmn-focus-colour: #93C5FD; }
.stat-note { opacity: 1; }

/* Selected form cards use a pale tint, so their text must follow the theme. */
.contact-form .service-option:is(.selected,.active,[aria-pressed="true"]),
.service-selection .service-option:is(.selected,.active,[aria-pressed="true"]) { color: var(--text-primary) !important; }
.contact-form .service-option:is(.selected,.active,[aria-pressed="true"]) :is(.service-option-title,.service-option-title span,h4,h4 span),
.service-selection .service-option:is(.selected,.active,[aria-pressed="true"]) :is(.service-option-title,.service-option-title span,h4,h4 span) { color: var(--text-primary) !important; }
.contact-form .service-option:is(.selected,.active,[aria-pressed="true"]) p,
.service-selection .service-option:is(.selected,.active,[aria-pressed="true"]) p { color: var(--text-secondary) !important; }

/* Darker solid action blue does not change decorative lines, icons or charts. */
.btn-primary, .cookie-accept, .rc-row button,
.pc-next, .pc-cta:not(.ghost):not(.red):not(.wa),
.pc-chip[aria-pressed="true"],
.sp-day[aria-pressed="true"], .sp-time[aria-pressed="true"],
.progress-step.active,
.review-ctas .btn, .popup-btn, .ribbon-news,
.zmn-subpage #main .button:not(.secondary) {
  background: #1D4ED8 !important; background-image: none !important;
  color: #fff !important; border-color: #1D4ED8 !important;
}
.btn-primary:not(:disabled):hover, .cookie-accept:hover, .rc-row button:hover,
.pc-next:not(:disabled):hover, .pc-cta:not(.ghost):not(.red):not(.wa):hover,
.pc-chip[aria-pressed="true"]:hover,
.sp-day[aria-pressed="true"]:hover, .sp-time[aria-pressed="true"]:hover,
.review-ctas .btn:hover, .popup-btn:hover, .ribbon-news:hover,
.zmn-subpage #main .button:not(.secondary):hover {
  background: #1E40AF !important; background-image: none !important;
  color: #fff !important; border-color: #1E40AF !important;
}
.popup-btn { filter: none !important; }
.sp-day[aria-pressed="true"] :is(small,span,b) { color: #fff !important; }
body.dark-mode :is(.sp-day[aria-pressed="true"],.sp-time[aria-pressed="true"],.pc-chip[aria-pressed="true"]) { border-color: #93C5FD !important; }
.pc-opt[aria-pressed="true"]::after { background: #1D4ED8; color: #fff; }
.pc-opt.urgent[aria-pressed="true"]::after { background: #B91C1C; }
.process-step.lit .process-step-number,
.process-step:hover .process-step-number,
.zmn-subpage #main .process-list li::before { background: #1D4ED8 !important; background-image: none !important; color: #fff !important; }
.progress-step.completed { background: #047857; border-color: #047857; color: #fff; }
.pc-row dd.empty { color: #94A3B8; }

/* Red actions retain the brand and a subtle gradient without a pale flash. */
.cta-button, .cta-btn-primary, .pc-cta.red,
.contact-form button[type="submit"], .contact-form .submit-btn,
.zmn-chat-send, .ribbon-contact, .zmn-mbar a:first-child, #zmn-fab {
  background: #B91C1C !important;
  background-image: linear-gradient(135deg,#B91C1C,#991B1B) !important;
  background-size: 100% 100% !important; color: #fff !important;
}
.cta-button:hover, .cta-btn-primary:hover, .pc-cta.red:hover,
.contact-form button[type="submit"]:hover, .contact-form .submit-btn:hover,
.zmn-chat-send:hover, .ribbon-contact:hover, .zmn-mbar a:first-child:hover, #zmn-fab:hover {
  background: #991B1B !important;
  background-image: linear-gradient(135deg,#991B1B,#7F1D1D) !important;
  color: #fff !important;
}
/* Keep the decorative FAB pulse; its glare and text no longer wash out. */
#zmn-fab::before { background: radial-gradient(120% 100% at 30% 25%,rgba(255,255,255,.1),rgba(255,255,255,0) 60%); }
@media(max-width:768px) {
  #zmn-fab .fab-label { background: #B91C1C; color: #fff; opacity: 1 !important; animation: none !important; text-shadow: none; }
}
.pc-cta.wa { background: #047857 !important; background-image: none !important; color: #fff !important; }
.pc-cta.wa:hover { background: #065F46 !important; }

/* Keyboard focus stays distinct on both theme backgrounds. */
:is(.btn-primary,.cookie-btn,.rc-row button,.pc-next,.pc-cta,.pc-chip,.sp-day,.sp-time,.popup-btn,.cta-button,.cta-btn-primary,.cta-btn-secondary,.zmn-chat-send,#zmn-fab):focus-visible {
  outline: 3px solid var(--zmn-focus-colour); outline-offset: 4px;
}

/* Filled region tags are readable while their underline/glow still animates. */
.region-tag:hover, .region-tag.hot { background: #1D4ED8 !important; color: #fff !important; border-color: #1D4ED8 !important; }
.region-tag:hover::before { background: #1D4ED8; }

/* Small blue text gets a darker ink in the light theme, not a global accent. */
body:not(.dark-mode) :is(.nav-center a.is-active,.nav-center a:hover,.service-nav[open]>summary,.sp-clear,.cookie-text a,.cookie-settings:hover,.form-checkbox label a,.contact-channel-value,.about-text .highlight-text,.dz-text u,.pc-top) { color: #23699A !important; }
body.zmn-subpage:not(.dark-mode) #main .legal-content a { color: #23699A; }
body.dark-mode .legal-content a { color: #93C5FD; }

/* Status text has its own light/dark palette and cannot disappear on a card. */
body:not(.dark-mode) :is(.validation-message.error,#form-feedback.error,.dz-msg) { color: #B91C1C; }
body:not(.dark-mode) :is(.validation-message.success,#form-feedback.success,.rc-result.ok) { color: #047857; }
body.dark-mode :is(.validation-message.error,#form-feedback.error,.dz-msg) { color: #FCA5A5; }
body.dark-mode :is(.validation-message.success,#form-feedback.success,.rc-result.ok) { color: #86EFAC; }
body.dark-mode #form-feedback.error { background: #331F2E; border-color: #FCA5A5; }
body.dark-mode #form-feedback.success { background: #0F3E36; border-color: #86EFAC; }

.lang-btn { text-decoration: none; display: inline-block; }

/* Decorative off-screen ribbons and 3D layers must not widen the mobile page. */
html, body { overflow-x: clip; }
.ribbons { left: 0; bottom: 0; overflow: clip; }
@media (max-width: 768px) { .iso-stage { overflow: clip; } }
.back-to-top::before { inset: 0; }