@charset "utf-8";

/*
https://www.colorhexa.com/e0f8e0
https://colors.dopely.top/fr/color-pedia/e0f8e0
*/

:root {
	color-scheme: light dark;

	--color-lightgreen: hsl(120, 63.2%, 92.5%);
	--color-orange: hsl(37, 90%, 51%);
	--color-gray: #333333;
	--color-lightgray: #f3f6fb; /* #dedede; */

	--color-greendark: hsl(107, 67%, 22%);
	--color-green: hsl(107, 41%, 36%);
    --color-greenlighter: hsl(107, 66%, 86%);

	--surface-0: hsl(229, 41%, 5%);
	--surface-1: hsl(229, 25%, 12%);
	--surface-2: hsl(234, 26%, 16%);
	--text-1: hsl(229, 12%, 100%);
	--text-2: hsl(229, 12%, 66%);

	--required: hsl(46, 96% , 60%);
	--accent: hsl(37, 90%, 51%);
	--border: 1px solid hsl(229, 22%, 19%);

	--clr-success: hsl(143, 100%, 26%);
	--clr-warning: hsl(43, 100%, 66%);
	--clr-error: hsl(348, 55%, 49%);


	--background-color: hsl(120, 63.2%, 92.5%);
	--text-color: #333333;
	--shadow-color: #111;
	--highlight: #666;
	--primary: hsl(37, 90%, 51%);

}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: var(--surface-1);
		--text-color: var(--text-1);
		--bs-secondary-color: var(--text-1);
		--shadow-color: #111;
		--highlight: #666;
		--primary: hsl(37, 90%, 51%);

		--bs-body-bg: var(--surface-1);
		--bs-body-color: var(--text-1);
		--bs-border-color: var(--surface-2);
	}
}


* {
	box-sizing: border-box;
}

html, body {
	height: 101%;
	font-family: system-ui;
}

html {
	margin-bottom: 1px;
}


body {
	background-color: var(--background-color);
	color: var(--text-color);


	overflow-y: scroll;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;

	margin: 0;
	z-index: 1;

	/*padding-block-start: 10vb;*/
}

.page {
	margin: 0 auto;
	max-width: 1300px;
	min-width: 240px;
	width: min(100% - 2rem, 1200px);
	overflow: hidden;
}
.page.formular {
	width: 100%;
}

h1.headline {

}
h2.slogan {
	font-size: 2em;
}

h3 {
	color: var(--primary);
	margin-bottom: 2%
}
h4 {
	color: var(--bs-link-color);
	margin-bottom: 2%
}

.pricetable {
	min-width: 800px;
}

.pricetable thead th,
.pricetable tbody th,
.pricetable tbody td {
	text-align: right;
	vertical-align: top;
}

section {
	border-bottom: 1px solid var(--color-lightgray);
	
}

iframe {
	padding: 0;
	display: inline;
	overflow: hidden;
	max-width: 100%;
}

a.nav-link {
	text-transform: uppercase;
	font-weight: bold;
}