/* CSS Document */


/* schriftarten ==================================== */
	
			@font-face{
				font-family:"trial";
				src:url("schriften/TT_Modernoir_Trial_Bold.ttf");
			}
	

			@font-face{
				font-family:"chopin_light";
				src:url("schriften/Chopin-Light.ttf");
			}
	
/* end =============================================== */
	
		
/* definitionen ====================================== */
	
		:root {
			--hell100:white;
			--dunkel100:black;
			--texthintergrund:rgba(0,0,0,0.80);
			--texthintergrundresp:rgba(0,0,0,0.70);
			--headerhintergrund:rgba(31,35,30,0.70);
			--headerhintergrundhell:rgba(127,131,126,0.80);
			--footerhintergrund:rgba(38,37,38,0.95);
			--footerhintergrund80:rgba(48,42,48,0.80);			
			--cream100:rgba(214,204,194,1.00);
			--cream50:rgba(214,204,194,0.5);
			--purpur100:rgba(156,116,182,1.00);
			--purpur50:rgba(156,116,182,0.5);
			--gruen100:rgba(130,128,59,1.00);
			--gruen50:rgba(130,128,59,0.5);
			--abrunden:0.3rem;
		}
	
/* end =============================================== */
	
	
/* css reset ========================================= */
		* {
			padding:0;
			margin:0;
			/* keine Ränder dazuzählen */
			box-sizing:border-box;  /* WICHTIG!! */
		}

/* end =============================================== */
	
	
/* body ============================================== */
	
		html {
			height:100%;
			scroll-behavior:smooth;
		}
		
		body {
			min-height:100vh;
			background-color:black;
			scroll-behavior:smooth;
			font-family:chopin_light;
			font-size:clamp(16px,3vw,19px);
			color:var(--cream100);
		}
	
/* end =============================================== */

		
/* links ============================================ */
	
		a {
			color:var(--cream100);
			text-decoration:none;
		}
		
		a:link {
			transition:all ease-in-out 0.5s;
		}
		
		a:hover {
			color:var(--gruen100);
			transition:all ease-in-out 0.3s;
		}
	
		a:hover .font_orange {
		color:var(--cream100);
		transition:all ease-in-out 0.3s;
		}
	
/* end =============================================== */
	

/* container ========================================= */
	
		#container {
			/*max-width:1920px; /*Voll=1920px (x3840px)*/
			margin:0 auto;
			min-height:100vh; /*evtl. dvh (Handy-relevant; umgeht die Kopf-/Fusszeile Apple z.B.)*/
		}
	
/* end =============================================== */
	
	
/* header ============================================ */	
	
		header {
			position:fixed;
			display:flex;
			justify-content:end;
			flex-wrap:wrap;
			align-items:center;
			top:0;
			left:0;
			height:130px;
			z-index:333;
			width:100%;
			padding:1rem;
			background-color:var(--headerhintergrundhell);
			backdrop-filter:blur(2px);
		}

		.logo {
			width:30%;
			position:absolute;
			left:-20px;
			top:-30px;
		}

		.logo img{
			height:150px;
			width:auto;
		}
		
		.navigation {
			width:70%;
			align-content:space-between;
			margin-top:0rem;
		}	

		.active {
			background:var(--gruen100) !important;
		}
/* end =============================================== */
	

/* navigation ======================================== */	
	
		nav {
			padding:1.5rem 0.5rem 1.5rem 0.5rem;
			text-align:right;
			display:flex;
			justify-content:flex-end;
			flex-wrap:wrap;
			gap:0.5rem;
		}
		
		nav a {
			font-family:"chopin_light";
			font-size:15px;
			background:var(--headerhintergrund);
			padding-left:0.5rem;
			padding-right:0.5rem;
			padding-top:0.5rem;
			padding-bottom:0.5rem;
			margin-left:0.5rem;
			color:var(--cream100) !important;
			border:1px solid var(--gruen100);
			border-radius:var(--abrunden);
		}
		
		nav a:hover {
			border:1.5px solid var(--cream100);
			background:var(--gruen100);
			color:var(--dunkel100) !important;
		}

	
/* end =============================================== */
	
	
/* main ============================================== */		
	
		main {
			max-width:100vw;
		}

		section {
			/*height:100vh;*/
			min-height:100vh;
		}
	
		.bild_portrait {
			background-image:url("bilder/hintergrund_ega.jpg");
			background-size:cover;
			background-attachment:fixed;
		}
	
		.bild_admin {
			background-image:url("bilder/hintergrund_admin.png");
			background-size:cover;
			background-attachment:fixed;
		}
	
		.bild_design {
			background-image:url("bilder/hintergrund_design_var.jpg");
			background-size:cover;
			background-attachment:fixed;
		}
	
		.bild_kontakt {
			background-image:url("bilder/portrait_ega.png");
			background-size:cover;
			background-attachment:fixed;
		}
	
