/* alle Styles für Menüs usw. */

header {
  background-color: transparent;
  z-index: 100;
  /* padding-top: var(--outside-padding-inner); */
  padding-top: calc(var(--outside-padding-inner) - 2rem);
  color: var(--header_color, var(--black));
  transition: all .3s ease;
  --header_color: var(--black);
}

header.blue_bg {
  --header_color: var(--white);
}

header.blue_bg .header-first:not([data-open="true"]) .logo img,
header.blue_bg .header-link:after {
    filter: brightness(10) grayscale(1) brightness(10);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 2rem;
}

nav li {
  position: relative;
  list-style: none;
}

nav a,
nav .item {
  text-decoration: none;
}

nav button.item + button {
  display: none;
}

/* .ul_to_toggle.open + ul {
  display: inline-block;
} */

/* nav li > .ul_to_toggle.open + ul {
  display: flex;
  flex-direction: column;
} */

/* .meta_panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  z-index: 999;
  margin-left: var(--outside-padding-inner);
} */


header img {
  width: 8rem;
}

header .header-link {
  text-transform: uppercase;
  text-decoration: none;
}

.menu_main {
  width: 100%;
  align-self: flex-end;
  max-height: calc(100vmin - ((var(--outside-padding-inner) * 2) + var(--header, 0px)));
  overflow: auto;

  /* display: flex;
  flex-direction: column;
  justify-content: flex-end; */
  padding: 0;
  margin: 0;
  color: var(--black);
}
#hamburger ~ .menu_main > ul {
  opacity: 0;
  transform: translateY(3em);
  transition: all .3s ease;
}

#hamburger[aria-expanded="true"] ~ .menu_main > ul {
  opacity: 1;
  transform: none;
  transition: all .5s ease .75s;
}

.menu_main ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: .5em;
  font-size: var(--header-menu);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  margin: 1rem 0;
  padding: 0;
  height: max-content;
}

.menu_main ul a,
.menu_main ul .item {
  display: inline-block;
  text-align: left;
}

.menu_main ul ul {
  flex-direction: row;
  flex-wrap: wrap;
  font-size: .4em;
  font-weight: 400;
  text-transform: none;
  margin: 1em 0;
}

.menu_main ul ul a,
.menu_main ul ul .item {
  background-color: rgb(66, 122, 187, .2);
  padding: .5em 1em;
  border-radius: 2rem;
}


.header-first {
  display: flex;
  width: fit-content;
  gap: 2em;
  flex-wrap: wrap;
  max-width: 100vmin;
  justify-content: space-between;
  align-items: baseline;
  position: relative;
  
  max-width: calc(100vmin - (var(--outside-padding-inner) * 2));
  height: calc(100vmin - (var(--outside-padding-inner) * 2));
  pointer-events: none;
  --diff: 1.8rem;
}

.header-first > :not(hr) {
  pointer-events: all;
}

.header-first:not([data-open="true"]):before {
  opacity: 0;
  height: calc(var(--header) - var(--outside-padding-inner) + var(--p) * 2 - var(--diff));
  margin-top: var(--diff);
  background-color: rgba(255, 255, 255, 0.5);
  transition-delay: .5s;
}

.header-first.scrolled:not([data-open="true"]):before {
  opacity: 1;
}

/* .header-first:before {
  --p: 2em;
  content: '';
  display: block;
  width: calc(100% + (var(--p) * 2));
  height: calc(100% + (var(--p) * 2));
  position: absolute;
  left: calc(0px - var(--p));
  top: calc(0px - var(--p));
  border-radius: 1em;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: .5em .5em .75em rgba(0,0,0,.1);
  transition: all .5s ease;
} */


.header-first:before {
    --p: 2em;
    content: '';
    display: block;
    width: calc(100% + (var(--p) * 2));
    height: calc(100% + (var(--p) * 2));
    position: absolute;
    left: calc(0px - var(--p));
    top: calc(0px - var(--p));

    border-radius: 1em;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: .5em .5em .75em rgba(0, 0, 0, .1);
    transition: all .5s ease;
    /* height: calc(var(--header) - 2rem) !important; */
}





/* .header-first:not([data-open="true"]):after {
  opacity: 0;
  height: var(--header);
  width: calc(100% + (var(--p) * 2));
  position: absolute;
  left: calc(0px - var(--p));
  top: calc(0px - var(--p));
  border-radius: 1em;
  overflow: hidden;
} */



