:root {
	--color-text: #5a6353;
	--color-bg: #86927C;
	--color-bg-light: #f0ecd5;
	--color-link: var(--color-text);

	--color-item-7: #ddaa6f;
	--color-item-9: #72c0df;
	--color-item-11: #e5a6c0;
	--color-item-17: #9be29b;
	--color-item-19: #b5d7db;
}

* {
	box-sizing: border-box;
}

html,
body {
	background-color: var(--color-bg-light);
	color: var(--color-text);
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	max-width: 2400px;
}

img.logo {
	max-width: 400px;
	height: auto;
}

h1 {
	text-indent: -9999px;
	display: none;
}

.content {
	padding: 1em;
	width: 40%;
	margin: 0 auto;
	max-width: 50%;
}

div.grid-container {
	width: 100%;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

div.grid-item img {
	max-width: 100%;
	height: 100%;
}



div.grid-item.info {
	background-image: url('/img/Grafik-Anne-Sambale-Florales-Handwerk.jpg');
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: var(--color-bg-light);
	line-height: 200%;
	font-size: 180%;
	line-height: 180%;
}

div.grid-item.text {
	font-size: clamp(1em, 3em, 3em);
	padding-top: 4.5em;

}

#item7 {
	background-color: var(--color-bg);
	color: white;
	font-weight: bold;
}

#item9 {
	background-color: var(--color-bg);
	color: white;
	font-weight: bold;
}

#item11 {
	background-color: var(--color-bg);
	color: white;
	font-weight: bold;
}

#item17 {
	background-color: var(--color-bg);
	color: white;
	font-weight: bold;
}

#item19 {
	background-color: var(--color-bg);
	color: white;
	font-weight: bold;
}


div.socialMedia {
	clear: both;
	padding: 4em;
}

footer {
	font-size: 11px;
	font-weight: bold;
	line-height: 1.5em;
	color: var(--color-text);
	position: fixed;
	bottom: 0px;
	left: 0;
	padding: 0.6em;
	background-color: var(--color-bg-light);
	width: 100%;
	text-align: center;
	z-index: 3;
}
#impressum {
	max-width: 800px;
	margin: 3em auto;
	text-align: left;
	display: flex;
	gap: 5px;
	line-height: 140%;
	;
}

#impressum h1 {
	text-indent: 0;
	display: block;
}

#impressum h2 {
	line-height: 1.5em;
}
@media only screen and (max-width: 990px) {

	html,
	body {
		font-size: 100%;
	}

	.content {
		width: 80%;
		max-width: 100%;
	}

	div.grid-container {
		grid-template-columns: repeat(1, 1fr);
		grid-template-columns: repeat(1, 1fr);

	}

	div.grid-item.info {
		background-position: center bottom;
		line-height: 200%;
		aspect-ratio: 1/1;
		padding: 1em;
		font-size: 100%;
	}

	div.grid-item.text {
		font-size: clamp(1em, 3em, 2em);
		padding-top: 25%;
		min-height: 300px;

	}

	img.logo {
		max-width: 100%;
		width: 50%;
		height: auto;
	}

	footer {
		padding: 0.5em 10%;
		width: 100%;
		height: 6em;
	}
	#impressum {
		padding: 1em;
		flex-wrap: wrap;
	}
}



/* unvisited link */
a:link {
	color: var(--color-link) !important;
	text-decoration: none;
}

/* visited link */
a:visited {
	color: var(--color-link) !important;
	text-decoration: none;
}

/* mouse over link */
a:hover {
	color: var(--color-link) !important;
	text-decoration: none;
	border-bottom: 1px dotted var(--color-link);
}

/* selected link */
a:active {
	color: var(--color-link) !important;
	text-decoration: none;
	border-bottom: 1px dotted var(--color-link);
}