header .logo { 
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  translate: -3rem 0;
  scale:0.95;
}
@media screen and (min-width:601px) {
  header .logo {
    translate:0 0;
    scale:1;
  }
}
header h1 {
  color:var(--col1);
  font-size:2rem;
  text-shadow: var(--col2) 1px 1px;
  font-weight:500;
}

header h3 {
  color:var(--col1);
  font-size:1.4rem;
  translate:3.5rem -0.4rem;
  text-shadow: var(--col2) 1px 1px;
}
@media screen and (max-width:1080px) {
body.bright header .topshadow {
  	 position: absolute;
		 top:0;
		 display: block;
		 content: '';
		 width: auto;
		 width:100%;
		 height: 100%;
		 background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.0) 100%);
		 z-index:10;
}}
@media screen and (min-width:1081px) {
body.bright header .topshadow {
  	 position: absolute;
		 top:0;
		 display: block;
		 content: '';
		 width: auto;
		 width:100%;
		 height: 100%;
		 background: linear-gradient(180deg, rgba(0,0,0,0.17) 0%, rgba(0,0,0,0.17) 50%, rgba(0,0,0,0.14) 60%, rgba(0,0,0,0.0) 100%);
		 z-index:10;
}}

body.bright header h1, body.bright header h3, body.bright header li, body.bright header a {
  color:var(--col2);
  text-shadow: var(--col1) 1px 1px;
}
.logo h1::before {
 	content:"";
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABGCAYAAABv59I3AAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kb9Lw0AcxV9TpUUrDhYUUchQneyiIo61CkWoEGqFVh1MLv0FTRqSFhdHwbXg4I/FqoOLs64OroIg+APEP0CcFF2kxO8lhRYxHhz34d29x907QGiUmWZ1xQBNr5qpRFzMZFfFwCuC6MUgIhiVmWXMSVISnuPrHj6+3kV5lve5P0efmrMY4BOJY8wwq8QbxDObVYPzPnGYFWWV+Jx4wqQLEj9yXXH5jXPBYYFnhs10ap44TCwWOljpYFY0NeJp4oiq6ZQvZFxWOW9x1so11ronf2Eop68sc53mCBJYxBIkiFBQQwllVBGlVSfFQor24x7+YccvkUshVwmMHAuoQIPs+MH/4He3Vn5q0k0KxYHuF9v+GAMCu0Czbtvfx7bdPAH8z8CV3vZXGsDsJ+n1thY5Avq3gYvrtqbsAZc7wNCTIZuyI/lpCvk88H5G35QFBm6BnjW3t9Y+Th+ANHWVvAEODoHxAmWve7w72Nnbv2da/f0Arh5yvrOxpA8AAAAGYktHRAAjAAUAvlUwsssAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfqCAsXMDUM5hmhAAABbklEQVR4Ae3aOwrCQBSFYV8pRFtxAe7EhbsTW0FsBUHxcSNa/4neMEF/ISiccZL5ckwRMxy8Xqtqc39/7vJ9e1kPu5w/e+5R9oS/Np9AcEYFEggEILZBAoEAxDZIIBCA2AYJBAIQ2yCBQABiGyQQCEBsgwQCAYhtkEAgALENEggEILZBAoEAxDZIIBCA2AYBkLECCnQqUORBgnhQor72zWLLvAae4sGIc7bWJHvChvMtY9yu4dg2w9JPeOYZbLOQaZvBJceWAiq55lb7Fgi4BBIIBCC2QQKBAMQ2SCAQgNgGCQQCENsggUAAYhskEAhAbIMEAgGIbZBAIABxqQYd4bh6E5e6aX8IgSq2zJvs196o/tOBZJ7B3rjF/271usaxfbq+W/zH9mxkqZ9Y15iL2MH+y508cUtdpL88dvz6HEc0HPCrQA2Xz8MEAiOBBAIBiG2QQCAAsQ0SCAQgtkECgQDENkggEIDYBgkEAhA/AK4KE3x/OkrQAAAAAElFTkSuQmCC);
  background-size: cover;
  width: 60px;
  height: 60px;
  top:35px;
  margin-right:0;
  display: inline-block;
  position:relative;
  overflow:visible;
}

