@charset "UTF-8";
/* CSS Document */


/*=====================================================
	SCHRIFTEN
=====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Alata&family=Bad+Script&family=Give+You+Glory&family=Poiret+One&family=Poor+Story&family=Poppins:wght@200&family=Quicksand:wght@500&family=Shadows+Into+Light&family=Spinnaker&display=swap');

@import url("https://use.typekit.net/utm0ath.css"); /*fairweather*/


@import url("https://use.typekit.net/utm0ath.css"); /*le-havre-rounded*/



/*=====================================================
	CSS RESET
=====================================================*/

	:root {
		--meinefarbe: white; /*hier Möglichkeit, eine Farbe zu definieren, die an diversen Stellen bei --meinefarbe verwendet werden soll. */
	}
		
		*{
			box-sizing:border-box;
			margin:0;
			padding:0;
			font-family: 'Fairweather', 'Alata';
		}
		
/*=====================================================
	GENERELL CSS - STANDARDELEMENTE
=====================================================*/		

html {
	
	font-size: 100%;
}
		body {
			background-size: cover;	
			background-color: black;
			background-attachment: fixed;
/*			background-image:url("../bilder/lights.jpg"); 
*/			/*display: flex;
			flex-direction: column;
			align-items: center;*/
			font-size: 1.6rem;
			text-align:left;
		}
	
		main {
			max-width: 1200px;
			margin: 0 auto;
		}

		header {
			margin: 0 auto;
			max-width: 1200px;
			padding-top: 5rem;
		}

		div{
			font-family: 'Fairweather', 'Alata';
			background: rgba(228,228,228,0);
			/*border:1px solid var(--meinefarbe);*/
			padding:1rem;
			/*color: var(--meinefarbe);*/
			color: white;
/*			border: 1px red solid;
*/		}

		h1 {
			font-family: 'Fairweather', 'Alata';
			font-weight:400;
			font-size: 50px;
			color:var(--meinefarbe);
			text-transform: none;
			line-height: 6rem;
			padding: 1rem;
			margin: 1rem;
		}

		h1 span {
			font-size: 80px;
			font-family: 'bad script', 'Spinnaker', 'Alata';
		}

		h2 {
			font-family: 'Fairweather', 'Alata';
			font-weight:400;
			padding; 1rem;
			color: var(--meinefarbe);
			padding:0.2rem;
			margin:1rem 0rem;
		}

		h3 {
			font-family: 'Fairweather', 'Alata';
			font-weight:200;
			color:var(--meinefarbe);
			font-style:italic;
			margin:1rem 0rem;
		}	
		
		a {
			text-decoration: none;
			color:var(--meinefarbe);
		}
		
		img {
			width:100%;
		}
		
		ul {
			margin-left:2rem;
			margin-bottom:2rem;
		}

		hr {
			height:0px;
			border-top:none;
/*			border-bottom:1px solid var(--meinefarbe);
*/			margin-bottom: 2rem;
		}

		footer {
			color: white;
			font-family: 'Fairweather', 'Alata';
			background-color: rgba(0,0,0,0.4);
/*			border: 1px red solid;
*/			max-width: 1200px;
			margin: 0 auto;
		} 

		footer a {
			color: white;
		}

/*=====================================================
	CSS WEITERE FORMATIERUNGEN
=====================================================*/	

		.welcome {
			font-size:2.6rem;
			padding: 5rem 0 0 2rem;
			letter-spacing: 0.04rem;
		}		

		.carousel__button { /*fancybox*/
			color: white;
		}

		.footerzeile {
			width: 100%;
			margin: 0 auto;
			text-align: center;
			letter-spacing: 0.04em;
			font-size: 1.4rem;
			padding: 0rem 2rem 2rem 2rem;
		}

		#herz {
			color: red;
			font-size: 1.6rem;
		}
		.design_einzelbild {
			display:flex;
			justify-content:space-between;
			flex-wrap: wrap;
			align-items:center;
			max-width: 60rem;
			width: 100%;
			margin-left: 2rem;
		}

/*=====================================================
	LOGO
=====================================================*/	

		.design_logo {
			display:flex;
			justify-content:space-between; /* damit werden die Menupunkte vom ((Logo)) getrennt */
			flex-wrap:wrap; /* um den Umbruch zuzulassen, Standard wäre no-wrap */
			align-items:center; /* vertikal zentrieren */
			max-width: 60rem;
			width: 100%;
		}
		
		.design_logo nav ul { /*im design 01 ist ein nav drin und darin eine ul, die man flexen möchte - sonst wird nur design und nav geflext (gemäss .design_01 oben) */
			display:flex;
			gap:0.5rem;
		}
		
		/* li stylen */
			/*.design_logo nav ul li {
			border:1px solid green;
			padding:0.2rem 0.3rem;
		}
		*/

