@charset "utf-8";
/* CSS - guido-bree.de - Internet- & Netzwerklösungen - 2025 */



/* ---------------------------------------------- /*
 * Google Fonts 
/* ---------------------------------------------- */
/*
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i);
*/

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




/* raleway-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v34-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/raleway-v34-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/raleway-v34-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/raleway-v34-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* raleway-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/raleway-v34-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




/* ---------------------------------------------- /*
 * Body
/* ---------------------------------------------- */

body {
    color: #333;
    font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-size: 15px;
 	line-height: 1.8em;
    background-color: #fff;
	font-weight: 400;
	padding-top:101px;
}

/* ---------------------------------------------- /*
 * Headings
/* ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	color: #2b2d42;
	font-weight: 700;
	margin: 0 0 10px;
   font-family: "Raleway", sans-serif;
}

h1 {
    font-size: 40px;
    line-height: 40px;
    font-weight: 900;
    margin: 0 0 44px 0;
}

h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 800;
    margin: 0 0 22px 0;
}

h3 {
    color: #283043;
    font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: normal;
    margin-bottom: 24px;
}

h4 {
    color: #283043;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    margin: 0 0 14px 0;
}

h5 {
    color: #283043;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    margin: 0 0 14px 0;
}

h6 {
    color: #283043;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    margin: 0 0 14px 0;
}


/* ---------------------------------------------- /*
 * Standards
/* ---------------------------------------------- */

a {
    text-decoration:none;
	/*
    transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    */
	outline: none;
	color:#333;
}

a:hover {
	text-decoration: none;
	color:#eee;	
	}


.trenner, .devider{
  border-bottom: 1px solid #ddd;
  padding-left:10px;
  padding-right:10px;
  margin-top:10px;
  margin-bottom:10px;
}


 ul ul, ol ol {
 	 margin-bottom:10px;
}

.fa-15x {
    font-size: 1.5em;
}

.margin-bottom-5{
  margin-bottom:5px !important;
}

.margin-bottom-10{
  margin-bottom:10px !important;
}

.margin-bottom-15{
  margin-bottom:15px !important;
}

.margin-bottom-20{
  margin-bottom:20px !important;
}

.margin-top-5{
  margin-top:5px !important;
}

.margin-top-10{
  margin-top:10px !important;
}

.margin-top-15{
  margin-top:15px !important;
}

.margin-top-20{
  margin-top:20px !important;
}


/* ---------------------------------------------- /*
 * Menu und Navigation
/* ---------------------------------------------- */

.navbar{
	padding:0px;
    min-height: 100px;
    margin-bottom: 20px;
}

