@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --zn-bg-1: #f3f7fb;
  --zn-bg-2: #e9f2ff;
  --zn-surface: #ffffff;
  --zn-ink: #102033;
  --zn-muted: #46596f;
  --zn-accent: #0d6efd;
  --zn-accent-2: #2ec4b6;
  --zn-radius: 16px;
  --zn-shadow: 0 14px 34px rgba(16, 32, 51, 0.11);
}

/* ═══════════ MEGA-MENU ═══════════ */
.zn-mega-menu { min-width: 480px; }
.zn-mega-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #64748b; margin: 0 0 6px; padding: 0 6px; }
.zn-mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px; border-radius: 10px; text-decoration: none !important; color: var(--zn-ink) !important; transition: background 140ms ease; margin-bottom: 2px; }
.zn-mega-link:hover { background: rgba(6,57,135,0.08); }
.zn-mega-link strong { font-size: 14px; display: block; color: var(--zn-ink); line-height: 1.2; }
.zn-mega-link small { font-size: 12px; color: #64748b; }
.zn-mega-icon { font-size: 16px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(6,57,135,0.1); border-radius: 8px; flex-shrink: 0; margin-top: 2px; color: #0639a7; }
.zn-mega-icon.tool { background: rgba(0,105,92,0.1); color: #00695c; }
.zn-brand { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; font-size: 20px !important; color: #0639a7 !important; letter-spacing: -0.02em !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.zn-lang-toggle { font-size: 13px; font-weight: 600; color: #64748b; text-decoration: none; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(6,57,135,0.2); }
.zn-lang-toggle:hover { color: #0639a7; border-color: rgba(6,57,135,0.4); }
.zn-btn-demo { background: #0639a7 !important; color: #fff !important; border: none !important; padding: 8px 18px !important; font-weight: 600 !important; font-size: 14px !important; border-radius: 8px !important; text-decoration: none !important; white-space: nowrap; }
.zn-btn-demo:hover { background: #052f7a !important; color: #fff !important; }

/* ═══════════ HERO ═══════════ */
.zn-hero { padding: 130px 0 80px; position: relative; overflow: hidden; }
.zn-hero::before { content: ''; position: absolute; top: -60px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(6,57,135,0.07) 0%, transparent 70%); pointer-events: none; }
.zn-hero-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #0639a7; margin-bottom: 16px; }
.zn-hero-headline { font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 5.5vw, 58px); font-weight: 700; line-height: 1.1; color: var(--zn-ink); margin-bottom: 20px; letter-spacing: -0.025em; }
.zn-hero-lead { font-size: 18px; color: var(--zn-muted); line-height: 1.65; max-width: 540px; margin-bottom: 0; }
.zn-hero-logo { filter: drop-shadow(0 20px 40px rgba(6,57,135,0.18)); animation: zn-float 4s ease-in-out infinite; }
.zn-hero .col-lg-7 { text-align: center; margin: 0 auto; }
.zn-hero .d-flex { justify-content: center; }
.zn-hero-lead { margin-left: auto; margin-right: auto; }
@keyframes zn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.zn-btn-primary { background: #0639a7 !important; color: #fff !important; border: none !important; padding: 13px 28px !important; font-weight: 600 !important; font-size: 16px !important; border-radius: 10px !important; text-decoration: none !important; }
.zn-btn-primary:hover { background: #052f7a !important; transform: translateY(-2px) !important; box-shadow: 0 12px 24px rgba(6,57,135,0.28) !important; color: #fff !important; }
.zn-btn-ghost { background: transparent !important; color: #0639a7 !important; border: 2px solid rgba(6,57,135,0.3) !important; padding: 12px 26px !important; font-weight: 600 !important; font-size: 16px !important; border-radius: 10px !important; text-decoration: none !important; }
.zn-btn-ghost:hover { background: rgba(6,57,135,0.06) !important; border-color: rgba(6,57,135,0.6) !important; color: #0639a7 !important; }

/* ═══════════ STATS ═══════════ */
.zn-stats { background: #fff; border-top: 1px solid rgba(6,57,135,0.1); border-bottom: 1px solid rgba(6,57,135,0.1); padding: 40px 0; }
.zn-stat { padding: 16px; }
.zn-stat-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 4vw, 46px); font-weight: 700; color: #0639a7; }
.zn-stat-unit { font-size: 22px; font-weight: 700; color: #0639a7; }
.zn-stat-label { font-size: 13px; color: #64748b; margin: 6px 0 0; font-weight: 500; }

/* ═══════════ TRUST LOGOS ═══════════ */
.zn-trust { background: #f8f9fb; padding: 28px 0; border-bottom: 1px solid rgba(6,57,135,0.07); }
.zn-trust-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #94a3b8; text-align: center; margin-bottom: 18px; }
.zn-trust-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; }
.zn-trust-logo { font-size: 12px; font-weight: 700; color: #94a3b8; letter-spacing: 1px; text-transform: uppercase; padding: 8px 18px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }

/* ═══════════ SECTION LAYOUT ═══════════ */
.zn-section { padding: 70px 0; }
.zn-section-alt { background: #f8f9fb; border-top: 1px solid rgba(6,57,135,0.06); border-bottom: 1px solid rgba(6,57,135,0.06); }
.zn-section-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: var(--zn-ink); margin-bottom: 10px; letter-spacing: -0.02em; }
.zn-section-sub { font-size: 16px; color: #64748b; margin-bottom: 44px; max-width: 580px; margin-left: auto; margin-right: auto; }

/* ═══════════ SERVICES CARDS ═══════════ */
.zn-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.zn-service-card { background: #fff; border: 1px solid rgba(6,57,135,0.1); border-radius: 16px; padding: 28px 24px; text-decoration: none !important; color: var(--zn-ink) !important; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; display: block; }
.zn-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(6,57,135,0.11); border-color: rgba(6,57,135,0.28); text-decoration: none !important; }
.zn-service-icon { font-size: 26px; color: #0639a7; margin-bottom: 14px; display: block; }
.zn-service-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: var(--zn-ink); margin-bottom: 8px; }
.zn-service-card p { font-size: 14px; color: #64748b; line-height: 1.5; margin: 0; }

/* ═══════════ INDUSTRIES GRID ═══════════ */
.zn-industries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; }
.zn-industry-tile { background: #fff; border: 1px solid rgba(6,57,135,0.1); border-radius: 14px; padding: 22px 14px; text-align: center; text-decoration: none !important; color: var(--zn-ink) !important; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; display: block; }
.zn-industry-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(6,57,135,0.1); border-color: rgba(6,57,135,0.3); }
.zn-ind-icon { font-size: 30px; color: #0639a7; margin-bottom: 10px; display: block; }
.zn-industry-tile strong { font-size: 13px; font-weight: 600; color: var(--zn-ink); display: block; }
.zn-industry-tile small { font-size: 11px; color: #94a3b8; display: block; margin-top: 4px; }

/* ═══════════ TESTIMONIALS ═══════════ */
.zn-testimonials-section { padding: 60px 0; background: #f8f9fb; }
.zn-testimonial { background: #fff; border: 1px solid rgba(6,57,135,0.1); border-radius: 18px; padding: 32px 36px; position: relative; height: 100%; }
.zn-testimonial::before { content: '\201C'; font-size: 72px; line-height: 1; color: rgba(6,57,135,0.1); font-family: Georgia, serif; position: absolute; top: 10px; left: 24px; pointer-events: none; }
.zn-testimonial p { font-size: 15px; line-height: 1.7; color: var(--zn-muted); padding-top: 28px; }
.zn-testimonial-meta { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(6,57,135,0.08); }
.zn-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #0639a7, #2979e6); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.zn-testimonial-name { font-weight: 700; font-size: 14px; color: var(--zn-ink); }
.zn-testimonial-role { font-size: 12px; color: #64748b; }

/* ═══════════ STICKY CTA BAR ═══════════ */
.zn-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 2px solid #0639a7; box-shadow: 0 -4px 20px rgba(6,57,135,0.14); z-index: 999; padding: 12px 0; transform: translateY(100%); transition: transform 280ms ease; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.zn-sticky-cta.visible { transform: translateY(0); }
.zn-sticky-cta .zn-sticky-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 1140px; margin: 0 auto; padding: 0 20px; text-align: center; }
.zn-sticky-cta-text { font-weight: 600; font-size: 15px; color: var(--zn-ink); }
.zn-sticky-cta-text small { font-size: 13px; color: #64748b; display: block; font-weight: 400; }
.zn-sticky-cta-btns { display: flex; gap: 10px; justify-content: center; width: 100%; }
.zn-sticky-close { background: none; border: none; font-size: 22px; color: #94a3b8; cursor: pointer; padding: 0 4px; line-height: 1; }
.zn-sticky-close:hover { color: var(--zn-ink); }

/* ═══════════ SCROLL TO TOP ═══════════ */
.zn-scroll-top { position: fixed; bottom: 80px; right: 20px; width: 44px; height: 44px; background: #0639a7; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(6,57,135,0.3); opacity: 0; transform: translateY(10px); transition: opacity 250ms ease, transform 250ms ease; z-index: 998; }
.zn-scroll-top.visible { opacity: 1; transform: translateY(0); }
.zn-scroll-top:hover { background: #052f7a; }

/* ═══════════ SCROLLSPY ACTIVE ═══════════ */
.navbar-nav .nav-link.zn-active { color: #0639a7 !important; font-weight: 700 !important; }

/* ═══════════ FADE-IN ANIMATION ═══════════ */
.zn-fade-in { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; }
.zn-fade-in.visible { opacity: 1; transform: translateY(0); }

html,
body {
  background:
    radial-gradient(1200px 520px at -5% -10%, rgba(13, 110, 253, 0.12), transparent 60%),
    radial-gradient(900px 460px at 108% 0%, rgba(46, 196, 182, 0.12), transparent 55%),
    linear-gradient(180deg, var(--zn-bg-2) 0%, var(--zn-bg-1) 220px, #f9fbfe 100%);
  color: var(--zn-ink);
}

body,
body p,
body li,
body a,
body button,
body input,
body textarea,
body select {
  font-family: "Space Grotesk", "Source Sans Pro", sans-serif;
}

h1,
h2,
h3,
h4,
.navbar-brand {
  letter-spacing: 0.01em;
  font-weight: 700;
}

.navbar.fixed-top {
  border-bottom: 1px solid rgba(13, 110, 253, 0.12) !important;
}

.navbar .nav-link {
  border-radius: 10px;
  padding: 0.45rem 0.75rem !important;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: rgba(13, 110, 253, 0.11);
  color: #083f99 !important;
  transform: translateY(-1px);
}

.navbar .dropdown-menu {
  border: 1px solid rgba(13, 110, 253, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(16, 32, 51, 0.16);
  overflow: hidden;
}

.navbar .dropdown-item {
  padding: 0.55rem 1rem;
}

.navbar .dropdown-item:hover {
  background: rgba(13, 110, 253, 0.1);
}

.article-clean .container,
.container#intro,
.container#services,
.container#products,
.container#branches,
.container#contacts,
.container#impressum,
.container#datenschutz {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(13, 110, 253, 0.08);
  border-radius: var(--zn-radius);
  box-shadow: var(--zn-shadow);
  backdrop-filter: blur(6px);
}

.article-clean .container {
  padding: 1.15rem 1.2rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

#products .produkt-card,
#products .card,
[id*="redsight"],
[id*="security-news"],
[id*="csaf"],
[id*="sbom"] {
  background: var(--zn-surface);
  border: 1px solid rgba(16, 32, 51, 0.09);
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(16, 32, 51, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

#products .produkt-card:hover,
#products .card:hover,
[id*="redsight"]:hover,
[id*="security-news"]:hover,
[id*="csaf"]:hover,
[id*="sbom"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgba(16, 32, 51, 0.14);
  border-color: rgba(13, 110, 253, 0.24);
}

button,
.btn,
a.btn,
input[type="submit"] {
  border-radius: 12px !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

button:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(16, 32, 51, 0.15);
}

@keyframes zn-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-clean .container {
  animation: zn-fade-up 460ms ease both;
}

@media (max-width: 768px) {
  .article-clean .container {
    border-radius: 12px;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    padding: 0.95rem 0.85rem;
  }

  .navbar .nav-link {
    margin-bottom: 0.2rem;
  }
}