/*
 * Filip Pova :: Web- & Printdesign
 * Author: Filip Pova
 * E-Mail: design@kommen-Sie-gut-an.de
 * Web: www.kommen-Sie-gut-an.de
*/


:root {
    
  --blueRegular: rgb(39,53,131);
  --blueTransparent: rgba(39,53,131, 0.3);
  --grayExtraLight: rgb(245,245,245);
  --grayLight: rgb(225,225,225);
  --grayRegular: rgb(175,175,175);
  --grayTransparent: rgba(175,175,175, 0.3);
  --orangeRegular: rgb(243,146,0);
  --orangeTransparent: rgba(243,146,0,0.3);
  --red: rgb(227,6,19);
  --redRegular: rgb(227,6,19);
  --redLight: rgb(227,6,19, 0.2);
  --redTransparent: rgb(227,6,19, 0.2);
  --grayDark: rgb(51,51,51);
  --greenRegular: rgb(0,94,41);
  --greenDark: rgb(0,94,41);
  --greenDarkExtra: rgb(1,69,32);
  --greenLight: rgb(0,94,41,0.2);
  --white: rgb(255,255,255);
  --black: rgb(0,0,0);
}


/***********
*** TEXT ***
************/

h1{
    font-family: 'Open Sans';
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 2rem;
    position: relative;
    line-height: 1.75;
    color: var(--black);
}

h2{
    font-family: 'Open Sans';
    font-size: 2.000rem;
    line-height: 1.5;
    position: relative;
    color: var(--blueRegular);
    margin-bottom: 1.750rem;
}

h2::before {
    content: '';
    background-image: url(../../../files/images/bg/bg-h-mobile.png);
    background-repeat: no-repeat;
    background-position: left center;
    height: 25px;
    width: 33px;
    position: absolute;
    top: 14px;
    left: 0;
    margin-left: -43px;
}

h3{
    font-family: 'Open Sans';
    font-size: 1.750rem;
    color: var(--blueRegular);
    line-height: 1.5;
    font-weight: 400;
    position: relative;
    margin-bottom: 0.5rem;
}

h3::before {
    content: '';
    background-image: url(../../../files/images/bg/bg-h-mobile.png);
    background-repeat: no-repeat;
    background-position: left center;
    height: 21px;
    width: 29px;
    position: absolute;
    top: 12px;
    left: 0;
    margin-left: -37px;
}

h4{
    font-family: 'Open Sans';
    font-size: 1.500rem;
    color: var(--black);
    margin-bottom: 1.250rem;
    line-height: 1.75;
}

h5{
    font-family: 'Open Sans';
    font-size: 1.250rem;
    font-weight: 500;
    color: black;
    margin-bottom: 1.125rem;
    color: var(--blueRegular)
}

h6{
    font-family: 'Open Sans';
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.75;
}

p.pXXL{
    font-family: 'Open Sans';
    font-size: 2.500rem;
    font-weight: 400;
    line-height: 1.5;
}

p.pXL{
    font-family: 'Open Sans';
    font-size: 2.000rem;
    font-weight: 400;
    line-height: 1.5;
}


p.pL,
p.pLFooter{
    font-family: 'Open Sans';
    font-size: 1.250rem;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 0px 0px 0px #777;
    color: var(--blueRegular);
}

p,
td,
a,
a:hover{
    font-family: 'Open Sans';
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
}

a,
a:hover{
    text-decoration: none;
    color: var(--black);
}

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

p.pComment{
    font-family: 'Open Sans';
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    font-style: italic
}

footer p{
    font-weight: 400;
}

footer p.pSmall{
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: 0;
}

h1 .material-symbols-outlined,
h2 .material-symbols-outlined,
h3 .material-symbols-outlined,
h4 .material-symbols-outlined,
h5 .material-symbols-outlined,
h6 .material-symbols-outlined,
p .material-symbols-outlined{
    font-size: 100%;
    word-break: break-word;
}

ul{
   margin: 0;
   padding: 0;
   display: block;
}

ul li{
    list-style: none;
    padding: 5px 0px 5px 20px;
    margin: 0;
    font-size: 1.000rem;
    line-height: 1.5;
    font-family: 'Open Sans';
    font-weight: 400;
    display: block;
}

ul.ulArrow{
    padding: 0;
    margin: 0 0 0 30px;
}

