/** auteur @198, jonas krekic **/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--color4: rgb(210,210,210); /* gris */
	--color3: #54B6CA; /* bleu */
	--color2: #6BBE78; /* vert fonce */
	--color1: #AEFB2A; /* vert clair */
	--colorRed: #e833a2;
	--img_size: 25rem;
	--width: 720px;
	--height_header: 6rem;
	--height_section: calc(100vh);
	--height_section_header: calc(100vh - var(--height_header));
	--padding: 4rem;
	--size_txt_garde: 1.7rem;
}

*{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-size: 1rem;
	font-weight: normal;
	font-style: normal;	
	color: black;
	text-decoration: none;
	margin: 0;
	padding: 0;	
	line-height: 1.5rem;
}

html{
	scroll-behavior: smooth;
}

body{
	width: var(--width);
	margin: auto;
}

header{
	position: fixed;
	display: flex;
	justify-content: space-between;
	height: 0;
	width: var(--width);
	top: 0;
	padding-top: 1rem;
	z-index: 15;
}

header > a > img{
	margin-left: -7rem;
	height: 6rem;
	z-index: 20;
}

section{
	display: flex;
	flex-direction: column;
	min-height: var(--height_section);
	margin-bottom: 5rem; 
}

section > h1{
	font-size: 1.8rem;
	position: sticky;
	top: 6rem;
	margin-left: calc(var(--width) + 1rem);
	text-align: center;
}

section.garde > h1, section.garde > h1 > span.bold{
	font-size: var(--size_txt_garde);
	line-height: var(--size_txt_garde);
	font-weight: 500;
	margin-left: inherit;
}

section.garde > h1 > span.bold{
	font-weight: 800;
	border: 0;
	padding: 0;
}

section.garde > div{
	display: flex;
	justify-content: center;
}

section.garde .illustration{
	padding: 8rem 0 3rem 0;
	height: 25rem;
}

section.portrait > *:nth-child(2) > *{
	display: grid;
	grid-template-columns: 50% auto;
	column-gap: 1rem;
}

/** texte portrait **/
section.portrait > *:nth-child(2) > *:nth-child(1) > div > p{
	padding: 0 1rem 0 1rem;
	text-align: justify;
	hyphens: auto;
}

/** texte chapitre **/
section.portrait > *:nth-child(2) > *:nth-child(1) > div > p + p{
	padding-top: 1rem;
}

section.portrait > *:nth-child(2) > *:nth-child(2) > *{
	padding-top: 3rem;
	align-content: center;
	text-align: center;
}

section.portrait > *:nth-child(2) > *:nth-child(2) > div > h3{
	padding-top: 1em;
}
 
section.portrait > *:nth-child(2) > * > img{
	width: calc(100% - 2rem);
	padding: 3rem 1rem 0 1rem;
}

section.wohnen{
	display: flex;
}

section.wohnen > *:nth-child(2){
	padding-top: 10rem;
}

section.wohnen > *:nth-child(2) > *{
	padding: 0.5rem;
}

section.wohnen > *:nth-child(2) > *:nth-child(1){
	display: flex;
	justify-content: center;
}

section.wohnen > *:nth-child(2) > *:nth-child(1) > img{
	width: 35%;
}

.slider > div.slider_title{
	font-size: 0.8rem;
	text-align: center;
	font-weight: bold;
	padding-bottom: 0.5rem;
}