.navbar-default {
   /*background-color:#ff5a00;
	background-image: linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
	background-position: top center;
   */
     /*
	opacity:1.0;
    background-image: url('../bilder/bg_blume.png'), linear-gradient(0deg, #fff 1px, #ddd 100px);
	background-size:auto;
    background-repeat: no-repeat;
	background-position-x: center;
    background-position-y: top;
	 */
	
	background: linear-gradient(0deg, #fff 1px, #ddd 100px);
	border:none;
	border-bottom: 1px solid #ddd;
}

.navbar-header{
	float:right;
}

.navbar-brand{
  padding: 15px 15px;	
}

.navbar-brand img{
   height:80px;
   margin-top:0px;
}

.navbar-collapse{
  margin-top:0px;
}

.navbar-default ul.navbar-nav{
  height:auto;
  padding-top:5px;
  -webkit-transition: padding .5s ease-in-out;
  -moz-transition: padding .5s ease-in-out;
  transition: padding .5s ease-in-out;
}

.navbar-default .navbar-nav>li>a {
	position:relative;
	padding-top:40px;
	padding-bottom:30px;
	padding-right:15px;
	padding-left:15px;
	color:#333;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	border: 0px solid transparent;
	font-size:14px;
	text-transform:uppercase;
	font-weight:700;	
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #8c1515;
    background-color: transparent;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #8c1515;
    background-color: transparent;
}

.dropdown-menu {
   background-color: #828a8f;
}

.dropdown-menu>li>a {
  color: #fff;
}


.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus,
.nav > li > a:hover, 
.nav > li > a:focus{
	
	color:#8c1515;
    background-color: transparent;
    border-radius: 3px;	
	border: 0px solid #fff;
    border-bottom: 0px solid #8c1515;
}

 

.navbar-nav > li.active > a, .navbar-nav> li.active >a:focus, .navbar-nav > li.active >a:hover {
    color: #8c1515;
	border-radius:0px;
    background-color: transparent;
    border: 0px solid #ddd;
	/*
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	*/
}

.nav>li>a:focus{
    text-decoration: none;
    background-color: transparent;
	border-radius:0;
	color: #8c1515;
}

.navbar-nav > li > a:hover {
    color: #8c1515;
	border-radius:0;
    background-color: transparent;
	border: 0px solid #ddd;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	
}

.navbar-nav > li > a:after {
	content: "";
	display: block;
	width: 0%;
	height: 2px;
	background-color: #8c1515;
	-webkit-transition: .2s all;
	transition: .2s all;
	margin-top:3px;
}

.navbar-nav>li>a:hover:after, .navbar-nav>li>a:focus:after, .navbar-nav>li.active>a:after {
	width: 100%
}


/* ---------------------------------------------- /*
 * für alle Sectionen 
/* ---------------------------------------------- */

section {
  padding-top:180px;
  padding-bottom:0px;
  overflow: hidden;
  background-color: #fff; 
}

section h2 {
  font-size: 2.2em;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  color: #8c1515;
  padding-bottom: 10px
}

section h2::before, section h2::after {
  content: '';
  width: 70px;
  height: 2px;
  background: #8c1515;
  display: inline-block;
}

section h2::before {
  margin: 0 15px 10px 0;
}

section h2::after {
  margin: 0 0 10px 15px;
}

section h3 {
  /*color: #2b2d42;*/
  color: #666;
  font-size: 1.5em;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 30px;
}

/* ---------------------------------------------- /*
 * Section Home/Slider
/* ---------------------------------------------- */

#home{
	background-color: #fff;
    padding-top: 0px;
	padding-bottom: 0px;
}

#home h2 {
  padding-bottom: 0px
}

.slideshow {
    margin: 0 auto;
    text-align: center;
    color: #fff;
	border-bottom: 1px solid #ddd;
}

.slideshow .inner-bg {
    padding: 55px 0 30px 0;
    background: url(../bilder/pattern-3.png);
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
}

.slideshow h2 {
    font-size: 40px;
    line-height: 44px;
	margin-top:20px;
    font-weight: 700;
    text-transform: capitalize;
    text-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.slideshow p {
    margin-top: 20px;
    font-size: 18px;
    line-height: 36px;
    text-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.slideshow .placeholder{
  height:350px;
}


.slideshow .dot{
	display:inline-block;
	color:#ddd;
	padding-left:2px;
	padding-right:2px;
}

.slideshow .dot:hover{
	cursor:pointer;	
}
	
.slideshow .dot.selected {
	display:inline-block;
	color:#8c1515;
}
   
.slideshow .slideshow-dots{
	display:inline-block;
	margin-top:45px;
	font-size:0.5em;
}


/* ---------------------------------------------- /*
 * Section Streifen
/* ---------------------------------------------- */

.streifen{
  margin:0px;
  padding-top:0px;
  padding-bottom:0px;
}

.bg_orange{
	background-color: #ff5a00;
}

.bg_blau{
	background-color: #083861;
}

.bg_burgund {
    background-image: -webkit-linear-gradient(top, #8c1515 0, #6C0101 100%);
    background-image: -o-linear-gradient(top, #8c1515 0, #6C0101 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8c1515), to(#6C0101));
    background-image: linear-gradient(to bottom, #8c1515 0, #6C0101 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8c1515', endColorstr='#ff6C0101', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
}

.streifen h3{
  font-weight:200;
  color:#fff;
  margin:0px;
  padding-top:40px;
  padding-bottom:40px;
  text-transform: uppercase;  
  font-size: 30px;
  line-height:1.4em;
}


/* ---------------------------------------------- /*
/* Section Willkommen
/* ---------------------------------------------- */

#willkommen { 
 padding-top:30px;
}

 #willkommen h1{
	color:#8c1515;
	font-size:2.8em;
	font-weight:300;
	line-height:1.7em;
	margin-bottom:15px;
	margin-top:0px;	
}

#willkommen p:last-child{
 /*margin-bottom:0px;*/
}




/* ---------------------------------------------- /*
/* Section Leistungen
/* ---------------------------------------------- */

#leistungen {
 margin-bottom:100px;
}

.leistungen { 
   position: relative;
 }

.leistungen:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*
	z-index: 1;
	*/
    background-image: url('../bilder/bg_blume.png');
	background-position: top center;
    background-repeat: no-repeat;   
    background-blend-mode: lighten;
	background-size: auto;
    opacity: 0.1;	
}