/*=====================================================
	NAVIGATION
=====================================================*/		

		nav {
			display: flex;
			flex-direction: column;
			font-size: 2.4rem;
			padding-top: 4rem;
			padding-right: 1rem;
			line-height: 40%;
			text-align: right;
			/*gap: 50px;*/
		}

		#main-navigation {
			margin-right: 5rem;
		}

		#subnavigation_farben {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			font-size: 1.8rem;
			line-height: 100%;

		}
		/*#subnavigation_portfolio {
			display: none;
		}*/
		#subnavigation_arbeiten {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			font-size: 1.8rem;	
			line-height: 100%;
		}

/*=====================================================
	FARBEN NAV
=====================================================*/	

		.gelb {
			color: rgba(216,216,86,1.00);
		}
		.blau {
			color: rgba(115,151,255,1.00);
		}
		.rot {
			color: rgba(221,54,63,1.00);
		}
		.weiss {
			color: rgba(255,255,255,1.00);
		}
		.lila {
			color: rgba(168,51,140,1.00);
		}
		.natur {
			color: rgba(165,141,142,1.00);
		}
		.gruen {
			color: rgba(111,173,111,1.00);
		}
		.schwarz {
			color: rgba(83,83,83,1.00);
		}

/*=====================================================
	TEXTFELDER - FLIESSTEXT
=====================================================*/	

		.fliesstext {
/*			font-family: 'le-havre-rounded';
*/			font-size: 1.8rem;
			background-color: rgba(0,0,0,0.4);
			line-height: 2.4rem; 
			letter-spacing: 0.04em;
			padding: 4rem 2rem 4rem 2rem;
			
/*			text-align:center;
*/		}

		.fliesstextspan {
			font-size: 2.2rem;
			font-family: 'bad script', 'Spinnaker', 'Alata';
		}

		.fliesstextbold {			
/*			color: #AD885D;
*/			color: rgba(115,151,255,1.00);
			font-family: 'Fairweather', 'Alata';
			font-weight: bolder;
			font-style: italic;
			font-size: 2rem;
		}

		.fliesstextlink {			
			text-decoration: underline;
			font-weight: bold;
			color: rgba(115,151,255,1.00);
		}

/*	Versuch, den Fliesstextlink besser sichtbar zu machen bei hover
*/
	/*	.fliesstextlink a:hover {
			color: deeppink;
			transition:1s ease-in-out color;
		}

		input[type=submit]:hover{
			background:darkgreen;
			color:red;
			transition:1s ease-in-out color;
		}*/