ul.ulArrow li{
    list-style-image: url('../../../files/images/bg/bg-ul-arrow.png');
    padding-left: 0px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin: 0 0 0 0;
    background-position: left 5px;
    font-size: 1rem;
    display: list-item !important;
    text-align: start;
}

.ulKontaktFooter{
    margin: 0;
    padding: 0;
}

.ulKontaktFooter li{
    display: block;
    padding: 0 0 0px 0;
    list-style: none;
    font-size: 1rem;
    font-weight: 400;
}

.ulKontaktFooter li a,
.ulKontaktFooter li a:hover{
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5;
    color: var(--black);
    font-weight: 400;
}

.ulKontaktFooter li a .material-symbols-outlined,
.ulKontaktFooter li a:hover .material-symbols-outlined{
    font-size: 1.250rem;
    text-decoration: none;
    line-height: 1.5;
    color: var(--orangeRegular);
    vertical-align: top;
}

.ulIconBarTop{
    margin: 20px 0 20px 0;
    padding: 0;
    display: block;
    text-align: end;
}

.ulIconBarTop li{
    display: inline-block;
    list-style: none;
    padding: 0 0 0 30px;
}

.ulIconBarTop li a,
.ulIconBarTop li a:hover{
    font-size: 1rem;
    line-height: 1.5;
    color: var(--orangeRegular);
    display: block;
    text-decoration: none;
}

.ulIconBarTop li a:hover{
    color: var(--blueRegular);
}

.ulIconBarTop li a .material-symbols-outlined,
.ulIconBarTop li a:hover .material-symbols-outlined{
    font-size: 1.250rem;
    line-height: 1.5;
    color: var(--orangeRegular);
    text-decoration: none;
    margin-right: 5px;
    vertical-align: sub;
}

.ulIconBarTop li a:hover .material-symbols-outlined{
    color: var(--blueRegular);
}

hr{
    border-top: 1px solid var(--grayRegular);
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px
}


/*****************
*** TEXT-ALIGN ***
*****************/

.textAlignCenter{
    text-align: center;
}

.textAlignLeft{
    text-align: start;
}

.textAlignRight{
    text-align: end;
}

.textAlignJustify{
    text-align: justify;
}

/*****************
*** Color ***
*****************/

.cBlueRegular{
    color: var(--blueRegular);
}

.cOrangeRegular{
    color: var(--orangeRegular);
}

/*****************
*** BG Color ***
*****************/

.bgcBlue{
    background-color: var(--blueRegular);
}

.bgcGrayExtraLight{
    background-color: var(--grayExtraLight);
}

/************
*** Border ***
************/

.borderAllSideGray{
    border: 1px solid var(--grayLight);
}

/************
*** Border ***
************/

.imageBorder{
    border: 1px solid var(--blueRegular);
    display: inline-block;
    padding: 10px;
    box-shadow: 0px 0px 20px var(--grayRegular);
    height: max-content;
}

.imageFluid{
    width: 100%;
    height: auto;
	max-height: 350px;
}

/*****************
*** Button ***
*****************/

.btnRegular,
.btnRegular:hover{
    font-size: 1.250rem;
    font-weight: 500;
    color: var(--white);
    line-height: 1.250;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    display: inline-block;
    margin-top: 10px;
    border-radius: 5px;
}

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

.btnSmall,
.btnSmall:hover{
    font-size: 1.000rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--white);
    line-height: 1.250;
    text-decoration: none;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    margin-top: 10px;
    border-radius: 5px;
}

.btnSmall:hover{
    box-shadow: 0 0px 12px rgb(0 0 0 / 55%);
}

.btnBig,
.btnBig:hover{
    font-size: 1.500rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--white);
    line-height: 1.250;
    text-decoration: none;
    padding: 15px 60px 15px 60px;
    display: inline-block;
    margin-top: 10px;
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 0 0px 12px rgb(0 0 0 / 25%);
}

.btnBig:hover{
    box-shadow: 0 0px 12px rgb(0 0 0 / 55%) !important;
}

.btnBlue{
    background-color: var(--blueRegular);
    border: 2px solid var(--blueRegular);
}

.btnBlue:hover{
    background-color: var(--blueRegular);
    border: 2px solid var(--blueRegular);
}

.btnOrange{
    background-color: var(--orangeRegular);
    border: 2px solid var(--orangeRegular);
}

.btnOrange:hover{
    background-color: var(--orangeRegular);
    border: 2px solid var(--orangeRegular);
}