*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}

body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; font-size: 1.3rem; color: black; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; }


/* Slider */
#background { position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
	overflow: hidden; 
	}
	
.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%; height: 100%; 
	padding: 0; margin: 0; 
	}
	
.rslides li {
	 -webkit-backface-visibility: hidden;
	  position: absolute;
	  display: none;
	  width: 100%; height: 100%;
	  left: 0; top: 0;
	  }
	
.rslides li:first-child {
	  position: relative;
	  display: block;
	  }
	
.rslides img {
	  display: block;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  object-position: center;
	  border: 0;
	  }
	  
	  
#ansage { position: absolute;
	top: 7rem;
	left: 5%;
	width: 90%;
	z-index: 2;
	color: white; }
#ansage a { color: white; }	    
	  

/* Header & Navigation Start */
#header_start { position: relative; z-index: 10; width: 90%; margin: 0 auto; padding-top: 10px;}	 

#header_right { position: absolute;
	top: 0px;
	right: 0;
	width: 400px;
	height: 100px;
	z-index: 100;
	} 
#header_left { position: absolute;
	top: 2.65rem;
	left: 0; }	
#annette_start { font-size: 3rem; }	 


/* Hamburger start und generell / außer Farbe */	
#wrapper_hamburger_navi_top { display: inline-block; position: absolute; top: 0px; right: 0px; z-index: 99; }
		
.hamburger { position: absolute; top: 2.9rem; right: 0; height: 45px; width: 45px; background: url("https://www.annettegrotkamp.com/_entwurf/site/files_extra/navi/closed_weiss_breit.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }
.hamburger_x { position: absolute; top: 2.9rem; right: 0; height: 45px; width: 45px; background: url("https://www.annettegrotkamp.com/_entwurf/site/files_extra/navi/open_weiss_breit.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; } 


/* Hamburger overlay */
#wrapper_hamburger_navi_top_overlay { display: inline-block; position: absolute; top: 0px; right: 0px; z-index: 98; }
#navi_top_hamburger { display: none; 
	padding-top: 5.2rem;
	padding-bottom: 2rem;
	text-align: right;
	}	
#navi_top_hamburger li { display: block; margin-top: 0.9rem; list-style: none; } 
#navi_top_hamburger li:first-of-type { margin-top: 2rem; }
#navi_top_hamburger a { text-decoration: none; color: white; border: 1px solid white; padding: 0.2rem 1rem 0.2rem 1.2rem;}
#navi_top_hamburger a:hover { background: rgba(255, 255, 255, 0.2); cursor: grabpointer; }	
#navi_top_hamburger div.dropdown-content { display: none; }
		




/* Header & Navigation Content (Abweichungen von Start) */
#header_content { position: relative; z-index: 10; width: 90%; margin: 0 auto; padding-top: 10px;}	 

#header_content #header_right { position: absolute;
	top: 4rem;
	right: 0;
	width: auto;
	height: auto;
	z-index: 100; }
#header_right .mobile { display: none; } 

#header_content .hamburger { position: absolute; top: 2.9rem; right: 0; height: 45px; width: 45px; background: url("https://www.annettegrotkamp.com/site/files_extra/navi/closed_schwarz_breit.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }
#header_content .hamburger_x { position: absolute; top: 2.9rem; right: 0; height: 45px; width: 45px; background: url("https://www.annettegrotkamp.com/site/files_extra/navi/open_schwarz_breit.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }

#annette_content { font-size: 3rem; }	

#navi_top li { display: inline-block; list-style: none; margin-left: 2rem; } 
#navi_top li:first-of-type {  }
#navi_top a { text-decoration: none; color: black; border: 1px solid black; padding: 0.2rem 1rem 0.2rem 1.2rem;}
#navi_top a:hover { background: rgba(0, 0, 0, 0.2); cursor: grabpointer; }	
#navi_top div.dropdown-content { display: none; }



#content { width: 90%; margin: 0 auto; padding-top: 12rem; }

#title { margin-bottom: 3rem; }


/* Teaser */
.container_teaser { display: grid; grid-column-gap: 2%;
	grid-template-columns: 23.5% 23.5% 23.5% 23.5%; margin-block-start: 1.5rem; }
.teaser { position: relative; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 25px; }
.teaser .teaser_img { position: absolute; width: 100%; z-index: 0; transition: 1.6s; }
.teaser .teaser_img img { width: 100%; }
.teaser .teaser_text { display: none; position: absolute; width: 100%; height: 100%; -webkit-aspect-ratio: 1/1; aspect-ratio: 1/1; z-index: 1; text-align: center; margin: auto; padding: 0.6rem; font-size: 3rem; color: white; text-shadow: 0px 0px 6px orangered; }

#content div.teaser:hover .teaser_img { opacity: 0.4; filter: grayscale(100%) ; }
#content div.teaser:hover .teaser_text { display: flex; flex-direction: column; justify-content: center; }

	  
.wrappy { padding-bottom: 3rem; }


/* Portfolio-Bereich */
.portfolio { position: relative; height: 800px; }
.border { border: 1px dotted black; }
.x_small { height: 300px; }
.small { height: 500px; }
.medium { height: 650px; }
.large { height: 800px; }
.x_large { height: 1000px; }
.portfolio_img { position: absolute; }
.portfolio_img img { width: 100%; height: auto; }



/* Bildreihen im Portfolio-Bereich (Ausstellungen etc.) */
.bildreihe { height: 200px; width: auto; display: inline-block; margin-right: 10px; margin-bottom: 10px; }
.bildreihe:last-of-type { margin-right: 0px; }
.bildreihe img { height: 100%; width: auto; }

	
	  
/* Schriftstandards etc. */
.white { color: white; }	  
.black { color: black; }
h1 { font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; font-size: 3rem; margin-block-start: 0; }	
h1 a { text-decoration: none; color: black; }	
h2 { font-family: futura-pt, sans-serif; font-weight: 400; font-style: normal; font-size: 2rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; margin-block-start: 1rem; }	
h3 { font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; font-size: 1.6rem; }
strong, b { font-family: futura-pt, sans-serif; font-weight: 500; font-style: normal; }
em { font-family: futura-pt, sans-serif; font-weight: 400; font-style: italic; }  




/* Footer */
#footer_start { position: absolute; bottom: 0; right: 5%; z-index: 10; }
#footer { position: static;
	bottom: 0;
	float: right;
	padding-right: 5%;
	padding-top: 2rem;
}

#footer_start a { text-decoration: none; color: white; padding-bottom: 2px; }
#footer a { text-decoration: none; color: black; padding-bottom: 2px; }

#footer_start #navigation_bottom_right, #footer #navigation_bottom_right { padding-bottom: 2rem; }
#footer_start #navigation_bottom_right div, #footer #navigation_bottom_right div { display: inline-block; margin-left: 1.5rem; }

#footer_start a:hover { border-bottom: 1px solid white; }
#footer a:hover { border-bottom: 1px solid black; }







/* große Ausgabegeräte */
@media screen and (min-width: 1560px) { 
		
	#ansage { width: 1396px; left: 50%;
		transform: translateX(-50%); }
	#header_start, #header_content, #content { width: 1396px; }
	
	#footer_start { width: 1396px; 
		left: 50%;
		transform: translateX(-50%);}
	#footer { width: 1396px; margin: 0 auto; float: none;
		padding-right: 0;}
	#footer_start #navigation_bottom_right, #footer #navigation_bottom_right { float: right; }

  
  }
  
  
 
  
  
  
  
