/* CSS Document */
 

@font-face{
	font-family: 'manrope';
		src: url("schriften/manrope/manrope_variablefont_wght.ttf");
		}

@font-face{
	font-family: 'special elite';
		src: url("schriften/special_elite/specialelite_regular.ttf");
		}
	
/*--------------------*/
/*GENERAL DESIGNS*/	
/*--------------------*/

		  *{
			box-sizing: border-box;
			margin:0;
			padding:0;
			}
		
		body {
			background-color: #F9F5EA;
			/*border: 2px dashed limegreen;*/
			color: #0A1F15;
			font-family:'manrope', sans-serif;
			font-weight: 200;					
			letter-spacing: 0.1rem;
			margin:0 auto; 
			margin-right:none;
            max-width: 1200px;
            padding: 2rem;
            position:relative;
			width:100vw;					
			}
		
		h1 {
			font-family: 'special elite', cursive;
			font-size: 3rem;
			padding-bottom: 1rem;
			padding-top:2rem;
            }
		

		h2 {
			font-family: 'special elite', cursive;
			font-size: 2.5rem;
			padding-bottom:0.5rem;
			padding-top: 2rem;
			}

        h3 {
			font-family: 'special elite', cursive;
			font-size: 1.5rem;
			padding-bottom:0.5rem;
			}
		
	
		img{
            width: 100%;
    		}

		video{
            width: 100%;
    		}
	

/*--------------------*/
/*LINKS DEFINIERT*/
/*--------------------*/

		a{
          font-weight:bold;
          }
 
   
            a:link{
                color:black;
                text-decoration: underline; 
                transition: all 0.9s ease-in-out;
            	}
            
            a:visited{
                color:rgba(166,164,165,0.65);
            	}
            a:hover{
                background:#F9F5EA;
                color:darkseagreen; 
                text-decoration: none;
                transition: all 0.9s ease-in-out;
            	}
            a:active{
                color:darkred;
            	}

			/*	.nounderline{
						text-decoration:none;
						}*/

a:link .kontakt {
                color:#F9F5EA;
				text-align: center;
                text-decoration: underline; 
                transition: all 0.9s ease-in-out;
            	}

a:visited .kontakt {
                color:rgba(166,164,165,0.65);
            	}
a:hover .kontakt {
                background:#F9F5EA;
                color:darkseagreen; 
                text-decoration: none;
                transition: all 0.9s ease-in-out;
            	}
            a:active{
                color:darkred;
            	}


/*--------------------*/
/*FORMULAR*/
/*--------------------*/

			input,textarea,select{
				background-color:#F9F5EA;
				border:1px dashed black;
				border-radius: 5px;
				color:darkslategray;
				font-family:'manrope', sans-serif;
				font-size:1.2rem;
				padding:0.8rem;
				trasition: background ease-in-out 0.4s;
				width:100%;
				}

					input:focus, textarea:focus {
						background-color:rgba(156,139,105,0.14);
						}					

					input,textarea,select,a:hover{
						cursor:pointer;
						}

		input[type=radio]{								/*brauch ich dies überhaupt noch*/
			background-color:#F9F5EA;
			color:darkslategray;
			trasition: background ease-in-out 0.4s;
			width:none;
			}

		input[type=submit]{
			background-color:#F9F5EA;
			border:2px dashed black;
			border-radius: 15px;
			transition: all ease-in-out 0.9s;
			}

					input[type=submit]:hover{
							background-color:rgba(156,139,105,0.54);
							border:2px solid black;
							color:#F9F5EA;
							font-size:1.3rem;
							transition: all ease-in-out 0.9s;
							}

.datenschutz_contain{
	display:flex;
	justify-content: space-around;
	text-align:left;
}		

.daten_frage{
	align-content:left;
	width:80%;
}

#datenschutz_checkbox {
	align-content: right;
	border:1px dashed black;
	border-radius:5px;
	background-color:#F9F5EA; 
	width:20%;	
}

		