/*=====================================================
	HINTERGÜNDE
=====================================================*/	

		.background_home {
			background-image:url("../bilder/gruen/regen.jpg");
			background-size: cover;	
			background-attachment: fixed;
		}

		.background_gelb {
			background-image:url("../bilder/gelb/kaefer.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_blau {
			background-image:url("../bilder/blau/hibiskus_hero.jpg");
			background-size: cover;	
			background-attachment: fixed;
		}

		.background_rot {
			background-image:url("../bilder/rot/cola_nah.jpg");
			background-size: cover;	
			background-attachment: fixed;
		}

		.background_weiss {
			background-image:url("../bilder/weiss/margerite.jpg");
			background-size: cover;	
			background-attachment: fixed;	
		}

		.background_lila {
			background-image:url("../bilder/lila/apfelblueten.jpg");
			background-size: cover;	
			background-attachment: fixed;	
		}

		.background_natur {
			background-image:url("../bilder/natur/laempchen.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_gruen {
			background-image:url("../bilder/gruen/Abendstimmung.jpg");
			background-size: cover;	
			background-attachment: fixed;	
		}
		.background_schwarz {
			background-image:url("../bilder/schwarz/lights.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_impressum {
			background-image:url("../bilder/blau/traubenhyazinthen.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_datenschutz {
			background-image:url("../bilder/natur/schilf.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_ueber {
			background-color: black;
			background-size: cover;	
			background-attachment: fixed;		
		}
		.background_trauerlichter {
			background-image:url("../bilder/blau/blauestunde.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_karten {
			background-image:url("../bilder/arbeiten_karten/kartenkante.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_logos {
			background-image:url("../bilder/logos/hintergruende/kaefer.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

		.background_weitere {
			background-image:url("../bilder/arbeiten_weitere/seifenblaetter_farbig.jpg");
			background-size: cover;	
			background-attachment: fixed;		
		}

/*=====================================================
	FOTOGALERIE GRID (FARBSPEZIFISCH)
=====================================================*/

		.grid_farbe {
			display: grid;
/*			grid-template-columns: 1fr 1fr 1fr;
*/			gap: 1rem; /*Zwischenraum zwischen den Spalten */
		}
	
		.bild_farbe {
			color: white;
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
		}
		.bild_farbe img {
			font-family: 'Fairweather', 'Alata';
			width: 100%;
			height: 100%; 
			object-fit: cover;
			transition: all ease-in-out 0.5s;
		}

		.bild_farbe:hover img {
			transform: scale(1.2);
			transition: all ease-in-out 0.3s;
		}

	/*	.design_01 {
			display:flex;
			justify-content:space-between;
			flex-wrap:wrap;
			align-items:center;
		}
		
		.design_01 nav ul { 
			display:flex;
			gap:0.5rem;
		}*/
		
/*=====================================================
	COOLES BANNER
=====================================================*/

		.cooles-banner {
			font-family: 'Fairweather', 'Spinnaker', 'Alata';
			margin: 2rem 0 7rem 0;
			font-size: 50rem;
			color: var(--meinefarbe);
			grid-column: 1 / -1;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
		}

		.fixer-text {
			font:inherit;
			padding: 0 1rem 0 1rem;
			font-size: 5rem;
		}

		#wahlfarbe {
			font-weight: 900;
		}
		.bannerplatzhalter {
			text-decoration-color: red;
			display: none;
		}


	@keyframes farbeAnimation {
		0% {
			transform: translateY( 100% );
			opacity: 0;
		}
		25%,
		75% {
			transform: translateY( 0 );
			opacity: 1;
		}
		100% {
			transform: translateY( -100% );
			opacity: 0;
		}
		}
	
		#wahlfarbe {
			position: relative;	/* weil  darin ein paar Dinge absolut positionieren werden sollen */
			font: inherit;	
			font-size: 5rem;
			font-weight: 700;
		}
		#wahlfarbe.animieren {
			transform: translateY( 100% );
			opacity: 0;
			animation: farbeAnimation 3s linear;
		}
		#wahlfarbe.gelb {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(216,216,86,1.00);
		}
		#wahlfarbe.blau {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(115,151,255,1.00);
		}
		#wahlfarbe.rot {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(221,54,63,1.00);
		}
		#wahlfarbe.weiss {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(255,255,255,1.00);
		}
		#wahlfarbe.lila {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(168,51,140,1.00);
		}
		#wahlfarbe.natur {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(165,141,142,1.00);
		}
		#wahlfarbe.gruen {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(111,173,111,1.00);
		}
		#wahlfarbe.schwarz {
			transform: translateY( 100% );
			opacity: 0;
			color: rgba(83,83,83,1.00);
		}

/*=====================================================
	FORMULARELEMENTE
=====================================================*/	
		
		input, select {
			padding:0.5rem;
			font-size:1.6rem;
			font-family: 'Fairweather', 'Alata';
			border:1px solid black;
			color: rgba(20,39,86,1);
			border-radius: 0.4rem;
			margin:0.5rem 0rem;
			width: 100%;
			height: 3rem;
			background-color: rgba(255,255,255,0.80);
		}

		textarea {
			padding:0.5rem;
			font-size:1.6rem;
			font-family: 'Fairweather', 'Alata';
			border:1px solid black;
			color: rgba(20,39,86,1);
			border-radius: 0.4rem;
			margin:0.5rem 0rem;
			width: 100%;
			height: 8rem;
			background-color: rgba(255,255,255,0.80);
		}

		input[type=color]{
			width:5rem;
			height:3rem;
			rgba(48,48,48,1.00);
		}
		
		select[type=color]{
			width:5rem;
			height:3rem;
			rgba(rgba 48,48,48,1.00);

		}

		.option_gelb {
			background: rgba(216,216,86,1.00);
			color: black;
			}

		.option_blau {
			background: rgba(115,151,255,1.00);
			color: black;
			}

		.option_rot {
			background: rgba(221,54,63,1.00);
			color: white;
			}

		.option_weiss {
			background: white;
			color: black;
			}

		.option_lila {
			background: rgba(168,51,140,1.00);
			color: white;
			}

		.option_natur {
			background: rgba(165,141,142,1.00);
			color: white;
			}

		.option_gruen {
			background: rgba(111,173,111,1.00);
			color: white;
			}

		.option_schwarz {
			background: black;
			color: white;
			}

		input[type=submit]{
			padding:0.5rem 2rem;
			height:3rem;
			cursor:pointer;
			transition: 0.5s ease-in-out color;
			border: 1px solid white;
			color: white;
			background-color: rgba(8,13,44,0.80);

		}

		input[type=submit]:hover{
			background:rgba(8,13,44,0.60);
			opacity: 0.8;
			color:white;
			transition: 0.3s ease-in-out color;
		}

		.formularcontainer {
			justify-content: space-between;
			/*display: flex;
			flex-direction: column;*/
			display:grid;
			grid-template-columns: 3fr 2fr;
			grid-gap: 1rem;
			padding-top:1rem;
/*			border-top: 1px dotted white;
*/			}

		#kontakt {
			font-size: 2rem;
			font-weight: bold;
		}	

		.meinekontaktdaten {
			text-align: right;
			letter-spacing: 0.08em;
			padding-top: 2.5rem;
			flex-wrap:wrap;

		}

		.kontaktformular {
			padding: 2rem 1rem 0 0;
		}


