/* 
    *** UL
    *** Border
    *** LOGO
    *** FORM
    *** PADDING
    *** MARGIN
    *** SHADOW
    *** CARD

    +++ Enzian: rgb(0,84,130)
    +++ Red: rgb(191,8,7)
    +++ GrayLight: rgb(204,204,204);
    +++ GrayMedium: rgb(125,125,125);
    +++ GrayDark: rgb(62,62,26)
*/

:root {
  --enzian: rgb(0,84,130);
  --enzianTransparent: rgb(0,84,130, 0.9);
  --enzianExtraLight: rgb(0,84,130, 0.1);
  --lemonGreen: rgb(10, 221, 8);
  --greenDark: rgb(0,94,41);
  --grayExtraLight: rgb(245,245,245);
  --grayLight: rgb(204,204,204);
  --grayMedium: rgb(125,125,125);
  --grayDark: rgb(62,62,26);
  --red: rgb(227,6,19);
  --redLight: rgb(227,6,19, 0.2);
  --white: rgb(255,255,255);
  --black: rgb(0,0,0);
  --orange: rgb(255,165,0);
}


*{
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 400;
}


ul{
    list-style: none;
}
header{
    padding-top: 50px;
    padding-bottom: 50px;
}

main{
    
    padding-top: 40px;
    padding-bottom: 40px;
}

nav{
    background-color: rgb(245,245,245);
    padding-top: 0;
    padding-bottom: 0;
}

.hidden{
    visibility: hidden
}

.btnLoesung{
    background: var(--enzian);
    border: none;
    color: var(--white);
    padding: 5px 10px;
    border-radius: 3px;
}


a{
    color: var(--enzian);
    text-decoration: none;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}

h1,
h1 .bi{
    font-family: 'Montserrat';
    font-size: 2.250rem;
    font-weight: 500;
    color: black;
    margin-bottom: 2rem;
    margin-right: 10px;
}

h2,
h2 .bi{
    font-family: 'Montserrat';
    font-size: 2.000rem;
    font-weight: 500;
    color: black;
    margin-bottom: 1.750rem;
    margin-right: 10px;
}

h3,
h3 .bi{
    font-family: 'Montserrat';
    font-size: 1.750rem;
    font-weight: 500;
    color: black;
    margin-bottom: 1.5rem;
    margin-right: 10px;
}

h4,
h4 .bi{
    font-family: 'Montserrat';
    font-size: 1.500rem;
    font-weight: 500;
    color: black;
    margin-bottom: 1.250rem;
    margin-right: 10px;
}

h5,
h5 .bi{
    font-family: 'Montserrat';
    font-size: 1.250rem;
    font-weight: 500;
    color: black;
}

h6,
h6 .bi{
    font-family: 'Montserrat';
    font-size: 1.125rem;
    font-weight: 500;
    color: black;
    margin-bottom: 10px;
}

p,
p .bi{
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 400;
    color: black;
    margin-right: 10px;
}

a,
a:hover{
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 400;
    color: var(--enzian);
    text-decoration: none;
}

p.pXSmall{
    font-family: 'Montserrat';
    font-size: 1rem;
    font-weight: 400;
    color: black;
    font-size: 0.675rem;
}

p.pSmall{
    font-family: 'Montserrat';
    font-size: .8750rem;
    font-weight: 400;
    color: black;
    font-size: 0.875rem;
}

span.zitatteAutor{
    font-family: 'Montserrat';
    font-weight: 400;
    color: black;
    font-size: 0.875rem;
    color: var(--grayLight);
    padding-top: 20px;
}

p.pLarge,
p.pLarge .bi{
    font-family: 'Montserrat';
    font-size: 1.125rem;
    font-weight: 400;
    color: black;
}

p.pXLarge,
p.pXLarge .bi{
    font-family: 'Montserrat';
    font-size: 1.250rem;
    font-weight: 400;
}

p.pXXLarge,
p.pXXLarge .bi{
    font-family: 'Montserrat';
    font-size: 1.500rem;
    font-weight: 400;
    color: black;
}

p.p300{
    font-weight: 300;
    font-size: 100%;
}

p.p400{
    font-weight: 400;
    font-size: 100%;
}

p.p500,
span.p500{
    font-weight: 500;
    font-size: 100%;
}

p strong{
    font-size: 100%;
    font-weight: 600;
}