/*#datenschutz_checkbox {
        		display:none;
      			-webkit-appearance: none;
				padding:0.8rem;      		
        		margin:1.5rem 0rem;
    			}
    
    	#datenschutz_label {
        		border:1px dashed black;
				border-radius: 5px;
				cursor:pointer;
				font-family: 'manrope';				      		
        		margin:2.5rem 0rem;
				padding:0.8rem;
				width:100%;
    			}*/

/*--------------------*/
/*cookies*/
/*--------------------*/

#cookiePopup {
	border:1px solid rgba(63,52,32,1.00);
	border-radius: 5px;
	bottom:20px;
	box-shadow: 2px -2px 12px black;
	background-color:#CFB987;
	position: fixed;
	padding: 1rem;
	right:20px;
	width: 50%;
	z-index: 1000000;
}

#cookiePopup p{
	color:black;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

#acceptCookie {
	background-color: rgba(63,52,32,1.00);
	border-radius: 5px;
	color: #F9F5EA;
	cursor:pointer;
	font-size: 14px;
	font-family: 'manrope';
	padding: 5px;
	margin:10px 0px 5px 0px;
}
	


/*--------------------*/
/*KLEINE DESIGN KLASSEN*/
/*--------------------*/
		
		.padding_top{
			padding-top:2rem;
			}

		.reverse{
			flex-direction: row-reverse;
			}

		.zentriert{
			text-align: center;
			}

		.totop{
        	bottom:3rem;
			color:darkslategrey;
        	cursor:pointer;
			display:none;
			opacity:1;
			position:fixed;				
        	right: 3rem; /*calc((100vw - 1200px)/2);*/
            width:5rem;
        	z-index:33;
    		}

		
/*--------------------*/
/*HEADER*/
/*--------------------*/
	
header{					
	display:flex;
	font-weight: 700;
	justify-content: space-between;
	/*margin:2rem;*/
	/*margin:0 auto;*/
	margin-bottom:2rem;
	position: relative;
	transition: all ease-in-out 0.9s;		
	}

	.titel_links{		
		border-bottom: 3px double black;	
		border-top: 2px solid black;
		padding-bottom: 0rem; 
		padding-top: 3.5rem;
		text-align:center;
		width:40%;
		}
		
	.logo{		
		left:36%;
		position:absolute;
		top: -37%;
		width:18rem;
		}
		
	.titel_rechts{
		align-content:right;
		border-bottom: 3px double black;
		border-top: 2px solid black;			
		padding-bottom: 0rem; 
		padding-top: 3.5rem;
		width:37%
		}			
		
            
/*--------------------*/
 /*NAVIGATION*/
/*--------------------*/
      
			nav{
                border:1px solid black;
                border-radius:10px;
				display: flex; 
                justify-content:space-around;
                margin-top:4rem;
				padding:0.5rem;
				transition:all ease-in-out 0.9s;
				width:100%;
           		}
		
		 		nav a:link {
                	color: black; 
			 		margin:0.5rem 0rem;
			 		padding:0.5rem;
			 		text-decoration: none;
                	transition: all 0.9s ease-in-out;
            		}

            	nav a:visited{
                	color:slategrey;
            		}

            	nav a:hover{             		
                	background-color:rgba(156,139,105,0.54);
					color:#F9F5EA;
                	margin:-0.5rem 0rem;
                	padding-top:-1rem;
                	text-decoration: none;
                	transition: all 0.9s ease-in-out;
            		}

            	nav a:active{
            		}
		

/*--------------------*/
/*MAIN (UBER MICH / HOCHZEIT )*/
/*--------------------*/


	.main{
		display:flex;
		justify-content:space-between;
		margin: 3rem 0rem 0rem 0rem;
		}

		.main_border{ 			
			border-bottom:1px solid black;
			border-top:1px solid black;
			}