/* end =============================================== */
	
	
/* h definitionen ==================================== */

		h1 {
			font-family:"chopin_light";
			color:var(--cream100);
			font-size:clamp(16px,3vw,19px);
			font-weight:300;
			width:80%;
			line-height:1.5;
		}

		h2 {
			font-family:"trial";
			font-size:clamp(24px,3vw,33px);
			font-style:normal;
			Color:var(--gruen50);
			line-height:1.5em;
			margin-top:3rem;
		}
	
/* end =============================================== */
	

	
/* animation ========================================= */
	
		.fly_in {
			transform:translateX(-10rem);
			animation:fly_in_animation 1.5s ease-in-out forwards;
		}
	
		@keyframes fly_in_animation {
		0% {
			transform:translateX(-70rem);
			opacity:0;
		}
		100% {
			transform:translateX(0rem);
			opacity:1;
		}
	}
	
/* end =============================================== */
	
	
/* rechter bereich =================================== */	
	
		.rechts {
			display:flex;
			justify-content:flex-end;
		}
	
		.text_pattern_right {
			background:var(--texthintergrund);
			font-size:clamp(16px,4vw,19px);
			position:relative;
			width:60%;
			min-height:100%;
			padding-left:3rem;
			padding-top:170px;
			padding-bottom:100px;
			padding-right:3rem;
		}
		
		p {
			width:80%;
			line-height:1.5;
			font-size:clamp(16px,3vw,19px);
		}

		#kontakt{
			height:100%;
		}
	
		#map {
			border-radius:var(--abrunden);
			width:100%;
			max-width:680px;
			height:300px;
			filter:grayscale(100%) invert(90%);
		}

		#mailform{
			min-height:30rem;
			width:65%;
			}

		#mailform p{
			padding-top:0.5rem;
			padding-bottom:0.3;
			font-size:clamp(16px,3vw,19px);
			}

		#mailform input{
			width:100%;
			height:1.8rem;
			color:var(--cream100);
			background-color:var(--gruen50);
			border-radius:var(--abrunden);
			text-align:left;
			padding:0.5rem;
		}

		#mailform label input name{
			color:var(--dunkel100);
			}

		#mailform textarea{
			width:100%;
			height:5rem;
			background-color:var(--gruen50);
			font-family:var(--fliesstext);
			border-radius:var(--abrunden);
			color:var(--cream100);
			padding:0.5rem;
		}

		#mail_senden_button{
			color:var(--dunkel100);
			background-color:var(--gruen50);
			text-align:center;
			width:85px;
			height:2rem;
			font-size:14px;
			border-radius:var(--abrunden);
			cursor:pointer;
		}
		
		#mail_senden_button:hover {
			border:1.5px solid var(--gruen100);
			background:var(--purpur50);
			color:var(--dunkel100) !important;
		}

		.li img{
			width:3rem;
			height:auto;
			margin-left:-0.5rem;
			margin-top:3rem;
		}
	
/* end =============================================== */
	

/* totop Button ====================================== */
	
		#totop {
			text-align: center;
			padding:8px 1px 2px 1px;
			margin-bottom:14vh;
			width:2.5rem;
			position:fixed;
			right:0;
			bottom:0;
			z-index:555;
			opacity:0; /* damit es am Anfang nicht schon sichtbar ist */
		}
	
		#totop a {
			display: block;
		}
	
/* end =============================================== */


/* footer ============================================ */
	
		.font_pipe {
			color:var(--purpur100);
		}
	
		footer {
			background:var(--footerhintergrund);
			padding:1.5rem 1rem;
			margin-top:auto;
			position:fixed;
			left:0;
			bottom:0;
			width:100%;
			display:flex;
			justify-content:space-between;
			align-items:center;
		}

		footer div span{
			margin:0 0.5rem;
		}

		#footer_telefon{
			display:flex;
			justify-content:space-between;
			align-items:center;
			margin-bottom:0.5rem;
		}

		a[href^="tel:"] {
			color:var(--gruen100);
			text-decoration:none;
		}

		.anim_ein_aus {
			animation:ein_ausblenden 20s linear infinite;
		}

		@keyframes ein_ausblenden {
			0% {
				opacity:1;
				color:var(--gruen100);
			}
			70% {
				opacity:0.2;
				transform:scale(1.3);
			}
			100% {
				opacity:1;
				color:var(--cream100);
			}
		}
	