.slider > *:nth-child(1){
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.slider > *:nth-child(1) > img{
	width: 100%;
}

.descriptif{
	display: flex;
	justify-content: space-between;
	border-radius: 1rem;
	padding: 1rem;
	cursor: pointer;
}

.descriptif > span{
	font-weight: bolder;
}

.descriptif.K.color{
	background: var(--color1);
}

.descriptif.M.color{
	background: var(--color2);
}

.descriptif.R.color{
	background: var(--color3);
}

.descriptif.Z.color{
	background: var(--color4);
}

.subtable{
	display: none;
	opacity: 0;
	flex-direction: column;
	border-radius: 1rem;
	padding: 1rem;
	margin: 1rem 0 1rem 0;
	transition: opacity 1.5s;
}

.subtable.visible{
	display: grid;
	grid-template-columns: auto 23%;
	column-gap: 1rem;
	opacity: 1;
}

.subtable.visible.Z{
	display: flex;
}

.subtable.visible > *:nth-child(1) > *:nth-child(1){
	border-bottom: dotted black 1px;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

.subtable.visible.Z > *:nth-child(1) > *:nth-child(1){
	border-bottom: none;
	padding-bottom: inherit;
	margin-bottom: inherit;
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > div{
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > div > span:nth-child(2){
	font-weight: bolder;
}

.subtable.visible.Z > *:nth-child(1) > *:nth-child(1) > div > span:nth-child(2){
	font-weight: inherit;
	word-spacing: 1rem;
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > a{
	font-weight: bolder;
	justify-content: center;
	padding: 1rem 0 0.5rem 0;
}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > h4{
	display: flex;
	justify-content: center;
	padding-top: 1rem;

}

.subtable.visible > *:nth-child(1) > *:nth-child(1) > h4 > div, div.h4{
	font-size: 0.9rem;
	font-style: italic;
	text-align: center;
	width: 85%;
}

.subtable.visible > *:nth-child(1) > *:nth-child(2) > *{
	font-weight: bolder;
}

.subtable.visible > *:nth-child(1) > *:nth-child(n+2){
	display: grid;
	grid-template-columns: 20% 50% 30%;
	padding: 0.1rem;
	text-align: center;
}

.subtable.visible > *:nth-child(1) > *:nth-child(n+3):hover{
	background: white;
	border-radius: 0.5rem;
}


.subtable.visible > *:nth-child(2){
	padding: 0.5rem;
	background: white;
	border-radius: 0.5rem; 
}

.subtable.visible > *:nth-child(2) > a{
	text-decoration: none;
}

.subtable.visible > *:nth-child(2) > a:hover{
	cursor: pointer;
}

.subtable.visible.K{
	background: var(--color1);
}

.subtable.visible.M{
	background: var(--color2);
}

.subtable.visible.R{
	background: var(--color3);
}

.subtable.visible.Z{
	background: var(--color4);
}

.subtable a{
	text-decoration-line: underline;
}

section.kontakt{
	min-height: calc(5rem + var(--height_section));
}

section.kontakt > h1{
	padding-bottom: 12rem;
}

section.kontakt > *:nth-child(2){
	position: sticky;
	top: var(--height_header);
	display: grid;
	grid-template-columns: auto 40%;
}

section.kontakt > *:nth-child(2) > *{
	display: flex;
	flex-direction: column;
	justify-content: end;
}

section.kontakt > *:nth-child(2) > *:nth-child(2), section.kontakt > *:nth-child(2) > *:nth-child(2) > *{
	text-align: right;
}

h1{
	font-weight: bolder;
	font-size: 2rem;
}

h1.annonce{
	margin: 8rem 0 -4rem 0;
	padding: 4rem;
	font-size: 1.8rem;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	color: var(--color3);
	background:
		linear-gradient(
		to bottom,
		var(--color1),
		transparent 3rem
		) top / 100% 3rem no-repeat,

		linear-gradient(
		to top,
		var(--color1),
		transparent 3rem
		) bottom / 100% 3rem no-repeat;
}

h2{
	font-weight: bolder;
	font-size: 1.2rem;
}

h3{
	font-weight: bolder;
}

p a{
	font-weight: bolder;
	text-decoration-line: underline;
	cursor: pointer;
}

a:hover{
	color: var(--colorRed);
}

.bold{
	font-weight: bolder;
}

.advertisement{
	padding: 0 1rem 1rem 0;
	text-align: right;
	font-weight: bolder;
	font-size: 1.5rem;
	color: red;
}

.red {
	color: red;
}

/** NAVIGATION **/

nav .checkbox, nav .hamburger-lines{
	position: absolute;
	margin-left: 1rem;
	height: 2.6rem;
	width: 3rem;
}

nav .checkbox{
	display: block;
	opacity: 0;
	cursor: pointer;
	z-index: 30;
}

nav .hamburger-lines {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 20;
}

nav .hamburger-lines .line{
	height: 0.4rem;
	border-radius: 1rem;
	background: black;
}

nav .hamburger-lines .line1{
	transform-origin: -5%;
	transition: transform 0.4s ease-in-out;	
}

nav .hamburger-lines .line2{
	transition: transform 0.2s ease-in-out;
}

nav .hamburger-lines .line3{
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;	
}

nav .menu-items{
	position: fixed;
	display: none;
	opacity: 0;
	top: 0;
	right: 0;
	align-items: center;
	width: 100vw;
	height: 100vh;
	padding-top: 15rem;
	flex-direction: column;
	background: white;
	transition: opacity 0.5s;
}

nav .menu-items a {
	font-weight: 500;
	font-size: 2rem;
}

nav .menu-items a:hover{
    font-weight: bolder;
}

nav .menu-items li{
	list-style-type : none;
	margin-bottom: 1.2rem;
}

nav input[type="checkbox"]:checked ~ .menu-items {
	display: flex;
	opacity: 0.9;
	transition: opacity 0.5s;
}

@starting-style{
	nav input[type="checkbox"]:checked ~ .menu-items{
		opacity: 0;
	}
	.subtable.visible{
		opacity: 0;
	}
}

nav input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

nav input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

nav input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

@media only screen and (max-width: 950px){
	body{
		padding: 1rem;
	}

	header{
		height: inherit;
		width: inherit;
		top: 1rem;
		padding: 0;
		align-items: end;
	}

	header > a > img{
		height: 4rem;
	}
	
	header > a > img{
		margin: auto;
		padding-top: 1rem;
	}

	section{
		justify-content: center;
	}
	
	section > h1, section.garde > h1{
		top: 0;
		margin: 0;
		padding: 1.3rem 0 1rem 0;
		background: rgb(255,255,255);
		height: 4rem;
	}
	
	section > h1{
		padding-top: 2rem;
	}
	
	section.garde > h1{
		width: calc(100% - 8rem);
		height: inherit;
		margin: auto;
	}	
	
	nav .checkbox, nav .hamburger-lines{
		margin-left: -3rem;
		margin-top: -3.6rem;
	}
}

@media only screen and (max-width: 750px){
	p, h2, h3, h3 + div{
		text-align: center;
	}

	body{
		width: inherit;
	}

	header{
		width: calc(100% - 2rem);
		align-items: center;
	}
	
	header > a > img{
		height: 3.2rem;
	}
	
	section > h1{
		padding-bottom: 0;
	}
	
	section.garde > h1{
		width: calc(100% - 8rem);
		height: inherit;
		font-size: 1.2rem;
		margin: auto;
	}
	
	section.garde .illustration{
		width: 60%;
		height: 60%;
	}
	
	section.portrait > *:nth-child(2) > *,
	section.wohnen > *:nth-child(2),
	section.kontakt > *:nth-child(2)
	{
		display: flex;
		flex-direction: column;
	}
	
	section.portrait > *:nth-child(2) > *:nth-child(1){
		flex-direction: column-reverse;	
	}

	section.portrait > *:nth-child(2) > * > img{
		margin: 0 auto 2rem auto;
	}

	section.wohnen > *:nth-child(2) > *:nth-child(1) > img{
		width: 50%;
	}
	
	.slider{
		margin-top: 2rem;
	}
	
	.slider > *:nth-child(1) > img{
		width: 40%;
	}
	
	.subtable.visible{
		display: flex;
		opacity: 1;
	}
	.subtable.visible > *:nth-child(1) > *:nth-child(n+2){
		padding: 0;
	}
	
	.subtable.visible > *:nth-child(1) > *:nth-child(n+3):hover{
		background: inherit;
		border-radius: inherit;	
	}

	.subtable.visible > *:nth-child(1) > *:nth-child(1) > div > *:nth-child(1){
		width: 75%;
	}

	section.kontakt > h1{
		padding-bottom: 5rem;
	}
	
	section.kontakt > *:nth-child(2){
		flex-direction: column-reverse;
	}

	section.kontakt > *:nth-child(2) > *:nth-child(1){
		text-align: center;
		padding-top: 5rem;
	}

	section.kontakt > *:nth-child(2) > *:nth-child(2) > *{
		text-align: center;
	}

	h1.annonce{
		margin: 6rem 0 -4rem 0;
		padding: 2rem 0 2rem 0;
		font-size: 0.8rem;
		background:
			linear-gradient(
			to bottom,
			var(--color1),
			transparent 2rem
			) top / 100% 2rem no-repeat,

			linear-gradient(
			to top,
			var(--color1),
			transparent 2rem
			) bottom / 100% 2rem no-repeat;
	}

	nav .checkbox, nav .hamburger-lines{
		margin-top: -1.3rem;
	}
}