/*--------------------*/
/*UBER MICH*/
/*--------------------*/

		.uber_mich{
			align-content: left;
            border-bottom:none;
			border-left:1px solid black;
			border-right:1px solid black;
			padding:1rem;    
			width:35%;
			} 

		.me_unten{
			position:relative;
            transition:all 1.5s ease-in-out;
			}

		.me_foto{
			border-radius:10px;
			height: 100%;
			object-fit: cover;
            opacity:0;
			padding:0rem;
			transition:all 1.5s ease-in-out;
			width:100%;
            z-index:1;
			}

		.me_sketsch{
			height: 100%;
			opacity:1;
			position:absolute;
            right:0rem;
            top:0rem;
			transition:all 1.5s ease-in-out;
            width:100%;
            z-index:8;
			}

		.me_sketsch img{				/*lässt sich dies nicht im me_sketsch integrieren???*/
			border: 3px double black;
			border-radius:10px;
			padding:0rem;
			}

		.me_unten:hover .me_foto{
			opacity:1;
			}

		.me_unten:hover .me_sketsch{
			opacity:0;
			}

/*--------------------*/
/*UBER MICH_RECHTS KOMPLETT*/
/*--------------------*/


	.uber_mich_rechts{														
			align-content: right; 
			flex-grow:1;
			margin:0rem;
			overflow: hidden;
			padding:1rem;
			position:relative;
			transition: all 0.9s ease-in-out;			
			width: 65%;																																				}

			.uber_mich_rechts img{			
					filter:grayscale(100) contrast(1.2);
					flex-grow:1;
					height:100%;
					object-fit:cover;
					overflow:hidden;
					transform: scale(1.1);
					transition: all 0.9s ease-in-out;	
					width:100%;
					}

			.uber_mich_rechts_text{														
					align-items:center;
					background: rgba(22,22,22,0.8);
					bottom:0rem;
					color:#F9F5EA;					
					height:100%;
					justify-content:center;
					left:0rem;
					padding:14rem 2rem;
					position:absolute;	
					text-align:center;
					transition:all 1s ease-in-out;								
					width:100%;
					}	

						.uber_mich_rechts:hover .uber_mich_rechts_text{
								left:100%;
								transition: all 0.9s ease-in-out;
								}

						.uber_mich_rechts:hover img{							
								filter:grayscale(0);
								transform:scale(1.2);
								transition: all 0.9s ease-in-out;
								}

			.dunkel{
				background-image: url("fotografie/ich_hut_tn.jpg");
				background-position: center;
				background-size:cover;       		
				color:#F9F5EA;
				opacity:0.8;
				padding:14rem 2rem;
				}

/*--------------------*/
/*HOCHZEITSFOTOGRAFIE*/
/*--------------------*/

		.main_links{					
			align-content: left;
			border-right:5px double black;
			padding:2rem 4rem;
			/*text-align: justify;*/
			width:50%;
			}
                
                
		.main_rechts{
			align-content: right;						
			padding:2rem 4rem;
			/*text-align: justify;*/
			width:50%;
			}
	

				.main_unten{						
					border-top: 5px double black;
					padding-top: 3rem;
					}

		.bilder{
			border:5px dotted black;
			filter: grayscale(1);
			flex-grow:1;			/*Das funktioniert glaube ich noch nicht!!*/
            margin:1rem 0rem; 
            object-fit:cover;
			padding:0.5rem;
			width:100%;
			}

/*--------------------*/
/*TIERFOTOGRAFIE*/
/*--------------------*/

.tiere{
        display:flex;
        flex-wrap: wrap;
		gap:2rem;
        justify-content:center;
        margin-top:3rem;
		}



    	.tiere_fotos{
        		border: 2px solid black;
				box-shadow: 2px 3px 5px 3px #CEBB8E;
            	flex-grow:1;
				filter:grayscale(1) contrast(1);
				height:250px;
				margin-bottom: 1rem;
				/*object-fit:cover;*/
        		overflow:hidden;
				position:relative;
				width:350px;       		
    			}

					.tiere_fotos img{
								height:100%;
                                object-fit:cover;
								width:100%;
								}
                                    

/*--------------------*/
/*REISEFOTOGRAFIE*/
/*--------------------*/

	.weltkarte_container{
		/*border: 4px dotted crimson;*/
		font-size:2rem;
        height: 735px;
      	margin:4rem auto;
		padding-bottom: 0rem;
        position:relative;
        transform:scale(0.5);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:200%;
    	}
    
	        .karte{							
		        border: 5px double grey;
                width:100%;
                }


    .hand {
        animation:handanimation 1s ease-in-out;
        animation-iteration-count:5;
		height:12rem;
        position:absolute;
        right:0rem;
        top:-4rem;
        transform: rotate(-30deg);
        width:18rem;
        z-index:900;       
        }

