/* Header Basis */
header {
  background: #fcfbf8;
  box-shadow: 0 0.313em 0.625em rgba(0, 0, 0, 0.1);
  width: 100%;
}

.header-container {
  padding: 1px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertikale Zentrierung */
  max-width: 80em;
  margin: 0 auto;
  height: 80px; /* Feste Höhe für konsistentes Layout */
}

/* Menu Basis */
.menu-button,
.close-button {
  cursor: pointer;
  background-color: transparent;
  border-style: none;
}

/* Initial States */
.menu-wrapper,
.mobile-menu,
.desktop-menu {
  display: none;
}

/* Mobile & Tablet Styles */
@media (max-width: 1024px) {
  /* Changed from 64em */
  .header-container .logo-container img {
    height: 2.25em; /* 36px */
  }

  /* Menu Wrapper */
  .menu-wrapper {
    display: flex;
    align-items: center;
    height: 100%; /* Volle Höhe für vertikale Zentrierung */
  }

  /* Menü-Button besser zentrieren und Abstand reduzieren */
  .menu-wrapper .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px; /* Reduzierter Abstand zum Rand */
    margin-right: 0; /* Kein zusätzlicher Abstand */
  }

  /* Job-Search besser zentrieren */
  .menu-wrapper .job-search {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* Logo-Container für Mobile */
  .header-container .logo-container {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* Höhe des Headers anpassen */
  .header-container {
    height: 60px; /* Etwas kleiner für Mobile */
  }

  /* Close button */
  #mobile-menu .mobile-menu-header .close-button {
    margin-right: 4px;
    margin-top: 7px;
    transform: translatex(0px) translatey(0px);
  }

  /* Mobile menu header - Abstand reduzieren */
  #mobile-menu .mobile-menu-header {
    transform: translatex(0px) translatey(0px);
    padding: 1.25em 10px; /* Reduzierter seitlicher Abstand */
  }

  .menu-wrapper .menu-button {
    color: #081f19;
    font: 500 1.25em/1.875em 'EB Garamond'; /* 20px/30px */
    padding-left: 1.188em; /* 19px */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1.188em; /* Keep your existing padding */
  }

  .menu-wrapper .job-search {
    color: #273b35;
    font: 500 0.75em 'Hind Madurai'; /* 12px */
    display: flex;
    align-items: center;
  }

  /* Mobile Menu */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1000;
    overflow-y: auto;
  }

  .mobile-menu.active {
    display: block;
  }

  .mobile-menu-header {
    padding: 1.25em 10px; /* Reduzierter seitlicher Abstand */
    display: flex;
    justify-content: flex-end; /* Align to the right */
    position: relative; /* Add this */
    right: 0; /* Add this */
  }

  /* Close-Button Abstand reduzieren */
  .close-button {
    color: #081f19;
    font: 500 1.25em 'EB Garamond'; /* 20px */
    padding-right: 0; /* Remove any potential right padding */
    margin-right: 10px; /* Reduzierter Abstand */
  }

  .mobile-menu-nav {
    padding: 2.5em 1.25em 0; /* 40px 20px 0 */
  }

  /* Menu Lists */
  .mobile-menu-list {
    list-style: none;
    margin: 0 auto;
    padding: 0 2.5em; /* 40px */
    max-width: 25em; /* 400px */
  }

  .mobile-menu-list li,
  #menu-menu li {
    margin-bottom: 2em; /* 32px */
  }

  .mobile-menu-list a img {
    padding-right: 1em; /* 16px */
  }

  #menu-menu a img {
    width: 1.5em; /* 24px */
    height: 1.5em;
  }

  #menu-menu a .menu-text {
    color: #081f19;
    font: 500 1.25em/1.875em 'EB Garamond'; /* 20px/30px */
  }

  .job-search a {
    text-decoration: none;
    color: inherit;
  }

  .job-search a:hover {
    text-decoration: underline;
  }
}

