/* ==========================================================
   VORMELO HEADER – ZENTRALE, STABILE VERSION
========================================================== */
.site-header{position:sticky;top:0;z-index:5000;overflow:visible;border-bottom:1px solid rgba(213,224,239,.9);background:#fff;box-shadow:0 4px 22px rgba(15,40,75,.045)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;flex:0 0 auto;align-items:center;gap:11px;min-width:max-content;color:#0b1930}

.brand-logo{
    width:56px;
    height:56px;
    flex:0 0 56px;
    object-fit:contain;
}

.brand-name{
    font-size:1.40rem;
    line-height:1;
    font-weight:850;
    letter-spacing:-.045em;
}



.main-navigation{display:flex;align-items:center;justify-content:center;gap:26px;margin-left:auto;background:#fff}
.main-navigation a{position:relative;white-space:nowrap;color:#122139;font-size:.86rem;font-weight:750;transition:color .2s ease,background .2s ease}
.main-navigation a:hover,.main-navigation a.active,.main-navigation a.is-active,.main-navigation a[aria-current="page"]{color:var(--primary)}
.main-navigation a::after{content:"⌄";margin-left:6px;font-size:.65rem}.main-navigation a:nth-child(3)::after{content:""}
.header-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:14px;
}

/* ==========================================================
   DESKTOP-SPRACHDROPDOWN
========================================================== */

.language-dropdown{
  position:relative;
  flex:0 0 auto;
}

.language-dropdown-trigger{
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:7px 10px;

  border:1px solid #e2e9f3;
  border-radius:10px;

  background:#f8fbff;
  color:#52647d;

  font-size:.78rem;
  font-weight:850;
  line-height:1;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.language-dropdown-trigger:hover,
.language-dropdown.is-open .language-dropdown-trigger{
  border-color:rgba(37,99,235,.28);
  background:#ffffff;
  color:var(--primary);

  box-shadow:
    0 6px 18px rgba(30,70,125,.10);
}

.language-dropdown-trigger img,
.language-dropdown-option img{
  display:block;
  flex:0 0 auto;

  border-radius:3px;
  object-fit:cover;

  box-shadow:
    0 0 0 1px rgba(15,23,42,.09);
}

.language-dropdown-trigger img{
  width:22px;
  height:16px;
}

.language-dropdown-chevron{
  width:16px;
  height:16px;
  flex:0 0 auto;

  transition:transform .2s ease;
}

.language-dropdown.is-open .language-dropdown-chevron{
  transform:rotate(180deg);
}

.language-dropdown-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:5300;

    display:flex;
    flex-direction:column;
    gap:4px;

    width:220px;
    padding:7px;

    border:1px solid #dfe7f2;
    border-radius:13px;

    background:#ffffff;

    box-shadow:
        0 22px 55px rgba(15,40,75,.17);

    transform-origin:top right;
}

.language-dropdown-menu[hidden]{
    display:none !important;
}

.language-dropdown.is-open .language-dropdown-menu{
    display:flex;
    animation:languageDropdownOpen .16s ease both;
}

@keyframes languageDropdownOpen{
  from{
    opacity:0;
    transform:translateY(-5px) scale(.98);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.language-dropdown-option{
    display:grid;
    width:100%;

    min-height:46px;

    grid-template-columns:
        18px
        24px
        34px
        1fr;

    align-items:center;
    gap:9px;

    padding:8px 10px;

    border:0;
    border-radius:9px;

    background:transparent;
    color:#52647d;

    text-align:left;
    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease;
}

.language-dropdown-option:hover,
.language-dropdown-option:focus-visible{
  background:#f2f7ff;
  color:#173b70;
  outline:none;
}

.language-dropdown-option.is-active,
.language-dropdown-option[aria-checked="true"]{
  background:#edf5ff;
  color:var(--primary);
}

.language-dropdown-option img{
  width:24px;
  height:17px;
}

.language-dropdown-check{
  color:transparent;
  font-size:.8rem;
  font-weight:900;
}

.language-dropdown-option.is-active .language-dropdown-check,
.language-dropdown-option[aria-checked="true"] .language-dropdown-check{
  color:var(--primary);
}

.language-dropdown-option-code{
  font-size:.75rem;
  font-weight:900;
}

.language-dropdown-option-label{
  overflow:hidden;

  font-size:.82rem;
  font-weight:750;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.login-link{
  white-space:nowrap;
  color:#17263d;
  font-size:.84rem;
  font-weight:750;
}

.header-actions .button-small{
  min-height:42px;
  padding-inline:17px;
  white-space:nowrap;
  border-radius:10px;
  font-size:.82rem;
}


.mobile-menu-button{display:none;width:44px;height:44px;padding:10px;border:1px solid #dde6f1;border-radius:11px;background:#fff}
.mobile-menu-button>span:not(.sr-only){display:block;width:100%;height:2px;margin:5px 0;border-radius:999px;background:#122139;transition:transform .18s ease,opacity .18s ease}
.mobile-menu-button[aria-expanded="true"]>span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mobile-menu-button[aria-expanded="true"]>span:nth-child(2){opacity:0}.mobile-menu-button[aria-expanded="true"]>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu-extra{display:none}
@media(max-width:1180px){.header-inner{gap:18px}

.brand-logo{width:42px;height:42px;flex-basis:42px}.brand-name{font-size:1.32rem}.main-navigation{gap:17px}.main-navigation a{font-size:.79rem}.header-actions{gap:10px}.login-link{display:none}.header-actions .button-small{padding-inline:14px;font-size:.76rem}}
@media(max-width:900px){
.site-header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-inner{min-height:70px;position:relative}.header-actions{margin-left:auto}

.header-actions .login-link,.header-actions .button,.header-actions .language-dropdown{display:none}.mobile-menu-button{display:block;flex:0 0 auto}
.main-navigation{position:absolute;top:100%;right:0;left:0;z-index:5100;display:none;width:100%;max-height:calc(100vh - 70px);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:14px;overflow-y:auto;border-top:1px solid #e2e8f0;border-bottom:1px solid #dbe4f0;background:#fff;box-shadow:0 18px 35px rgba(15,40,75,.16)}
.main-navigation.is-open{display:flex}.main-navigation>a{display:flex;width:100%;min-height:54px;align-items:center;padding:0 14px;border-bottom:1px solid #edf1f6;background:#fff;color:#0b1930;font-size:1rem;font-weight:750;line-height:1.3}.main-navigation>a:last-of-type{border-bottom:0}.main-navigation>a::after{margin-left:auto}


.mobile-menu-extra{
  display:block;
  margin-top:4px;
  padding:20px 8px 8px;

  border-top:1px solid #edf1f6;
  background:#fff;
}

.mobile-language-title{
  margin-bottom:10px;

  color:#64748b;

  font-size:.76rem;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.mobile-language-switcher{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;

  margin-bottom:14px;
}

.mobile-language-switcher button{
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:0 12px;

  border:1px solid #dce5f1;
  border-radius:10px;

  background:#f8fbff;
  color:#52647d;

  font-size:.82rem;
  font-weight:850;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.mobile-language-switcher button img{
  width:24px;
  height:17px;
  flex:0 0 auto;

  border-radius:3px;
  object-fit:cover;

  box-shadow:
    0 0 0 1px rgba(15,23,42,.08);
}

.mobile-language-switcher button span{
  white-space:nowrap;
}

.mobile-language-switcher button:hover{
  background:#eef5ff;
}

.mobile-language-switcher button.is-active,
.mobile-language-switcher button[aria-pressed="true"]{
  border-color:rgba(23,105,255,.35);

  background:#edf5ff;
  color:#1769ff;

  box-shadow:
    0 0 0 3px rgba(23,105,255,.07);
}

.mobile-login-link{
  display:flex;
  min-height:46px;
  align-items:center;
  justify-content:center;

  margin-bottom:10px;

  border:1px solid #dce5f1;
  border-radius:10px;

  background:#fff;
  color:#17263d;

  font-size:.94rem;
  font-weight:800;
}

.mobile-start-button{
  width:100%;
  min-height:48px;
}

body.menu-open{overflow:hidden}body.menu-open::before{display:none!important;content:none!important}}



@media(max-width:520px){.brand{gap:9px}.brand-logo{width:38px;height:38px;flex-basis:38px}.brand-name{font-size:1.22rem}.header-actions .language-dropdown{display:none}.main-navigation{padding:12px}}



.mobile-login-link::after,
.mobile-start-button::after{
  content:none !important;
  display:none !important;
}

/* ==========================================================
   PRODUKTE / LÖSUNGEN – DROPDOWN
========================================================== */

.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.nav-dropdown-trigger{
  display:flex;
  align-items:center;
  gap:6px;

  min-height:42px;
  padding:0;

  border:0;
  background:transparent;

  color:#122139;

  font-family:inherit;
  font-size:.86rem;
  font-weight:750;
  line-height:1;

  cursor:pointer;
}

.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger{
  color:var(--primary);
}

.nav-dropdown-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:.68rem;
  line-height:1;

  transition:transform .18s ease;
}

.nav-dropdown.is-open .nav-dropdown-chevron{
  transform:rotate(180deg);
}


/* Dropdown standardmässig AUSBLENDEN */
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:-14px;
  z-index:5000;

  display:none;

  flex-direction:column;
  gap:3px;

  min-width:260px;
  padding:8px;

  border:1px solid #dfe7f2;
  border-radius:14px;

  background:#ffffff;

  box-shadow:
    0 18px 45px rgba(15,40,75,.16);
}


/* Nur anzeigen, wenn JS is-open setzt */
.nav-dropdown.is-open .nav-dropdown-menu{
  display:flex;
}


.nav-dropdown-menu a{
  display:flex;
  align-items:center;

  width:100%;
  min-height:42px;

  padding:9px 12px;

  border-radius:9px;

  background:transparent;
  color:#17263d;

  font-size:.84rem;
  font-weight:700;
  line-height:1.25;

  text-decoration:none;
}


.nav-dropdown-menu a:hover{
  background:#f2f7ff;
  color:var(--primary);
}


/* Keine zusätzlichen Pfeile an den Dropdown-Einträgen */
.nav-dropdown-menu a::after{
  display:none !important;
  content:none !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:900px){

  .main-navigation > .nav-dropdown{
    display:block;
    width:100%;
  }

  .nav-dropdown-trigger{
    width:100%;
    min-height:54px;

    justify-content:space-between;

    padding:0 14px;

    font-size:1rem;
  }

  .nav-dropdown-menu{
    position:static;

    width:100%;
    min-width:0;

    padding:4px 8px 10px 18px;

    border:0;
    border-radius:0;

    background:#f8fbff;

    box-shadow:none;
  }
}