/* BASIC STYLESHEET for http://http://www.malerservice-struve.de// */
/* author: ideenwerft GmbH */
/* copyright 2017 */

/*
*   TO USE WITH BOOTSTRAP
*
*   MOBILE FIRST !!!
*
    Color:
    glau #0067b1
	rot #e61e2b
	gelb #0067b1
	grün #009b4e
    grau #636363

*/

/* =FONTS ======================== */
@import url("fonts.css");




/* =LAYOUT ======================== */

body {font-family: 'Roboto', sans-serif;font-size: 17px;color: #636363;font-weight: 300;text-align: center;background: url(../Img/background-576.jpg);background-size: cover;}
.header-top {position:relative;padding-top: 35px;}
header .logo {padding:30px 0 15px;text-align: center;display: block;}
header .logo img {max-width: 75%;}

.top-extra {position: absolute;top: 5px;left: 10px;right: 10px; display: flex;justify-content: space-between;}
.top-extra .top-mail {display: none;}
.top-extra a {display: inline-block;padding: 5px;color: #636363;font-size: 16px;font-weight: 500;color: #0067b1;font-weight: 500;}
.top-extra a:hover {color: #0067b1;}
.top-extra a i {font-size: 19px;}


main {margin: 90px 0 90px;}
footer > .container > .row {padding-top: 60px;padding-bottom: 15px;}


@media (min-width: 768px) {
	body {background: url(../Img/background-768.jpg);background-size: cover;}
	.top-extra {top: 15px;}
	.top-extra .top-mail {display: block;}
}

@media (min-width: 992px) {
	body {background: url(../Img/background-992.jpg);background-size: cover;}
	.header-top {padding-top: 0;display: flex;justify-content: space-between;}
    header .logo {padding: 30px 0px;text-align: left;}
	header .logo img {max-width: inherit;}
	.header-flex {display: flex;flex-direction: column;justify-content: space-between;padding: 22px 0 22px;}
	.top-extra {position: relative;top:auto;left: auto;right: auto;justify-content: flex-end;}
	.top-extra a {padding-left: 30px;}

    .navbar {position: static;}
}

@media (min-width: 1200px) {
	body {background: url(../Img/background-1200.jpg);background-size: cover;}
}


/* =gradient ======================== */
/*  Grau  */
.angebot {
	background: #9a9797;
	background: -moz-linear-gradient(70deg, #9a9797 0%, #aaaaaa 47%, #999797 100%);
	background: -webkit-linear-gradient(70deg, #9a9797 0%,#aaaaaa 47%,#999797 100%);
	background: linear-gradient(70deg, #9a9797 0%,#aaaaaa 47%,#999797 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a9797', endColorstr='#999797',GradientType=1 );}

/*  blau 85% */
.dce-keyvisual .text,
.dce-image-tiles .tile:hover .text-wrap {
	background: #0067b1;
	background: -moz-linear-gradient(70deg, rgba(19, 98, 150,0.85) 0%, rgba(0, 103, 177, 0.85) 47%, rgba(14, 78, 121, 0.85) 100%);
	background: -webkit-linear-gradient(70deg, rgba(19, 98, 150,0.85) 0%,rgba(0, 103, 177, 0.85) 47%,rgba(14, 78, 121, 0.85) 100%);
	background: linear-gradient(70deg, rgba(19, 98, 150,0.85) 0%,rgba(0, 103, 177, 0.85) 47%,rgba(14, 78, 121, 0.85) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067b1', endColorstr='#0e4e79',GradientType=1 );}


/* =transition ======================== */

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a::before,
.navbar-default .navbar-nav>li>a::after,
.dce-teaser img,
.content a::after,
body a.btn,
.musthave li a,
.copy a,
body a.button,
.tx-powermail fieldset .powermail_submit.btn.btn-primary,
.powermail_fieldwrap_type_submit .col-sm-10::after,
.tx-felogin-pi1 form input[type="submit"],
footer a:after {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;}

.dce-image-tiles .tile .hover-content,
.referenz a::after{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}



/* =BASIC STYLES ======================== */
.small {font-size: 0.9em;}
.xsmall {font-size: 0.8em;}
.red, .error {color:#c00;}
.grey {color:#999;}
.clear {clear:both;}
.italic {font-style:italic;}
.hide {display:none;}
.align-center {text-align:center;}
.align-right {text-align:right;}
.align-justify {text-align:justify;}
.align-left {text-align:left;}
.note {font-size:0.9em;font-style:italic;color:#999;}

/* links */
:focus {outline: none;box-shadow: none;}
a:hover, a:active, a:focus {text-decoration: none;outline: none;box-shadow: none;}
a:Link, a:visited {text-decoration: none;}
a {font-weight: 400;color:#0067b1;}
.content a:Link,
.aside a:Link,
footer a:Link {position: relative;}
.content a:hover,.content a:focus {outline:none;}
.content a {color: #0067b1;position: relative;font-weight: 400;display: inline-block;}
.content a::after {content: "";display: inline-block;position: absolute;bottom: 0px;left: 0;width: 0%;height: 1px;background: #0067b1}
.content a:hover:after {width: 100%;}

body a.btn {padding: 5px 30px;color: #fff !important;display: inline-block;background: #0067b1;border-radius: 2px;font-weight: 400;transition: inherit;}
body a.btn:focus {outline: none;}
body a.btn:after {content: none;}

:active, :focus {outline:none;}
a.internal-link:link, a.internal-link:visited {}
a.internal-link:hover, a.internal-link:focus {}
a.external-link-new-window:link, a.external-link-new-window:visited {}
a.external-link-new-window:hover, a.external-link-new-window:focus {}
a.pdf {}
a.doc {}
a.mail:link, a.mail:visited {}
a.mail:hover, a.mail:focus {}
/* TYPO3 : anker-tags für interne links nach oben setzen*/
a.anchor {position:absolute;margin-top:-35px;}

.ce-row {display: flex;margin-bottom: 15px;}
.ce-column {margin-right: 15px;}

.iframewrap {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;}
.iframewrap iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.full-width {margin:0px calc(50% - 50vw) -90px;max-height: 50px;}

@media (min-width: 992px) {
    .iframewrap {padding-bottom:40%;}
}

/* text */
h1 {margin:0px 0px 15px;font-size:35px;font-weight: 700;color:#0067b1;text-transform: uppercase;}
h2 {margin:0px 0px 15px;font-size:25px;font-weight: 700;text-transform: uppercase;}
h1 + h2 {font-size: 20px;font-weight: 400;margin-bottom: 30px;}
h3 {margin:25px 0px 15px;font-size:22px;font-weight: 700;text-transform: uppercase;}
h4 {margin:0px 0px 15px;font-size:22px;text-transform: uppercase;}
p {margin: 0 auto 15px;line-height: 24px;max-width: 800px;}
#cookie-consent p {max-width: 100%;}
#cookie-consent {
  padding: 2em;
   max-width: 24em;
   -ms-flex-direction: column;
   flex-direction: column;
	bottom: 4.5em;
	 left: 1em;
}

#cookie-consent a.accept {
	white-space: nowrap;
}

#cookie-consent a.information {
	white-space: unset;
}



.col-md-3 > div > h2,
.col-md-3 > div > h3,
.col-md-3 > div > h4 {margin-top: 0;}

@media (min-width: 992px) {
    h1 {font-size:45px;}
    h2 {font-size:25px;}
}

blockquote {padding:15px 40px;}
blockquote p {color:#0061a1;font-style:italic;}
blockquote cite {color:#888;font-size:12px;font-style:italic;}
table {font-size: 1em;border-collapse:collapse;border-spacing:0;}
table th, table td {vertical-align:top;}
/* achtung: tabellen brauchen weiterhin 'cellspacing="0"' im markup! */
main.content ul {padding-left: 40px;}
ul li {text-align: left;margin-bottom: 5px;}
table p {padding:0;margin:0;}
hr, hr.linie-davor,  hr.linie-danach {clear:both;background-color:#adadad;color:#adadad;border:#adadad;height:1px;margin:10px 0;}
address, caption, cite, code, dfn, var {font-style:normal;font-weight:normal;}
caption, th {text-align:left;}
fieldset {border:none;}
input, textarea, select {border:0px solid #ccc;font-size:1em;padding:4px 10px;}
input:focus, textarea:focus {background-c olor:rgba(255, 255, 255, 0.5);color: #194b7e;}
input.powermail_input, input.powermail_submit, textarea {-webkit-appearance: none;}
a i {cursor: pointer;}
a.tel {color: #0067b1 !important;}
img {max-width: 100%;height: auto;}
body a.button {padding: 5px 15px;color: #fff !important;display: inline-block;background:#0067b1;border-radius: 2px;font-weight: 400;position: relative;}
body a.button:hover {background: #009b4e; color: #fff !important;text-decoration: none;}
.col-xs-12 {margin-bottom: 30px;}





/* =NAVIGATION ======================== */
.navbar {background: none;border: 0px;min-height: 1px;justify-content: flex-end;padding:.5rem 0rem;}

.navbar-toggler {border: 0;margin: 0;padding: 5px 0 5px 10px;background: none;color:#636363;font-size: 22px;}
.navbar-default .navbar-toggler:focus,
.navbar-default .navbar-toggler:hover {background: none;outline: none;color:#0067b1; }
.navbar-default .navbar-toggler:hover .icon-bar {background: #848484;}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {border: none;}

.navbar-default .navbar-nav>li {text-align: center;}
.navbar-default .navbar-nav>li>a {position: relative;display: inline-block;font-size: 17px;color: #636363;font-weight: 400;padding: 5px 0;}
.navbar-default .navbar-nav>li>a::before {content: "";display: inline-block;position: absolute;bottom: 5px;left: 0;width: 0%;height: 2px; background: #0067b1;z-index: 500;}

.navbar-default .navbar-nav>li>a:hover {color:#0067b1;}
.navbar-default .navbar-nav>li>a:hover:before {width: 100%;}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {background: none;color:#0067b1;font-weight: 800;}
.navbar-default .navbar-nav>.active>a::before {width: 100%;}
@media (min-width:768px) {
	.navbar {padding: 15px 0 30px;}
	.navbar-default .navbar-nav {justify-content: space-between;width: 100%;}
    .navbar-expand-md .navbar-nav .nav-link {font-size: 16px; padding: 10px 0px 5px;padding-left: 0;padding-right: 0; margin: 0 8px 3px;}
    .navbar-default .navbar-nav>li:first-child>a {margin-left: 0px;}
    .navbar-default .navbar-nav>li:last-child>a {margin-right: 0px;}
    .navbar-default .navbar-nav>.active>a::before,
	.navbar-default .navbar-nav>li>a::before {height:2px;}
    .navbar-default .navbar-nav>li>a::before {content: "";display: block;position: absolute;width:0%;left: 0;bottom: 0px;height: 2px;background:#0067b1;}

}
@media (min-width:992px) {
	.navbar {padding: 0;}
	.navbar-collapse {margin: inherit;}
    .navbar-default .navbar-nav>li>a {font-size: 16px;padding: 5px 0px 5px;margin: 0 15px -3px;}
}
@media (min-width:992px) {
	.navbar-default .navbar-nav>li>a {font-size: 17px;letter-spacing: 0.5px;}
}

@media (min-width:1200px) {
    .navbar-default .navbar-nav>li>a {font-size: 18px;letter-spacing: 0.5px;}
}


/* 2.Ebende */
.navbar-default .navbar-nav>.dropdown:hover ul {display: block;}
.navbar-default .navbar-nav>.dropdown ul {background: url(../Img/background-576.jpg);background-size: contain;border-radius: 1px;border: 0;box-shadow: 0px 5px 6px rgba(0,0,0,.2);z-index: 200;}
.dropdown-menu>li>a {padding: 5px 10px;color: #636363;font-weight: 400;font-size: 15px;display: block;}
.dropdown-menu>li>a:hover {color:#0067b1;}

.dropdown-toggle::after,
.navbar-default .navbar-nav li a .caret {display: none;}

@media (min-width:768px) {
    .navbar-right .dropdown-menu {right: inherit;}
    .navbar-default .navbar-nav>.dropdown ul {margin-top: 0;border-top:0;}
}



/* =KEYVISUAL ======================== */
.dce-keyvisual img {box-shadow: 0px 12px 15px rgba(0,0,0,.2);}

@media (min-width: 768px) {
	.dce-keyvisual .textbox {width: 50%;}
	.dce-keyvisual .text { color: #fff;padding: 15px;}
	.dce-keyvisual .text h3 {margin-top: 0;font-size: 27px;margin-bottom: 15px;}
	.dce-keyvisual .text h4 {padding: 0;margin-top: 0;font-size: 18px;font-weight: 300;text-transform:uppercase;letter-spacing: 1px;margin-bottom: 15px;background: none;}
}

@media (min-width: 992px) {
    .dce-keyvisual .textbox {width: 70%;}
	.dce-keyvisual .text {padding: 15px;}
	.dce-keyvisual .text h3 {margin-top: 0;font-size: 26px;margin-bottom: 10px;}
	.dce-keyvisual .text h4 {margin-top: 0;font-size: 20px;font-weight: 300;text-transform:uppercase;letter-spacing: 1px;  margin-bottom: 10px;}
}
@media (min-width: 1200px) {
    .dce-keyvisual .textbox {width: 50%;}
	.dce-keyvisual .text {padding: 30px;}
	.dce-keyvisual .text h3 {font-size: 30px;margin-bottom: 15px;}
	.dce-keyvisual .text h4 {font-size: 22px;margin-bottom: 15px;}
}
@media (max-width: 991px) {
    .dce-keyvisual > .d-flex {
        position: relative;
        top: inherit;
        bottom: inherit;
    }
    .dce-keyvisual .container {
        max-width: 100%;
        padding: 0;
    }
    .dce-keyvisual .textbox {
        width: 100%;
    }
}



/* =CONTENT ELEMENTS ======================== */
.ce-bodytext {padding-bottom: 30px;}
.back-button {margin-bottom: 60px;width: 100%;}

.ce-gallery[data-ce-columns="1"] .ce-row {margin-bottom: 0;}
@media (min-width:768px) {
	.col-md-6 {text-align: left;}
}

@media (min-width:992px) {
	.ce-textpic .ce-row {margin-bottom: 30px;}
	.ce-textpic .ce-row .ce-column {margin-right: 30px;}
	.ce-textpic .ce-row .ce-column:last-child {margin-right: 0;}
	.ce-textpic .ce-row .ce-column a::after {content: none;}
}


/* =OTHER ======================== */

/* DCE Teaser (Facts)  */
.dce-teaser {
	margin: 60px 0;
}

.dce-teaser .box {
	padding:30px 15px 87px;
	background: #fff;
	box-shadow: 0px 12px 15px rgba(0,0,0,.2);
	position: relative;
	height: 100%;
}

.dce-teaser .box {
	padding: 15px 15px;
	font-size: 16px;
}
.dce-teaser .box a::after {
	display: none;
}
.dce-teaser img {
	width: auto;
	margin: 15px 0;
	-webkit-filter: brightness(0);
	filter: brightness(0);
	opacity: .6;
}
.dce-teaser .box:hover img {
	-webkit-filter: brightness(1);
	filter: brightness(1);
	opacity: 1;
}

.dce-teaser .text-wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.dce-teaser .text-wrap h3 {
	font-weight: 400;
	color: #636363;
	margin: 0 0 15px;
}

.dce-teaser .btn {
	text-align: center;
	margin-top: auto;
}

.dce-teaser .row > div:nth-child(1) .btn {background: #007dc5;}
.dce-teaser .row > div:nth-child(1) .btn:hover {background: #0067b1;}

.dce-teaser .row > div:nth-child(2) .btn {background: #e61e2b;}
.dce-teaser .row > div:nth-child(2) .btn:hover {background: #c21d24;}

.dce-teaser .row > div:nth-child(3) .btn {background: #fdbf03;}
.dce-teaser .row > div:nth-child(3) .btn:hover {background: #f1b606;}

.dce-teaser .row > div:nth-child(4) .btn {background: #009b4e;}
.dce-teaser .row > div:nth-child(4) .btn:hover {background: #008442;}



/*  angebot  */

.angebot {margin: 0px calc(50% - 50vw)-90px;padding: 60px 0;color: #fff;}
.angebot h3 {margin-top: 0;font-size: 35px;font-weight: 700;}
.angebot h4 {font-weight: 300;font-size: 20px;}
.angebot a.btn {color:#636363 !important;background: #fff;}
.angebot a.btn:hover {background:#009b4e;color: #fff !important;}



/* DCE Bild-Kacheln */
.dce-image-tiles .tile .text-wrap {
    padding: 0;
	justify-content: flex-end !important;
}
.dce-image-tiles .tile:hover .text-wrap {
	justify-content: center !important;
}
.dce-image-tiles .tile header {
	width: 100%;
}
.dce-image-tiles .tile h3 {
	color: #fff;
	font-size: 18px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	background: rgba(0, 0, 0, 0.4);
	padding: 15px 15px 15px;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.dce-image-tiles .tile:hover h3 {
	background: transparent;
}
.dce-image-tiles .tile a {
	background: #fff;
	color:#0067b1 !important;
	padding: 5px 25px;
}


/* =FOOTER ======================== */
footer {font-size: 16px;background: rgba(0, 0, 0, 0.025);}
footer p {padding-left: 20px;margin-bottom: 0px;}
footer p i {padding-right: 10px;margin-left: -10px; color: #0067b1;font-size: 18px !important;}
footer p i.fa-fax {font-size: 16px !important;}
footer a:link,
footer a:visited {position: relative;display: inline-block;}
footer a::after {content: "";display: inline-block;position: absolute;bottom: 0px;left: 0;width: 0%;height: 1px;background: rgba(25, 75, 126, 0); background: #0067b1;}
footer a:hover:after {width: 100%;}


footer .footer-flexbox {display: flex;justify-content: space-between;flex-wrap: wrap;}
footer .footer-flexbox .footer-box {padding:15px;}
footer .footer-flexbox .footer-box img {max-width: 85%;margin: 0 auto;}

.musthavecopy {background:#989c9c;color: #fff;}
.musthavecopy .container {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}

.copy {padding: 10px 0;}
.copy a {color: #fff;}
.copy a:hover {color: #fdbf03;}
.copy a::after {background:#fdbf03;}

.musthave {padding: 10px 0;}
.musthave {list-style: none;display: flex;margin: 0;}
.musthave li  {float:left; }
.musthave li a {padding: 0px 5px;margin: 0 5px; display: block;color: #fff;}
.musthave li a:hover {color: #fdbf03;}
.musthave li a::after {background:#fdbf03;}
.musthave li:first-child a {padding-left: 0;}
.musthave li:last-child a {padding-right: 0;margin-right: 0;}

@media (max-width: 576px) {
	footer .footer-flexbox {flex-direction:column;}
}

@media (min-width: 576px) {
	footer {text-align: left;}
	footer p {padding-left: 20px;margin-bottom: 0px;position: relative;text-align: left;}
	footer p i {position: absolute;left: 10px;top: 3px;color: #0067b1;}
}
@media (min-width: 768px) {
	footer .footer-flexbox {flex-wrap: nowrap;}
}


/* =EXTENSIONS ======================== */
/* +++ Newsletter Anmeldung +++ */
.layout_form {padding: 0 0 30px;background: #fff;}
.layout_form .cr_ipe_item label {display: none;}
.layout_form .cr_ipe_item input {width: 100%;max-width: 300px;margin: 0 auto;border:1px solid #ccc;text-align: center;margin-bottom: 15px;}
.layout_form input::-webkit-input-placeholder {color: #110111;}



/* POWERMAIL */
.content .tx-powermail fieldset {}
.tx-powermail {max-width: 800px;}
.tx-powermail .container-fluid {padding-left: 0;padding-right: 0;}
.tx-powermail .form-group {margin-bottom: 15px;}
.tx-powermail h3 {display: none;}
.tx-powermail label {margin-bottom: 10px;}

div.tx-powermail legend {display: none;}
div.tx-powermail .powermail_fieldset_36 legend {display: none;}
div.tx-powermail .powermail_file  {border:0;}
div.tx-powermail fieldset + fieldset {margin: 20px 0;padding: 20px 0;}

div.tx-powermail fieldset .col-sm-2,
div.tx-powermail fieldset .col-sm-10,
div.tx-powermail fieldset .col-sm-offset-2 {display: block;float: none;text-align: left; width: 100%;margin: auto;padding-bottom: 5px;padding-left: 0;padding-right: 0;color: #0366b1;font-weight: 500;}

div.tx-powermail fieldset .col-sm-2,
div.tx-powermail fieldset .col-sm-10 {max-width: 100%;}

.tx-powermail .form-control {border-radius: 2px;max-width: 700px;background:rgba(200, 200, 200,.3);border-color:#c8c8c8;color:#333;}
.tx-powermail .form-control:focus {-webkit-box-shadow:none;box-shadow:none;opacity: 1;color: #194b7e;}

div.tx-powermail fieldset .mandatory {color: #c00;padding-left: 3px;}

div.tx-powermail .checkbox label {color: #636363;font-size: 15px;font-weight: 400;}
div.tx-powermail .checkbox label input {margin-right: 10px;}

div.tx-powermail fieldset .powermail_fieldwrap_type_submit {text-align: center;margin-left: 0 !important;margin-right: 0 !important;}
div.tx-powermail fieldset .powermail_fieldwrap_type_submit .col-sm-10 {padding: 0;margin: 0;max-width: 700px;}
.powermail_fieldwrap_type_submit .col-sm-10::after {content: "";display: block;clear: both;}
.tx-powermail fieldset .powermail_submit.btn.btn-primary {display: inline-block;border:0;background:#037dc5;padding: 5px 30px;border-radius: 2px;float: right;}
.tx-powermail fieldset .powermail_submit.btn.btn-primary:hover {background:#029b4d;color: #fff;text-decoration: none;}

.tx-powermail p.note {margin-bottom: 5px;font-weight: initial;display: inline-block;}
.tx-powermail p.note a {display: block;}

div.formError + input,
div.formError + textarea,
.tx-powermail .powermail_fieldset .powermail_field_error,
.tx-powermail .powermail_fieldset .parsley-error,
.tx-powermail .powermail_fieldset .powermail_form .parsley-error:focus,
.tx-powermail .powermail_fieldset div.error {border:1px solid #c00;background: none;}

.tx-powermail .powermail_fieldset .parsley-errors-list {border: 0;background: none;margin: 5px 0;}
.tx-powermail .powermail_fieldset .parsley-errors-list>li {background: none;font-size: 14px;padding: 0;}




/* login */
.tx-felogin-pi1 form legend {display: none;}
.tx-felogin-pi1 form legend {display: none;}

.tx-felogin-pi1 form {padding-top: 15px;}
.tx-felogin-pi1 form label {font-weight: 400;}
.tx-felogin-pi1 form input {border: 0;background: rgba(0,0,0,.6);width: 100%;margin-bottom: 15px;max-width: 100%;}
.tx-felogin-pi1 form input[type="submit"] {color: #fff;display: inline-block;background: none;border-radius: 2px;width: auto;padding-left: 15px;padding-right: 15px;font-weight: 400;border: 2px solid #fff;}
.tx-felogin-pi1 form input[type="submit"]:hover {background:rgba(255, 255, 255, 0.75);color:#060606;text-decoration: none;border-color: rgba(255, 255, 255, 0.75);}