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








.hero {background:#f8eaea;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 180px; font-style: normal; padding-left: 50px; padding-right: 20px; padding-top: 100px; min-height: calc(70vh); margin-bottom: 60px;}


.hero-about {background:#f8eaea;font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 180px; font-style: normal; padding-left: 50px; padding-right: 20px; padding-top: 226px; min-height: calc(55vh); margin-bottom: 60px;}


.herovariation {
	font-family: "filmotype-yale", "sans-serif"; font-weight: 400; font-style: normal;
}

a {font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 20px; color:#000000; font-style: normal; text-decoration:none; font-weight: 300; padding: 20px;}


a {
	
	text-decoration: none;
}
a:visited {color: #1A1A1A;}
a:active {color: #999;}

.logo {font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 50px; color:#000000; font-style: normal; text-decoration:none; font-weight: 300; padding: 12px 20px;}


.logo:visited {color: #1A1A1A;}
.logo:active {color: #999;}

nav {
	display: flex; justify-content: space-between; align-items: center; padding: 20px; 
}

nav div { display: flex; gap: 20px;}




.section2 {
	margin-bottom: 50px;  margin-left: 30px;
}

.projekte {
	display: grid; grid-template-columns: repeat(2, 2fr); gap: 40px;
}

img {
	width: auto; object-fit: cover; height: 300px;
}


.projekte img {
	width: 100%; height: 250px; object-fit: cover; border-radius: 16px; display: block;
}


figure {
	text-align: center;
	
}

figcaption {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 20px; color:#000000; font-style: normal; text-decoration:none; font-weight: 300; padding: 20px;
}


section {margin-left: 20px; margin-right: 20px;}


.projekte-all {
	display: grid; grid-template-columns: repeat(2, 2fr); gap: 40px;
}

.projekte-all img {
	width: 100%; height: 250px; object-fit: cover; border-radius: 16px; display: block;
}


.projekttitel p {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; font-weight: 300;
}



.intro {
	margin-bottom: 100px;  margin-left: 50px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 2.6; font-weight: 300;
}

.cta {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 2.6; padding-top: 120px; margin-left: 170px; margin-top: 100px;
}


.ctabutton {
	background: #f8eaea; padding: 12px 24px; border-radius: 999px; color: black; text-decoration: none; display: inline-block; margin-left: 170px; margin-bottom: 150px; margin-top: 25px;
}


.ctabutton:hover {
	opacity: 0.7;
}


.infovariation {
	font-family: "filmotype-yale", "sans-serif"; font-size: 50px;
}

.info-text {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 1.6; font-weight: 300; margin-left: 120px;
}

.portrait img {
	margin-right: 120px !important; width: 380px !important; border-radius: 10px !important; height: auto !important; object-fit: cover;
}

.about {
	display:flex; align-items: center; justify-content: space-between; margin-top: 200px; margin-bottom: 200px;
}


.about-text {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 2.6; font-weight: 300; margin-left: 170px; margin-top: 250px; 
}

.about-text a {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 2.6; font-weight: 300;
}

.ctabutton-about {
	background: #f8eaea; padding: 12px 24px; border-radius: 999px; color: black; text-decoration: none; display: inline-block; margin-left: 170px; margin-top: 24px; margin-bottom: 150px;
}

.ctabutton-about:hover {
	opacity: 0.7;
}


.button {
	background: #f8eaea; padding: 12px 24px; border-radius: 999px; color: black; text-decoration: none; display: inline-block; margin-left: 40px; margin-bottom: 70px; margin-top: 100px;
}

.button:hover {
	opacity: 0.7;
}

.kontaktformular {
	padding: 120px;
}

form {
	width: 100%;
}


.form-row {
	display: flex; gap: 0px;
}


.form-row input {
	width: 50%;
}


input, textarea {
	border: none; border-bottom: 1px solid #000000; background: transparent; padding: 25px 20px; font-size: 28px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 300;
}


textarea {
	width: 100%; height: 220px; resize: none; margin-top: 20px;
}


button {
	margin-top: 50px; background: #f8eaea; border: none; padding: 14px 28px; border-radius: 999px; font-size: 20px; font-weight: 300; cursor: pointer; 
}


button:hover {
	opacity: 0.7;
}



.impressum-text {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 2.6; font-weight: 300; margin-left: 170px; margin-top: 200px; margin-bottom: 200px;
}


.impressumvariation {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; font-weight: 450;
}

.impressum-text a {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 2.6; font-weight: 300;
}

footer {
 background:#f8eaea;
  padding: 200px 40px;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 40px;
}

.footer-info {
	display: flex; gap: 200px; 
}

.footer-content {
  display: flex;
  margin-right: 100px;
}


.footer-block h1 {
  font-size: 25px;
  font-weight: 350;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-style: normal; text-decoration:none; color:#000000;    padding: 20px; text-align: left; margin-bottom: 12px; 
}

.footer-block p {
  font-size: 20px;
  line-height: 1.5; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; color:#000000; font-style: normal; text-decoration: none; font-weight: 300; padding: 20px; margin: 0px; justify-content: space-between; text-align: left;
}

.button:hover {
	opacity: 0.7;
}

.buttonkontakt {
	background: black; padding: 20px 28px; border-radius: 999px; color: white !important; text-decoration: none;
}

.footer-logo {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 50px; color:#000000; font-style: normal; text-decoration:none; font-weight: 300; 
}


.projekttitel p {
	padding-left: 30px; 
}

.projektvariation {
	font-family: "filmotype-yale", "sans-serif";  font-size: 70px; margin-left: 120px; max-width: 900px; line-height: 1.1;
}

.zweite-zeile {
	font-family: "filmotype-yale", "sans-serif";  display: block; font-size: 70px; margin-left: 120px; max-width: 900px; line-height: 1.1; margin-bottom: 100px;
}

.floramockup img {
	width: 800px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}

.flora-text {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 25px; color: #000000; line-height: 1.6; font-weight: 300; margin-left: 120px; margin-top: 100px; margin-bottom: 100px;
}

.florastartseite img{
	width: 800px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}

.florablumen img{
	width: 800px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}

.ueberuns img{
	width: 800px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}

.handyansicht img{
	width: 350px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}

.buttonprojekte {
	background: #f8eaea; padding: 12px 24px; border-radius: 999px; color: black; text-decoration: none; display: inline-block; margin-left: 610px; margin-top: 100px; margin-bottom: 0px;
}

.buttonprojekte:hover {
	opacity: 0.7;
}


.plakat img{
	width: 500px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}


.abstrakt img{
	width: 500px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}


.abstrakt-pikto img{
	width: 300px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}


.pikto-gesicht img{
	width: 800px; height: auto; border-radius: 10px;  object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px; object-position: center; 
}

.nike-one img{
	width: 800px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}


.nike-two img{
	width: 800px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}


.cover img{
	width: 500px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}

.seite2{
	display: flex;
}

.seite2 img{
	width: 500px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}


.seite4{
	display: flex;
}

.seite4 img{
	width: 500px; border-radius: 10px; height: auto; object-fit: cover; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 100px;
}




@media (max-width: 768px) {
	.projekte {flex-direction:column;}
}