/*=====================================================
	HEADER-ELEMENT ALS GRID DEFINIEREN UND RESPONSIVE
=====================================================*/	

	@media (min-width: 200px) {

			header {
				display:grid;
				grid-template-columns: 3fr 1fr;
				grid-gap: 1rem;
			}

			.grid_farbe { 
			  	grid-template-columns: repeat(4, 1fr);
			}
			
			.grid_farbe {
				max-width: 100%;
			}	
			
			.bild_farbe {
				width:100%;
				display: block;
				aspect-ratio: 1;
			}

			.bild_farbe img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}		

	@media (max-width: 599px) {	

			header {
				display:grid;
				grid-template-columns: 3fr 1fr;
				grid-gap: 1rem;
			}
			nav {
				font-size: 1.4rem;
				padding-top: 1rem;
				/*gap: 50px;*/
			}
			#subnavigation_farben {
					font-size: 1.4rem;
				}
		
			#subnavigation_arbeiten {
					font-size: 1.4rem;
				}
		
			.cooles-banner {
				font-size: 2rem;
				flex-direction: column;
			}

		  	.grid_farbe { 
			  grid-template-columns: repeat(1, 1fr); 
			}
			
			.grid_farbe {
				max-width: 100%;
			}
			
			.bild_farbe {
				width:100%;
		/*		height: 20vw;
		*/		
				display: block;
				aspect-ratio: 1;
			}
			
			.bild_farbe img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.formularcontainer {
				flex-wrap: wrap;
				flex-direction: column;
			}
			.kontaktformular {
			font-size: 1.6rem;
			}
		}	

			

		@media (min-width: 600px) {	

			header {
				display:grid;
				grid-template-columns: 3r 1fr;
				grid-gap: 1rem;
			}

			.cooles-banner {
				font-size:2rem;
			}

		  	.grid_farbe { 
			  grid-template-columns:repeat(2, 1fr); 
			}
			
			.grid_farbe {
				max-width: 100%;
			}	
			
			.bild_farbe {
				width:100%;
		/*		height: 20vw;
		*/		
				display: block;
				aspect-ratio: 1;
			}
			
			.bild_farbe img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.formularcontainer {
				flex-wrap: wrap;
				flex-direction: column;
			}
			.kontaktformular {
			font-size: 1.6rem;
			}
		}


		@media (min-width: 900px) {

			header {
				display:grid;
				grid-template-columns: 3fr 1fr;
				grid-gap: 1rem;
			}		

		 	.grid_farbe { 
			  	grid-template-columns: repeat(3, 1fr);
			}
			
			.grid_farbe {
				max-width: 100%;
				}
			
			.bild_farbe {
				width:100%;
				display: block;
				aspect-ratio: 1;
			}
			
			.bild_farbe img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		@media (min-width: 1200px) {

			header {
				display:grid;
				grid-template-columns: 3fr 1fr;
				grid-gap: 1rem;
			}

			.grid_farbe { 
			  grid-template-columns: repeat(4, 1fr);
			}
			
			.grid_farbe {
				max-width: 100%;
			}	
			
			.bild_farbe {
				width:100%;
				display: block;
				aspect-ratio: 1;
			}

			.bild_farbe img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}