.leistungen .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  /*box-shadow: 0 0 29px 0 rgba(255, 90, 0, 0.18);*/
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height:450px;
  
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto; 
  -o-hyphens: auto;
  hyphens: auto;
  /*
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
  */
}

.leistungen .icon-box::before {
  content: '';
  position: absolute;
  background: #bbb;
  right: -60px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: -1;
}

.leistungen .icon-box:hover::before {
  background: #8c1515; 
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.leistungen .icon {
  margin: 0 auto 20px auto;
  padding-top: 12px;
  padding-left:1px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #8c1515;
  transition: all 0.3s ease-in-out;
}

.leistungen .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}

.leistungen .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.leistungen .title a {
  color: #111;
}

.leistungen .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

.leistungen .icon-box:hover .title a, .leistungen .icon-box:hover .description {
  color: #fff;
}

.leistungen .icon-box:hover .icon {
  background: #fff;
}

.leistungen .icon-box:hover .icon i {
  color: #8c1515;
}

.leistungen .leistungsbeschreibung h3{
   color: #8c1515;
}

.leistungen .leistungsbeschreibung ul{
    list-style: none;	
	padding: 0;
}


/* ---------------------------------------------- /*
 * Section Über uns
/* ---------------------------------------------- */

#ueberuns {
	margin-top:30px;
	
	/*
	padding-top: 30px;
	padding: 60px 0;
	margin: 30px 0;
	background-color: #e4e7ed;
	background-image: url(../img/hotdeal2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	*/
	
	/*
	background-color:#194b96;
	background-image: -webkit-linear-gradient(top, #4876ba 0%, #194b96 100%);
	background-image: -o-linear-gradient(top, #4876ba 0%, #194b96 100%);
	background-image: -webkit-gradient(linear, left top, right top, from(#4876ba), to(#194b96) );
	background-image: linear-gradient(to top, #4876ba 0%, #194b96 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4876ba', endColorstr='#ff194b96', GradientType=1);
	background-repeat: repeat-x;
   */
   
   /*
	opacity:0.2;
    background-image: url('../bilder/bg_blume.png'), linear-gradient(0deg, #fff 0px, #fff 100px);
	
    background-image: url('../bilder/bg_blume.png');
    background-color: rgba(255,255,255,0.2);
	background-blend-mode: lighten;
	background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;   
   */
}

.ueberuns { 
   position: relative;
   }

.ueberuns:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*
	z-index: 1;
	*/
    background-image: url('../bilder/bg_blume.png');
	background-position: top center;
    background-repeat: no-repeat;   
    background-blend-mode: lighten;
	background-size: auto;
    opacity: 0.1;	
}


.ueberuns ul {
    list-style: none;
    padding: 0;
	margin-bottom:0px;
}

.ueberuns ul i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    font-size: 32px;
    color: #fff;
    background: #8c1515;
    margin-right: 15px;
    line-height: 0;
    border-radius: 5px;
}

.ueberuns  ul li:first-child {
    /*margin-top: 35px;*/
}