.mod_navigation ul li {
  display: inline-block;
}
 .mod_navigation ul li .active  {
  text-decoration:underline;
  text-underline-offset: 5px;
} 
.mod_navigation ul.level_1 {
  display: flex;
  justify-content:center;
  gap:3vw;
  width: 108%;
  max-width:1080px;
  margin-left: auto;
  margin-right: auto;
  padding:1rem;
  border-top:1px solid var(--col1);
}
body.bright .mod_navigation ul.level_1 {
  border-top:1px solid var(--col2);
}
.mod_navigation ul li, .mod_navigation ul li a {
  font-size:1.2rem;
  color:var(--col1);
  text-shadow: var(--col2) 1px 1px;
  font-weight:400;
}
.mod_navigation ul .level_2  li, .mod_navigation ul .level_2 li a {
  font-size:1.15rem;
  color:var(--col1);
  text-shadow: var(--col2) 1px 1px;
  font-weight:400;
}
body.bright .mod_navigation ul li, body.bright .mod_navigation ul li a {
  color:var(--col2);
  text-shadow: var(--col1) 1px 1px;
  font-weight:500;
}
.mod_navigation .level_2 ul li a, .mod_navigation .level_2 .active {
font-size: 1.15rem;
  line-height: 1.25rem;
  font-weight: 400;
}
.mod_navigation .level_2 .active {
  text-decoration:underline;
  text-underline-offset:4px;
}
.mod_navigation ul.level_1 li ul.level_2 li {
  display: flex;
  flex-flow: row wrap;
  opacity:0;
  transform: translate(-100vw, -100px);
  transition: opacity 0.6s ease;
  background: var(--col2);
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  margin-bottom: -0.5rem;
  padding-right: 1rem;
  font-weight:400;
}
body.bright .mod_navigation ul.level_1 li ul.level_2 li {
  background: transparent;
}

ul.level_1 li:hover ul.level_2 li {
  opacity:1;
  transform: translate(0, 0);
}
/*
 ul.level_1 li:hover ul.level_2 .active {
   text-decoration:underline;
   text-underline-offset: 5px;top: 30px;
    right: 20px;
 } */
.mod_navigation ul.level_2 {
    position:absolute;
    margin-top:0.3rem;
}
/*
ul.level_2 li::before {
 	content:"";
	 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6ElEQVR4nO3ZwQnCQBCF4QEzyUl7cCYiWIMH+/BmBWIp2oUF5OTuejA2pGf1ojeNJhiYXd4HKeCHPIIjEQAAAPzPmP1S2AVhv5vSaUgxkuywVvb31yPszyVVI4o5QmOMkQ8RUcVIFubK7tYU8oypTW9GM7/5FhFFjBahFPbXJGIkC3Nhd2kRY3czgpgKMb1DDCGmfzoIizbfGWV3KqkqKIWYMbsVWZREiHZ4tWa0zynysdfmxi6IMEIQYYQgwgjJj5MkfupqKscHSeUc9OOBzt4mOpxM44loOGLHF/Hmb4Wt+U0AAACk6gE9epl/+AWbZgAAAABJRU5ErkJggg==);
  background-size: cover;
  width: 25px;
  height: 25px;
  top:0px;
  margin-right:5px;
  translate:-1px 4px;
  display: inline-block;
  position:relative;
}
ul.level_2 li.active::before {
  translate:-1px -1px;
}
*/
a.submenu.sibling::after, li.trail.submenu::after {
 	content:"";
	 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAn0lEQVR4nO2Uuw6DMAxFPcSfAKILlXD/f2eIK+hEW5Yy8DkgVwwUIUpem48UJYvv0R0cAEVRlFgQckvI7wrqPDRLMirDPaF9nBE/CXkiY4cQucxKxjcLufs7cIM2I2M/i3wsobm4SrcZV7gXXoMucm9piDxY6iOPJnWRR5eekSeTHsmTS3d3U+7VO8aHc8hPy9RNd5ujfclJ3lRRFAU2zBCslfVYcaAsAAAAAElFTkSuQmCC);
  background-size: cover;
  width: 25px;
  height: 25px;
  top:7px;
  margin-left:5px;
  display: inline-block;
  position:relative;
}
/*    *********************** BUTTON MENU ********************************* */
/*
@media screen and (max-width:400px) {.mod_navigation.button_menu.block ul.level_1 {display:grid; grid-template-columns:repeat(2, 1fr);padding-left: 0; gap:0.2rem;}}
@media screen and (min-width:401px) and (max-width:460px) {.mod_navigation.button_menu.block ul.level_1 {display:grid; grid-template-columns:repeat(2, 1fr); padding-left: 0; gap:0.2rem;}}
@media screen and (min-width:461px) and (max-width:511px) {.mod_navigation.button_menu.block ul.level_1 {display:grid; grid-template-columns:repeat(2, 1fr); padding-left: 0; gap:0.2rem;}}
@media screen and (min-width:512px) {.mod_navigation.button_menu.block {display:none;}}
@media screen and (max-width:512px) {
  .mod_navigation.button_menu.block ul li {
    font-size:0.8rem;
    background-color:transparent;
    padding:0.4rem;
    border:1px solid var(--col4);
    border-radius:4px;
  }
  .mod_navigation.button_menu.block ul li a {
    font-size:0.8rem;
  }
  .mod_navigation.button_menu.block ul li.active {
    color:purple;
  }
  .mod_navigation.button_menu.block ul li {
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
  }
} */