/* end =============================================== */


/* impressum datenschutz element ===================== */


	/*klasse zeigt das element an*/
		.show_element{
			display:block !important;
		}
		
		.toggle_button{
			cursor:pointer;
		}

		.toggle_button{
			font-family:"chopin_light";
			font-size:15px;
			background:var(--footerhintergrund);
			width:14rem;
			height:2.5rem;
			padding-left:0.5rem;
			padding-right:0.5rem;
			padding-top:0.5rem;
			padding-bottom:0.5rem;
			margin-left:0.5rem;
			color:var(--cream100) !important;
			border:1px solid var(--gruen100);
			border-radius:var(--abrunden);
		}

		.toggle_button span{
			margin:0 0.5rem;
		}

		.toggle_button:hover {
			border:1.5px solid var(--cream100);
			background:var(--gruen100);
			color:var(--dunkel100) !important;
		}

		.toggle_button:hover .font_pipe {
			color:var(--cream100);
		}

		.schliessen_button{
			position:absolute;  /*funktioniert wegen pos fixed #impressum*/
			top:1rem;
			right:1rem;
			width:auto;
			color:var(--cream100) !important;
			border:1px solid var(--gruen100);
			border-radius:var(--abrunden);
			display:flex;			/*3er pack einmitten*/
			justify-content:center;  /*3er pack einmitten*/
			align-items:center;   /*3er pack einmitten*/
		}
		
		.schliessen_button .fa{
			pointer-events:none;
		}

		#impressum_datenschutz {
			border:1px solid rgba(130,128,59,1.00);
			border-radius:0.5rem;
			font-size:14px;
			position:fixed;
			left:1rem;
			right:0.5rem;
			top:1rem;
			width:70%;
			height:80vh;		
			margin:0 auto;
			background-color:var(--footerhintergrund);
			padding:2rem;	
			overflow-x:hidden;
			display:none;
			z-index:555;
		}

		#impressum_datenschutz p{
			margin-top:2.5rem;
			width:95%;
			font-size:clamp(16px,3vw,19px);
		}

/* end =============================================== */


/* animation ========================================= */
	
			.anim_ein_aus {
				animation:ein_ausblenden 2s linear infinite;  /*es braucht 3 komponenten*/
			}
		
		@keyframes ein_ausblenden {
				0% {
					opacity:1;
				}
				70% {
					opacity:0;
				}
				100% {
					opacity:1;
					color:orange;
				}
		}

			.anim_schweben {
				animation:schweben 2s linear infinite;
			}
	
		@keyframes schweben {
				0% {
					transform:translateY(-0.5rem);
				}
				100% {
					transform:translateY(0.5rem) rotate(356deg);
				}
		}


			.anim_shake {
				animation:shake 2s;
				animation-iteration-count: infinite;
			}

		@keyframes shake {
			  0% { transform: translate(1px, 1px) rotate(0deg); }
			  10% { transform: translate(-1px, -2px) rotate(-1deg); }
			  20% { transform: translate(-3px, 0px) rotate(1deg); }
			  30% { transform: translate(3px, 2px) rotate(0deg); }
			  40% { transform: translate(1px, -1px) rotate(1deg); }
			  50% { transform: translate(-1px, 2px) rotate(-1deg); }
			  60% { transform: translate(-3px, 1px) rotate(0deg); }
			  70% { transform: translate(3px, 1px) rotate(-1deg); }
			  80% { transform: translate(-1px, -1px) rotate(1deg); }
			  90% { transform: translate(1px, 2px) rotate(0deg); }
			  100% { transform: translate(1px, -2px) rotate(-1deg); }
			}
	
/* end =============================================== */
		
	

/* RESPONSIVE ======================================== */
/* =================================================== */
		

		@media screen and (max-width:1150px){
			
			
			nav a{
				text-align:center;
			}
			
			h1 {
				width:90%;
			}
			
			.text_pattern_right{
				width:60%;
			}
			
			.text_pattern_right h2{
				margin-left:0rem;
			}		
			
			.text_pattern_right p{
				width:90%;
			}
			
			.fly_in {
				transform:translateX(-10);
				animation:fly_in_animation 1.5s ease-in-out forwards;
				}

				@keyframes fly_in_animation {
				0% {
					transform:translateX(-70rem);
					opacity:0;
				}
				100% {
					transform:translateX(0rem);
					opacity:1;
				}
			}

			#mailform{
				height:30rem;
				}
			
			#kontakt{
				padding-bottom:10rem;
			}
			
			#totop {
				margin-bottom:5vh;
			}
			
			footer {
				padding:1rem;
				flex-direction:column;
				text-align:center;
				align-items:center;
			}

			footer div span{
				margin:0 0.5rem;
			}
			
			#footer_adresse{
				margin-bottom:1rem;
			}

			#footer_telefon{
				margin-bottom:1.3rem;
			}
			
			#impressum_datenschutz {
				width:85%;
				height:70vh;
				margin:0 auto;
			}
			
			#impressum_datenschutz p{
				width:100%;
			}	