.ueberuns ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
}


.ueberuns .progress {
    height: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 3px;
	-webkit-box-shadow:none;
    box-shadow: none;
    /*
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	*/
}

.ueberuns .progress-bar {
    width: 1px;
    height: 10px;
    transition: 0.9s;
	/*background-color:#9abb59;*/
}

.progress-bar-tvn {
    background-color: #8c1515;
}

.ueberuns .skill{
   font-size:0.8em;
}

.ueberuns img{
  	border:#f5f5f5 1px solid;
}





/* ---------------------------------------------- /*
 * Section Projektablauf
/* ---------------------------------------------- */

#projektablauf {
  background-image: linear-gradient(to bottom, #8c1515 0, #6C0101 100%);
  margin-top:50px;
  padding-top: 120px;
  padding-bottom:150px;
  margin-bottom:0px;
}


.projektablauf h2, .projektablauf h3, .projektablauf h4{
  color:#fff;	
}

.projektablauf h4{
   font-size: 22px;
}

.projektablauf h2::before, .projektablauf h2:after{
  background:#fff;	
}

.projektablauf .projektbox .number{
  font-size: 160px;
  line-height:160px;
}

.projektablauf .projektbox {
  margin-bottom: 30px;
  margin-top:10px;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  /*box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);*/
  padding:20px;
}

.projektablauf .projektbox h4{
   font-size: 18px;
   margin-bottom: 20px;
   color:#888;
}

.projektablauf .projektbox i.fa{
	margin-right:5px; 
}

.circle-solid{
  background-color: whitesmoke;
}

.circle-border {
    border: 1px solid #fff;
}

.circle {
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}

.circle:before {
	content: "";
	display: block;
	padding-top: 100%;
}

.circle-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}

.circle-text {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 120px;
	line-height: 120px;
	font-size: 120px;
	color:#fff;
}


/* ---------------------------------------------- /*
 * Section Service
/* ---------------------------------------------- */

#service {
  margin-top:0px;
  padding-top: 160px;
  padding-bottom:150px;
}

.service {
  background-color: #f5f5f5; 
 /* background-color: #6C0101;*/
   position: relative;
}

.service:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*
	z-index: 1;
	*/
    background-image: url('../bilder/bg_blume.png');
	background-position: top center;
    background-repeat: no-repeat;   
    background-blend-mode: lighten;
	background-size: auto;
    opacity: 0.1;	
}


.service .service-item {
    background-color: #fff;
    padding: 50px 30px;
    margin-top: 36px;
    transition: all ease-in-out 0.3s;
    position: relative;
    border: 1px solid color-mix(in srgb, #6C0101, transparent 85%);
    text-align: center;
}

.service .icon-box {
  padding:50px 30px;
  margin-top: 36px;
  margin-bottom:20px;
  position: relative;
  /*overflow: hidden;*/
  background: #fff;
  border:#6C0101 1px solid;
  /*
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  box-shadow: 0 0 29px 0 rgba(255, 90, 0, 0.18);
  */
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
  z-index: 1;
  height:200px;
  
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto; 
  -o-hyphens: auto;
  hyphens: auto;
  /*
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
  */
}

.service .icon {
  margin: 0;
  margin-bottom: 20px;
  padding-top: 12px;
  padding-left:1px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #6C0101;
  color:#fff;
  transition: ease-in-out 0.3s;
  top: -30px;
  left: calc(50% - 30px);
  align-items: center;
  justify-content: center;
  position: absolute;
}

.service .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}

.service .icon-box:hover .icon {
  background: #fff;
  border:#8c1515 1px solid;
}

.service .icon-box:hover .icon i {
  color: #8c1515;
}

.service .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 1.3em;
  line-height:normal;
}

.service .title a {
  color: #111;
}

.service .description {
  font-size: 15px;
  line-height: 1.6em;
   margin-bottom: 0;
}





/* ---------------------------------------------- /*
/* Section Branchen
/* ---------------------------------------------- */

#branchen {
  margin-bottom:100px;
}