@keyframes handanimation {
    		0%{
      		  right:0rem;
        	  top:-5rem; 
			  }
    		50%{
        	  right:1rem;
        	  top:-2rem;
    		  }
   	 		100%{
        	  right:0rem;
        	  top:-5rem;  
    			}
			}

	.laender{
			border:1px solid black;
			/*column-gap: 2rem;*/
			display:flex;
			justify-content: space-between;
			/*gap:5rem;*/
			/*margin:0 auto;*/
			margin-top: 3rem;
			/*padding-bottom: 1rem;
			padding-top:1rem;*/
			opacity: 0.5;
			padding: 1rem 2rem;
			position: relative;
			transition: all 0.9s ease-in-out;
			}

				.laender:hover{
						opacity: 1;
						transition: all 0.9s ease-in-out;
						}
			

			.laender_fotos{
				border:2px solid black;
				filter: grayscale(2);
				height:300px;
				margin:0rem 1rem;
				/*object-fit: cover;*/
				width:100%;
				}

							
					.laender_fotos img{					
							height:100%;
                            object-fit:cover;
							width:100%;
							}
				
				/*laender_fotos video{					
							height:100%;
                            object-fit:cover;
							width:100%;
							}*/

	

			.laender_text{
				background: rgba(156,139,105,0.54);
				border:7px double #F9F5EA;
				color:#F9F5EA;
				height:300px;
				line-height: 1.5rem;
				margin:0rem 1rem;
				/*margin-right: 2rem;*/
				padding:1rem;
				padding-top: 3rem;
				text-align: center;
				width:100%;
				}


/*--------------------*/
/*FOOTER*/
/*--------------------*/

	footer{		
			border-bottom:2px solid black; 
			border-top: 4px double black;
			display:flex;
			font-size:0.8rem;
			justify-content: space-between;
			margin-bottom:1rem;
			margin-top: 3rem;		
			padding: 1rem 5rem;
			}  
	
		.footer_links{
			text-align: left;
			}
	
		.footer_rechts{
			text-align: right;
			}

			.footer_rechts a{
				text-decoration:none;
				}	
.symbole{
    filter:grayscale(1);
	width:1.5rem;
    }

.symbol_gross{
	filter: contrast(2); 
	width: 3rem;
	}





/*--------------------*/
/*RESPONSIVE CODE - nur Weltkarte*/
/*--------------------*/

@media screen and (max-width:1190px){

	.weltkarte_container{
        height: 678px;
        transform:scale(0.45);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:210%;
    	}
    
	        .frame{						
                transition:all 0.9s ease-in-out;
                width:auto;
                }
}




/*--------------------*/
/*RESPONSIVE CODE - mittelgrosses Fenster*/
/*--------------------*/

@media screen and (max-width:1100px){
	
/*LOGO, FIRMENNAME DESIGN*/

	.titel_links{
		width:33%;
		}
		
	.logo{
		position:absolute;
			top: -15%;
			left:25%;
		width:16rem;
		}
		
	.titel_rechts{
		text-align:left;
		width:45%
		}
	
/*WELTKARTE*/
	
	.weltkarte_container{								
        height: 576px;
        transform:scale(0.4);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:240%;
    	}
    
	        .karte{							
                transition:all 0.9s ease-in-out;
                width:auto;
                }


	
	.laender_text{
				overflow:scroll;
				padding-top: 2rem;
				}

	}



/*--------------------*/			
/*RESPONSIVE CODE*/	
/*--------------------*/


@media screen and (max-width:960px){
	
	.weltkarte_container{
        height: 495px;
        transform:scale(0.32);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:280%;
    	}
    
	        .karte{							
                transition:all 0.9s ease-in-out;
                width:auto;
                }
	
}



/*--------------------*/			
/*RESPONSIVE CODE - erneut nur weltkarte*/	
/*--------------------*/


@media screen and (max-width:875px){
	
	.weltkarte_container{
		height: 500px;
        transform:scale(0.33);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:300%;
    	}
}