/*    *********************** HAMBURGER ********************************* */
#nav-icon4 {
  width: 60px;
  height: 45px;
  position: absolute;
  right:20px;
  top:-10px;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index:13;
  scale:0.8;
}
@media screen and (min-width:536px) and (max-width:870px) {
  #nav-icon4 {
    position: absolute;
    width:60px;
    margin:10px auto;
    top: 30px;
    right: 20px;
    scale:0.7;
  }
}
@media screen and (max-width:535px) {
  #nav-icon4 {
    position: absolute;
    width:60px;
    margin:10px auto;
    top: 30px;
    right: 20px;
    scale:0.6;
  }
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 7px;
  width: 100%;
/*  background: #d3531a; */
  background:#2305be;
  border-radius: 7px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#nav-icon4 span:nth-child(1) {
  top: 0;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -4px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}
#click-menu {
  position:fixed;
  top:0;
  width:100%;
  height:100vh;
  background-color:transparent;
  z-index:12;
  left:-5000px;
  transition: left 0.5s ease-in-out;
  opacity:0;
}
#click-menu.show {
  left:0;
  opacity:1;
}

#click-menu .menu-content {
  width: 250px;
  height: 100%;
  background: var(--col4);
  z-index: 6;
  position: relative;
  padding-top: 25px;
}
@media screen and (max-height:399px) {
  #click-menu .menu-content {
    padding-top:2px;
}}

#click-menu ul {
  margin: 0 0.5rem;
  padding:0 0.3rem;
}
#click-menu li, #click-menu li a, #click-menu h3 {
  color:var(--col2);
  list-style-type: none;
  padding:0.5rem 0;

}
#click-menu li {
    border-bottom:dotted 1px var(--col2);
    padding:0.5rem 0;
    position:relative;
}
#click-menu a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;            /* Streckt die Klickfläche über die gesamte .menu_card */
}
/*
#click-menu li.active {
  text-decoration:underline;
}
*/


@media screen and (max-width:29.9999rem) {
  #click-menu li a, #click-menu p, #click-menu li {
    font-size:1.1rem;
    color:var(--col2);
  }

}
@media screen and (min-width:30rem) {
  #click-menu a, #click-menu p, #click-menu li {
    font-size:1.2rem;
    color:var(--col2);
  }
}
@media screen and (min-width:40rem) {
  #click-menu a, #click-menu p, #click-menu li {
    font-size:1.2rem;
    line-height:2rem;
    color:var(--col2);
  }
}
@media screen and (max-height:400px) {
   #click-menu li {
     line-height:1.6rem;
     padding:0.3rem 0;
   }}
/* Positionierung vor Topshadow */   
.top_menu, .logo {
  position:relative;
  z-index:10;
}
   
@media screen and (max-width:830px) and (orientation:portrait) {
  .top_menu {
    display: none; }
  .click-menu {
    display: block;
  }
     #nav-icon4 {
    display: block;
  }
}
@media screen and (min-width:831px) and (orientation:portrait){
  .top_menu {
    display: block; }
  .click-menu {
    display:none;
  }
  #nav-icon4 {
    display: none;
  }
}
@media screen and (max-width:1080px) and (orientation:landscape) {
  .top_menu {
    display:none; }
  .click-menu {
    display: block;
  }
     #nav-icon4 {
    display: block;
  }
}
@media screen and (min-width:1081px) and (orientation:landscape){
  .top_menu {
    display: block; }
  .click-menu {
    display: none;
  }
  #nav-icon4 {
    display: none;
  }
}

/* ************************ MOBILES MENU PORTFOLIO  **************** */

body:not(.portfolio_hvr, .portfolio_sb) .mobile, body.bright .mobile {
  display: block;
}

body:not(.portfolio_hvr, .portfolio_sb) .portfolio1,
body:not(.portfolio_hvr, .portfolio_sb) .portfolio2 {
  display: none;
}
body.portfolio_hvr .mobile, body.portfolio_hvr .portfolio2 {
  display: none;
}
body.portfolio_sb .mobile, body.portfolio_sb .portfolio1 {
  display: none;
}
body.portfolio_hvr .portfolio1 {
  display: block;
  height:100%;
}
body.portfolio_sb .portfolio2 {
  display: block;
  height:100%;
}
.mobile, .portfolio1, .portfolio2 {
  overflow-y: scroll;
}