.textStrong{
    font-weight: 600;
}



.alert p{
    margin: 0 !important;
}

hr{
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid var(--grayMedium);
}

hr.hrInText{
    margin-top: 30px;
    margin-bottom: 30px;
    border-top: 1px solid var(--grayMedium);
}

/*****
*** IMAGES ***
*************/

.imgFluid{
    max-width: 100%;
    height: auto;
}

/*********
*** UL ***
*********/

ul{
    list-style: none;
}

ul li{
    display: inline-block;
}

ul.ulAccorde{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.ulAccorde li{
    display: inline;
    padding: 10px 20px;
    margin: 0;
    font-weight: 500;
    font-size: 1.250rem;
}

ul.ulVertical{
    padding: 0;
    margin: 0 10px 20px 0;
}

ul.ulVertical li{
    display: list-item;
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 10px;
    margin-left: 40px;
    list-style-type: initial;
    color: black;
}

/*
*** TABLE ***
*************/

table{
    margin-bottom: 20px;
}

th, td{
    padding: 5px 10px;
}

td {
    font-size: 1rem;
    line-height: 1.5;
}

th {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
}

td.bgColorGrayMedium {
	color: white !important;
}

/*
*** COLOR ***
************/

.colorEnzian{
    color: var(--enzian) !important;
}

.colorWhite{
    color: var(--white) !important;
}

.colorLemonGreen{
    color: var(--lemonGreen);
}

.colorRed{
    color: var(--red) !important;
}

.colorGrayLight{
    color: rgb(204,204,204) !important;
}

/**
*** BG COLOR ***
***************/

.bgColorRed{
    color: rgb(191,8,7);
}

.bgColorEnzianExtraLight{
    background-color: var(--enzianExtraLight);
}

.bgColorEnzian{
    background-color: var(--enzian);
}

.bgColorEnzianTrans{
    background-color: var(--enzian);
}

.bgColorGrayLight{
   background-color: rgb(204,204,204);
}

.bgColorGrayMedium{
    background-color: rgb(125,125,125) !important;
}

.bgColorGrayExtraLight{
    background-color: rgb(245,245,245);
}
/*************
*** BORDER ***
*************/

.borderBottom{
    border-bottom: 2px;
    border-bottom-style: solid;
}

.borderTop{
    border-top: 2px;
    border-style: solid;
}

.borderLeft{
    border-left: 2px;
    border-left-style: solid;
}

.borderRight{
    border-right: 2px;
    border-right-style: solid;
}

.borderY{
    border-right: 2px;
    border-left: 2px;
    border-right-style: solid;
    border-left-style: solid;
}

.borderX{
    border-top: 2px;
    border-bottom: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
}

.borderAllSite{
    border: 1px solid;
}

.border1px{
    border-width: 1px !important;
}

.borderEnzian{
    border-color: var(--enzian);
}

.borderLemonGreen{
    border-color: var(--lemonGreen);
}

.borderRed{
    border-color: rgb(227,6,19)
}

.borderGrayLight{
    border-color: rgb(204,204,204);
}

.borderGrayMedium{
    border-color: rgb(125,125,125);
}

.borderGrayDark{
    border-color: rgb(62,62,26)
}

.borderRadius-3{
    border-radius: 3px;
}

.borderRadius-5{
    border-radius: 5px;
}
.borderRadius-10{
    border-radius: 10px;
}


/***********
*** LOGO ***
***********/

.logo{
    width: 400px;
    height: auto;
}

/****************
*** TEXTALIGN ***
****************/

.textAlignCenter{
    text-align: center;
}

.textAlignLeft{
    text-align: left;
}

.textAlignRight{
    text-align: right;
}

.textAlignJustify{
    text-align: justify;
}

/***********
*** FORM ***
************/
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel]{
    background-color: #E8E8E8;
    border-radius: 0;
    border: none;
    padding: 10px 3px 10px 3px;
    text-align: center;
}

form input[type=text]:focus,
form input[type=text]:active,
form input[type=text]:checked,
form input[type=email]:focus,
form input[type=email]:active,
form input[type=email]:checked,
form input[type=password]:focus,
form input[type=password]:active,
form input[type=password]:checked,
form input[type=tel]:focus,
form input[type=tel]:active,
form input[type=tel]:checked{
    background-color: #F0F0F0;
    border-radius: 0;
    border: 1px solid #D3D3D3;
    box-shadow: none;
    outline: 0;
    padding: 10px 3px 10px 3px;
    text-align: center
}

