.elementor-17 .elementor-element.elementor-element-211f7efa{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:999;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-211f7efa{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-581a3552 */<!-- KONSOLIDIERTER MARINE TECH HEADER (FIXED DIV-WRAPPER) -->
<div class="apple-header-marine" id="mainHeader">
  <div class="header-container">
    
    <!-- UX PILL-SWITCHER -->
    <div class="pill-switcher-container" title="Zwischen den Unternehmen wechseln">
      <a href="/" id="pillTabHE" class="switcher-tab">HE-INVENT</a>
      <div class="switcher-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 1l4 4-4 4"/>
          <path d="M3 11V9a4 4 0 0 1 4-4h14"/>
          <path d="M7 23l-4-4 4-4"/>
          <path d="M21 13v2a4 4 0 0 1-4 4H3"/>
        </svg>
      </div>
      <a href="https://esfarjanih.sg-host.com/mmm-system-technology-gmbh/" id="pillTabMMM" class="switcher-tab">MMM<span class="logo-geo-dot"></span></a>
    </div>

    <!-- RECHTE SEITE (CTA & BURGER) -->
    <div class="header-right-wrap">
      <a href="/kontakt" class="apple-btn-dark">Erstgespräch</a>
      <button class="menu-icon-btn" id="burgerToggle" onclick="toggleMarineMenu(event)" aria-label="Menü öffnen">
        <svg class="burger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="7" x2="21" y2="7" class="line-top"></line>
          <line x1="3" y1="12" x2="21" y2="12" class="line-mid"></line>
          <line x1="3" y1="17" x2="21" y2="17" class="line-bot"></line>
        </svg>
      </button>
    </div>
  </div>
</div>

<!-- DROPDOWN MENU ALS FIXIERTES OVERLAY -->
<div class="apple-dropdown-menu" id="dropdownMenu">
  <div class="dropdown-container">
    <div class="dropdown-grid">
      
      <!-- SPALTE 1: HE-INVENT -->
      <div class="dropdown-column">
        <div class="column-category-label">Umwelt- & Technologieforschung</div>
        <a href="/" id="dropCardHE" class="company-switch-card">
          <div class="card-top-row">
            <span class="company-meta">HE-Invent GmbH & Co. KG</span>
            <span id="dropBadgeHE" class="menu-badge">Lade...</span>
          </div>
          <span id="dropActionHE" class="company-action he-action-text">Zu HE-Invent wechseln &rarr;</span>
        </a>
        <nav class="dropdown-nav">
          <a href="/#leitmotiv" class="dropdown-link" onclick="closeMarineMenu()">Leitmotiv & Natur</a>
          <a href="/#spezialbereiche" class="dropdown-link" onclick="closeMarineMenu()">5 Spezialbereiche</a>
          <a href="/#grundgedanke" class="dropdown-link" onclick="closeMarineMenu()">QBM & KI/NI Brücke</a>
        </nav>
      </div>

      <!-- SPALTE 2: MMM -->
      <div class="dropdown-column">
        <div class="column-category-label">Prozess-Synchronität & Consulting</div>
        <a href="https://esfarjanih.sg-host.com/mmm-system-technology-gmbh/" id="dropCardMMM" class="company-switch-card">
          <div class="card-top-row">
            <span class="company-meta">MMM System + Technology</span>
            <span id="dropBadgeMMM" class="menu-badge">Lade...</span>
          </div>
          <span id="dropActionMMM" class="company-action mmm-action-text">Zu MMM wechseln &rarr;</span>
        </a>
        <nav class="dropdown-nav">
          <a href="https://esfarjanih.sg-host.com/mmm-system-technology-gmbh/#mmm-hero" class="dropdown-link" onclick="closeMarineMenu()">Triple M Profil</a>
          <a href="https://esfarjanih.sg-host.com/mmm-system-technology-gmbh/#geschaeftsmodell" class="dropdown-link" onclick="closeMarineMenu()">Geschäftsmodell</a>
          <a href="https://esfarjanih.sg-host.com/mmm-system-technology-gmbh/#vergutung-leistungen" class="dropdown-link" onclick="closeMarineMenu()">Kernleistungen & 3M</a>
        </nav>
      </div>

    </div>
  </div>
</div>

<style>
  a, button, div, span, .switcher-tab, .pill-switcher-container, .menu-icon-btn {
    -webkit-tap-highlight-color: transparent !important;
  }

  html { scroll-behavior: smooth; scroll-padding-top: 90px; }
  body { padding-top: 70px !important; }

  /* HEADER BASIS */
  .apple-header-marine {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important;
    height: 70px !important;
    z-index: 999999 !important; 
    background: rgba(248, 250, 252, 0.95) !important;
    backdrop-filter: blur(20px) !important; 
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  .header-container { max-width: 1200px; margin: 0 auto; height: 70px; padding: 0 24px; display: flex !important; align-items: center; justify-content: space-between; }

  /* UX PILL-SWITCHER */
  .pill-switcher-container {
    display: inline-flex !important; align-items: center; background: #f1f5f9; 
    padding: 4px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.04);
  }
  .switcher-tab {
    display: flex; align-items: center; gap: 4px; padding: 7px 16px;
    font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 0.02em; text-decoration: none !important; transition: all 0.2s ease; border-radius: 999px; 
  }
  .tab-active { background: #ffffff; color: #1e3a8a; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); cursor: default; pointer-events: none; }
  .tab-inactive { color: #64748b; font-weight: 700; cursor: pointer; }
  .tab-inactive:hover { color: #1e3a8a; background: rgba(0, 0, 0, 0.03); }
  .switcher-icon { color: #94a3b8; margin: 0 2px; display: flex; align-items: center; }
  .logo-geo-dot { width: 5px; height: 5px; background-color: #d97706; border-radius: 50%; display: inline-block; margin-left: 2px; }

  /* RECHTE SEITE & CTA */
  .header-right-wrap { display: flex !important; align-items: center; gap: 20px; }
  .apple-btn-dark { font-size: 13.5px; font-weight: 600; color: #ffffff !important; background: #0a192f; padding: 10px 22px; border-radius: 999px; text-decoration: none !important; transition: all 0.2s ease; }
  .apple-btn-dark:hover { background: #1e3a8a; }
  .menu-icon-btn { background: none !important; border: none !important; cursor: pointer; padding: 0; display: flex !important; color: #0a192f; z-index: 99999999 !important; }
  .burger-icon line { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; transform-origin: center; }
  .menu-icon-btn.is-active .line-top { transform: translateY(5px) rotate(45deg); }
  .menu-icon-btn.is-active .line-mid { opacity: 0; }
  .menu-icon-btn.is-active .line-bot { transform: translateY(-5px) rotate(-45deg); }

  /* FIXIERTES OVERLAY DROPDOWN */
  .apple-dropdown-menu {
    position: fixed !important; top: 70px !important; left: 0 !important; width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(25px) !important;
    border-bottom: 1px solid rgba(30, 58, 138, 0.1) !important; box-shadow: 0 20px 40px rgba(10, 25, 47, 0.12);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999998 !important;
  }
  .apple-dropdown-menu.is-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; }

  .dropdown-container { max-width: 1120px; margin: 0 auto; padding: 30px 24px; }
  .dropdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
  .dropdown-column { display: flex; flex-direction: column; }
  .column-category-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; margin-bottom: 8px; }

  /* Menü Karten */
  .company-switch-card { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 14px; text-decoration: none !important; margin-bottom: 16px; transition: all 0.25s ease; border: 1px solid rgba(0,0,0,0.05); }
  .card-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .company-meta { font-size: 13.5px; font-weight: 800; color: #0a192f; text-transform: uppercase; letter-spacing: 0.03em; }
  .company-action { font-size: 12.5px; font-weight: 700; margin-top: 4px; }

  .drop-card-active { background: #f8fafc; border-left: 3px solid #64748b; pointer-events: none; }
  .drop-card-inactive:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
  .menu-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; }

  /* Sublinks */
  .dropdown-nav { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; border-left: 2px solid rgba(0,0,0,0.05); }
  .dropdown-link { font-size: 13.5px; color: #475569; padding: 7px 12px; border-radius: 8px; text-decoration: none !important; transition: all 0.2s ease; cursor: pointer; }
  .dropdown-link:hover { color: #0a192f; background: rgba(0,0,0,0.04); transform: translateX(4px); font-weight: 500; }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var currentUrl = window.location.href;
    var isMMM = currentUrl.includes("mmm-system-technology-gmbh");

    var pillHE = document.getElementById('pillTabHE');
    var pillMMM = document.getElementById('pillTabMMM');
    
    var dropCardHE = document.getElementById('dropCardHE');
    var dropCardMMM = document.getElementById('dropCardMMM');
    var dropBadgeHE = document.getElementById('dropBadgeHE');
    var dropBadgeMMM = document.getElementById('dropBadgeMMM');
    var dropActionHE = document.getElementById('dropActionHE');
    var dropActionMMM = document.getElementById('dropActionMMM');

    if (isMMM) {
      if(pillMMM) pillMMM.classList.add('tab-active');
      if(pillHE) pillHE.classList.add('tab-inactive');

      if(dropCardMMM) {
        dropCardMMM.classList.add('drop-card-active');
        dropCardMMM.style.borderLeftColor = '#1e3a8a';
        dropCardMMM.style.background = '#eff6ff';
      }
      if(dropBadgeMMM) {
        dropBadgeMMM.textContent = "Aktueller Bereich";
        dropBadgeMMM.style.background = "#e2e8f0";
        dropBadgeMMM.style.color = "#475569";
      }
      if(dropActionMMM) dropActionMMM.style.display = "none";

      if(dropCardHE) dropCardHE.classList.add('drop-card-inactive');
      if(dropBadgeHE) {
        dropBadgeHE.textContent = "Partnerseite";
        dropBadgeHE.style.background = "#d97706";
        dropBadgeHE.style.color = "#ffffff";
      }
      if(dropActionHE) {
        dropActionHE.style.display = "block";
        dropActionHE.style.color = "#b45309";
      }
    } else {
      if(pillHE) pillHE.classList.add('tab-active');
      if(pillMMM) pillMMM.classList.add('tab-inactive');

      if(dropCardHE) {
        dropCardHE.classList.add('drop-card-active');
        dropCardHE.style.borderLeftColor = '#d97706';
        dropCardHE.style.background = '#fffbeb';
      }
      if(dropBadgeHE) {
        dropBadgeHE.textContent = "Aktueller Bereich";
        dropBadgeHE.style.background = "#e2e8f0";
        dropBadgeHE.style.color = "#475569";
      }
      if(dropActionHE) {
        dropActionHE.style.display = "none";
      }

      if(dropCardMMM) dropCardMMM.classList.add('drop-card-inactive');
      if(dropBadgeMMM) {
        dropBadgeMMM.textContent = "Partnerseite";
        dropBadgeMMM.style.background = "#1e3a8a";
        dropBadgeMMM.style.color = "#ffffff";
      }
      if(dropActionMMM) {
        dropActionMMM.style.display = "block";
        dropActionMMM.style.color = "#1e3a8a";
      }
    }
  });

  function toggleMarineMenu(event) {
    if(event) event.preventDefault();
    var btn = document.getElementById('burgerToggle');
    var menu = document.getElementById('dropdownMenu');
    if(btn && menu) {
      btn.classList.toggle('is-active');
      menu.classList.toggle('is-open');
    }
  }

  function closeMarineMenu() {
    var btn = document.getElementById('burgerToggle');
    var menu = document.getElementById('dropdownMenu');
    if(btn) btn.classList.remove('is-active');
    if(menu) menu.classList.remove('is-open');
  }

  document.addEventListener('click', function(event) {
    var btn = document.getElementById('burgerToggle');
    var menu = document.getElementById('dropdownMenu');
    if (menu && btn) {
      if (!menu.contains(event.target) && !btn.contains(event.target) && menu.classList.contains('is-open')) {
        closeMarineMenu();
      }
    }
  });
</script>/* End custom CSS */