/* CSS Schutzcard.de */

body {
font-family: 'Open Sans';
line-height: 1.7;
color: #58585a;
}

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}


.header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
background-color: white;
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.logo {
padding: 10px 0;
max-height: 100px;
width: auto;
}

.adresse-header p {
font-size: 1rem;
line-height: 1.3rem;
white-space: nowrap;
}

.adresse-header .adresse-header-tel {
font-size: 1.7rem;
white-space: nowrap;
}

.adresse-header img {
max-height: 80px;
width: auto;
}

.kopfhoerer-rand {
border-right: 2px solid #58585a;
}

@media (max-width: 575.98px) {
.adresse-header .adresse-header-tel {
font-size: 1.3rem;
white-space: nowrap;
}
.adresse-header p {
font-size: 0.94rem;
}
}
/* --------------- Hero ----------------- */

#hero {
position: relative;
z-index:10;
margin-top: 135px;
}

#hero .hero-layer {
position: absolute;
max-width: 410px;
left: 50px;
top: 40px;
padding: 20px 20px;
color: white;
background-color: rgba(78,148,188, 0.60);
}

#hero .hero-layer h1{
font-size: 2.82rem;
font-weight: 700;
}

#hero .hero-layer p {
font-size: 1.34rem;
}

#hero-text p {
font-size: 1.34rem;
}

@media (max-width: 991.98px) {
#hero {
margin-top: 165px;
}
#hero .hero-layer {
max-width: 310px;
left: 30px;
top: 30px;
padding: 20px 20px;
}
#hero .hero-layer h1{
font-size: 1.82rem;
}
#hero .hero-layer p {
font-size: 1.14rem;
}
}

@media (max-width: 767.98px) {
#hero {
margin-top: 225px;
}
#hero .hero-layer {
max-width: 310px;
left: 20px;
top: 20px;
padding: 10px 10px;
}
#hero .hero-layer h1{
font-size: 1.62rem;
}
#hero .hero-layer p {
font-size: 1.14rem;
}
}

@media (max-width: 575.98px) {
#hero {
margin-top: 215px;
}
#hero .hero-layer {
max-width: 500px;
top: 58%;
left: 10px;
padding: 4px 4px;
}
#hero .hero-layer h1{
font-size: 1.62rem;
}
#hero-text p {
font-size: 0.94rem;
}
}

/* --------------- Cards ----------------- */

#card-blocks ul {
font-size: 1.34rem;
list-style: none;
hyphens: auto;
}

#card-blocks p {
font-size: 1.34rem;
hyphens: auto;
}

#card-blocks li {
margin-left: -0.8em; 
}

#card-blocks li:before {
content: url(../images/haken.svg);
margin-left: -1.0em; 
}


.logo-card {   
padding: 0 10px;
max-height: 100px;
width: auto;
}

.card-block {
color: white;
padding: 20px 30px;
}

.card-block h4 {
color: white;
font-size: 1.55rem;
font-weight: 700;
}

#card-blocks .haken {
max-height: 20px;
width: auto;
}

.bg-orange {
background-color: #d9991a;
}

.bg-rot {
background-color: #c85f78;
}

.bg-gruen {
background-color: #8dbba8;
}

.hoehe {
height: 520px;
}

@media (max-width: 1199.98px) {
.hoehe {
height: 700px;
}
}

@media (max-width: 991.98px) {
.hoehe {
height: 460px;
}
}

@media (max-width: 767.98px) {
.hoehe {
height: 460px;
}
}

@media (max-width: 575.98px) {
.hoehe {
height: 380px;
}
.card-block {
padding: 25px 10px;
}
#card-blocks ul {
font-size: 0.94rem;
}
#card-blocks p {
font-size: 1.04rem;
hyphens: auto;
}
.card-block h4 {
font-size: 1.35rem;
}
#card-blocks li {
margin-left: -1.6em; 
}
#card-blocks li:before {
margin-left: -1.10em; 
}
}

/* --------------- Accordion ----------------- */

.card {
border: none;
border-radius: 0px;
}

.card-header:first-child {
border-radius:  0px;
}

#headingOne {
background-color: #d9991a;
}

