body {
  font-family: verdana;
  font-size: 16px;
  text-align: center;
  color: #000000;
}
a {
  text-decoration: none;
  color: #1e90ff;
}
a:hover {
  text-decoration: none;
  color: #76c7ed;
}
h1 {
  font-family: verdana;
  font-size: 18px;
}
h2 {
  font-family: verdana;
  font-size: 16px;
}

/**************/
/* Menüleiste */
/**************/

#header {
  margin-top: 2em;
  margin-left: -1em;
  margin-right: -1em;
  padding: 15px 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.07);
  transition: all 0.5s;
}
#header .logo1 {
  font-size: 18px;
  margin: 0em;
  padding: 2em;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: verdana;
  color: #000000;
}
#header .logo1 img {
  max-height: 60px;
  margin-left: -460px;
  z-index: 2;
}
#header .logo2 img {
  max-width: 900px;
  margin-top: -3px;
  padding-left: 1em;
  z-index: 1;
}

/* Desktop-Navigation */

.nav {
  padding: 0;
}
.nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: center;
}
.nav li {
  position: relative;
}
.nav a, .nav a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 70px 0px 70px;
  font-family: verdana;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  transition: 0.4s;
}
.nav a:hover, .nav .active, .nav .active:focus, .nav li:hover > a {
  color: #1e90ff;
}
.nav .dropdown ul {
  display: block;
  position: absolute;
  left: 100px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 5px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: white;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}
.nav .dropdown ul li {
  min-width: 150px;
}
.nav .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
  font-weight: 500;
}
.nav .dropdown ul a i {
  font-size: 12px;
}
.nav .dropdown ul a:hover, .nav .dropdown ul .active:hover, .nav .dropdown ul li:hover > a {
  color: #1e90ff;
}
.nav .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .nav .dropdown .dropdown ul {
    left: -90%;
  }
  .nav .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/****************/
/* Bildwechsler */
/****************/

.gallery {
	margin: auto;
    margin-top: 2em;
	max-width: 900px;
}
.gallery img {
    border: 1px solid grey;
    max-height: 180px;
    max-width: 240px;
}
.gallery a {
	text-decoration: none;
}
[hidden] {
	display: none;
}
#fullview {
    position: relative;
    background: lightgrey;
	margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 900px;
}
#fullview img {
	display: block;
	margin: auto;
	max-width: 70vw;
	max-height: 70vh;
    border: 1px solid grey;
}
#fullview button {
	position: absolute;
	top: 0;
	right: 0;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	background: transparent;
	color: transparent;
}

#fullview button:nth-of-type(1) {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='black' rx='10' /%3E%3Cpath d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
}

#fullview button:nth-of-type(1):hover,
#fullview button:nth-of-type(1):focus {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='red' rx='10' /%3E%3Cpath d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

#fullview button:nth-of-type(2) {
	top: 50%;
	left: 0;
	width: 2rem;
	height: 4rem;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M90,10 l-80,90 l80,90' fill='none' stroke='%23fff' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
}

#fullview button:nth-of-type(2):hover,
#fullview button:nth-of-type(2):focus {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M90,10 l-80,90 l80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

#fullview button:nth-of-type(3) {
	top: 50%;
	width: 2rem;
	height: 4rem;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M10,10 l80,90 l-80,90' fill='none' stroke='%23fff' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
}

#fullview button:nth-of-type(3):hover,
#fullview button:nth-of-type(3):focus {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M10,10 l80,90 l-80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}
