@charset "UTF-8";

/* ---------- FONTS------------------- */



/*google Fonts für Schriften*/
@import url("fonts.css"); 

/* ---------- FARBEN ------------------- */

/* Hausfarbe 1(türkis): #7D9993*/
/* Schwarz: #4E4E4E */
/* Weiß: #ffffff */


/* ---------- GENERIC -------------------*/
html {
	font-size: 18px;
}
body {
	font-family: "open sans", sans-serif;
  	
  	color: #4E4E4E;
	background: url("../Img/bg.gif") repeat;
	font-weight: 300;
}
header .container{
	position: relative;
}
main .content {
	padding: 60px 30px;
	background-color: #ffffff;
	margin-bottom: 50px;
}
main .content:after {
	content: " ";
    clear: both;
    display: block;
}

footer .footer{
	padding: 50px 30px;
	background-color: #ffffff;
}

/* ---------- ELEMENTS -------------------*/

/* .............. headlines ...... */

h1, h2, h3 {
	font-family: "Merriweather", serif;
	text-align: center;
	color: #7D9993;
}
h1, h2 {
	margin-bottom: 1.5rem;
}
h1 {
	font-size: 1.8rem;
	font-weight: 700;
}
h2 {
	font-size: 1.5rem;
	font-weight: 400;
}
h1 + h2 {
	margin-top: -1rem;
}
h3 {
	font-size: 1.25rem;
	margin-bottom: 1.25rem;
}
h2 + h3 {
	margin-top: -2rem;
	margin-bottom: 2.5rem;
}

#c8047 h2 {
    line-height: 2.5rem;
}
#c8047 h3 {
    line-height: 2rem;
}

/* .............. text ...... */
p {
	font-size: 1rem;

}
#start p {
	text-align: center;
}
/* .............. links ...... */
a {
	color: #7D9993;
}
a:before {
	content: "\f105";
    font-family: "Font Awesome 5 Pro";
    font-weight: normal;
    font-style: normal;
	margin-right: 5px;
}
.dce-image-galerie a:before {
	display: none;
}
a:hover {
	color: #49645E;
	text-decoration: none;
}
.ce-gallery a:before, 
header a:before {
	content:none;
}
/* .............. icons ...... */

i {
	margin-right: 10px;
}

/* .............. buttons ...... */
.button, .btn {
	padding: 8px 30px;
	border-bottom: 4px solid #7D9993;
	background: #F7F7F7;
	color: #4e4e4e;
	font-size: 1rem;
}
.button:before {
	content: none;
}
.button:hover, .btn:hover {
	background: #7D9993;
	color: #F7F7F7;
}
.button:focus { 
	box-shadow: none; 
}

.btn {
	border:none;
	border-bottom: 4px solid #7D9993;
	border-radius: 0;
}.btn-primary:hover {
	border-bottom: 4px solid #7D9993;
}
/* .............. other ...... */
img {
  	max-width: 100%;
  	height: auto; 
}
ul.check-list li {
    padding-left: 5px;
}
ul.check-list li::marker {
    content: "\f0c4";
    font-family: "Font Awesome 5 Pro";
    position: relative;
    display: inline-block;
    position: absolute;
    transition: all .2s ease;
    font-weight: bold;
    font-size: 1.2em;
	color: #fff;
	opacity: 0.8;
}

/* ---------- COMPONENTS -------------------*/

/* .............. basic styles ...... */
b, strong {
	font-weight: bold;
}
.frame, .content-frame {
	margin-bottom: 60px;
}
.frame:first-child,
.frame:last-child {
	margin-bottom: 0;
}
.pid2038 .frame:first-child {
	margin-bottom: 60px;
}
.frame.frame-space-after-extra-small {
	margin-bottom: 0;
}
.frame.frame-space-after-small {
	margin-bottom: 40px;
}
.frame-space-before-extra-small {
	margin-top: -70px;
}
.frame-backgroundbox {
	padding: 15px;
	background: #F7F7F7;
}
/* Basic grid */
.grid {
	display:grid;
	gap: 1rem;
	margin-bottom: 2.25rem;
	justify-items:center;
}	
/* .............. keyvisual ...... */

.dce-keyvisual img {
	width: 100%;
}

/* .............. logo ...... */

#logo {
	position: absolute;
	top: 10%;
    left: 15%;
    max-width: 400px;
}
@media(min-width: 768px){
	#logo {
		top: 25%;
	}
}
/* .............. navigation ...... */

.navbar {
	background: #7D9993;
	padding: 0
}
.navbar-nav  {
	width:100%;
	justify-content: space-between;
}

.navbar-nav li a {
	color: #fff;
	font-family: "Merriweather", serif;
	font-weight: 400;
	padding: 15px 30px;
	display:block;
}.navbar-nav  li a.insta {
	font-size: 1.6rem;
    padding: 7px 30px;
}
.navbar-nav li a:before {
	content: none;
}
@media(min-width: 1200px) {
	.navbar-nav  li:first-child a {
		padding-left: 60px;
	}
	.navbar-nav  li:first-child ul ul a {
		padding-left: 30px;
	}
	.navbar-nav  li:last-child a {
		padding-right: 60px;
	}
}