#accordionHaushalt .card-header, #accordionSicherheit .card-header, #accordionGesundheit .card-header {
background-color: white;
border-bottom: 1px solid #58585a;
}

#headingTwo {
background-color: #c85f78;
}

#headingThree {
background-color: #8dbba8;
}

.card-header {
padding: 10px 10px;
border-bottom: 0px;
}

.card-header .btn {
padding: 0;
border: 0px;
text-decoration: none;
}

#accordionSchutzcard  {
font-size: 1.34rem;
}

#accordionSchutzcard .btn-link {
font-size: 1.8rem;
color: white;
text-decoration: none;
}

#accordionSchutzcard .plus {
height: 40px;
width: 40px;
padding-right: 10px;
}

#accordionSchutzcard .btn-link:hover, .btn-link:active .btn-link:focus{
color: #f6f6f6;
}

#accordionHaushalt .card-header .btn-text, #accordionSicherheit .card-header .btn-text, #accordionGesundheit .card-header .btn-text {
vertical-align: middle;
}

#accordionHaushalt, #accordionSicherheit, #accordionGesundheit {
border-top: 1px solid #58585a;
}


#accordionHaushalt .btn-link, #accordionSicherheit .btn-link, #accordionGesundheit .btn-link {
font-size: 1.34rem;
font-weight: 600;
color: #58585a;
text-decoration: none;
}

#accordionHaushalt .btn-link:hover, .btn-link:active .btn-link:focus
{
color: #d9991a;
}

#accordionSicherheit .btn-link:hover, .btn-link:active .btn-link:focus
{
color: #c85f78;
}
#accordionGesundheit .btn-link:hover, .btn-link:active .btn-link:focus
{
color: #8dbba8;
}


#accordionSchutzcard ul {
padding-left: 0;
list-style: none;
hyphens: auto;
}

#accordionSchutzcard li {
border-top: 1px solid #58585a;
}

@media (max-width: 575.98px) {

#accordionSchutzcard  {
font-size: 0.94rem;
}

#accordionSchutzcard .btn {
text-align: left;
}

#accordionSchutzcard .btn-link {
font-size: 1.25rem;
}
#accordionSchutzcard .plus {
height: 30px;
width: 30px;
padding-right: 6px;
}
}

/* --------------- Kontaktformular ----------------- */

#kontakt h1 {
color: #94bad5;
font-size: 2.8rem; 
font-weight: 300;
}

@media (max-width: 575.98px) {
#kontakt h1 {
font-size: 1.8rem; 
}
}

.bg-grau {
background-color: #f5f4f9;
}

.form-control {
    color: #58585a;
    border: 1px solid #b0b0b0;
    border-radius: 0px;
}

#kontakt p {
line-height: 1.3 !important;
}

.btn {
padding: .675rem .95rem;
}

.btn-primary {
color: #fff;
font-weight: 600;
background-color: #94bad5;
border-color: #94bad5;
border-radius: 0px; 
}

.btn-primary:hover {
color: #fff;
background-color: #8dbba8;
border-color: #8dbba8;
}

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

.bg-footer {
background-color: #94bad5;
}

#footer {
color: #fff;
font-weight: 600;
}

@media (max-width: 575.98px) {
#footer {
font-size: 0.84rem;
}
}

#footer a {
color: #fff;
text-decoration: none;
}

#footer a:hover {
color: #58585a;
}

.kopfhoerer-footer {
height: 40px;
padding-right: 10px;
}


.servicetelefon {
font-size: 1.4rem; 
font-weight: 400;
}

@media (max-width: 575.98px) {
#footer .col-md-12 {
text-align: left !important;
}
.kopfhoerer-footer {
height: 28px;
padding-right: 10px;
}
.servicetelefon {
font-size: 1.1rem; 
}
}


.jumptarget:before {
display: block;
content: " ";
margin-top: -130px;
height: 130px;
visibility: hidden;
}

.modal-dialog {
    max-width: 90%;
    margin: 30px auto;
}

.modal-header {
    background-color: #94bad5;
}

.close {
    color: #fff;
    text-shadow: 0 1px 0 #000;
    opacity: .5;
}

.modal-title {
color: white;
}

ol {
color: #94bad5;
}