/* ===== mockupz B2B-Refinement (über redesign.css) – seriöser, näher am Ersten HTML ===== */
:root{--maxw:1480px}
.wrap{max-width:1480px}

/* ruhigeres, B2B-Aurora (kein Magenta-Candy) */
.aurora .a4{display:none !important}
.aurora .a1{opacity:.8}
.aurora .a3{background:radial-gradient(circle,#2a6f8f,transparent 60%) !important}
.hero h1 .grad,.grad-text{background-image:linear-gradient(115deg,#9cd323,#19c7c0) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important}

/* Hero-Float-Cards: Stahl/Teal statt bunt */
.fc1{background:linear-gradient(160deg,#1f6f5c,#0e3b32) !important}
.fc2{background:linear-gradient(160deg,#1c5566,#0c2b34) !important}
.fc3{background:linear-gradient(160deg,#26324c,#141a2b) !important}

/* PRODUKT-KARTEN: einheitlich tiefes B2B-Teal/Ink, Linien-Icon in Grün, weiße Headline */
.prod .bg,.prod .p1,.prod .p2,.prod .p3,.prod .p4,.prod .p5,.prod .p6{background:linear-gradient(158deg,#163a4b,#0b1922) !important}
.prod::after{background:linear-gradient(180deg,rgba(11,25,34,.25) 20%,rgba(8,16,22,.9)) !important}
.prod{border:1px solid rgba(255,255,255,.06)}
.prod .ico{background:rgba(156,211,35,.16) !important;border:1px solid rgba(156,211,35,.3)}
.prod .ico svg{stroke:#9cd323 !important}
.prod .more{color:#9cd323 !important}

/* Gallery-/Aud-Icons in Markengrün statt bunt */
.gtile .bg{filter:saturate(.7) brightness(.9)}

/* Buttons: ein Akzent (Grün→Teal), seriöser */
.btn-primary{background:linear-gradient(115deg,#9cd323,#19c7c0) !important;color:#08130a !important}

/* etwas ruhigere Marquee */
.marquee .item svg{stroke:#19c7c0}

/* Karten-Abschnitte: dezenter Rahmen statt knalliger Schatten */
.usp .ico svg{stroke:#9cd323}
.cat-svg-icon{filter:none}

/* ===== 360°-Viewer-Grid (echte interaktive Packshots) ===== */
.mz-360grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.mz-360item{background:#0e1118;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.mz-360item .frame{position:relative;width:100%;aspect-ratio:4/5;background:#0b0d12}
.mz-360item .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mz-360item .cap{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mz-360item .cap h3{font-size:15px;margin:0;color:#fff;font-weight:700}
.mz-360item .cap .b360{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#08130a;background:linear-gradient(115deg,#9cd323,#19c7c0);padding:4px 10px;border-radius:100px}
.mz-360hint{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-top:10px}
@media(max-width:980px){.mz-360grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mz-360grid{grid-template-columns:1fr}}

/* FIX Lesbarkeit Leistungskarten auf Fotos */
.prod::after{background:linear-gradient(180deg,rgba(8,16,22,.45) 0%,rgba(8,16,22,.7) 55%,rgba(8,16,22,.95) 100%) !important}
.prod h3{color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.prod p{color:rgba(255,255,255,.92) !important;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.prod .ico{background:rgba(8,16,22,.55) !important;border:1px solid rgba(156,211,35,.45)}

/* FIX 360-Frame an Viewer-Seitenverhältnis (657x900) + etwas Luft */
.mz-360item .frame{aspect-ratio:5/7 !important}
.mz-360item .frame iframe{background:#fff}

/* ===== FIX Leistungskarten: Bild oben sichtbar + Text auf dunkler Fläche unten ===== */
.prod{background:#0e141b !important;justify-content:flex-end !important;padding:22px !important;min-height:330px}
.prod .bg{height:56% !important;top:0 !important;bottom:auto !important;border-radius:var(--radius) var(--radius) 0 0;background-size:cover !important;background-position:center !important}
.prod::after{content:"" !important;position:absolute;left:0;right:0;top:46%;height:18%;z-index:-1;background:linear-gradient(180deg,transparent,#0e141b) !important}
.prod .ico{position:absolute !important;top:16px;left:16px;margin:0 !important;background:rgba(8,16,22,.6) !important;border:1px solid rgba(156,211,35,.5)}
.prod h3{color:#fff !important;text-shadow:none !important;margin-top:4px}
.prod p{color:rgba(255,255,255,.82) !important;text-shadow:none !important}
.prod .more{color:#9cd323 !important}

/* FIX Hero-Badge & Float-Card-Label Lesbarkeit */
.hero-badge{color:#eaf0f5 !important;background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.22) !important}
.float-card .lbl{color:#fff !important;text-shadow:0 2px 10px rgba(0,0,0,.85) !important;font-weight:800}

/* ===== Logo im Header/Footer ===== */
.logo{padding:0 !important}
.logo .mz-logo{height:40px;width:auto;display:block;background:#fff;padding:7px 12px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
header .logo .mz-logo{height:38px}
footer .logo .mz-logo{height:36px}
@media(max-width:640px){.logo .mz-logo{height:32px;padding:6px 10px}}

/* ===== 360 Poster + Klick-zum-Drehen ===== */
.mz-360item .frame{aspect-ratio:5/7 !important;background:#0e1118 !important;position:relative}
.mz-360item .frame iframe{background:transparent !important}
.mz-360item .frame.poster{cursor:pointer;border:0;padding:0;width:100%;background-size:cover !important;background-position:center !important;background-color:#0e1118}
.mz-360item .frame.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,22,.05),rgba(8,16,22,.4))}
.mz-360item .frame .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(115deg,#9cd323,#19c7c0);color:#08130a;font-weight:800;font-size:13px;padding:11px 18px;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.25s}
.mz-360item .frame.poster:hover .play{transform:translate(-50%,-50%) scale(1.07)}

/* ===== FIX: Flatsome überschreibt Headline-Farben — Weiß auf dunklen Bereichen erzwingen ===== */
.mz-redesign .subhero h1{color:#fff !important}
.mz-redesign .subhero p{color:rgba(231,236,243,.88) !important}
.mz-redesign .subhero .breadcrumb,.mz-redesign .subhero .breadcrumb a,.mz-redesign .subhero .breadcrumb span{color:rgba(231,236,243,.72) !important}
.mz-redesign .hero h1{color:#fff !important}
.mz-redesign .bg-ink h2,.mz-redesign .bg-ink h3,.mz-redesign .bg-ink h4,
.mz-redesign .bg-ink2 h2,.mz-redesign .bg-ink2 h3,
.mz-redesign .cta-final h2,.mz-redesign .spotlight h2,
.mz-redesign .eeat-card .q{color:#fff !important}
.mz-redesign .cta-final p,.mz-redesign .bg-ink .lead,.mz-redesign .bg-ink2 .lead{color:rgba(231,236,243,.85) !important}

/* ===== Logo größer ===== */
.logo .mz-logo{height:50px !important;padding:8px 14px !important}
header .logo .mz-logo{height:46px !important}
footer .logo .mz-logo{height:40px !important}
@media(max-width:640px){.logo .mz-logo,header .logo .mz-logo{height:36px !important;padding:6px 10px !important}}
/* ===== Produktbilder in media-cards/subhero (statt Platzhalter) ===== */
.media-card.dark{background:#0e1118 !important;padding:20px !important}
.mz-prodimg{max-width:100% !important;max-height:380px;width:auto;height:auto;object-fit:contain;border-radius:12px;display:block;margin:0 auto;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.subhero-visual{background:radial-gradient(circle at 50% 40%,#1d2230,#0b0d12) !important}
.subhero-visual .mz-prodimg{max-height:300px}

/* 360 direkt-eingebettet mit Poster-Hintergrund */
.mz-360item .frame{aspect-ratio:5/7 !important;position:relative;background-size:cover !important;background-position:center !important;background-color:#0e1118 !important;overflow:hidden}
.mz-360item .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent !important}

/* 360-Erklär-Sektion: echter Viewer statt Platzhalter-Box */
.spot-pack.mz-spotviewer{animation:none !important;width:180px !important;height:232px !important;overflow:hidden;padding:0 !important;background-color:#fff !important;background-size:cover !important;background-position:center !important;border-radius:14px;box-shadow:0 30px 60px -16px rgba(25,199,192,.45)}
.spot-pack.mz-spotviewer iframe{width:100%;height:100%;border:0;display:block;background:transparent}

/* =================================================================
   PREMIUM / EDEL — gedeckt: Anthrazit + Off-White + EIN Petrol/Smaragd-Akzent
   (überschreibt den Lime/Violett-Regenbogen; mehr Weißraum, feine Typo)
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --lime:#3bb89f; --lime2:#1f7a6b; --cyan:#2f9e8c; --violet:#1c6b5e; --magenta:#2f9e8c;
  --grad:linear-gradient(120deg,#3bb89f 0%,#1f7a6b 100%);
  --grad-soft:linear-gradient(120deg,rgba(59,184,159,.14),rgba(31,122,107,.14));
  --paper:#f5f3ef; --paper2:#ece9e4; --ink:#0d1014; --ink2:#11151b;
  --txt:#16201c; --muted:#5d6b66; --line:#e4e1d9;
}
body,.bg-paper2{background:var(--paper)}
.bg-paper2{background:var(--paper2) !important}
/* mehr Weißraum */
.pad{padding:120px 0}
.subhero{padding:190px 0 96px}
.hero{padding:160px 0 96px}
h2.section-title,.mz-h2{letter-spacing:-.025em}
.lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7}

/* EIN Akzent statt Regenbogen — Gradient-Text dezent smaragd */
.grad,.grad-text,.hero h1 .grad,.mz-redesign .hero h1 .grad{
  background-image:linear-gradient(120deg,#4cc2a8,#2f9e8c) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important}

/* Aurora gedeckt (kein Magenta/Lime/Violett) */
.aurora{opacity:.5 !important;filter:blur(80px) !important}
.aurora .a1{background:radial-gradient(circle,#1f7a6b,transparent 60%) !important}
.aurora .a2{background:radial-gradient(circle,#23485a,transparent 60%) !important}
.aurora .a3{background:radial-gradient(circle,#2f9e8c,transparent 60%) !important}
.aurora .a4{display:none !important}
.mz-hero:before{background:
  radial-gradient(40vw 40vw at 12% 8%,rgba(47,158,140,.18),transparent 60%),
  radial-gradient(44vw 44vw at 90% 18%,rgba(35,72,90,.22),transparent 60%) !important}

/* Buttons: ruhig, edel (dunkler Smaragd, weißer Text, weniger Glow) */
.btn-primary,.mz-btn.avia-button,.mz-btn .avia-button{
  background:linear-gradient(120deg,#2f9e8c,#1f6f63) !important;color:#fff !important;
  box-shadow:0 10px 26px -12px rgba(31,111,99,.6) !important;font-weight:600 !important}
.btn-primary:hover{box-shadow:0 16px 34px -14px rgba(31,111,99,.7) !important}
.btn-ghost,.mz-btn2.avia-button,.mz-btn2 .avia-button{border-color:rgba(255,255,255,.28) !important;font-weight:600 !important}

/* Akzent-Elemente vereinheitlichen */
.eyebrow{color:#1f7a6b}.eyebrow.light,.eyebrow.cyan{color:#4cc2a8}
.prod .ico{background:rgba(47,158,140,.16) !important;border-color:rgba(47,158,140,.4) !important}
.prod .ico svg{stroke:#4cc2a8 !important}.prod .more{color:#4cc2a8 !important}
.iconbox_icon{background-image:linear-gradient(120deg,#3bb89f,#1f7a6b) !important}
.usp .ico svg,.feature-list svg,.eeat-points .pt svg,.cinfo .b svg,.aud .ico svg{stroke:#1f7a6b}
.bg-ink .feature-list svg,.bg-ink2 .feature-list svg,.spot-list svg{stroke:#4cc2a8}
.marquee .item svg{stroke:#2f9e8c !important}
.b360,.mz-360item .frame .play{background:linear-gradient(120deg,#3bb89f,#1f7a6b) !important;color:#fff !important}
.mz-list li:before,.cta-list svg,.hero-trust .ht svg{color:#4cc2a8 !important;stroke:#4cc2a8 !important}
.stat .num,.step::before,.mzf-step .num{background-image:linear-gradient(120deg,#4cc2a8,#2f9e8c) !important;-webkit-background-clip:text;background-clip:text;color:transparent}
.faq-item summary .pm{color:#1f7a6b}
a:hover,.foot-col a:hover,.menu a:hover{}
.logo .dot{background:linear-gradient(120deg,#3bb89f,#1f7a6b) !important}
/* feinere Karten-Schatten */
.prod,.aud,.news-card,.step{box-shadow:0 18px 50px -28px rgba(13,16,20,.28)}

/* ===== Logo edel: monochrom weiß, ohne Pille, sauber integriert ===== */
.logo{padding:0 !important;display:inline-flex;align-items:center}
.logo .mz-logo{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important;
  filter:brightness(0) invert(1) !important;opacity:.96;height:34px !important;width:auto !important}
header .logo .mz-logo{height:32px !important}
footer .logo .mz-logo{height:30px !important;opacity:.85}
@media(max-width:640px){.logo .mz-logo,header .logo .mz-logo{height:26px !important}}