/*--------------------*/			
/*RESPONSIVE CODE - von nebeneinander zu untereinander - */	
/*--------------------*/

@media screen and (max-width:800px){
			
			body{
                margin-right:none;
				padding:0.7rem;
                transition:all ease-in-out 0.9s;
                width:100%;
            	}
			
			h1{
				font-size:2rem;
				}
			
			header{
				flex-direction: column; 
				justify-content: space-around;
				padding-right:none;    /*Versuch bei der Mobilansicht den rechten Rand wegzunehmen, ganzes*/
				position:relative;
				}

			 .titel_links{
				border-bottom:none;
				padding-left:2rem;
				text-align:left; 			 	
				width:100%;}
			
			
			.logo{
				opacity: 0.5;
				padding-right:none;
				position:absolute;
					top: -5%;
					left:45%;	/*Versuch bei der Mobilansicht den rechten Rand wegzunehmen, war vorhin 45%*/		
				width: 17rem;
				}
	
			
			.titel_rechts{						/*Wieso hier noch links-bündig???*/
				border-top:none;
				padding-left:2rem;
				padding-top: 1.5rem;
				width:100%;
				}
			
			
			
			nav{
                flex-direction: column;
				justify-content: space-between;
				margin: 0 auto;
				padding-right:none;  /*Versuch bei der Mobilansicht den rechten Rand wegzunehmen, ganzes*/
				width:80%;
           		}
			
			nav a{
				boder-bottom:1px solid black;
				text-align: center;
				transition: all 0.9s ease-in-out;
                width:120%;
				}
			
				nav a:link {
			 		border-bottom: 1px solid black;
					margin:0rem 0rem;
			 		padding:1rem;
			 		text-decoration: none;
                    width:100%;
					}
				
				nav a:hover{
					margin:0rem 0rem;
                	transition: all 0.9s ease-in-out;
					width:100%;
					}
			
			
			
		.main{
			border-top: 1px solid black;
			flex-direction:column;
			justify-content: space-around;
			margin: 1rem 0rem 0rem 0rem;
			transition: all 0.9s ease-in-out;
			}
			
		.main_border{ 					
			border-bottom:none;
			border-top:none;
			}
	
		.uber_mich{
			align-content: center;
            border:2px solid black;
			padding:1rem 0.5rem; 
			text-align: justify;
			width:100%;
			} 
		
		.uber_mich_rechts{
			align-content: center; 																					
			flex-grow:1;
			overflow:hidden;
			padding-bottom:2rem;
			position:relative;
			transition: all 0.9s ease-in-out;
			width: 100%;
			}
	
		
		.uber_mich_rechts img{				
					filter:grayscale(1) contrast(1.2);
					/*flex-grow:-1;*/
					min-height: 250vw;
					object-fit:cover;	
					}

			.uber_mich_rechts_text{								/*Dies muss ich noch stylen!*/
					align-items:center;
					background:rgba(22,22,22,0.8);
					color:#F9F5EA;
					/*display:flex;*/
					height:100%;
					justify-content:center;
					margin: 0 auto;
					padding:6rem 2rem;
					position:absolute;
						bottom:0rem;
						left:0rem;
					text-align:center;
					transition:all 0.9s ease-in-out;
					width:100%;
					}	

						.uber_mich_rechts:hover .uber_mich_rechts_text{
								left:100%;
								transition: all 0.9s ease-in-out;
								}
			
						.uber_mich_rechts:hover{
								flex-grow: -1;   /*loeschen???*/
								filter:grayscale(none) contrast(0);
								}	
				
	
				.dunkel{
					padding:5rem 2rem;
					}

			
		.main_links{					
			align-content: left;
			border-bottom: 3px double black;
			border-right:none;		
			padding:2rem 1rem;
			text-align: justify;
			width:100%;
			}
                
               
		.main_rechts{
			align-content: right;				
			padding:2rem 1rem;
			text-align: justify;
			width:100%;
			}
	
             
	
/*WELTKARTE*/
	
	.weltkarte_container{
        height: 432px;
        transform:scale(0.29);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:330%;
    	}
    
	        .karte{									       
                transition:all 0.9s ease-in-out;
                width:auto;
                }
	
	.laender{
			
			column-gap: 2rem;
			/*gap:5rem;*/
			/*margin:0 auto;*/
			flex-direction: column;
			padding: 1rem 1rem;
			padding-top:-2rem;
			}
	
	
			.laender_fotos{
				margin-left:0rem;
				}
	

	
			.laender_text{
				margin-left:0rem;
				margin-top:1rem;
				padding-top: 2rem;
				text-align: center;
				width:100%;
				}

	
	
	footer{ 
			flex-direction:column;
			justify-content: space-around;		
			margin-top: 3rem;
			margin-bottom:1rem;
			padding: 1rem 3rem;
			}  
	
		.footer_links{
			text-align: center;
			}
	
		.footer_rechts{
			text-align: center;
			}

			.footer_rechts a{
				text-decoration:none;
				}	
		
			
} 


