@charset "UTF-8";

@font-face {
  font-family: primary_regular;
  src: url('../fonts/playwrite_nz/PlaywriteNZ-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: primary_thin;
  src: url('../fonts/playwrite_nz/PlaywriteNZ-Thin.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: primary_light;
  src: url('../fonts/playwrite_nz/PlaywriteNZ-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: primary_extralight;
  src: url('../fonts/playwrite_nz/PlaywriteNZ-ExtraLight.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: secundary_regular;
  src: url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: secundary_light;
  src: url('../fonts/montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: secundary_medium;
  src: url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: secundary_semibold;
  src: url('../fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}



:root {
	--clr_primary_green: #606c38;
	--clr_primary_red: #bc6c25;
	--clr_primary_orange: #dda15e;
	--clr_primary_dark: #283618 ;
	
	--intro_img_border: 4px;
}

body {
	font-family: secundary_light;
	font-size: 1.2rem;
	color: #5e5959;
	padding: 2rem;
	background-color: #fefae0;
	background: linear-gradient(180deg, rgba(220,240,182,1) 0%, rgba(233,251,199,1) 31%, rgba(254,250,224,1) 100%);
}

h1 {
	font-family: primary_light;
	font-size: 2.2rem;
	color: var(--clr_primary_green);
	margin-bottom: 4rem;
	
	font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: italic;
}
h1 span {
	font-size: 2rem;
	color: var(--clr_primary_green);
	
	font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: italic;
}

h2 {
	font-family: primary_light;
	font-size: 1.2rem;
	color: var(--clr_primary_green);
	margin-bottom: 1rem;
}
.intro h2 {
	font-size: 1.6rem;
	    line-height: 1.6;
}
p, li {
	font-family: secundary_light;
	font-size: 1.2rem;
	margin: 0;
}

b {
	font-family: secundary_regular;
	font-weight: 400;
}
a {
	font-family: secundary_regular;
	text-decoration: underline;
	color: var(--clr_primary_red);
}
a:hover {
	text-decoration: underline;
}
li::marker {
	color: var(--clr_primary_red)
}

img {
	max-width: 100%;
}

.gradient-text { 
  background-image : linear-gradient(90deg, #606c38, #bc6c25);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

ul, li {
	padding: 0;
	margin: 0;
}

li {
	line-height: 1.1;
    margin: 0 0 0.5rem 1rem;
}

section,
.logo {
	max-width: 1000px;
	margin: 0 auto 4rem;
}

.logo > img {
	width: 18rem;
}

.intro .left-col {
	margin-bottom: 2rem;
}
.intro .left-col > p {
	margin-bottom: 1rem;
}
.intro .left-col > p:last-of-type {
	margin-bottom: 0;
}
.intro .right-col {
	text-align: center;
}
.intro img {
	width: 16rem;
	border: var(--intro_img_border) solid var(--clr_primary_green);
	border-radius: 50%;
}


.orga dl {
	display: grid;	
	margin-bottom: 4rem;
}
.orga dt {
	font-family: secundary_regular;
}
.orga dd {
	margin: 0 0 0.5rem 0;
}

.mobile-mb-4 {
	margin-bottom: 4rem;
}

.tel-btn {
	display: none;
	position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 4rem;
}
.tel-btn svg {
	color: var(--clr_primary_green);
}

.text-center {
	text-align: center;
}

@media (min-width: 30em) {  /* ca 480er Auflösung */
   .orga .left-col dl {
		grid-template-columns: 4rem 1fr;
		gap: 0.5rem;
	}
	.orga .right-col dl {
		grid-template-columns: 8rem 1fr;
		gap: 0.5rem;
	}
}

@media (min-width: 48em) {  /* ca 768er Auflösung */
	body {
		padding: 4rem;
	}
	
	.logo > img {
		width: 20rem;
	}
	
	.intro .grid {
		display: grid;
		grid-template-columns: 1fr 10rem;
		gap: 2rem;
	}
	.intro .left-col {
		margin-bottom: 0;
	}
	
	.intro .right-col {
		text-align: left;
	}
	.intro img {
		width: calc(100% - var(--intro_img_border) * 2);
	}
}

@media (min-width: 59em) {  /* ca 950er Auflösung */
   body {
	   padding: 4rem 6rem;
   }
   
   .grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.intro .grid {
		grid-template-columns: 1fr 16rem;
		gap: 4rem;
	}
	.intro .left-col {
		margin-bottom: 0;
	}
	.intro .right-col {
		text-align: left;
	}
	
	.mobile-mb-4 {
		margin-bottom: 2.3rem;
	}
	
	.tel-btn {
		display: none;
	}
}

@media (min-width: 86em) {  /* ca 1200er Auflösung */
    .intro .grid {
        grid-template-columns: 1fr 14rem;
    }
}

@media (min-width: 86em) {  /* ca 1400er Auflösung */
    body {
	   padding: 6rem 0;
   }
   
   .intro .grid {
        grid-template-columns: 1fr 13rem;
    }
}