.navbar-nav  li:hover{
	background: rgba(0,0,0, .3);
}
.navbar-nav  li a {
	text-decoration: none;
}
/* 2. Ebene (dropdown) */
.dropdown .dropdown-toggle::after{
	content:none;
}
.navbar-nav li:hover > .dropdown-menu {
	display:block;
	background: #7D9993;
	border: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.navbar-nav  .dropdown-menu li a {
	background: rgba(0,0,0, .3);
	padding: 10px 30px;
}
#navbar > ul > li.dropdown:first-child > ul > li > a {
	padding-left: 60px;
}
.navbar-nav  .dropdown-menu li a:hover {
	background: rgba(0,0,0, .5);
}

/* 3. Ebene */
.navbar-nav li > .dropdown-menu .dropdown-menu {
	left: 100%;
	top: 0;
}

/* mobile */

.dropdown-item {
	padding: 0;
}

/* toggler button */
.navbar .navbar-toggler {
	border: none;
	padding-left: 30px;
}
.navbar .navbar-toggler:focus {
	outline: none;
}
/* .............. DCE-Bildkacheln ...... */
.dce-image-tiles {
	margin-bottom: 60px;
}
.dce-image-tiles .tile {
	padding:20px;
}
.dce-image-tiles .tile:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0 ;
	left: 0;
	background: url(../Img/border-neu.png);
	background-size: 100% 100%;
	z-index: 1;
}
.dce-image-tiles .tile:hover:before {
	background: url(../Img/border-neu-hover.png);
	background-size: 100% 100%;
}
.dce-image-tiles .text-wrap {
	padding: 50px 50px 20px;
}

.dce-image-tiles .tile:hover a img, .dce-image-tiles .tile:focus a img {
    transform: scale3d(1.05, 1.05, 1.05);
}
@media (min-width: 768px){
	.dce-image-tiles .tile .text-wrap {
		background: transparent;
		justify-content: flex-end;
    	-webkit-align-items: flex-end;
    	-ms-flex-pack: flex-end;
		align-items: flex-end;
		padding: 50px;
	}
	.dce-image-tiles .tile .text-wrap header {
		padding: 8px 30px;
		border-top: 4px solid #7D9993;
		background: #F7F7F7;
	}
	.dce-image-tiles .tile .text-wrap header h3 {
		color: #4e4e4e;
		font-family: "open sans", sans-serif;
		font-weight: 400;
		font-size: 1rem;
	}
}

/* .............. Vorteile ...... */

.frame-backgroundbox.frame-layout-2 {
	background: #7D9993;
	padding: 30px;
	color: #fff;
}.frame-backgroundbox.frame-layout-2 h2 {
	color: #fff;
	white-space: nowrap;
	padding-right: 30px;
}
.frame-backgroundbox.frame-layout-2 ul {
	list-style: none;
	margin-bottom: 0;
}
.frame-backgroundbox.frame-layout-2 ul blockquote{
	margin: 15px 0 0 ;
}
.frame-backgroundbox.frame-layout-2 a {
	color: #fff !important;
}


@media(min-width: 992px){
	.frame-backgroundbox.frame-layout-2 {
		display:flex;
	}
}


/* .............. Galerie ...... */
.ce-gallery {
	margin: 0 auto;
}
.ce-gallery.ce-border img {
	border: 2px solid #7D9993;
	padding: 5px;
}
.ce-gallery figcaption {
	background: #7D9993;
	color: #fff;
	text-align: center;
	padding: 10px;
    font-size: 16px;
}
.ce-gallery .ce-row {
	margin-bottom: 0;
}
.ce-gallery .ce-column {
	margin-bottom: 10px;
}
@media (max-width:1000px) {
	.ce-gallery[data-ce-images="7"] .ce-row {
		display: grid;
		grid-template-columns: repeat(4,1fr);
	}
	.ce-gallery[data-ce-images="7"] figure {
		margin: 0 auto;
	}
}

/* DCE Galerie für Logos */
.dce-image-galerie {
	flex-wrap: nowrap;
}
.dce-image-galerie > div {
	
}

/* .............. Accordion ...... */
.dce-accordion .card-header h5 button {
	background: #7D9993;
	color: #fff;
}
.dce-accordion .card-header h5 button:hover, .dce-accordion .card-header h5 button:focus, .dce-accordion .card-header h5 button[aria-expanded="true"] {
	background: #586b67;
}

/* .............. footer ...... */
.footer h3 {
	text-align: left;
}
.footer .frame {
	margin-bottom: 0;
}
.quicklinks-left {
	list-style: none;
	padding:0;
}
/*  must-have / copy  */
.musthavecopy {
	padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.musthave {
    margin: 0;
    padding: 0;
}
.musthave li {
    display: inline-block;
    margin-right: 20px;
}
.musthavecopy a, .musthavecopy .copy {
    font-size: 16px;
    font-weight: 400;
    color: #4e4e4e;
}

/* .............. powermail ...... */

.tx-powermail h3, .tx-powermail legend {
	display:none;
}
.tx-powermail .container-fluid {
	padding: 0;
}
main .tx-powermail .powermail_fieldset {
	background:none;
	padding: 0;
	margin: 0 -30px;
}
main .tx-powermail .form-control {
	border: 2px solid #7D9993;
}
main .tx-powermail label {
	display: flex;
	align-items: center;
}
main .tx-powermail .checkbox label {
	display:block;
}
input[type=checkbox], input[type=radio] {
	margin-right: 5px;
}
@media(min-width: 991px){
	main .tx-powermail .form-control {
		max-width: 60%;
	}
}