@charset "utf-8";

@font-face {
font-family: 'Lato-Bold';
src: url('../fonts/Lato-Bold_0.ttf');
src: url('../fonts/Lato-Bold_0.ttf') format('truetype'),
url('../../fonts/Lato-Bold_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

@font-face {
font-family: 'Lato-Medium';
src: url('../fonts/Lato-Medium_0.ttf');
src: url('../fonts/Lato-Medium_0.ttf') format('truetype'),
url('../../fonts/Lato-Medium_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

@font-face {
font-family: 'BalooBhaina2-Regular';
src: url('../fonts/BalooBhaina2-Regular.ttf');
src: url('../fonts/BalooBhaina2-Regular.ttf') format('truetype'),
url('../../fonts/BalooBhaina2-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

@font-face {
font-family: 'BalooBhaina2-SemiBold';
src: url('../fonts/BalooBhaina2-SemiBold.ttf');
src: url('../fonts/BalooBhaina2-SemiBold.ttf') format('truetype'),
url('../../fonts/BalooBhaina2-SemiBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

/* ------------------------------------------- */

html, body {
	margin: 0;
	padding: 0;
    background-color: #333;
    font-family: 'BalooBhaina2-Regular', Arial;
    font-size: 16px;
    color: #e2e2e2;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

*, 
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

a {text-decoration: none; color: inherit;}
.flex {display: flex;}
.col {flex-direction: column;}
.row {flex-direction: row;}
.center {justify-content: center;}
p {line-height: 1.5em;}
.text-center {text-align: center;}

.mitte {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    max-width: 1656px;
}

@media screen and (min-width:100px) and (max-width: 900px) {.mitte {width: 90%;}}
@media screen and (min-width:100px) and (max-width: 1050px) {body {font-size: 14px;}}

/* ------------------------------------------- */

header {
    background-color: #242424;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative;    
    overflow: hidden;
}

.header {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    padding-left: 3%;
    padding-right: 3%;
}

.menu {z-index: 10;}
.logo-img {width: 150px;}

.kontaktdaten p {
    font-size: 16px;
    position: relative;
}

.kontaktdaten p:first-child {margin-right: 85px;}

.kontaktdaten-telefon::before {
    /* content: url('../images/anruf.svg'); */
    content: "";
    background-image: url('../images/anruf.svg');
    background-position: center;
    background-size:100%;
    position: absolute;
    top: 3px;
    left: -25px;
    display: inline-block;
    width: 18px;
    height: 18px;
}

.kontaktdaten-mail::before {
    content: "";
    background-image: url('../images/email.svg');
    background-position: center;
    background-size:100%;
    position: absolute;
    top: 3px;
    left: -26px;
    display: inline-block;
    width: 18px;
    height: 18px;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1100px) {
    .logo-img {width: 120px;}
    .kontaktdaten p {font-size: 14px;}
    .kontaktdaten p:first-child {margin-right: 75px;}
}
@media screen and (min-width:100px) and (max-width: 800px) {
    .kontaktdaten  {flex-wrap: wrap; width: 160px;}
    .kontaktdaten p {width: 100%; margin: 0;}
    .kontaktdaten p:first-child {margin-right: 0;}
}
@media screen and (min-width:100px) and (max-width: 600px) {
    header {border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
    .header {gap: 30px; }
    .logo-img {width: 100px;}
    .kontaktdaten p {font-size: 12px;}
    .kontaktdaten  {width: 135px; margin-left: 30px;}
    .kontaktdaten-telefon::before {width: 15px; height: 15px; top: 2px}
    .kontaktdaten-mail::before {width: 15px; height: 15px; top: 4px}
}
@media screen and (min-width:100px) and (max-width: 428px) {
    .header {flex-wrap: wrap;}
    .logo {width: 100%; display: flex; justify-content: center;}
}

/* ------------------------------------------- */

.promo {padding: 150px 0 200px 12%; overflow: hidden;}

h1 {
    font-family: 'Lato-Bold';
    font-weight: normal;
    text-transform: uppercase;
    font-size: 96px;
    line-height: 1;
    background: rgb(251,230,109);
    background: linear-gradient(180deg, rgba(251,230,109,1) 0%, rgba(240,205,20,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: 0.02em;
}

.promo p {font-size: 22px;}

.btn {
    background: rgb(251,230,109);
    background: linear-gradient(180deg, rgba(251,230,109,1) 0%, rgba(240,205,20,1) 100%);
    border: none;
    width: 320px;
    height: 48px;
    border-radius: 18px;
    padding: 15px;
}

.btn a {
    font-family: BalooBhaina2-SemiBold;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 0;
    color: #333;
}

.btn a::after {
    content: url("../images/arrow.svg");
    margin-left: 8px;
}

.btn:hover {background: rgb(251,230,109);}

.lampe {
    position: absolute;
    bottom: 0;
    right: 150px;
    width: 550px;
    height: auto;
    z-index: 2;
}

.licht {
    position: absolute;
    bottom: -90px;
    right: 90px;
    width: 680px;
    height: auto;
    animation-name: opacity;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    z-index: 1;
}

@keyframes opacity {
  0%   {opacity: 1.0;}
  15%  {opacity: 0.75;}
  50%  {opacity: 0.4;}
  85%  {opacity: 0.75;}
  100% {opacity: 1.0;}
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1700px) {
    .lampe {right: 50px;}
    .licht {right: 10px;}
}
@media screen and (min-width:100px) and (max-width: 1370px) {
    h1 {font-size: 80px;}
    .promo p {font-size: 19px;}
    .promo {padding: 120px 0 180px 10%;}
    .lampe {width: 500px;}
    .licht {width: 630px; right: 0;}
}
@media screen and (min-width:100px) and (max-width: 1190px) {
    h1 {font-size: 75px;}
    .promo p {font-size: 18px;}
    .promo {padding: 120px 0 150px 5%;}
    .lampe {width: 450px; right: 0;}
    .licht {width: 600px; right: -70px;}
}
@media screen and (min-width:100px) and (max-width: 960px) {
    h1 {font-size: 60px;}
    .promo p {font-size: 15px;}
    .promo {padding: 100px 0 120px 5%;}
    .lampe {width: 380px;}
    .licht  {width: 530px;}
    .btn {width: 250px; height: 40px; border-radius: 15px; padding: 13px;}
    .btn a {font-size: 15px;}      
}
@media screen and (min-width:100px) and (max-width: 765px) {
    .promo {padding: 70px 0 100px 5%;}
    .lampe {width: 320px;}
    .licht {width: 530px; right: -90px; bottom: -150px;}
}
@media screen and (min-width:100px) and (max-width: 670px) {
    .lampe {right: -15%;}
    .licht  {right: -30%;}
}
@media screen and (min-width:100px) and (max-width: 590px) {
    h1 {font-size: 50px;}
    .promo p {font-size: 14px;}
    .lampe {right: -30%;}
    .licht {right: -50%;}
}
@media screen and (min-width:100px) and (max-width: 480px) {
    .lampe {display: none;}
    .licht {display: none;}
    h1 {text-align: center;}
    .promo p {text-align: center;}
    .promo {display: flex; flex-direction: column;}
    .promo .btn {margin-left: auto; margin-right: auto;}
}

/* ------------------------------------------- */

.anfang {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 180px 11%;
    align-items: center;
}

.grafik {
    width: 400px;
    height: 400px;
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grafik-part {
    background-color: #eee;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 5px solid #f0cd14;
}

.grafik-part-1 {border-bottom-right-radius: 0;}
.grafik-part-2 {border-bottom-left-radius: 0;}
.grafik-part-3 {border-top-right-radius: 0;}
.grafik-part-4 {border-top-left-radius: 0;}

.grafik img {
    width: 48px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.grafik p {
    font-family: 'BalooBhaina2-SemiBold';
    font-size: 20px;
    color: #333;
    margin: 0;
}

h2 {
    font-family: 'Lato-Bold';
    font-weight: normal;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 1;
    background: rgb(251,230,109);
    background: linear-gradient(180deg, rgba(251,230,109,1) 0%, rgba(240,205,20,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    margin-bottom: 30px;
    letter-spacing: 0.02em;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1400px) {
    .anfang {padding: 160px 0;}
    h2 {font-size: 30px;}
}

@media screen and (min-width:100px) and (max-width: 1050px) {
    .grafik {width: 350px; height: 350px;}
    .grafik img {width: 35px;}
    .grafik p {font-size: 16px;}
}
@media screen and (min-width:100px) and (max-width: 850px) {
    .anfang {grid-template-columns: 100%; padding: 80px 0; justify-items: center;}
    .grafik {order: 2;}
    .anfang-text {order: 1; margin-bottom: 40px; }
    h2 {text-align: center;}
}
@media screen and (min-width:100px) and (max-width: 420px) {
    .grafik {width: 290px; height: 290px;}
    .grafik img {width: 30px;}
    .grafik p {font-size: 14px;}
}
@media screen and (min-width:100px) and (max-width: 362px) {
    h2 .mobil-klein {font-size: 20px;}
    .btn {width: 90%; padding: 1px}
}

/* ------------------------------------------- */

.leistungen {
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #242424;
    border-radius: 50px;
    overflow: hidden;
}

.leistungen-liste {
    justify-content: center;
    align-items: center;
    margin: 50px 30px 30px 30px;
}

.liste {list-style: none;}

.liste li {
    line-height: 1.1em;
    margin-bottom: 1.25em;
}

.liste li::before {
    content: "";
    background-image: url("../images/list-style.svg");
    background-position: center;
    background-size:100%;
    display: inline-block;
    width: 30px;
    height: 10px;
    margin-left: -40px;
    margin-right: 10px;
}

.leistungen-img img {
    object-fit: cover;
    width: auto;
    height: 100%;
    max-height: 600px;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1540px) {
    .leistungen {grid-template-columns: 60% 40%;}
}

@media screen and (min-width:100px) and (max-width: 800px) {
    .leistungen {grid-template-columns: 100%; border-radius: 30px;}
    .liste li::before {width: 20px; height: 7px;}
}
@media screen and (min-width:100px) and (max-width: 430px) {
    .leistungen {grid-template-rows: auto 300px;}
}

/* ------------------------------------------- */

.angebote {padding: 180px 0;}

.angebote p {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

h3 {
    font-family: 'Lato-Bold';
    font-size: 18px;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.0em;
    letter-spacing: 0.02em;
}

.angebote h3 {margin-top: 40px;}

.angebote-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    max-width: 80%;
}

.angebot {max-width: 400px;width: auto;} 
.angebot img {border-radius: 30px;}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1350px) {
    .angebote-block {max-width: 100%;}
}
@media screen and (min-width:100px) and (max-width: 900px) {
    h3 {font-size: 16px;}
}
@media screen and (min-width:100px) and (max-width: 700px) {
    h3 {font-size: 14px; text-align: center;}
    .angebote-block {max-width: 290px; grid-template-columns: 1fr; justify-items: center;}
    .angebot .liste li {margin-left: 20%;}
    .angebot {margin-bottom: 50px;}
    .angebote {padding: 80px 0;}
}

/* ------------------------------------------- */

footer a:hover {color: #f0cd14;}
footer .btn a:hover {color: inherit;}

.footer {
    background-color: #242424;
    border-radius: 50px;
    justify-content: space-between;
    align-items: center;
    padding: 30px 50px;
    margin-bottom: 30px;
}

footer img {width: 120px;}

.footer-nav {
   gap: 80px;
   font-size: 15px;
}

.copyright {
    text-align: center; 
    font-size: 13px;
    margin-bottom: 30px;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1380px) {
    footer .btn {width: 250px; height: 40px; border-radius: 15px; padding: 13px;}
    footer .btn a {font-size: 15px;}  
    .footer-nav {gap: 30px; font-size: 13px;}      
}
@media screen and (min-width:100px) and (max-width: 990px) {
    .footer-nav {flex-direction: column; gap: 0px; text-align: center;}
}
@media screen and (min-width:100px) and (max-width: 720px) {
    .footer {flex-direction: column; gap: 50px; border-radius: 30px;}
    .footer-nav {flex-direction: row; gap: 20px;} 
    .copyright {font-size: 11px;} 
}
@media screen and (min-width:100px) and (max-width:320px) {
    .footer-nav {flex-direction: column; gap: 0;}  
}

/* ------------------------------------------- */

.unterseite h1 {
    font-size: 50px;
    margin: 100px auto;
}

.impressum {
    display: grid;
    grid-template-columns: 550px 550px;
    justify-content: center;
    gap: 80px;
}

.impressum h4 {
    padding: 25px 0 0 0;
    margin: 0;
    line-height: 1.2;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width:1260px) {
    .impressum {grid-template-columns: 50% 50%;}
}

@media screen and (min-width:100px) and (max-width:950px) {
    .impressum {grid-template-columns: 80%; justify-content: start; gap: 20px;}
    .unterseite h1 {margin: 50px 0 40px 0;}
    .unterseite h3 {text-align: left;}
}

@media screen and (min-width:100px) and (max-width:400px) {
    .unterseite h1 {font-size: 30px;}  
    .impressum {grid-template-columns: 100%;}
}

/* ------------------------------------------- */

.datenschutz {width: 60%;}
.datenschutz p {margin-bottom: 50px;}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width:1260px) {
    .datenschutz {width: 70%;}
}

@media screen and (min-width:100px) and (max-width:1260px) {
    .datenschutz {width: 85%;}
}

/* ------------------------------------------- */

.kontaktformular {
    width: 70%; 
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width:480px) {
    .kontaktformular {width: 100%; }
}

/* ------------------------------------------- */

.content-text-block {
    width: 100%;
    gap: 7%;
    margin-bottom: 50px;
}

.content-text-block div {
    width: 45%;
}

.leistung-block {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.leistung-block .content-text-block {
    border-bottom: 1px solid #f0cd14;
    padding-bottom: 50px;
    margin-bottom: 100px;
}

/* ------------------------------------------- */

@media screen and (min-width:100px) and (max-width: 1350px) {
   .leistung-block {width: 100%;}
}

@media screen and (min-width:100px) and (max-width: 710px) {
    .content-text-block {flex-wrap: wrap;}
    .content-text-block div {width: 4100%;}
    .leistung-block {width: 80%;}
}

@media screen and (min-width:100px) and (max-width: 500px) {
   .leistung-block h2 {font-size: 25px;}
     .leistung-block {width: 90%;}
}
@media screen and (min-width:100px) and (max-width: 370px) {
   .leistung-block h2 {font-size: 23px;}
}


/* div, ul, li, p, h1, img, form, nav, section, svg, a, h2, h4 {border: 1px solid green;} */