/*--------------------*/			
/*RESPONSIVE CODE - erneut nur weltkarte*/	
/*--------------------*/


@media screen and (max-width:725px){
	
	.weltkarte_container{
		height: 360px;
        transform:scale(0.26);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:370%;
    	}
}

/*--------------------*/			
/*RESPONSIVE CODE - erneut nur weltkarte*/	
/*--------------------*/


@media screen and (max-width:650px){
	
	.weltkarte_container{
		font-size:4rem;
		height: 330px;
        transform:scale(0.23);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:400%;
    	}
    
	        .karte{									        
                transition:all 0.9s ease-in-out;
                width:auto;
                }
	
	.hand {
		height:15rem;
        width:21rem;       
        }
}



/*--------------------*/			
/*RESPONSIVE CODE - erneut nur weltkarte*/	
/*--------------------*/


@media screen and (max-width:575px){
	
	.weltkarte_container{
		height: 290px;
        transform:scale(0.21);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:450%;
    	}
}
	
	
	
/*--------------------*/			
/*RESPONSIVE CODE - plus ou moins Handies*/	
/*--------------------*/


@media screen and (max-width:500px){

	h2 {
		font-size: 1.7rem;
		}
	
	h3 {
		font-size: 1.5rem;
		}
	
		header{
				flex-direction: column;
				justify-content: space-around;
				position:relative;
				}

			 .titel_links{
				border-bottom:none; /*wird das nicht von oben übernommen?*/
				padding-left:1rem;
				padding-right: 4rem;	
				width:100%;}
			
			
			.logo{
				opacity: 0.3;
				position:absolute;
					top: -5%;
					left:26%; /*Versuch bei MObileansicht den rechten Rand wegzubringen*/
				width: 17rem;
				}
	
			
			.titel_rechts{						/*Wieso hier noch links-bündig???*/
				border-top:none;
				padding-left:1rem;
				padding-top: 0rem;
				width:100%;
				}
	
		nav{
           border:1px solid black;
           border-radius:5px;
           /*margin-top:2rem;*/
		   padding:0rem 0.5rem;
           }
	
			nav a:link { 
			 		margin:0rem;
			 		padding:0.5rem;
			 		text-decoration: none;
                	transition: all 0.9s ease-in-out;
					}
	
	
	.uber_mich{										/*das funktioniert noch nicht*/
			align-content: center;
			}
	
	
	
	.weltkarte_container{											
		height: 250px;
        transform:scale(0.18);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:520%;
    	}
    
	        .karte{							
                transition:all 0.9s ease-in-out;
                width:auto;
                }
	
	.laender{
		opacity:1;
		}
	

	.bilder{
			border:3px dotted black;
			padding:0.3rem;
			}	
	
	
	#cookiePopup {
	width: 80%;
	z-index: 1000000;
	}
	
	
}


/*--------------------*/			
/*RESPONSIVE CODE - plus ou moins Handies*/	
/*--------------------*/


@media screen and (max-width:430px){

.weltkarte_container{											
		height: 180px;
        transform:scale(0.15);
        transform-origin: 0 0;
        transition:all 0.9s ease-in-out;
        width:630%;
    	}
    
	        .karte{							
                transition:all 0.9s ease-in-out;
                width:auto;
                }
	
	
}