@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	--body-color: #383838; /* dunkelgrau (Textfarbe Hauptbereich) */
	--body-bg: #ffffff; /* hellgrau (Hintergrundfarbe Hauptbereich) */
	--header-color: #383838; /* dunkelgrau (Textfarbe Header) */
	--header-bg: #ffffff; /* weiss (Hintergrundfarbe Header) */
	--menu-color: #000000; /* schwarz (Textfarbe Menüeinträge) */
	--menu-bg: #ffffff; /* weiss (Hintergrundfarbe Pulldown-Menü) */
	--main-color: #1d7777; /* thov-grün (Hauptfarbe für div. Dinge) */
	--link-color: var(--main-color);
	--link-hover-color: var(--main-color);
	--footer-color: #ffffff; /* weiss (Textfarbe Footer) */
	--footer-bg: #000000; /* schwarz (Hintergrundfarbe Footer) */
	--dark-background-color: #ffffff; /* weiss (Schriftfarbe bei dunklem Hintergrund) */
	--body-font-family: "Open sans", sans-serif;
	--headings-font-family: "Roboto", sans-serif;
	--body-font-size: 1.1rem;
	--body-line-height: 1.5rem;
	--body-font-weight: 400;
	--cassiopeia-font-weight-headings: 500;
}

/* Seitenkopf */
.header {
	background-color: var(--header-bg);
	background-image: none; 
}

.container-header .grid-child {
	padding: 0 0.5em 0.5em 0.5em;
}

.container-header .container-nav {
	margin-top: -2rem;
}

div.page-header h1 {
	margin-bottom: 1rem;
	text-transform: none;
}

/* Menüeinträge */
.container-header .mod-menu > li > a,
.mm-toggler {
	color: var(--menu-color) !important; 
	font-family: var(--headings-font-family);
	font-size: 1.1rem;
	text-transform: uppercase;
}

/* Hauptmenü */
.navbar {
	margin-left: -12px;
}

.navbar-toggler {
	background-color: var(--menu-color);
	border: #ffffff;
	color: #ffffff;
	padding: 0.5rem 0.8rem 0.5rem 0.8rem;
}

/* Dropdown-Menü */
.metismenu.mod-menu .mm-collapse {
	background: var(--menu-bg);
}

/* Links im Dropdown Menu */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
	color: var(--menu-color); 
}

div.grid-child {
	padding: 1rem;
}

/* Card */
.card {
	box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	padding: 1rem;
}

/* Boxed */
.boxed .blog-item {
	box-shadow: 12px 4px 18px 0px rgba(56,56,56,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(56,56,56,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(56,56,56,0.35);
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
	color: var(--main-color);
	font-family: var(--headings-font-family);
	hyphens: auto; /* Auto-Silbentrennung */
	margin-top: 1rem; /* Abstand oben */
	margin-bottom: 0; /* Abstand unten */
	text-transform: none; /* Keine Umwandlung in Grossbuchstaben */
	word-break: break-word; /* Automatische Silbentrennung */ 
}

/* Überschrift 1 */
h1 {
	font-size: 2.2rem;
}

/* Überschrift 2 */
h2 {
	font-size: 1.8rem;
}

/* Überschrift 3 */
h3 {
	font-size: 1.6rem;
}

/* Überschrift 4 */
h4 {
	font-size: 1.4rem;
}

/* Überschrift 5 */
h5 {
	font-size: 1.3rem;
}

/* Überschrift 6 */
h6 {
	font-size: 1.1rem;
}

/* Normaler Text */
p, ul, ol {
	margin-top: 1rem; /* Abstand oben */
	margin-bottom: 0; /* Abstand unten */
}

/* Bilder */
img {
	padding-bottom: 1rem;
}

/* Hintergrundfarbe der Buttons */
.btn-primary,
.convertforms .cf-btn {
	background: var(--main-color) !important;
	border-radius: 4px;
	font-family: var(--headings-font-family);
	font-size: 1rem;
	line-height: 1rem;
	padding: 8px 12px 8px 12px;
	text-transform: uppercase;
}

.btn-secondary {
	border-radius: 4px;
	font-family: var(--headings-font-family);
	font-size: 1rem;
	line-height: 1rem;
	text-transform: uppercase;
	transition-property: none;
}

.btn-primary a {
	color: #FFFFFF;
	text-decoration: none;
}

/* Hintergrundfarbe der Buttons bei Mouse-over */
.btn-primary:hover {
	background: var(--main-color);
} 

/* Icon Farbe */
.icon-user {
	*color: #000000; 
}

/* Alle Icons */
i.fa, .fas, [class*=" icon-"], [class^="icon-"] {
	*color: #000000; 
}

/* Fusszeile */
.footer {
	background: var(--footer-bg); 
	color: var(--footer-color);
}

.footer i.fa,
.footer .fas,
[class*=" icon-"],
[class^="icon-"] {
	color: var(--dark-background-color);
}

.back-to-top-link,
.back-to-top-link:hover {
	background-color: var(--main-color);
	color: #000000; 
}

/* --- Convert Forms --- */
.convertforms.cf-success .cf-response {
	background: var(--main-color) !important;
	font-family: var(--body-font-family);
	font-size: 1rem;
	padding-top: 0;
}
/* --- /Convert Forms --- */

/* --- Baforms --- */ 
.com-baforms-wrapper * > .ba-tooltip {
	transform: translateX(calc(145px - 50%))!important;
}

.com-baforms-wrapper  .ba-tooltip:before {
	left: 92% !important;
}

a.ba-form-submit-btn,
a.ba-form-submit-btn::before,
.ba-form-submit-btn,
.ba-form-submit-btn:hover {
	background-color: var(--main-color);
	border-radius: 4px;
	font-family: var(--headings-font-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1rem;
	padding: 12px 24px 12px 24px;
	text-transform: var(--submit-typography-text-transform);
}

i.zmdi {
	display: none;
}
/* --- /Baforms --- */ 

/* --- Spoiler --- */
div.accordion-item {
	margin-top: 1rem;
}

.accordion-button {
	font-weight: 500 !important;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

.accordion-button::before {
	content: "↓";
	padding-right: 4px;
}
/* --- /Spoiler --- */

/* --- Kleine Bildschirme --- */
@media only screen and (max-width: 600px) {
	div.navbar-brand {
		margin: auto;
	}
}
/* --- /Kleine Bildschirme --- */