/* Desktop Styles */
@media (min-width: 1025px) {
  /* Changed from 64.063em */
  .desktop-menu {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    height: 100%;
  }

  .header-container .logo-container img {
    height: 2.5em; /* 40px */
  }

  .header-container .logo-container {
    padding-top: 0; /* Entfernen des Paddings */
  }

  .desktop-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    align-items: center; /* Vertikale Zentrierung */
    height: 100%;
  }

  .desktop-menu-list a {
    display: flex;
    align-items: baseline;
    gap: 0.5em; /* 8px */
    color: var(--color-primary-deep);
    text-decoration: none;
    font: 500 1em 'EB Garamond'; /* 16px */
  }

  .desktop-menu-list .menu-icon {
    width: 1.25em; /* 20px */
    height: 1.25em;
  }

  .desktop-menu-list .menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Gradual size reduction for logo, menu icons and font */
@media (max-width: 1180px) {
  /* Changed from 73.75em */
  .header-container .logo-container img {
    height: 2.25em; /* 36px */
  }

  .desktop-menu-list .menu-icon {
    width: 1.125em; /* 18px */
    height: 1.125em;
  }

  .desktop-menu-list a {
    font-size: 0.938em; /* 15px */
  }
}

@media (max-width: 1140px) {
  /* Changed from 71.25em */
  .header-container .logo-container img {
    height: 2em; /* 32px */
  }

  .desktop-menu-list .menu-icon {
    width: 1em; /* 16px */
    height: 1em;
  }

  .desktop-menu-list a {
    font-size: 0.875em; /* 14px */
  }
}

@media (max-width: 1120px) {
  /* Changed from 70em */
  .header-container .logo-container img {
    height: 1.875em; /* 30px */
  }

  .desktop-menu-list .menu-icon {
    width: 0.938em; /* 15px */
    height: 0.938em;
  }

  .desktop-menu-list a {
    font-size: 0.875em; /* 14px */
  }
}

@media (max-width: 1040px) {
  /* Changed from 65em */
  .header-container .logo-container img {
    height: 1.75em; /* 28px */
  }

  .desktop-menu-list .menu-icon {
    width: 0.875em; /* 14px */
    height: 0.875em;
  }

  .desktop-menu-list a {
    font-size: 0.813em; /* 13px */
  }
}
/* Logo Basis Styles */
.logo-container {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
}

.logo-image {
  height: 2.5em; /* 40px */
  width: auto;
}

/* Desktop Logo (über 1024px) */
.desktop-logo {
  display: none;
}

.mobile-logo {
  display: block;
}

/* Desktop Styles */
@media (min-width: 1025px) {
  .desktop-logo {
    display: block;
  }

  .mobile-logo {
    display: none;
  }

  .header-container .logo-container {
    padding-top: 0; /* Entfernen des Paddings */
  }
}

/* Behalte die bestehenden Größenanpassungen */
@media (max-width: 1180px) {
  .logo-image {
    height: 2.25em; /* 36px */
  }
}

@media (max-width: 1140px) {
  .logo-image {
    height: 2em; /* 32px */
  }
}

@media (max-width: 1120px) {
  .logo-image {
    height: 1.875em; /* 30px */
  }
}

@media (max-width: 1040px) {
  .logo-image {
    height: 1.75em; /* 28px */
  }
}

/* Grundeinstellung für den Body */
body {
  padding-top: 80px; /* Standard Padding für die fixierte Navigation */
}

/* Anpassung wenn Admin-Bar vorhanden ist */
body.admin-bar .site-header {
  top: 32px; /* Standard WordPress Admin-Bar Höhe */
}

/* Für mobile Geräte, wo die Admin-Bar eine andere Höhe hat */
@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px; /* Mobile WordPress Admin-Bar Höhe */
  }
}

/* Content Container Styles */
.page-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

/* Desktop Styles */
@media (min-width: 1024px) {
  .page-wrapper > * {
    max-width: 80em; /* 1280px */
    margin-left: auto;
    margin-right: auto;
  }

  /* Ausnahmen für volle Breite */
  .page-wrapper > .site-header,
  .page-wrapper > .site-footer {
    max-width: 100%;
  }
}