/* --------------------------------------------------
  xx. Import von anderen CSS-Dateien
-------------------------------------------------- */
@import url("abstaende.css");


/* --------------------------------------------------
  xx. Variablen
-------------------------------------------------- */
:root {
	--template-color-1: #DEDAD6;
	--template-color-2: #1D3144;
	--template-color-3: #767264;
	--template-color-4: #DDDAD5;
	--template-color-5: #1D3144;
	--template-color-6: #EEEDEB;
	--template-color-7: #F2F2F2;
	--template-color-8: #75787b;

	--template-line-color-1: #6C6C6D;
}


/* --------------------------------------------------
  xx. Global
-------------------------------------------------- */
a, a[href^="tel"] {
    color: var(--template-color-2);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--template-color-8);
}


p {
	padding: 0px;
	margin: 0px;
}

.full-width {
	padding: 0px;
	margin: 0px;
}

/* --------------------------------------------------
  xx. Farben
-------------------------------------------------- */

.bg-1 {
    background-color: var(--template-color-3);
}
.color-1 {
    color: var(--template-color-3);
}
.button-1 {
    background-color: var(--template-color-3);
    color: var(--template-color-4);
    font-family: "Poppins", sans-serif;
	padding: 10px 25px 10px 25px;
	font-size: 18px;
}
.bg-2 {
    background-color: var(--template-color-4);
}
.color-2 {
    color: var(--template-color-4);
}
.button-2 {
    background-color: var(--template-color-4);
    color: var(--template-color-5);
    font-family: "Poppins", sans-serif;
	padding: 10px 25px 10px 25px;
	font-size: 18px;
}
.bg-3 {
    background-color: var(--template-color-5);
}
.color-3 {
    color: var(--template-color-5);
}
.button-3 {
    background-color: var(--template-color-5);
    color: var(--template-color-4);
    font-family: "Poppins", sans-serif;
	padding: 10px 25px 10px 25px;
	font-size: 18px;
}

.color-white {
    color: #ffffff;
}


.bg-container2, .bg-container2a {
    background-color: var(--template-color-6);
}
.bg-container3 {
    background-color: var(--template-color-4);
}
.bg-container3box, .carousel-item {
    background-color: var(--template-color-4);
	padding:40px 40px 40px 40px;
	min-height: 360px;
}
.bg-container3box p {
	color: var(--template-color-2);
}
.bg-container4 {
    background-color: var(--template-color-3);
}
.bg-container5 {
    background-color: var(--template-color-2);
}
.bg-container5 .container p, .bg-container5 .container h1 {
	color: #ffffff;
}
.abstandLR {
	padding-left: 70px;
	padding-right: 70px;
}
.bg-container2 .container {
	padding-left: 100px;
	padding-right: 100px;
}
.bg-container2 .container .box {
	background-color: var(--template-color-1);
	color: var(--template-color-2);
	padding: 15px 15px 15px 15px;
	text-align: center;
	height: 370px;
	margin-bottom: 20px;
}
.bg-container2 .container .box p {
	text-align: center;
	font-size: 14px;
}
.bg-container2 .container .box .element-titel {
	text-align: center;
}
.bg-container2 .container .box .element-titel h1 {
	font-size: 24px;
}
.bg-container2a .impressumheadline {
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid var(--template-color-2);
	border-bottom: 1px solid var(--template-color-2);
}
.bg-container4 .element-content {
	color:#ffffff;
}
.bg-container4 .element-content h1 {
	font-size: 60px;
}

.bg-white {
    background-color: #ffffff;
}

.bg-dark {
	background-color: #222222;
}
.bg-gray {
	background-color: #E4E6E6;
}

.bgbg-gray-light {
	background-color: #F7F8F8;
}

.bg-black {
    background-color: #000000;
}

.bg-red {
    background-color: #ba0c2f;
}

.bg-fima-blue {
    background-color: #007DBE;
	color: #ffffff;
}

.bg-template-01 {
    background-color: var(--template-color-1);
    color: var(--template-color-3);
}
.bg-template-01 a {
    color: var(--template-color-3);
}
.bg-template-01 a:hover {
    color: var(--template-color-3);
}

.bg-template-02 {
    background-color: var(--template-color-2);
	color: #000;
}
.bg-template-02 a {
	color: #000;
}
.bg-template-02 a:hover {
	color: var(--template-color-1);
}

.bg-template-03 {
    background-color: var(--template-color-3);
	color: #ffffff;
}
.bg-template-03 a {
	color: #E4E6E6;
}
.bg-template-03 a:hover {
	color: #ffffff;
}

.color-red {
	color: red;
}


