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


/* --------------------------------------------------
  xx. Variablen
-------------------------------------------------- */
:root {
	--template-color-1: #797454;
	--template-color-2: #000000;
	--template-color-3: #f5f5f5;
	--template-color-4: #ffffff;
	--template-color-5: #252525;
	--template-color-6: #2D2C2C;
	--template-color-7: #F2F2F2;
	--template-color-8: #75787b;

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


/* --------------------------------------------------
  xx. Global
-------------------------------------------------- */
a {
    color: var(--template-color-1);
    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-white {
    /*background-color: #F7F8F8;*/
	background-color: transparent !important;
}

.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-1 {
	color: var(--template-color-1);
}
.color-2 {
	color: var(--template-color-3);
}
.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;
}

.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-1);
	border-color: rgba(26, 168, 239, 0.5);
}
.btn-primary:hover {
	border-color: rgba(26, 168, 239, 0.5);
    border-color: var(--template-color-1);
}
.btn-primary:focus {
	border-color: rgba(26, 168, 239, 0.5);
    border-color: var(--template-color-1);
	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);
}