form div label{
    color: rgb(0,0,0);
    font-size: 0.875rem;
    font-weight: 500;
}
form div label span{
    font-size: 100%;
    font-family: 'Montserrat';
    font-weight: 500;
}


form #submit{
    background-color: rgb(0,84,130);
    color: rgb(255,255,255);
    padding: 10px 30px;
    border: none;
    font-weight: 500;
    font-size: 1.125rem;
    border-radius: 5px;
    margin-top: 30px;
}

form #submit:hover{
    background-color: rgb(0,84,130);
    color: rgb(255,255,255);
    padding: 10px 30px;
    border: none;
    font-weight: 500;
    font-size: 1.125rem;
    border-radius: 5px;
    margin-top: 30px;
    -webkit-box-shadow: 0px 0px 4px 5px rgba(0,0,0,0.37); 
    box-shadow: 0px 0px 4px 5px rgba(0,0,0,0.37);
}

.displayNone{
    display: none !important;
}

/**************
*** PADDING ***
**************/

.pT-10{
    padding-top: 10px;
}
.pT-20{
    padding-top: 20px;
}
.pT-30{
    padding-top: 30px;
}
.pT-40{
    padding-top: 40px;
}
.pT-50{
    padding-top: 50px;
}
.pT-60{
    padding-top: 60px;
}
.pT-70{
    padding-top: 70px;
}
.pT-80{
    padding-top: 80px;
}
.pT-90{
    padding-top: 90px;
}
.pT-100{
    padding-top: 100px;
}

.pB-10{
    padding-bottom: 10px;
}
.pB-20{
    padding-bottom: 20px;
}
.pB-30{
    padding-bottom: 30px;
}
.pB-40{
    padding-bottom: 40px;
}
.pB-50{
    padding-bottom: 50px;
}
.pB-60{
    padding-bottom: 60px;
}
.pB-70{
    padding-bottom: 70px;
}
.pB-80{
    padding-bottom: 80px;
}
.pB-90{
    padding-bottom: 90px;
}
.pB-100{
    padding-bottom: 100px;
}

.pY-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.pY-20{
    padding-top: 20px;
    padding-bottom: 20px;
}
.pY-30{
    padding-top: 30px;
    padding-bottom: 30px;
}
.pY-40{
    padding-top: 40px;
    padding-bottom: 40px;
}
.pY-50{
    padding-top: 50px;
    padding-bottom: 50px;
}
.pY-60{
    padding-top: 60px;
    padding-bottom: 60px;
}
.pY-70{
    padding-top: 70px;
    padding-bottom: 70px;
}
.pY-80{
    padding-top: 80px;
    padding-bottom: 80px;
}
.pY-90{
    padding-top: 90px;
    padding-bottom: 90px;
}
.pY-100{
    padding-top: 100px;
    padding-bottom: 100px;
}

	.pA-10{
    padding: 10px;
}
.pA-20{
    padding: 20px;
}
.pA-30{
    padding: 30px;
}
.pA-40{
    padding: 40px;
}
.pA-50{
    padding: 50px;
}
.pA-60{
    padding: 60px;
}
.pA-70{
    padding: 70px;
}
.pA-80{
    padding: 80px;
}
.pA-90{
    padding: 90px;
}
.pA-100{
    padding: 100px;
}

/*************
*** MARGIN ***
**************/

.mT-10{
    margin-top: 10px;
}
.mT-20{
    margin-top: 20px;
}
.mT-30{
    margin-top: 30px;
}
.mT-40{
    margin-top: 40px;
}
.mT-50{
    margin-top: 50px;
}
.mT-60{
    margin-top: 60px;
}
.mT-70{
    margin-top: 70px;
}
.mT-80{
    margin-top: 80px;
}
.mT-90{
    margin-top: 90px;
}
.mT-100{
    margin-top: 100px;
}

.mB-10{
    margin-bottom: 10px;
}
.mB-20{
    margin-bottom: 20px;
}
.mB-30{
    margin-bottom: 30px;
}
.mB-40{
    margin-bottom: 40px;
}
.mB-50{
    margin-bottom: 50px;
}
.mB-60{
    margin-bottom: 60px;
}
.mB-70{
    margin-bottom: 70px;
}
.mB-80{
    margin-bottom: 80px;
}
.mB-90{
    margin-bottom: 90px;
}
.mB-100{
    margin-bottom: 100px;
}