/* -----------------------------------
  xx. Rahmen & Linien
--------------------------------------*/
.hr-line-1 {
	display: none !important;
    position: relative;
    width: 60px;
    height: 1px;
    background: var(--template-color-8);
    display: block;
    margin: 0 auto;
}
.hr-line-2 {
	height: 1px !important;          /* bestimmt die Dicke */
    color: var(--template-color-2);
	opacity: 1;
	background-color: var(--template-color-2); /* legt die Farbe der Linie fest */
	border: none;          /* entfernt die Standardrahmenlinie */
}
.hr-line-3 {
	height: 1px !important;          /* bestimmt die Dicke */
    color: #ffffff;
	opacity: 1;
	background-color: #ffffff; /* legt die Farbe der Linie fest */
	border: none;          /* entfernt die Standardrahmenlinie */
}

.rahmenOU h3 {
	padding-top: 15px;
	border-top: 1px solid var(--template-color-8);
	border-bottom: 1px solid var(--template-color-8);
}

.rahmenOU2 h3 {
	padding-top: 15px;
	border-top: 2px solid var(--template-color-8);
	border-bottom: 2px solid var(--template-color-8);
}

.rahmenU h3 {
	padding-top: 15px;
	border-bottom: 1px solid var(--template-color-8);
}

.rahmenU2 h3 {
	padding-top: 15px;
	border-bottom: 2px solid var(--template-color-8);
}

/* --------------------------------------------------
  xx. Buttons
-------------------------------------------------- */
.btn-primary {
    background-color: var(--template-color-2);
    border-color: var(--template-color-2);
	border-radius: 0;
	padding: 20px 45px 20px 45px;
	/*border-color: rgba(26, 168, 239, 0.5);*/
	color: #ffffff;
}
.btn-primary:hover {
	/*border-color: rgba(26, 168, 239, 0.5);*/
    background-color: var(--template-color-3);
    border-color: var(--template-color-3);
}
.btn-primary:focus {
	/*border-color: rgba(26, 168, 239, 0.5);*/
    background-color: var(--template-color-3);
    border-color: var(--template-color-3);
	/*border-color: rgba(26, 168, 239, 0.5);*/
}



/* Rows & Cols
-------------------------------------------------- */

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

/* Grid-Layout
-------------------------------------------------- */
.content-item p:first-child {
	padding-top: 30px;
	padding-bottom: 10px;
}

/* 
-------------------------------------------------- */
.content-1-item {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 78px;
}
.content-2-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 78px;
}

.content-3-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 52px;
}

.content-4-items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.content-item img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------
  xx. Team
-------------------------------------------------- */
.team-item {
	margin-bottom: 20px;
}
.team-name {
	font-weight: bolder;
}


/* -----------------------------------
  xx. ScrollUp
--------------------------------------*/
#scrollUp {
	bottom: 55px;
	right: 20px;
	padding: 15px;
    background-color: transparent;
    border: 2px solid var(--template-color-8);
    border-radius: 50%;
	color: var(--template-color-8);
}

#scrollUp i {
    display: block;
    font-size: 20px;
}
#scrollUp:hover {
    background-color: var(--template-color-8);
    color: #fff;
}

/* -----------------------------------
  xx. Google Map
--------------------------------------*/
.header-map {
    height: 600px;
}

.kontakt-map {
	height: 500px;
}

.gm-fullscreen-control {
	display: none;
}


/* ----------------------------------------------------------------------------------------------------------------------------------
  xx.  Flexbox
---------------------------------------------------------------------------------------------------------------------------------- */
.flexbox {
	display: flex;
	gap: 20px;
}

.flexbox .flex-main {
	flex: 1;
}

.flexbox .flex-250 {
	flex: 0 250px;
}
.flexbox .flex-300 {
	flex: 0 300px;
}

.flexbox .flex-400 {
	flex: 0 400px;
}


@media (max-width:767.98px) {
	.flexbox {
		display: block;
	}
}

/* -----------------------------------
  Cookies
--------------------------------------*/
.CookieArea {
    position:fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0px;
    z-index: 10000;
    background-color: var(--template-color-1);
    border-top: 1px solid var(--template-color-1);
    opacity:0.85;
    font-size: 14px;
}
.CookieText {
    padding: 10px 0px 0px 0px;
    color: var(--template-color-3);
}
.CookieArea a {
	text-decoration: none;	
    color: var(--template-color-3);
}
.CookieArea .CookieButton {
    padding: 10px 0px 10px 0px;
}
.CookieArea button {
    border: 1px solid var(--template-color-3);
    color: var(--template-color-3);
    padding: 5px 10px;
    font-size: 12px;
}
.CookieArea button:hover {
    border: 1px solid var(--template-color-3);
    color: var(--template-color-3);
}