/* author: ideenwerft GmbH */

@charset "UTF-8";

@import url("fonts.css"); 

/* .... VARIABLES .... */
:root {
	--primary-clr: #9B3E69;
	--secondary-clr: #83bdcc;
    --cta-clr: #9B3E69;
	--darker-primary-clr: #8b2e5a;
    --darker-cta-clr: #8b2e5a;    
    --light-grey: #f3f3f3;
}


/* .... BASICS .... */
body {
    overflow-x: hidden;
	font-family: "Lato", sans-serif;
  	font-size: 1rem;
  	color: #555;
}
main {
	padding: 60px 0 90px;
    font-size: 1.05rem;
}
@media (min-width: 768px) {
    main {
        padding: 90px 0 90px;
    }
}
@media (min-width: 576px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl {
        max-width: 98%;
    }
}
@media (min-width: 1200px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl {
        max-width: 1300px;
    }
}

/* .... GRID .... */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding-right: 20px;
    padding-left: 20px;
}
.row {
    margin-right: -20px;
    margin-left: -20px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 20px;
    padding-left: 20px;
}

/* .... FULLWIDTH .... */
.fullwidth {
    margin-top: 3rem;
    margin-bottom: 3rem;
    background: var(--primary-clr);
    color: #fff;
}
.fullwidth * {
    color: #fff;
}

/* .... TEXT .... */
h1, h2, h3 {
	font-family: "Raleway", sans-serif;
	font-weight: 500;
	color: var(--primary-clr);
}
h1 {
	font-size: 2rem;
    margin-bottom: 1.9rem;
    hyphens: auto;
    -webkit-hyphens: auto;
}
@media (max-width:767px) {
    .row-2col > div:last-child h1 {
        margin-top: 2rem;
    }
}

h2 {
    margin-top: 2rem;
    margin-bottom: 1.6rem;
	font-size: 1.6rem;
}
h1 + h2 {
    margin-top: -1.5rem;
    margin-bottom: 1.2rem;
    color: var(--secondary-clr);
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
}
h3 {
    margin-top: 2rem;
	margin-bottom: 1.25rem;
	font-size: 1.4rem;
}
h4 {
    margin-top: 1.5rem;
	margin-bottom: 0.9rem;
	font-size: 1.2rem;
} 
p {
    margin-bottom: 1rem;
    line-height: 1.5rem;
    font-size: 1.05rem;
}
main p, 
main ul, 
main ol,
main h1,
main h2,
main h3,
main h4,
.dce-accordion,
.frame-layout-1,
.frame-layout-2,
.ce-textpic {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
main .ce-textpic.ce-right .ce-gallery + .ce-bodytext p {
    max-width: inherit;
}
main a,
.top a {
	color: var(--cta-clr);
    font-weight: 600;
}
a:hover {
	text-decoration: none;
	color: var(--darker-cta-clr);
}
a.button:before,
.dce-keyvisual .text a:before {
    content: "\f324";
    font-family: "Font Awesome 5 Pro";
    position: relative;
    display: inline-block;
    font-weight: 300;
    font-size: 0.85em;
    margin-right: 3px;
    margin-left: 4px;
}

b, strong {
    font-weight: 600;
}
main.ce-bodytext ul li {
    margin-bottom: 5px;
} 
@media (min-width: 768px) {
    h1 {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }
}
/* .... BUTTONS .... */
.button,
.btn,
input[type=submit]{
	padding: 5px 20px;
    margin-top: 10px;
	background: var(--cta-clr);
	display: inline-block;
	color: #fff;
    font-weight: 400;
    border-radius: 5px;
    border: none;
}
.button:hover,
.btn:hover,
.button:focus,
.btn:focus {
	background: var(--darker-cta-clr);
    color: #fff;
}
a.button + a.button {
    margin-left: 20px;
}

/* .... OTHER .... */
img {
  	max-width: 100%;
  	height: auto; 
}
@media (max-width: 758px) {
    .ce-right.ce-intext .ce-gallery {
        max-width: 45%;
    }
}
table {
    font-size: 1rem;
}
table + p {
    margin-top: 1.1rem;
}
.frame-layout-2 {
    background: var(--light-grey);
    padding: 0 2rem 1rem;
} 

/* praxis vita */
.pid4221 table.contenttable th,
.pid4221 table.contenttable td {
    padding: 5px 10px;
    vertical-align: top;
    font-size: 1.05rem;
} 
.pid4221 table.contenttable th {
    white-space: nowrap;
} 


/* ---------- HEADER -------------------*/

.navbar-brand {
    max-width: 73%;
    padding: 1rem 0;
}
@media (min-width: 992px) {
    header > .container {
        position: relative;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    header .top span {
        font-size: 0.8rem;
    }
    .navbar-brand {
        max-width: 280px;
    }
}

/* .... top .... */
header .top span {
    display: inline-block;
    margin: 0 10px;
    font-size: 0.9rem;
}
header .top span:first-child {
    margin-left: 0;
}
header .top span:last-child {
    margin-right: 0;
}
header .top i {
    margin-right: 5px;
}
header .top a {
    margin-left: 4px;
}
@media (max-width: 991px) {
    header > .container {
        margin-top: 35px;
    }
    header .top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--secondary-clr);
        color: #fff;
        padding: 4px 10px;
        font-size: 0.9rem;
        text-align: center;
    }
    header .top a {
        color: #fff;
    }
}
@media (max-width: 370px) {
    header > .container {
        margin-top: 55px;
    }
}
@media (min-width: 992px) {
    header .top {
        position: absolute;
        z-index: 10;
        right: 15px;
        top: 20px;
        border-bottom: 1px solid var(--secondary-clr);
        padding-bottom: 15px;
    }
    header .top i {
        color: var(--primary-clr);
        margin-right: 5px;
    }
}