/* kleiner werdende Ausgabegeräte */
@media screen and (max-width: 1382px) { 
	
	.x_small { height: 270px; }
	.small { height: 450px; }
	.medium { height: 585px; }
	.large { height: 720px; }
	.x_large { height: 900px; }
}



@media screen and (max-width: 1229px) { 
	
	.x_small { height: 240px; }
	.small { height: 400px; }
	.medium { height: 520px; }
	.large { height: 640px; }
	.x_large { height: 800px; }
}



@media screen and (max-width: 1075px) { 
	
	.teaser .teaser_text { font-size: 2.4rem; }
	
	.x_small { height: 210px; }
	.small { height: 350px; }
	.medium { height: 455px; }
	.large { height: 560px; }
	.x_large { height: 700px; }
}



@media screen and (max-width: 922px) { 
	
	#navi_top li { margin-left: 1.2rem; } 
	
	.x_small { height: 180px; }
	.small { height: 300px; }
	.medium { height: 390px; }
	.large { height: 480px; }
	.x_large { height: 600px; }
}



@media screen and (max-width: 768px) { 
	
	#wrapper_navi_top { display: none; } 
	#header_content #header_right { top: 0.2rem; }
	#header_right .mobile { display: block; } 
	#navi_top_hamburger a { text-decoration: none; color: black; border: 1px solid black; padding: 0.2rem 0.8rem 0.2rem 1rem; }
	
	#content { padding-top: 14rem; }
	
	.teaser .teaser_text { font-size: 1.8rem; }
	
	.x_small { height: 150px; }
	.small { height: 250px; }
	.medium { height: 325px; }
	.large { height: 400px; }
	.x_large { height: 500px; }
}



@media screen and (max-width: 614px) { 
	
	.x_small { height: 120px; }
	.small { height: 200px; }
	.medium { height: 260px; }
	.large { height: 320px; }
	.x_large { height: 400px; }
}







@media screen and (max-width: 480px) { 
	
	#header_left { top: 1.4rem; }
	
	#annette_content {
	width: 80%;
	font-size: 2.8rem;
	line-height: 3rem;
	}
	
	#annette_content h1 a::before {
	content: "."; color: transparent; margin-left: -8px;
	}

	#ansage { position: absolute; top: 12rem; left: 5%; }
	
	.container_teaser {
	display: block;
	margin-block-start: 1.5rem; }
	
	.bildreihe { height: auto; margin-right: 0; }
	.bildreihe img { width: 100%; height: auto; }
}  




@media screen and (max-width: 461px) { 
	
	.x_small { height: 90px; }
	.small { height: 150px; }
	.medium { height: 195px; }
	.large { height: 240px; }
	.x_large { height: 300px; }
}