@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-normal-500.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-italic-300.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-normal-300.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-normal-400.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-normal-500.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── Color palette ─────────────────────────────────────────── */
    :root {
      /* Deep navy – authority, depth, the ocean at night */
      --navy:       #08162a;
      --navy-mid:   #0f2742;
      --navy-card:  #162d4a;
      --navy-line:  #1e3d60;

      /* Cyan – maritime, the North Sea, innovation */
      --cyan:       #0284c7;
      --cyan-bright:#06b6d4;
      --cyan-glow:  rgba(6,182,212,0.12);

      /* Brass / warm gold – contrast, achievement, authority */
      --gold:       #b5831f;
      --gold-light: #d4a030;

      /* Light backgrounds */
      --light:      #f0f7ff;
      --light-tint: #dbeafe;

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body:    'DM Sans', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; font-size: 17px; }

    body {
      background: var(--light);
      color: var(--navy);
      -webkit-font-smoothing: antialiased;
      font-family: var(--font-body);
      line-height: 1.7;
    }

    /* ── Animations ─────────────────────────────────────────────── */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes waveMove {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .anim-up { opacity: 0; animation: fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }
    .anim-in { opacity: 0; animation: fadeIn 1s ease forwards; }
    .d0 { animation-delay: 0s; }
    .d1 { animation-delay: 0.15s; }
    .d2 { animation-delay: 0.3s; }
    .d3 { animation-delay: 0.45s; }
    .d5 { animation-delay: 0.75s; }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* ── Layout ─────────────────────────────────────────────────── */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
    @media(min-width:1024px){ .container { padding: 0 3rem; } }

    .section-py  { padding-top: 5rem; padding-bottom: 5rem; }
    @media(min-width:1024px){ .section-py { padding-top: 9rem; padding-bottom: 9rem; } }

    .section-py-sm { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    @media(min-width:1024px){ .section-py-sm { padding-top: 5rem; padding-bottom: 5rem; } }

    .px { padding-left: 1.25rem; padding-right: 1.25rem; }
    @media(min-width:1024px){ .px { padding-left: 3rem; padding-right: 3rem; } }

    .fd { font-family: var(--font-display); }
    .fb { font-family: var(--font-body); }

    /* ── Grid ───────────────────────────────────────────────────── */
    .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1px; }
    @media(min-width:768px){ .grid-3 { grid-template-columns: repeat(3,1fr); } }

    .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1px; }
    @media(min-width:768px){ .grid-2 { grid-template-columns: repeat(2,1fr); } }

    .grid-2-lg { display: grid; grid-template-columns: 1fr; gap: 3rem; }
    @media(min-width:1024px){ .grid-2-lg { grid-template-columns: repeat(2,1fr); gap: 5rem; } }

    .grid-4 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; }
    @media(min-width:768px){ .grid-4 { grid-template-columns: repeat(4,1fr); } }

    /* ── Typography ─────────────────────────────────────────────── */
    .eyebrow {
      font-family: var(--font-body);
      font-size: 0.62rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      display: block;
    }

    /* ── Buttons ────────────────────────────────────────────────── */
    .btn {
      font-family: var(--font-body);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.9rem 2rem;
      display: inline-block;
      transition: all 0.3s;
      cursor: pointer;
      border: none;
      text-align: center;
    }
    .btn-cyan  { background: var(--cyan); color: #fff; }
    .btn-cyan:hover { background: var(--cyan-bright); }
    .btn-gold  { background: var(--gold); color: #fff; }
    .btn-gold:hover { background: var(--gold-light); }
    .btn-outline-light { border: 1px solid rgba(240,247,255,0.3); color: var(--light); background: transparent; }
    .btn-outline-light:hover { border-color: var(--light); background: rgba(240,247,255,0.07); }
    .btn-outline-cyan { border: 1px solid var(--cyan); color: var(--cyan); background: transparent; }
    .btn-outline-cyan:hover { background: var(--cyan); color: #fff; }
    .btn-navy  { background: var(--navy); color: var(--light); }
    .btn-navy:hover { background: var(--navy-mid); }
    .btn-light { background: var(--light); color: var(--navy); }
    .btn-light:hover { background: #fff; }

    .cta-row { display: flex; flex-direction: column; gap: 0.75rem; }
    @media(min-width:540px){ .cta-row { flex-direction: row; } }

    /* ── Navigation ─────────────────────────────────────────────── */
    #nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      transition: all 0.4s;
      background: transparent;
    }
    #nav.scrolled, #nav.menu-open {
      background: var(--navy);
      box-shadow: 0 2px 32px rgba(0,0,0,0.45);
      border-bottom: 1px solid var(--navy-line);
    }
    .nav-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
      height: 4.75rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    @media(min-width:1024px){ .nav-inner { padding: 0 3rem; } }

    .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; cursor: pointer; }
    .nav-logo svg { width: 2.1rem; height: 2.1rem; color: var(--cyan-bright); transition: color 0.3s; }
    .nav-logo:hover svg { color: var(--gold-light); }
    .nav-logo-text {
      font-family: var(--font-display);
      color: var(--light);
      font-size: 1.05rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 300;
    }

    .nav-links { display: none; align-items: center; gap: 2rem; }
    @media(min-width:1024px){ .nav-links { display: flex; } }

    .nav-link {
      font-family: var(--font-body); font-size: 0.68rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      text-decoration: none; color: rgba(240,247,255,0.65);
      transition: color 0.2s; cursor: pointer;
      background: none; border: none;
    }
    .nav-link:hover, .nav-link.active { color: var(--light); }
    .nav-link.active { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cyan-bright); }

    .nav-contact {
      font-family: var(--font-body); font-size: 0.68rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      border: 1px solid var(--cyan); color: var(--cyan);
      padding: 0.55rem 1.2rem; transition: all 0.3s;
      text-decoration: none; cursor: pointer; background: none;
    }
    .nav-contact:hover { background: var(--cyan); color: #fff; }

    .hamburger { display: flex; flex-direction: column; gap: 5px; padding: 0.5rem; background: none; border: none; cursor: pointer; }
    @media(min-width:1024px){ .hamburger { display: none; } }
    .ham-line { display: block; height: 2px; width: 1.5rem; background: var(--light); transition: all 0.3s; transform-origin: center; }
    .hamburger.open .ham-line:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open .ham-line:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

    .mobile-menu { display: none; background: var(--navy); border-top: 1px solid var(--navy-line); overflow: hidden; max-height: 0; transition: max-height 0.5s ease; }
    @media(max-width:1023px){ .mobile-menu { display: block; } }
    .mobile-menu.open { max-height: 24rem; }
    .mobile-nav { padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
    .mobile-nav-link { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,247,255,0.7); text-decoration: none; cursor: pointer; background: none; border: none; }
    .mobile-nav-link:hover { color: var(--light); }

    

    /* ── Hero ───────────────────────────────────────────────────── */
    #hero {
      position: relative; min-height: 100vh;
      background: var(--navy);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding-bottom: 5rem; overflow: hidden;
    }
    @media(min-width:1024px){ #hero { padding-bottom: 9rem; } }

    /* Subtle depth gradient */
    .hero-gradient {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 70% 40%, rgba(2,132,199,0.08) 0%, transparent 65%),
                  radial-gradient(ellipse at 10% 80%, rgba(6,182,212,0.05) 0%, transparent 55%);
    }
    /* Technical grid */
    .hero-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(6,182,212,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,182,212,0.06) 1px, transparent 1px);
      background-size: 72px 72px;
    }
    /* Horizon wave line */
    .hero-wave {
      position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, transparent, var(--cyan-bright), var(--cyan), transparent);
      opacity: 0.6;
    }
    /* Top accent line */
    .hero-top-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan-bright), var(--cyan), transparent); }

    /* DZ watermark */
    .hero-dz {
      position: absolute; right: -1rem; bottom: 0;
      font-family: var(--font-display); color: var(--light); line-height: 1;
      font-size: clamp(8rem,28vw,22rem); opacity: 0.018;
      user-select: none; pointer-events: none;
    }

    /* Coordinate decoration */
    .hero-coords {
      position: absolute; top: 7rem; right: 1.5rem;
      font-family: var(--font-body); font-size: 0.58rem;
      letter-spacing: 0.2em; color: rgba(6,182,212,0.3);
      writing-mode: vertical-rl; text-transform: uppercase;
      display: none;
    }
    @media(min-width:1024px){ .hero-coords { display: block; } }

    .hero-content {
      position: relative; z-index: 1;
      max-width: 1280px; margin: 0 auto;
      padding: 8rem 1.25rem 0; width: 100%;
    }
    @media(min-width:1024px){ .hero-content { padding: 8rem 3rem 0; } }

    .hero-scroll {
      position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    }
    .hero-scroll span { font-family: var(--font-body); color: rgba(6,182,212,0.35); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; }
    .hero-scroll-line { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, rgba(6,182,212,0.35), transparent); }

    /* ── Stat strip ─────────────────────────────────────────────── */
    .stat-strip {
      background: var(--navy-mid);
      border-top: 1px solid var(--navy-line);
      border-bottom: 1px solid var(--navy-line);
    }
    .stat-strip-inner {
      max-width: 1280px; margin: 0 auto; padding: 1.5rem;
      display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
    }
    @media(min-width:640px){ .stat-strip-inner { grid-template-columns: repeat(4,1fr); } }
    @media(min-width:1024px){ .stat-strip-inner { padding: 1.5rem 3rem; } }
    .stat-item { text-align: center; padding: 1rem 0; border-right: 1px solid var(--navy-line); }
    .stat-item:last-child { border-right: none; }
    .stat-num { font-family: var(--font-display); color: var(--cyan-bright); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 300; display: block; line-height: 1; margin-bottom: 0.35rem; }
    .stat-label { font-family: var(--font-body); color: rgba(240,247,255,0.45); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }

    /* ── Section styles ─────────────────────────────────────────── */
    .bg-navy  { background: var(--navy); }
    .bg-mid   { background: var(--navy-mid); }
    .bg-light { background: var(--light); }
    .bg-white { background: #fff; }
    .bg-cyan-strip { background: var(--cyan); }
    .bg-gold  { background: var(--gold); }

    /* ── Expertise cards ────────────────────────────────────────── */
    .exp-card {
      background: var(--navy-card);
      border: 1px solid var(--navy-line);
      padding: 1.75rem;
      transition: border-color 0.3s, background 0.3s;
      height: 100%;
    }
    @media(min-width:1024px){ .exp-card { padding: 2.5rem; } }
    .exp-card:hover { border-color: var(--cyan); background: rgba(22,45,74,0.8); }

    /* ── Light card ─────────────────────────────────────────────── */
    .light-card {
      background: #fff;
      border: 1px solid rgba(8,22,42,0.08);
      padding: 2rem;
    }
    @media(min-width:1024px){ .light-card { padding: 2.5rem; } }

    /* ── Tinted card ────────────────────────────────────────────── */
    .tint-card {
      background: rgba(219,234,254,0.4);
      border: 1px solid rgba(2,132,199,0.12);
      padding: 2rem;
    }
    @media(min-width:1024px){ .tint-card { padding: 2.5rem; } }

    /* ── Tag ────────────────────────────────────────────────────── */
    .tag { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid; padding: 0.35rem 0.75rem; display: inline-block; }
    .tag-navy  { border-color: rgba(240,247,255,0.15); color: rgba(240,247,255,0.35); }
    .tag-dark  { border-color: rgba(8,22,42,0.2); color: rgba(8,22,42,0.5); }
    .tag-cyan  { border-color: rgba(2,132,199,0.4); color: var(--cyan); }

    /* ── Flex helpers ───────────────────────────────────────────── */
    .flex-gap-3 { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .flex-col-gap-3 { display: flex; flex-direction: column; gap: 0.75rem; }

    /* ── Borders ────────────────────────────────────────────────── */
    .border-l-cyan { border-left: 2px solid var(--cyan); padding-left: 1.25rem; }
    .border-l-gold { border-left: 2px solid var(--gold); padding-left: 1.25rem; }
    .border-l-light { border-left: 2px solid rgba(240,247,255,0.2); padding-left: 1.25rem; }

    /* ── Vita ───────────────────────────────────────────────────── */
    .vita-item {
      display: grid; grid-template-columns: 1fr; gap: 1rem;
      border-top: 1px solid var(--navy-line); padding: 2.5rem 0;
    }
    @media(min-width:1024px){ .vita-item { grid-template-columns: 200px 1fr; } }

    /* ── Service item ───────────────────────────────────────────── */
    .service-item { display: grid; grid-template-columns: 1fr; gap: 1px; }
    @media(min-width:1024px){ .service-item { grid-template-columns: 1fr 2fr; } }

    /* ── Testimonial ────────────────────────────────────────────── */
    .testimonial-item { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid rgba(8,22,42,0.08); }
    @media(min-width:1024px){ .testimonial-item { grid-template-columns: 1fr 260px; } }
    .testimonial-side { border-top: 1px solid rgba(8,22,42,0.08); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; }
    @media(min-width:1024px){ .testimonial-side { border-top: none; border-left: 1px solid rgba(8,22,42,0.08); padding: 2.5rem; } }

    /* ── Footer ─────────────────────────────────────────────────── */
    footer { background: var(--navy); color: var(--light); }
    .footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
    @media(min-width:768px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media(min-width:1024px){ .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
    .footer-link { font-family: var(--font-body); font-size: 0.85rem; color: rgba(240,247,255,0.5); text-decoration: none; cursor: pointer; background: none; border: none; display: block; transition: color 0.2s; padding: 0; text-align: left; }
    .footer-link:hover { color: var(--cyan-bright); }
    .social-link { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(240,247,255,0.35); text-decoration: none; transition: color 0.2s; }
    .social-link:hover { color: var(--cyan-bright); }

    /* ── Form ───────────────────────────────────────────────────── */
    .form-label { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(8,22,42,0.45); display: block; margin-bottom: 0.5rem; }
    .form-input { width: 100%; background: transparent; border: 1px solid rgba(8,22,42,0.18); padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.95rem; color: rgba(8,22,42,0.3); outline: none; cursor: not-allowed; }
    .form-input::placeholder { color: rgba(8,22,42,0.22); }

    /* ── Cert grid ──────────────────────────────────────────────── */
    .cert-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
    @media(min-width:640px){ .cert-grid { grid-template-columns: repeat(2,1fr); } }
    @media(min-width:1024px){ .cert-grid { grid-template-columns: repeat(3,1fr); } }

    /* ── Value grid ─────────────────────────────────────────────── */
    .value-grid { display: grid; grid-template-columns: 1fr; gap: 1px; }
    @media(min-width:640px){ .value-grid { grid-template-columns: repeat(2,1fr); } }

    /* ── Shop / other 2-col ─────────────────────────────────────── */
    .shop-grid { display: grid; grid-template-columns: 1fr; gap: 1px; }
    @media(min-width:640px){ .shop-grid { grid-template-columns: repeat(2,1fr); } }

    /* ── Zielgruppen ────────────────────────────────────────────── */
    .zg-block { border-top: 1px solid rgba(240,247,255,0.15); padding-top: 2rem; }

    /* ── Expertise number ───────────────────────────────────────── */
    .exp-num { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(240,247,255,0.3); margin-bottom: 1.5rem; display: block; }

    /* ── Source badge ───────────────────────────────────────────── */
    .source-badge { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.25rem 0.75rem; border: 1px solid; display: inline-block; margin-bottom: 1.25rem; }

    /* ── Misc ───────────────────────────────────────────────────── */
    .cyan-line { height: 2px; background: linear-gradient(90deg, var(--cyan-bright), var(--cyan), transparent); }
    .navy-line-el { height: 1px; background: var(--navy-line); }
  


  /* ── Expertise split hero ──────────────────────────────────── */
  .exp-split {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--navy);
    overflow: hidden;
  }
  @media(min-width:1024px){
    .exp-split { grid-template-columns: 55fr 45fr; min-height: 90vh; }
  }

  /* Mobile: text below photo */
  .exp-split-text {
    order: 2;
    padding: 2.5rem 1.25rem 4rem;
    display: flex; flex-direction: column; justify-content: center;
  }
  @media(min-width:1024px){
    .exp-split-text { order: 1; padding: 10rem 3rem 6rem; }
  }

  /* Mobile: tall full-width photo at the top */
  .exp-split-photo {
    order: 1;
    position: relative;
    height: 90vw;
    min-height: 340px;
    max-height: 520px;
    margin-bottom: -2px; /* kill sub-pixel gap between photo and text */
  }
  .exp-split-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
  }
  /* Gentle fade only at bottom edge — no top bar */
  .exp-split-photo::after {
    content: '';
    position: absolute;
    inset: 0 0 -3px 0; /* extend 3px past container bottom */
    background: linear-gradient(to bottom,
      transparent 50%,
      rgba(8,22,42,0.55) 75%,
      var(--navy) 98%
    );
  }

  @media(min-width:1024px){
    .exp-split-photo {
      order: 2;
      height: auto;
      min-height: auto;
      max-height: none;
    }
    .exp-split-photo::after {
      background: linear-gradient(to right, var(--navy) 0%, rgba(8,22,42,0.3) 40%, transparent 100%);
    }
  }

  .leitbild-item { display: flex; align-items: flex-start; gap: 1rem; }