@media (min-width: 50rem) {/*fallback*/
	nav {/*fallback*/
			max-width: 10rem;/*fallback max-width kann zur not auch drinnbleiben hatte keine sichtbaren nachteile*/
		  /*top:0 !important;/*fallback top 0 ändert das verhalten der webseite auch bei gridunterstützenden browsern und soll desshalb so bald wie möglich weg (bei viel inhalt wird nav anders positioniert beim scrollen)*/
	}/*fallback*/
}/*fallback*/
/*fallback kann weg wenn alle Browser das grid layout unterstützen "display:grid"*/

body {
  margin:0;
	padding:0;
	font-family: "Verdana", Geneva, sans-serif;
	background:hsl(0, 0%, 90%);
}
@media (min-width: 50rem){
	body {
		display: grid;
		grid-template-rows: calc(55px + 3rem) 105px auto auto 4rem;
		grid-template-columns: auto 10rem auto 40rem auto ;
		animation: noscrollbar 0.7s 1;
	}
	
	.zoom-gallery {
		width:38rem !important;/*css grid fix firefox*/
	}
}
@media (min-width: 62rem){
	body {
		grid-template-columns: 4rem 10rem 4rem 40rem auto ;
  }
}
@media (min-width: 76rem){
	body {
		grid-template-columns: calc(50% - 34rem) 10rem 4rem 40rem auto ;
  }
}

nav a{
	color:hsl(51, 10%, 25%);
	text-decoration: none;
	display:block;
	font-size:1.3rem;
	padding: 0.9rem;
	transition: color 0.4s;
}

nav a:hover, nav a.mark{
 color:hsl(51, 10%, 50%);
}

nav {
	  background-color:white;
	  width:100%;
	  display:flex;
	  justify-content: space-around;
		flex-wrap: wrap;
		
		box-shadow: 0px 0px 3rem 0px hsl(0, 0%, 30%);
		padding: 0;
		max-height:initial;
		z-index:1;
}

@media (min-width: 50rem){
	nav a{
		color:hsl(51, 100%, 30%);
		text-align:left;
		font-size:1rem;
		padding: 0 0 0.5rem 0;
		transition: padding-left 0.4s;
		
	}
	nav a:last-of-type{
		padding-bottom:0rem;
	}
		
	nav a:hover{
	 padding-left:0.5em;/*transition statt padding wegen hardwarebeschleunigung*/
	 color:hsl(31, 10%, 30%);
	}
	nav a.mark{
		color:hsl(31, 10%, 30%);
	}
	nav a:focus{
	 padding-left:0;
	 transition: padding-left 0s;
	}
	
	nav {
		background:white;

	  display:inherit;
		justify-content: inherit;
		
		position: sticky;
		
		top: calc(160px + 3rem);
	  width:inherit;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
		box-shadow: 0px 0px 3rem 0px hsl(0, 0%, 30%);
		padding: 1rem;
		z-index: 1;
		max-height:initial;
	}
}

	@media (max-height: 30rem){
		nav {
			top: 0;
		}
		body{
			grid-template-rows: calc(55px + 3rem) 0px auto auto 4rem;
		}
		
		
	}


section {
	position: relative;
	background-color: white;
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 5;
	box-shadow: 0px 0px 3rem 0px hsl(0, 0%, 30%);

	min-height:calc(100vh - 105px - 2.5rem);
	padding:55px 1rem 1rem 1rem ;
	margin-top:calc(55px + 3rem);
	animation: moveup 0.7s 1;
}
@media (min-width: 50rem) {
	section {
	min-height:20rem;
	margin-top:0;
	}
}

.img-bubble, .img-shadow {
	position: absolute;
	background-color:white;
	width:100px;
	height:100px;
	border-radius:100px;
	border-style:solid;
	border-color:white;
	border-width: 5px;
	top:-55px;
	left:0px;
  margin-left: calc(50% - 55px); 
}

.img-shadow {
	box-shadow: 0px 0px 3rem 0px hsl(0, 0%, 30%);
	z-index: -1;
}

.img-bubble {
	overflow:hidden;
}

.img-bubble img {
	position: relative;
	max-width: 100px;
	z-index: 1;
}

@keyframes moveup {
    from {top: 100vh;}
	  50% {top: -5vh;}
    to {top: 0vh;}
}

@keyframes noscrollbar {
    from {overflow:hidden;}
    to {overflow:hidden;}
}




h2 {
	font-size:1.2em;
	margin-bottom:0.4em;
}

h3 {
	font-size:1em;
	margin-bottom:0.4em;
}