:root {
	--base-fontsize: 13.66px;
	--headline-color: #96695e;
}
/* reset */

body, html, p, ul, ol, li {
	margin: 0;
	padding: 0;
	font-synthesis: none;
	font-kerning: none;
	font-variant-ligatures: none;
	font-feature-settings: "kern" 0, "calt" 0, "liga" 0, "clig" 0, "dlig" 0, "hlig" 0;
	font-family: unset;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricprecision;
	white-space: normal;
	scroll-behavior: smooth;
}
li {
	text-align: unset;
}
a {
	text-decoration: none;
	color: inherit;
}

/* page */

html, body {

	background-color: #fdbaa0;
	font-family: GlacialIndifference, sans-serif;
	font-size: var(--base-fontsize);
	font-weight: 200;
	color: #000;
}

.section {
	position: relative;
	display: grid;
	grid-template-columns: 1fr calc(var(--base-fontsize) * 60) 1fr;
	text-align: center;
}

:target::before {
	position: absolute;
    content: "";
    display: block;
    top: -100px;
}

.section-content {
	background-color: #f8e2d9;
	grid-column: 2 / 3;
	padding: 3.8em 2.5em 5.6em 2.5em;
}

.section-content p {
	line-height: 1.4em;
}

/* headers */

h1, h2, h3, h4, h5, h6 {
	font-family: BebasNeue, sans-serif;
	text-transform: uppercase;
	margin: 0;
	padding: .5em 0 .25em 0;
}

h1.script, h2.script, h3.script, h3.gallery, h4.script, h5.script, h6.script {
	font-family: Playlist, serif;
	text-transform: none;
	padding: 0;
}

h5 {
	font-size: 1em;
	font-weight: 400;
}

h1.script {
	font-size: 6.15em;
}

h2.script {
	font-size: 4.00em;
}

h3.script, h3.gallery  {
	font-size: 2.54em;
}

h4.script {
	font-size: 1.6em;
}

h5.script {
	font-size: .9em;
}

h6.script {
	font-size: .6em;
}

/* menu */

nav {
	
	background-color:#ffffff;
	z-index:1;
	top:0px;
	display:flex;
	font-family:BebasNeue, sans-serif;
	justify-content:flex-end;
	position:sticky;
	align-items:center;
	text-overflow:ellipsis;
	box-sizing:border-box;
	border-bottom:1px solid rgba(0, 0, 0, 0.07);
	height:50px;
}

.menu-toggle {
	display: none;
}
.nav-menu {
	z-index: 1;
}

.menu-toggle:checked > .menu-button {
	width: 100vw;
	height: 100vh;
}
.menu-toggle:checked ~ .nav-menu {
	transform: translateX(0px);
}
.menu-button {
	z-index: 1;
	color: #0e1318;
	display: flex;
	justify-content: center;
	align-items: center;
}
.menu-button:hover {
	cursor: pointer;
	text-decoration-line: none;
	color: hsla(210, 26%, 7%, 1);
}
.menu-button-icon {
	
	display: inline-block;
	padding:8px;
	width:24px;
}
.nav-menu-link-content:hover {
	color: hsla(210, 26%, 7%, 1);
}
.nav-menu-link {
	color: hsla(210, 26%, 7%, 0.7);
	list-style-type: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.nav-menu-link-content {
	padding: 10px 16px;
	text-decoration-line: none;
	overflow: hidden;
	color: hsla(210, 26%, 7%, 0.7);
	white-space: nowrap;
	font-weight: 700;
	display: inline-block;
	font-size: 15px;
	font-family:Raleway, sans-serif;
	text-overflow: ellipsis;
	margin-right: auto;
}
.menu-toggle:checked ~ .menu-button {
	background-color: rgba(30,41,51,45);
	top: 0px;
	width: 100vw;
	position: fixed;
	opacity: 0.55;
	height: 100vh;
}
.menu-toggle:checked ~ .menu-button>.menu-button-icon {
	display: none;
}

/* buzzwords */

.buzzword-list {

	font-family: Raleway, sans-serif;
	font-size: calc(var(--base-fontsize) * 2.7);
	grid-column: 1 / 2;
	position: relative;
	margin-right: 0.95em;
}

.buzzword-list > ul {
	display: flex;
	flex-direction: column; /*For handling elements vertically*/
	justify-content: center; /* to Align items vertically center */
	list-style: none outside none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

.buzzword-list > ul > li {
	color: var(--headline-color);
	text-align: center;
	text-shadow: 0em 0.04em 0.16em rgba(0, 0, 0, 0.33);
	line-height: 1.4em;
}

/* home section */

#home .section-content {
	border: rgba(0, 0, 0, .65) solid .15em;
}

#home .title {
	letter-spacing:-0.02em;
	color: var(--headline-color);
	text-shadow: 0em 0.04em 0.18em rgba(0, 0, 0, 0.37);
	padding: 0;
}

#home .subtitle {
	font-size: 1.9em;
	font-weight: 300;
	color: #423e3a;
	padding: 0 0 0 2.3em;
	margin-top: -.45em;
	text-shadow: rgba(150, 105, 94, 0.4) 0.044em 0.044em 0em
}

