html, body { 
	margin: 0; 
	padding: 0; 
	font-family: Arial, Helvetica, sans-serif; 
	color: #031710;
	font-size: 1rem;
	line-height: 1.6;
}
a { 
	color: #0C694A; 
	text-decoration: none; 
}
a:hover {
	color: #07402D;
	outline: 0;
}
.backg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url("img/steve-doig-FaMBWkmvPyY-unsplash.jpg");
	background-size: cover;
	background-position: center;
	z-index: -1; 
}
.content {
	z-index: 1;
}

/* --- --- --- Navigation --- --- --- */
nav {
	position: fixed; 
	top: 0; 
	left: 0.5rem; 
	right: 0.5rem; 
	height: 4rem;
	padding: 0 1rem 0 1rem; 
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 1rem rgba(170,170,170,1); 
	/* backdrop-filter: blur(5px); */
	/* -webkit-backdrop-filter: blur(5px); */
	z-index: 10000;
	display: block;
}
nav .brand { 
	float: left;
	position: relative; 
	top: 50%; 
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);	
}
nav .brand > img { 
	height: 3rem;
}
nav .menu, 
nav .burger {
	float: right; 
	position: relative; 
	top: 50%; 
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
nav .menu > a { 
	margin-right: 1rem; 
	padding: 0rem 0.5rem; 
	white-space: nowrap;
}
.show { 
	display: none; 
}
nav .burger { 
	display: none; 
}

/* --- --- --- Navigation Mobile --- --- --- */
@media (max-width: 768px) {
	nav .burger { 
		display: inline-block; /* show burger button */
		cursor: pointer; 
		user-select: none;
		font-size: 1.2rem;
	}
	nav .menu {
		position: fixed; 
		top: 0; 
		right: 0;
		min-height: 100%;
		width: 40%; 
		background: #fff;
		max-width: 300px;
		transform-origin: center right;
		transform: scaleX(0);  /* versteckt das Menü */
		transition: transform 0.25s ease; 
		z-index: 11;
	}
	nav .menu > a {
		display: block;
		margin-top: 1.25rem;
		padding: 0.25rem 1rem;
	}
	.show:checked ~ .burger {
		position: fixed;
		top: 0;
		left: 0;
		min-height: 100%;
		width: 100%; 
		background: rgba(244, 245, 237, 0.6);
		color: transparent;
		transform: none; /* hebt das Transform des normalen Menüs & Burgers auf */
		z-index: 10; /* "Burger" hiter dem ausgefahrenen Menü */
	}
  
	.show:checked ~ .menu { 
		transform: scaleX(1); 
		transition: transform 0.5s ease; 
	}
}


/* --- --- --- Main Content --- --- --- */
main {
	/* width:100%; */
	margin: 0rem auto 2rem auto; /* oben, rechts, unten, links*/
}	
	.area {
		padding: 4rem 0; /* oben_unten links_rechts */
	}
	.area.bg {
		background: rgba(232, 232, 227,0.95);
	}
	.row {
		height: 85vh;
	}
	.row_head { /* Überschrift */
		margin: 1rem 0rem 1rem 0rem;  
		font-weight: bold;
		font-size: 2rem;
		text-align: center;
		color: #09371F;
	}
	.row_grid {
		max-width: 90rem;
		margin: 0 auto;
		display: grid;
		gap: 0.25rem;
		grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
		padding: 0 1rem; 
	}
	.card_floating {
		float: left;
		position: relative; 
		top: 20vh; 
		padding: 1.5rem;
		margin: 0 1rem;
		background:rgba(255,255,255,0.85);
		box-shadow: 0 0 1rem rgba(0,0,0,0.2);
		border-radius: 0.5rem;
		/* opacity:0.8; */
	}
	.card {
		border: 1px solid #aaa;
		border-radius: 0.5rem;
		overflow: hidden;
		background:rgba(255,255,255,0.95);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	.card.bg1 {
		background-image: url("img/cristina-anne-costello-4jsmBl30x_A-unsplash.jpg");
		background-size: cover;
		background-position: center;
		min-height: 30vh;
	}
	.card section {
		padding: 1rem;
		text-align: justify;
		/* text-align-last: left; */
	}
	.card header {
		text-align: center;
		padding: 0.5rem;
		font-weight: bold;
		background: rgba(0,0,0,.05);
	}
	.card header > img {
		display: block;
		margin: 0 auto;
		height: 10vh;
	}
	.section_split { 
		display: flex;
		align-items: flex-start;
		gap: 2rem;
	}
	@media (max-width: 768px) { 
		.section_split {
			flex-direction: column; /* Anordnung untereinander */
			align-items: center; 
		}
	}
	.section_left {
		flex: 2;
	}
	.section_right {
		flex: 1;
	}
	.section_right > img {
		display: block;
		margin: auto;
	}

/* --- --- --- Impressum --- --- --- */

.impressum {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	line-height: 0;
}
.impressum img:nth-child(1) {
    order: 3; 
	height: auto;
	max-width: 43.61%;
}
.impressum img:nth-child(2) {
    order: 2; 
	height: auto;
	max-width: 23.06%;
}
.impressum img:nth-child(3) {
    order: 1; 
	height: auto;
	max-width: 33.33%;
}

/* --- --- --- Kontaktformular --- --- --- */

.kontaktformular {
    max-width: 40rem;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.kontaktformular label {
    display: flex;
    flex-direction: column;
    /* font-weight: 600; */
    gap: 0.4rem;
}

.kontaktformular input,
.kontaktformular textarea {
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    width: 100%;
    box-sizing: border-box;
}

.kontaktformular button {
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
	background: #031717;
	color: #F2F5F5;
    border: none;
    border-radius: 0.3rem;
    cursor: pointer;
}

.kontaktformular button:hover {
    background: #0C6969;
}




/* --- --- --- Footer --- --- --- */
footer {
	position: fixed;
	left: 0.5rem;
	right: 0.5rem;
	bottom: 0;
	text-align: center;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 0.5rem rgba(170,170,170,0.8); 
	backdrop-filter: blur(5px);
	 -webkit-backdrop-filter: blur(5px);
}

/* --- --- --- Footer Mobile --- --- --- */
@media (max-width: 768px) {
	footer {
		font-size: 0.7rem;
	}
}