/* Ende 1150*/
		}

		@media screen and (max-width:850px){
						
			
			header {
				height:150px;
			}
			
			h1 {
				width:100%;
			}
			
			.text_pattern_right{
				width:100%;
				padding-left:5rem;
			}
			
			.text_pattern_right h2{
				margin-left:0rem;
			}		
			
			.text_pattern_right p{
				width:100%;
			}

			nav{
				display:block;
				flex-direction:row;
				gap:0.5rem;
			}
			
			nav a{
				text-align:center;
			}
			
			.panels {
				padding:0;
			}

			#mailform{
				height:30rem;
				}

			#footer_telefon{
				margin-bottom:1.3rem;
			}
						
			#impressum_datenschutz {
				width:95%;
				height:70vh;
				margin:0 auto;
			}
			
			#impressum_datenschutz p{
				width:100%;
			}	
			
			#totop {
				margin-bottom:5vh;
			}
			
			.fly_in {
				transform:translateX(-10rem);
				animation:fly_in_animation 1.5s ease-in-out forwards;
				}

				@keyframes fly_in_animation {
				0% {
					transform:translateX(-60rem);
					opacity:0;
				}
				100% {
					transform:translateX(0rem);
					opacity:1;
				}
			}
			
/* Ende 850*/
		}

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

			section {
				/*height:100vh;*/
				height:auto;
			}		
			
			header {
				height:195px;
				background-color:var(--headerhintergrundhell);
			}

			.logo img{
				height:120px;
			}
			
			h1 {
				width:100%;
			}
			
			.text_pattern_right{
				width:100%;
				padding-left:2rem;
				padding-right:2rem;
				background-color:var(--texthintergrundresp);
			}
			
			.text_pattern_right h2{
				margin-left:2rem;
			}		
			
			.text_pattern_right p{
				width:100%;
			}

			.navigation{
				width:auto;
				margin-top:-1.5rem;
			}

			nav{
				display:flex;
				flex-direction:column;
				justify-content:center;
				gap:0.5rem;
			}
			
			nav a{
				text-align:center;
				font-size:12px;
			}	
			
			#kontakt{
				margin-bottom:-3rem;
			}
			
			#kontakt p span{
				font-display:block;
			}
			
			#map {
				width:98%;
			}
			
			#mailform{
				height:30rem;
				width:98%;
				}
			
			footer{
				height:auto;
				position:relative;
			}
			
			#footer_adresse span{
				margin:0 0.5rem;
				height:3px;
				display:block;
			}
			
			#footer_adresse .font_pipe{
				color:rgba(0,0,0,0);
				width:40%;
				}

			#footer_telefon{
				margin-bottom:1.3rem;
			}
			
			#footer_datenschutz{
				width:40%;
				padding-right:1rem;
				padding-bottem:1rem;
			}
			
			.toggle_button{
				font-size:12px;
			}
					
			.schliessen_button{
				position:absolute;  /*funktioniert wegen pos fixed #impressum*/
				top:1rem;
				left:1rem;
				max-width:5rem;
				color:var(--cream100) !important;
				border:1px solid var(--gruen100);
				border-radius:var(--abrunden);
				display:flex;			/*3er pack einmitten*/
				justify-content:center;  /*3er pack einmitten*/
				align-items:center;   /*3er pack einmitten*/
			}
			
			#impressum_datenschutz {
				min-width:90%;
				height:75vh;
			}
			
			#impressum_datenschutz p{
				width:100%;
				padding-top:2rem;
			}
						
			#totop {
				margin-bottom:5vh;
			}
			
			.toggle_button{
				width:auto;
			}
			
			.fly_in {
				transform:translateX(-10);
				animation:fly_in_animation 1.5s ease-in-out forwards;
				}

				@keyframes fly_in_animation {
				0% {
					transform:translateX(-50rem);
					opacity:0;
				}
				100% {
					transform:translateX(-2rem);
					opacity:1;
				}
			}
			
/* Ende 700*/
		}