/* .... NAVI .... */

header .navbar {
    padding: 1rem 0;
}

.nav-link:link, 
.nav-link:visited {
    color: #555;
    font-size: 1.1rem;
}
.nav-link:hover, 
.nav-link:focus {
    color: var(--cta-clr);
}
.navbar-toggler i {
    color: #666;
    font-weight: 400;
    font-size: 1.6rem;
    outline: none;
}

@media (max-width: 991px) {
    header .navbar-nav {
        text-align: center;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .nav-link:link, 
    .nav-link:visited {
        font-size: 1rem;
    }
}

@media (min-width: 500px) {
    .navbar-toggler i {
        font-size: 1.8rem;
    }
}
@media (min-width: 992px) {
    header .header-flex {
        margin-top: 15px;
     }
    .navbar-expand-lg .navbar-collapse {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }
    header .navbar {
        align-items: flex-end;
    }
    header .navbar-right {
        margin-right: -10px;
    }
}

/* .... KEYVISUAL .... */
.dce-keyvisual > .box-below {
    background: var(--secondary-clr);
}
.dce-keyvisual > .box-below .textbox {
    padding: 15px 0;
}
.dce-keyvisual > .box-below .text {
    text-align: center;
    font-size: 1.1rem;
}
.dce-keyvisual > .box-below p {
    font-size: 1.2rem;
}
.dce-keyvisual > .box-below a:link,
.dce-keyvisual > .box-below a:visited {
    color: #fff;
    font-weight: 600;
}
.dce-keyvisual > .box-below a:hover,
.dce-keyvisual > .box-below a:focus {
    text-decoration: underline;
}

/* .... FULLWIDTH .... */
.fullwidth {
    margin-top: 3rem;
    margin-top: 3rem;
    background: var(--primary-clr);
    color: #fff;
}
main > .fullwidth:last-child {
    margin-bottom: -7rem;
}
.fullwidth * {
    color: #fff;
}
.fullwidth a{
    position: relative;
    display: inline-block;
    padding-left: 18px;
    line-height: 30px;
} 
.fullwidth a:link::before,
.fullwidth a:visited::before {
    content: "\f324";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-weight: 300;
}
.fullwidth a:hover,
.fullwidht a:focus {
    color: #fff;
    opacity: 0.8;
}

/* start */
.pid3737 .fullwidth {
    padding: 0;
}
.pid3737 .fullwidth .row > div {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pid3737 .fullwidth .row > div:nth-child(2){
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: rgba(255,255,255,0.2);
}
.pid3737 .fullwidth .row > div:nth-child(3){
    padding-left: 2rem;
}


/* .... CONTENT .... */
.dce-keyfacts {
    padding: 0 20px;
}
.dce-keyfacts h2 {
    font-size: 2rem;
    margin: 5rem auto 2rem;
    text-align: center;
}
.dce-keyfacts .row {
    display:grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 2rem;
}
.dce-keyfacts .col-lg-3 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}
@media (min-width: 576px) {
    .dce-keyfacts .row {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (min-width: 992px) {
    .dce-keyfacts .row {
        grid-template-columns: repeat(3,1fr);
    }
}
.dce-keyfacts .box {
    height: 100%;
    padding: 1rem 1rem 0.5rem;
    border-radius: 10px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#86becc+0,41a1ba+100 */
    background: #86becc; /* Old browsers */
    background: -moz-linear-gradient(top,  #86becc 0%, #41a1ba 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #86becc 0%,#41a1ba 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #86becc 0%,#41a1ba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86becc', endColorstr='#41a1ba',GradientType=0 ); /* IE6-9 */

} 
.dce-keyfacts .box:hover {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5fb6cc+0,2c9bb7+100 */
background: #5fb6cc; /* Old browsers */
background: -moz-linear-gradient(top,  #5fb6cc 0%, #2c9bb7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #5fb6cc 0%,#2c9bb7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #5fb6cc 0%,#2c9bb7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fb6cc', endColorstr='#2c9bb7',GradientType=0 ); /* IE6-9 */
}
.dce-keyfacts .img-wrap {
    height: auto !important;
    margin: 25px auto 25px;
} 
.dce-keyfacts .img-wrap img {
    opacity: 0;
} 
.dce-keyfacts svg {
    fill: #fff;
    width: 100px;
    max-height: 80px;
}
.dce-keyfacts .text {
    max-width: 270px;
    display: block;
    margin: 0 auto;
    white-space: unset;
    height: auto !important;
    font-size: 1.3rem;
    color: #fff;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
} 
/* weiße Kacheln */
.dce-keyfacts .col-lg-3:nth-child(10) .box,
.dce-keyfacts .col-lg-3:nth-child(12) .box {
    background: none;
}
.dce-keyfacts .col-lg-3:nth-child(10) .box svg,
.dce-keyfacts .col-lg-3:nth-child(12) .box svg {
    fill: #ccc;
}
.dce-keyfacts .col-lg-3:nth-child(10) .box svg {
    max-height: 150px;
    width: 120px;
}
.dce-keyfacts .col-lg-3:nth-child(10) .box .text {
    display: none;
}
.dce-keyfacts .col-lg-3:nth-child(12) .box .text {
    color: #bbb;
}

/* Accordion */
.dce-accordion .card-header h5 button {
    padding: 10px 25px;
    background: #9b3e69b0;
    color: #fff;
    font-size: 19px;
}
.dce-accordion .card-header h5 button:hover, 
.dce-accordion .card-header h5 button:focus, 
.dce-accordion .card-header h5 button[aria-expanded="true"] {
    background-color: #9b3e69;
}
.dce-accordion .card-body {
    padding: 20px 25px 5px;
    background: #eee;
}

/* Google Maps */
.dce-gmaps {
    background: var(--light-grey);
}
.dce-gmaps .iframewrap {
    padding-bottom: 25.25%;
}
.dce-gmaps .img-wrap img {
    opacity: 0.6;
}
.dce-gmaps .img-wrap .license {
    color: #666;
}

/* .... FOOTER .... */
main + footer {
    padding-top: 3rem;
    padding-bottom: 2rem;
    background: var(--primary-clr);
    color: #fff;
}
main + footer a:link,
main + footer a:visited {
    color: #fff;
}
main + footer a:hover,
main + footer a:focus {
    text-decoration: underline;
    color: #fff;
    opacity: 0.8;
}
footer img {
    margin-bottom: 40px;
}
/* address */
footer .address {
    margin-bottom: 30px;
}
footer .address p:first-child {
    position: relative;
    max-width: 250px;
    padding-left: 33px;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
footer .address p:first-child i {
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1.8rem;
}
footer .address a i ,
footer .address span i {
    width: 23px;
    margin-right: 9px;
}
footer .address a i.fa-phone-volume {
    text-align: center;
}
@media (min-width:768px) {
    footer .address {
        padding-left: 40px;
    }
}

/* footernavi */
.footnavi {
    padding-left: 12px;
}
.footnavi li {
    padding-left: 6px;
    margin-bottom: 4px;
}
.footnavi li::marker {
    content: "\f324";
    font-family: "Font Awesome 5 Pro";
    position: relative;
    display: inline-block;
    position: absolute;
    transition: all .2s ease;
    font-weight: 300;
    font-size: 1em;
}

/* copy und musthaves */
.musthavecopy .container {
    display: flex;
    flex-direction: column-reverse;
}
.musthavecopy {
    margin-top: 2rem;
}
ul.musthave {
    display: flex;
    padding-left: 0;
    list-style: none;
}
ul.musthave li {
    margin-right: 15px;
}
@media (min-width: 768px) {
    .musthavecopy .container {
        flex-direction: row;
        justify-content: space-between;
    }
    ul.musthave {
        margin-right: 0;
        margin-left: 15px;
    }
}


/* .... KONTAKT / POWERMAIL .... */
#c15252 {
    max-width: 1000px;
    margin: 0 auto;
}
.tx-powermail h3,
.tx-powermail legend {
    display: none;
}
main .tx-powermail div.powermail_fieldwrap {
    padding-left: 0;
    padding-right: 0;
}
.tx-powermail .powermail_fieldset .parsley-errors-list,
.tx-powermail .powermail_fieldset div.parsley-error,
.tx-powermail .powermail_fieldset .powermail_field_error_container .parsley-errors-list{
    background: transparent;
    border: none;
}
.tx-powermail .powermail_fieldset .parsley-errors-list>li {
    padding: 0;
}
@media (max-width:991px) {
    .tx-powermail .container-fluid {
        padding: 0;
    }
    main .tx-powermail div.powermail_fieldwrap {
        display: block;
    }
    main .powermail_fieldwrap > label.col-sm-2 {
        width: 100%;
        max-width: inherit;
    }
    main .powermail_fieldwrap > .col-sm-10 {
        max-width: inherit;
    }
    .powermail_fieldwrap_datenschutz label {
        display: none;
    }
}


/* .... PRINT STYLES .... */
@media print {
    .header-top,
    .footnavi,
    .musthave,
    .dce-keyfacts .img-wrap {
        display: none;
    }
}