.branchen{
	/*
	background: #f5f8fd;
	*/
}


.branchen .infofeld, .branchen .infofeld_2{
  margin-bottom: 30px;
  margin-top:10px;
  overflow: hidden;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding:20px;
  min-height:320px;
}

.branchen .infofeld h4, .branchen .infofeld_2 h4{
   font-size: 18px;
   margin-bottom: 20px;
}

.branchen .infofeld i.fa, .branchen .infofeld_2 i.fa{
	margin-right:5px; 
}

.branchen .infofeld li{
	/* list-style:none; */
}



/* ---------------------------------------------- /*
/* Section Referenzen
/* ---------------------------------------------- */

#referenzen {
	margin-bottom:100px;
}

.referenzen {
   position: relative;
}

.referenzen:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*
	z-index: 1;
	*/
    background-image: url('../bilder/bg_blume.png');
	background-position: top center;
    background-repeat: no-repeat;   
    background-blend-mode: lighten;
	background-size: auto;
    opacity: 0.1;	
}


#referenzencarousel{
 height: auto;  
 border:none;
 border-bottom: 1px solid #d5d5d5;
 border-top: 1px solid #d5d5d5;
}

#referenzencarousel .carousel-inner, #referenzencarousel .item {
 height: auto;
 margin-top:0px;
 margin-bottom:0px;
}


#referenzencarousel .img-thumbnail {
  border:none;	
}

.carousel-controls{
   position:relative; 
   display: inline-block;
   height: auto;
   margin: 0 auto;
   text-align: center;
   width: 100%;
}

.carousel-controls a.next, .carousel-controls a.prev { 
  display: inline-block ;
}

a.prev, a.next {
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
    color: #fafafa;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    background-color: #8c1515;
	margin-top:30px;
	margin-bottom:30px;
	border-radius: 3px;		
}

a.next { 
 padding-left: 3px 
}

a.prev.disabled, a.next.disabled {
    display: block;
    cursor: default;
    background-color: #d12527;
    color: #fafafa;
    font-size: 20px;
    text-align: center;
}




/* ---------------------------------------------- /*
/* Kundenfeedback
/* ---------------------------------------------- */

#kundenfeedback {
	padding-top:30px;
	margin-bottom:100px;
}

.kundenfeedback .testimonial-wrap {
  padding-left: 50px;
}

.kundenfeedback .testimonial-item {
  box-sizing: content-box;
  padding: 30px 30px 30px 60px;
  margin: 30px 15px;
  min-height: 200px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  background: #fff;
}

.kundenfeedback .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 10px;
  border: 6px solid #fff;
  position: absolute;
  left: -45px;
}

.kundenfeedback .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

.kundenfeedback .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.kundenfeedback .testimonial-item .fa-quote-left, .kundenfeedback .testimonial-item .fa-quote-right {
  color: #ccc;
  font-size: 1.5em;
}

.kundenfeedback .testimonial-item .fa-quote-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.kundenfeedback .testimonial-item .fa-quote-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.kundenfeedback .testimonial-item p {
  font-style: italic;
  font-size: 1.1em;
  margin: 15px auto 15px auto;
}

.kundenfeedback .owl-nav, .kundenfeedback .owl-dots {
  margin-top: 5px;
  text-align: center;
}

.kundenfeedback .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd !important;
}

.kundenfeedback .owl-dot.active {
  background-color: #8c1515 !important;
}

@media (max-width: 767px) {
  .kundenfeedback .testimonial-wrap {
    padding-left: 0;
  }
  .kundenfeedback .testimonial-item {
    padding: 30px;
    margin: 15px;
  }
  .kundenfeedback .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}



/* ---------------------------------------------- /*
/* Section FAQ
/* ---------------------------------------------- */