#home .section-content {
	/* more place needed for the teaser images */
	padding-left: 1em; 
	padding-right: 1em;
}

#home .teaser-images {
	margin: 2em 0;
}

#home .teaser-images svg {
	margin: 0 .25em
}

#home .contact {
	display: grid;
	grid-template-columns: auto auto auto;
	font-family: BebasNeue, sans-serif;
	text-transform: uppercase;
	font-size: 1.75em;
	color: rgb(66, 62, 58);
	text-shadow: 0.044em 0.044em 0em rgba(246, 244, 241, 0.4);
	margin: 3em 1em 0 1em;
}

/* galery section */

#galerie h3 {
	color: var(--headline-color);
}

#galerie .gallery-image-group {
	display: grid;
	grid-template-columns: auto auto 2em auto auto;
}

#galerie .gallery-image-group .gallery-image:first-child {
	grid-column: 2 / 3;
}

#galerie .gallery-image-group .gallery-image:last-child {
	grid-column: 4 / 5;
}

#galerie.gallery-image-group .gallery-image {
	display: block;
	text-align: center;
}

/* contact section */
#kontakt .section-content svg {
	margin: 4em 0 2em 0;
}

#kontakt p {
	font-size: 1.4em;
	margin-bottom: 1em;
}

/* impressum section */

#impressum p {
	font-size: .95em;
	margin-bottom: 1em;
}

#impressum .section-content {
	padding-top: 1em;
	padding-bottom: 1em;
}

#impressum.section {
	padding-bottom: 1em;
	margin-bottom: 1em;
}

/* page size modifications */

@media (min-width: 1024.5px) and (max-width: 1366px) {

	:root {
		/*--base-fontsize: max(10px, min(13.66px, calc(1vw * 0.71 + 3px)));*/
		--base-fontsize: 0.98vw;
	}
}

@media (max-width: 1024px) {
	
	:root {
		--base-fontsize: 1.3vw;
	}
	
	.section {
		margin: 5em 0;
	}
	
	.section-content {
		padding: 3.8em 2.5em 3.8em 2.5em;
	}
	
	#home.section {
		grid-template-rows: auto auto;
		margin: 2.5em 0 5em 0;
	}
	
	#home .section-content {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		margin-top: 2.5em;
	}
	
	#home .buzzword-list {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		position: static;
		margin: 0;
	}
	
	#home .buzzword-list > ul {
		display: inline-block;
		position: static;
		flex-direction: row;
		justify-content: normal;
	}
}

@media (max-width: 770px) {
	
	:root {
		--base-fontsize: 1.75vw;
	}
	h1.script {
		font-size: 4.9em;
	}
	#home .subtitle {
		padding: 0;
	}
	#home .teaser-images svg {
		display: block; /*hier weiter*/
		margin: 0 auto 1.5em auto;
	}
	#home .contact {
		font-size: 1.4em;
	}
	
	.section {
		margin: 4em 0;
		grid-template-columns: auto calc(var(--base-fontsize) * 51) auto;
	}
}

@media (max-width: 480px) {
	.section-content {
		padding-left: 2em;
		padding-right: 2em;
	}
	#home .section-content {
		padding-top: 6em;
	}
	#home .buzzword-list {
		font-size: 4.2em;
	}
	#home .teaser-images {
		font-size: 1.6em;
	}
	#home .contact {
		font-size: 2em;
		grid-template-columns: none;
		grid-template-rows: auto auto auto;
	}
	#galerie .gallery-image-group.first {
		font-size: 1.6em;
		grid-template-columns: auto;
		grid-template-rows:  auto auto;
	}
	#galerie .gallery-image-group.first .gallery-image {
		grid-column: auto;
	}
	#galerie .gallery-image-group.first .gallery-image:first-of-type {
		margin-bottom: 1em;
	}
	#kontakt, #impressum {
		font-size: 1.5em;
	}
}

/* vertical menu visible */
@media (max-width: 363px) {
	.menu-button {
		display: block;
	}
	.nav-menu {
		border: 12px solid #ffffff;
		padding: 0;
		margin: 0 0 0 auto;
		font-size: 1.8rem;
		right: 0px;
		box-sizing: border-box;
		transition: all 0.35s;
		background-color: #ffffff;
		transform: translateX(400px);
		overflow: auto;
		max-width: 80vw;
		top: 0px;
		width: 400px;
		font-weight: 600;
		position: fixed;
		height: 100%;
	}
	
	#home .section-content {
		padding-top: 8em;
	}
	#home .buzzword-list {
		font-size: 5.5em;
	}
	#home .contact {
		font-size: 2.7em;
	}
	#home .subtitle {
		font-size: 2.9em;
		margin-top: -.25em;
	}
	#kontakt {
		font-size: 1.7em;
	}
	#kontakt .section-content svg {
		font-size: 1.2em;
	}
	#impressum {
		font-size: 2em;
	}
}

/* horizontal menu visible */
@media (min-width: 364px) {
	.nav-menu {
		display: flex;
	}
	.menu-button {
		display: none;
	}
	.nav-menu > .nav-menu-link {
		max-width: 148px;
	}
}