/*    ********************  ASIDE MENU GALLERIEN   **************************** */
@media screen and (max-width:511px) {
  .aside_outer, .aside_menu {
    display: none;
  }
}
@media screen and (max-height:670px) {
  .aside_inner, .aside_menu {
    display: none;
  }
}
@media screen and (min-width:512px) {
.aside_outer {
  margin-top:6.5rem;
  position: relative;
}
.aside_inner {
  position: fixed;
}

.aside_galerie1 .aside_outer {
  margin-top:7.7rem;
}
.aside_menu ul {
  list-style-type: none;
  margin-left:1.9rem;
}
}
@media screen and (max-width:999px) {
.aside_menu li a, .aside_menu li.active {
  font-size:0.9rem;
  line-height:1.3;
}
.aside_menu li, .aside_menu li.active {
  font-size:0.9rem;
  line-height:1.3;
  padding:10px 0;
}
.aside_galerie1 .aside_menu li a, .aside_galerie1 .aside_menu li.active {
  font-size:0.9rem;
  line-height:1.3;
  padding:10px 0;
}
.aside_menu ul {
  margin-left:0.3rem;
}
}
@media screen and (min-width:1000px) {
.aside_menu li a, .aside_menu li.active {
  font-size:0.96rem;
}
.aside_galerie1 .aside_menu li a, .aside_galerie1 .aside_menu li.active {
  font-size:1.1rem;
}}
@media screen and (min-width:1080px) {
.aside_menu ul li .active::before {
 	content:"";
	 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACBUlEQVR4nO2ZsWtUQRCHf3ozd0ZFBEWMiHfMPIycokUarQQt7P0DtLHQ0saUqYQ02ojWokXkEESLSMzNLlpYBSxEEGxEUBELEbQQoid7b4+gFtpIbl7eV+7bfbyP2X27OwPU1NT8V5RtDlVAOQyUww1gdiMqIDIQstvHEQneRbSUuTONZYZHdCTB4XOWuVdgoQXHEZkWto9ZKnQRt8KjCAAUzX5XKLzNbU8KLGyDR5FEp2lTQvYmty/vR9wJjyKJziZrC9mrcs2EF1MTj/bAo0iijbhbyZ4Pn1N4WUzEvfAokhAs7hKyZ1nmtbZiAY8iiTbiduHwtOxn74XjIXgUSRzG4hZl6+e+HzpsR+BRJJE2SaFwP0fmk9LSMXgUSXTRayrZ3bxpfpFGOAmPIiW9hpLdzOO+aiOcgk+RxGCDcLiWI/NNmnYaPkVGMnYlj18RDmfhU6REKMzkd3xXjufgVSQhFC7lv9mPguwivIokhPrny6gMheYci9iFkYhQmIXTqTXjfmrJ6mJfcbrYh3vJ1VUJO4O1ZB1viD3/R5TuH4dGO4FxQf9RZBIPNgvbw9ExvqB4FOOErpeLVfvXq+47ZTsI78mHomWKcUWrnA7q/Jag24fHk/CeMj2ApR3wgFYtia1VKStIhQo9AyWb9196o3DLfTFU2K67L08L2+W1/oaamhr8lZ+M+pqc/ViTZAAAAABJRU5ErkJggg==);
  background-size: cover;
  width: 23px;
  height: 23px;
  top:5px;
  margin-right:0px;
  display: inline-block;
  position:relative;
}
  .aside_menu li.active {
  translate: -22px 0;
}
}


.menu_card figcaption {
  display: none;
}
.menu_card, .portrait_card {
  position:relative; /*wichtig für nachfolgende Click-Regel */
}
.menu_card a::after, .portrait_card a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;            /* Streckt die Klickfläche über die gesamte .menu_card bzw. portraid_card. ACHTUNG!!!! Dieses Element muss position:relative sein!! */
}
.auswahl1 .menu_card h4, .auswahl1 .menu_card h4 a {
  font-size: 1.05rem;
}
.auswahl2 .menu_card h4, .auswahl2 .menu_card h4 a {
  font-size: 1rem;
}
@media screen and (min-width:999px) {
  .auswahl2 .menu_card h4, .auswahl2 .menu_card h4 a {
  font-size: 1.2rem;
}
.auswahl1 .menu_card h4, .auswahl1 .menu_card h4 a {
  font-size: 1.25rem;
}
}
@media screen and (max-width:700px) {
.portrait_card figure {
  max-width:96%;
}}
@media screen and (min-width:701px) {
.portrait_card figure {
  max-width:80%;
}}