#faq {
  margin-top:0px;
  padding-top: 160px;
  padding-bottom:150px;
  
  
	/*	
	padding-top: 100px;
    background-color: color-mix(in srgb, #ffbb12, transparent 10%);
	padding-bottom:100px;
	
  	background-color:rgba(0, 0, 0, 0.5);

	margin-top:50px;
	margin-bottom:0px;
    background-image: linear-gradient(to bottom, #ffbb12 0, #d39e00 75%);

	margin-top:50px;
	padding: 60px 0;
	margin: 30px 0;
	*/  
}

.faq {
  background-color: #f5f5f5; 
 /* background-color: #6C0101;*/
   position: relative;
}

.faq:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*
	z-index: 1;
	*/
    background-image: url('../bilder/bg_blume.png');
	background-position: top center;
    background-repeat: no-repeat;   
    background-blend-mode: lighten;
	background-size: auto;
    opacity: 0.1;	
}



.faq h2, .faq h3{
  /*color:#fff;*/
}

.faq h2::before, .faq h2:after{
  /*background:#fff;*/	
}

.faq .panel-group{
	margin-top:10px;
}

.faq .panel-title{
  color:#2b2d42;
}

.faq .panel-custom{
  background-color: #fff;
  position: relative;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, #666, transparent 75%);
  border-radius: 5px;
  overflow: hidden;
}

.faq .panel-custom .panel-heading {
	background-color: #fff;
    /*
	color: #c3d79c;
	border: solid 0px #fcc813;
	*/
	padding: 10px 10px 10px 10px;
	text-align:left;
	margin-top:0px;
}


  .faq h4.panel-title{
	  display:inline-block;   
	  /*width:90%;*/
  }		
  
  .faq .panel-plus-link a:hover h4.panel-title, .faq .panel-plus-link a:active h4.panel-title, .faq .panel-plus-link a:focus h4.panel-title{
    color: #8c1515;
  }	
  
  .faq .panel-plus-link a{
	  display:block;   
  }	
	  
  .faq .panel-plus-link a:after{
	  width:20px;
  }


.faq .collapse.in {
	/*
	background: #ffbb12;
	color:#fff;
	*/
}


.faq .panel-custom.active, .faq .panel-custom.active .panel-heading, .faq .panel-custom.active .panel-plus-link a h4{
    /*
	background: #ffbb12;
	color:#fff;
	*/
}

.faq .panel-group .panel-heading+.panel-collapse>.list-group, .faq .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 0px solid #8c1515;
}



.faq .panel-plus-link a:after{
  font-family: 'FontAwesome';
  content: "\f056";
  font-size: 1.2em;
  margin-right: 0px;
  margin-top:0px;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  float: right;
  
  /*
  margin-right: .3em;
  content: "\f068";
  content: "\f056";
  */
}

/*
.faq .panel-plus-link a h4:before{
  font-family: 'FontAwesome';
  content: "\f068";
  font-size: 1.2em;
  margin-left: 10px;
  margin-top:0px;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  float: left;
  display:none;
}
*/

.faq .panel-plus-link a.collapsed:after{
  content: "\f055";
 /*
  content: "\f067";
  */
}

.faq .panel-plus-link a:hover, .faq .panel-plus-link a:focus, .faq .panel-plus-link a:active {
 /*
  background-color: transparent !important;
  */ 
  color: #8c1515;
  text-decoration:none;
}


/* ---------------------------------------------- /*
/* Section Kontakt
/* ---------------------------------------------- */

#kontakt {
	margin-bottom:100px;
}

.kontakt .panel-group{
	margin-top:50px;
}

.kontakt .panel-title{
  color:#283043;
}

.kontakt .panel-custom .panel-heading {
	background-color: #fff;
    /*
	color: #c3d79c;
	border: solid 0px #fcc813;
	*/
	padding: 10px 10px 10px 10px;
	text-align:center;
	margin-top:0px;
}

.kontakt .panel-plus-link a h4:after{
  font-family: 'FontAwesome';
  content: "\f068";
  font-size: 1.2em;
  margin-right: 10px;
  margin-top:0px;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  float: right;
  /*
  margin-right: .3em;
  content: "\f068";
  content: "\f056";
  */
}

