:root {
	--color-hell                    : rgba(248, 255, 231, 1);
	--color-hell-50                 : rgba(248, 255, 231, 0.5);
	--color-dunkel                  : rgba(73, 110, 82, 1);
	--color-extradunkel             : rgba(47, 71, 53, 1);
	--color-extradunkel-transparent : rgba(47, 71, 53, 0);
	--gradient-dark                 : linear-gradient(to bottom, var(--color-dunkel), var(--color-extradunkel));
	--gradient-light                : linear-gradient(to bottom, #ffffff, var(--color-hell));
	--color-error                   : indianred;
	--color-ok                      : darkseagreen;

	--screen-width                  : 1200px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
menu {
	margin         : 0;
	padding        : 0;
	border         : 0;
	outline        : 0;
	font-size      : 100%;
	font-weight    : normal;
	vertical-align : baseline;
	background     : transparent;
	text-align     : left;
}

body {
	margin                : 0;
	height                : 100%;
	font-family           : sans-serif;
	font-size             : 16px;
	background-color      : var(--color-hell);

	background-image      : url("bgBlatt.png");
	background-position   : bottom right;
	background-repeat     : no-repeat;
	background-attachment : fixed;
}

.homeWrapper {
	display               : grid;
	grid-template-columns : auto min(100%, 1200px) auto;
	grid-template-rows    : 80dvh auto;
	min-height            : 100%;
	z-index               : 100;
}

.title {
	position         : relative;
	grid-column      : 1 / 4;
	background-color : var(--color-extradunkel);
}

.titleImage {
	position   : absolute;
	top        : 0;
	left       : 0;
	width      : 100%;
	height     : 100%;
	object-fit : cover;

	opacity    : 1;
	transition : opacity 2s ease-in-out;

	@starting-style {
		opacity : 0;
	}
}


.gradientLeft {
	position   : absolute;
	left       : 0;
	top        : 0;
	width      : calc(50vw - 640px);
	height     : 100%;
	background : linear-gradient(to right, var(--color-extradunkel), var(--color-extradunkel-transparent));
	z-index    : 1;
}

.gradientRight {
	position   : absolute;
	right      : 0;
	top        : 0;
	width      : 50vw;
	height     : 100%;
	background : linear-gradient(to left, var(--color-extradunkel), var(--color-extradunkel-transparent));
	z-index    : 1;
}

.titleText {
	position    : absolute;
	top         : 40%;
	left        : 50%;
	z-index     : 100;
	text-shadow : 2px 2px 0 #000000;
}

.titleText h1 {
	font-family      : serif;
	font-size        : 5rem;
	font-weight      : 100;
	line-height      : 1;
	color            : white;
	text-align       : center;

	opacity          : 1;
	transition       : opacity 1s ease-in-out, translate 1s ease-in-out;
	transition-delay : 1s;

	@starting-style {
		opacity   : 0;
		translate : 0 100px;
	}
}


.titleText h3 {
	font-size        : 2rem;
	color            : white;
	text-align       : center;

	opacity          : 1;
	transition       : opacity 1s ease-in-out, translate 1s ease-in-out;
	transition-delay : 1.5s;

	@starting-style {
		opacity   : 0;
		translate : 0 100px;
	}
}


.content {
	grid-column : 2 / 3;
	width       : var(--screen-width);
	max-width   : calc(100% - 2rem);
	margin      : 3rem 1rem;

	display     : flex;
	gap         : 2rem;
}

.contentArticle {
	background-color : white;
	padding          : 1rem;
}

.content h1 {
	font-family : serif;
	font-size   : 3rem;
	font-weight : 100;
	line-height : 1;
	margin      : 1rem 0;
}

.content p {
	margin-bottom : 1rem;
}


.footer {
	grid-column     : 1 / 4;
	display         : flex;
	justify-content : center;
	gap             : 30px;

	background      : var(--gradient-dark);
	color           : #ffffff;
	height          : 100%;
	overflow        : hidden;
	padding-bottom  : 2rem;
}

.footer h2 {
	color         : #ffffff;
	font-size     : 2rem;
	margin-bottom : 1rem;
}

.footer h3 {
	color         : #ffffff;
	font-size     : 1.5rem;
	margin-bottom : 1rem;
}

a {
	color : #f8ffe7;
}

a:hover {
	color : #ffffff;
}


.footer-oeffnungszeiten {
	padding-top : 20px;
	z-index     : 100;
}

.footer-kontakt {
	grid-area   : foot3;
	padding-top : 20px;
	z-index     : 100;
}


@media (max-width : 1200px) {
	.titleText {
		left  : 0 !important;
		width : 100%;

		h1 {
			font-size : 3rem !important;
		}

		h3 {
			font-size : 1.5rem !important;
		}
	}


	.content {
		flex-direction : column;
	}

	.footer {
		flex-direction : column;
		padding        : 1rem 2rem;
	}
}