.mY-10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.mY-20{
    margin-top: 20px;
    margin-bottom: 20px;
}
.mY-30{
    margin-top: 30px;
    margin-bottom: 30px;
}
.mY-40{
    margin-top: 40px;
    margin-bottom: 40px;
}
.mY-150{
    margin-top: 50px;
    margin-bottom: 50px;
}
.mY-60{
    margin-top: 60px;
    margin-bottom: 60px;
}
.mY-70{
    margin-top: 70px;
    margin-bottom: 70px;
}
.mY-80{
    margin-top: 80px;
    margin-bottom: 80px;
}
.mY-90{
    margin-top: 90px;
    margin-bottom: 90px;
}
.mY-100{
    margin-top: 100px;
    margin-bottom: 100px;
}

/*************
*** SHADOW ***
*************/

.shadowAllSite{
    -webkit-box-shadow: 0 0 0.250rem 0.250rem rgba(85,85,85,0.35); 
    box-shadow: 0 0 0.250rem 0.250rem rgba(85,85,85,0.35); 
}

/***
*** CARD ***
***********/

.cardDeckAuto {
    display: inline-flex;
    flex-wrap: wrap;
    margin: -20px 0 0 -20px;
    width: calc(100% + 20px);
}

.cardDeckAuto>* {
    margin: 20px 0 0 20px;
}

.cardDeck {
    --gap: 10px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: stretch;
}

.cardDeck.card-1 {
    --columns: 1;
}

.cardDeck.card-2 {
    --columns: 2;
}

.cardDeck.card-3 {
    --columns: 3;
}

.cardDeck.card-4 {
    --columns: 4;
}

.cardDeck.card-5 {
    --columns: 5;
}

.cardDeck.card-6 {
    --columns: 6;
}

.cardDeck.card-7 {
    --columns: 7;
}

.cardDeck .cardInside,
.cardDeck .cardInsideNav,
.cardDeck .cardInsideImages,
.cardDeck .cardWisdom{
    width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}

.cardInside {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
}

.cardWisdom {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 20px;
    text-align: center;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    border: 1px solid var(--enzianExtraLight);
}

.cardWisdom p{
    margin: 0 !important;
    padding: 0 !important;
}

.cardInsideImages {
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0;
    text-align: center;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
}

.cardInsideNav{
    background-color: rgb(255,255,255);
    bottom: 0;
    width: 100%;
    transition: .5s ease;
    padding: 0 0 0 0;
    text-align: center;
    width: 100%;
    margin: 0 0 0 0;
    position: relative;
    border: 1px solid rgb(0,84,130);
}

.cardInsideNav .bi{
    font-size: 4rem;
}

.boxShadow{
    box-shadow: 0 0px 12px rgb(0 0 0 / 35%);
}

/****************
*** ACCORDION ***
****************/

.accordion {

    margin-bottom: 10px;
    margin-left: 0px;

}

.accordion .accordionWrapper {

    border-bottom: 1px solid var(--enzian);
    padding: 5px;
    margin-bottom: 20px;

}

.accordion .accordionHeader {

    cursor: pointer;
    position: relative;
    padding-right: 50px;
    padding-bottom: 10px;

}

.accordion .accordionHeader h3 {

    font-size: 1.250rem;
    line-height: 1.3;
    color: var(--enzian) !important;
    padding: 0;
    margin: 0;
    font-weight: 300;
    padding-left: 0px

}

.accordion .accordionHeader span.openAccordion {

    position: absolute;
    right: 20px;
    padding: 0;
    margin: 0;
    top: 0px;
    z-index: 2;

}

.accordion .accordionHeader span.openAccordion::after {
    content: '\0002B';
    color: var(--enzian);
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    padding: 5px 10px;
    line-height: 1.5rem;
}

.accordion .accordionHeader.accordionActive span.openAccordion::after {
    content: '\2212';
    color: var(--enzian);
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    border-radius: 50%;
    padding: 5px 10px;
    line-height: 1.5rem;
}

.accordionOpen .accordionContent {

    display: block;

}

.accordion .accordionContent {
    display: none;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-top: 10px;

}