.kontakt .panel-plus-link a h4:before{
  font-family: 'FontAwesome';
  content: "\f068";
  font-size: 1.2em;
  margin-left: 10px;
  margin-top:0px;
  vertical-align: middle;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  float: left;
  /*
  margin-right: .3em;
  content: "\f068";
  content: "\f056";
  */
}

.kontakt .panel-plus-link a.collapsed h4:after, .kontakt .panel-plus-link a.collapsed h4:before{
  content: "\f067";
 /*
  content: "\f055";*/
}

.kontakt .panel-plus-link a h4:hover, .kontakt .panel-plus-link a h4:focus, .kontakt .panel-plus-link a h4:active {
  background-color: transparent !important;
  color: #8c1515;
}

.kontakt .panel-custom .panel-body h5 {
	margin-top:15px;
	margin-bottom:5px;
}

.kontakt .panel-custom .panel-body h6 {
	margin-top:10px;
	margin-bottom:5px;
}

#datenschutzhinweise .panel-body h2{
  font-size: 1.4em;
  font-weight: 500;
  text-transform: none;
  color: #283043;
  margin-bottom:5px;
  margin-top:10px;
  padding:0;
}

#datenschutzhinweise .panel-body h2:before, #datenschutzhinweise .panel-body h2:after{
   content:none;
}

#datenschutzhinweise .panel-body h3{
  color: #283043;
  font-size: 1.2em;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 10px;
}

#datenschutzhinweise .panel-body h4{
  color: #283043;
  font-weight: 600;
}



/* ---------------------------------------------- /*
/* Formulare
/* ---------------------------------------------- */

form{
	line-height: 1.42857143;
	font-size: 14px;
}

.noresize {
  resize: none; 
}





/* ---------------------------------------------- /*
 * Scrollup
/* ---------------------------------------------- */

.scrollup {
    width: 40px;
    height: 40px;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    opacity: 0.8;
    position: fixed;
    bottom: 100px;
    right: 15px;
    display: none;
    text-align: center;
    color: #fafafa;
    font-size: 28px;
    background-color: #8c1515;
    z-index: 9999;
	
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out;
    transition: color .5s ease-in-out;
    
	border-radius: 3px;	
	border: 0px solid #fff;
}

.scrollup:hover{
    background-color: #c21617; 
}

.scrollup i { 
  line-height: 38px;
}

a.scrollup:hover i,a.scrollup:focus i {
    text-decoration: none;
    color: #fafafa;
    outline: none;
}



/* ---------------------------------------------- /*
 * Footer
/* ---------------------------------------------- */

#footer {
	color: #fff;
}

.footer-top {
	margin-top: 0px;
    margin-bottom: 0px;
	background-color: #8c1515;
	padding-top:50px;
	padding-bottom:50px;
}

.footer-top ul, .footer-top ol {
	margin: 0;
	padding: 0;
	list-style: none
}

.footer-top h3{
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom:30px;
	font-weight:600;
}

 .footer-top ul>li{
	 list-style:none;
	  display:block;
  }

.footer-top li+li {
	margin-top: 1px
}

.footer-top li a, .footer-top li {
	color: #fff
}

.footer-top li a:hover {
	color: #b9babc
}

.footer-top li i {
	margin-right: 15px;
	color: #fff;
	width: 14px;
	text-align: center
}

.footer-one ul li a::before, .footer-two ul li a::before, .footer-three ul li a::before {	
    font-family: 'FontAwesome';
    content: '\f0c8';
    float: left;
    color: #fff;
    font-size: 8px;
    margin-right: 10px;	
}
 
.footer-top i.fa{
  margin-right:7px;	
}

.footer-bottom{
	background: #333;
	padding-top:20px;
	padding-bottom:20px;	
}

.footer-bottom a {
	color: #fff;
}

.copyright {
	display: block;
	font-size: 12px;
	color: #fff;
}

.copyright a:hover {
	color: #47779f
}

.footer-bottom li {
	display: inline-block;
	margin-right: 5px
}

.footer-bottom li a {
	color: #15161d;
	font-size: 36px;
	display: block
}