:root {
  --header-bg:            var(--color-primary);
  --header-bg-scrolled:   var(--color-primary-85);
  --header-color:         var(--color-text-invert);
  --header-color-hover:   var(--color-accent);
  --header-border:        var(--color-border);

  --header-submenu-bg:     var(--color-primary);
  --header-submenu-color: var(--color-text-invert);
  --header-submenu-hover: var(--color-accent);

  --z-header:    100;
  --z-offcanvas: 999;
  --z-search:    1001;

  --shadow-header: 0 8px 8px rgba(0, 0, 0, 0.16);

  --container: 1300px;
  --pad-x: 15px;

  --logo-header:    url("/wp-content/uploads/2025/12/etof-logo.svg");
  --logo-offcanvas: url("/wp-content/uploads/2025/12/Blaues-E-To-F-Logo.svg");
  --logo-width:     238px;
  --logo-height:    74px;

  --header-height: 128px;
}

body.header-dark #site-header {
  --header-color: var(--color-text-invert);
  --header-color-hover: var(--color-accent);
  --logo-header: url("/wp-content/uploads/2025/12/etof-logo.svg");
}

body.header-light #site-header {
  --header-color: var(--color-primary);
  --header-color-hover: var(--color-accent);
  --logo-header: url("/wp-content/uploads/2025/12/Blaues-E-To-F-Logo.svg");
}

#site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--header-color);
  background-color: transparent;
  transition:
    background-color .3s ease,
    box-shadow .3s ease,
    transform .35s ease;
}

body.scrolled #site-header {
  background-color: var(--header-bg-scrolled);
  box-shadow: var(--shadow-header);
  --header-color: var(--color-text-invert);
  --header-color-hover: var(--color-accent);
  --logo-header: url("/wp-content/uploads/2025/12/etof-logo.svg");
}

body.header-hidden #site-header {
  transform: translate3d(0, -100%, 0);
}

.header-top,
.header-main {
  width: 100%;
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.header-top {
  padding-top: 20px;
}

main.site-main {
  padding-top: var(--header-height);
}

.hero-intro .headline_section {
  padding-top: calc(var(--header-height) + 4rem);
}

:target {
  scroll-margin-top: var(--header-height);
}

.header-top .header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.header-top .header-meta,
.header-top .header-meta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-top .header-meta li {
  list-style: none;
}

.header-top .header-lang,
.header-top .search-trigger {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--header-color);
  cursor: pointer;
}

.header-top .header-lang a,
.header-top .search-trigger {
  padding: 6px 0;
}

.header-top .header-lang a:hover,
.header-top .search-trigger:hover {
  color: var(--header-color-hover);
}

.header-top .header-lang svg,
.header-top .search-trigger svg {
  display: block;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.header-top .search-trigger .icon {
  display: block;
}

@media (max-width: 1023px) {
  .header-top {
    display: none;
  }
}

.header-main .header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding-block: 28px;
  transition: padding-block .3s ease;
}

body.scrolled .header-main .header-inner {
  padding-block: 14px;
}

@media (max-width: 1023px) {
  .header-main .header-inner {
    display: flex;
    justify-content: space-between;
    padding-block: 20px;
  }

  body.scrolled .header-main .header-inner {
    padding-block: 20px;
  }
}

.header-top .header-lang {
  color: var(--header-color);
}

.header-top .header-lang a:hover {
  color: var(--header-color-hover);
}

.header-logo .logo-svg {
  background-image: var(--logo-header);
}

.offcanvas-logo .logo-svg {
  background-image: var(--logo-offcanvas);
}

.header-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  min-width: 0;
}

.header-top .search-trigger {
  color: var(--header-color);
}

.search-trigger:hover {
  color: var(--header-color-hover);
}

.header-nav {
  color: var(--header-color);
}

.header-nav a:hover,
.header-nav a.active {
  color: var(--header-color-hover);
}

.header-nav .submenu .level-2 {
  background: var(--header-submenu-bg);
  color: var(--header-submenu-color);
}

@media (max-width: 1023px) {
  .header-nav {
    display: none;
  }
}

.menu-trigger {
  position: relative;
  display: none;
  width: 41px;
  height: 24px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--header-color);
  -webkit-tap-highlight-color: transparent;
}

.menu-trigger .bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform .5s ease, opacity .5s ease;
  will-change: transform, opacity;
}

.menu-trigger .bar:nth-child(1) {
  transform: translate3d(0, -11px, 0);
}

.menu-trigger .bar:nth-child(2) {
  transform: translate3d(0, 0, 0);
}

.menu-trigger .bar:nth-child(3) {
  transform: translate3d(0, 11px, 0);
}

.menu-trigger[aria-expanded="true"] .bar:nth-child(1) {
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-trigger[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.menu-trigger[aria-expanded="true"] .bar:nth-child(3) {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

@media (max-width: 1023px) {
  .menu-trigger {
    display: block;
  }
}

#site-header ul,
#site-header li {
  list-style: none;
}

#site-header ul,
#site-header li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-header li::marker {
  display: none;
}

#site-header .lang-switch a[aria-current="true"] {
  color: var(--color-accent);
  cursor: default;
  pointer-events: none;
}

#site-header svg {
  transform: none !important;
  will-change: auto;
}

#site-header svg use {
  transform: none !important;
}