.header-first:not([data-open="true"]):after {
    opacity: 0;
    /* height: calc(var(--header) - 2rem); */
    height: calc(var(--header) - var(--outside-padding-inner) + var(--p) * 2 - var(--diff));
    width: calc(100% + (var(--p) * 2));
    position: absolute;
    left: calc(0px - var(--p));
    top: calc(0px - var(--p));
    border-radius: 1em;
    overflow: hidden;
    margin-top: var(--diff);
}




.header-first.scrolled:not([data-open="true"]):after {
  opacity: 1;
}

.header-first:after {
  --p: 2em;
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1em);
  z-index: -1;
  transition: all .5s ease;
}

.header-first > a {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(33%);
}

#hamburger {
  background: transparent;
  width: 2.5em;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  flex-direction: column;
  padding: .5em 0;
  height: auto;
  transition: all .5s ease;
  transform: translateY(-1em);
  font-size: 1.5rem;
}

#hamburger:before,
#hamburger:after {
  content: '';
  width: 100%;
  height: .3rem;
  background-color: var(--header_color);
  display: block;
  border-radius: 1rem;
  transition: all .5s ease;
}

#hamburger + hr {
  width: 100%;
  border: 0;
  align-self: center;
}

#hamburger[aria-expanded="true"] {
  gap: 0;
}

#hamburger[aria-expanded="true"]:before {
  transform: translateY(50%) rotate(-45deg);
  background-color: var(--black);
}
#hamburger[aria-expanded="true"]:after {
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--black);
}



.social_menu,
.menu_main ul.social_menu {
  flex-direction: row;
  flex-wrap: wrap;
  font-size: var(--regular-font);
  margin-left: auto;
  align-self: flex-end;
  justify-content: flex-end;
  font-weight: 400;
}

.menu_main ul.social_menu {
  margin-top: 2em;
}

.social_menu li:not(:last-child):after {
  content: '|';
}

.social_menu a:after {
  content: none;
}


#hamburger ~ .menu_main > .header-link {
  opacity: 0;
  transform: translateY(3em);
  transition: all .3s ease;
}

#hamburger[aria-expanded="true"] ~ .menu_main > .header-link {
  opacity: 1;
  transform: none;
  transition: all .5s ease .75s;
}

header.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}


.header-link.only_mobile {
  display: none;
}


.header-link.only_mobile::after {
  filter: none !important;
}

.header-link.only_desktop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header-first:not([data-open="true"]) ~ .header-link.only_desktop {
  opacity: 1;
  transition: opacity 0.3s ease 2s; /* 2 Sekunden Verzögerung */
}

.header-first[data-open="true"] ~ .header-link.only_desktop {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}



@media (max-width: 768px) {

  .header-first {
    max-width: calc(100vw - (var(--outside-padding-inner) * 2));
    height: calc(100vh - (var(--outside-padding-inner) * 2));
  }

  .header-first:not([data-open="true"]):before,
  .header-first:not([data-open="true"]):after {
    --p: 1.5rem;
  }


  header.header-wrapper .only_desktop {
    display: none !important;
  }

  .menu_main ul ul a,
  .menu_main ul ul .item {
    /* font-size: 1.8rem; */
    font-size: 1.333em;
  }
}

.header-link.only_mobile {
    position: relative;
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    /* padding-top: 1rem; */
    flex-wrap: wrap;
    /* width: 80%; */
    margin-left: auto;
    margin-top: 2rem;
    text-align: right;
    align-content: flex-end;
    align-items: flex-end;
}

@media screen and (min-width: 1325px) {
  .header-link.only_mobile {
    display: none !important;
  }
}

@media screen and (max-width: 1325px) {
  .header-first[data-open="true"] ~ .header-link.only_desktop {
  display: none !important;
}
}

.breadcrumb ol {
  display: flex;
  gap: 0 .3em;
  font-size: .8em;
  flex-wrap: wrap;
  /* line-height: 1; */
}

.breadcrumb ol li:not(:last-child):after {
  content: '»';
}

.menu_wrapper {
  transform: translateY(-1.1em);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all .3s ease;
  max-width: calc(100vw - 25rem);
}

[data-open="true"] .menu_wrapper {
  align-items: flex-end;
  gap: .5em;
}

.breadcrumb {
  transition: all .3s ease;
}

[data-open="true"] .menu_wrapper .breadcrumb {
  opacity: 0;
}

.menu_wrapper #hamburger {
  transform: none;
}