*{
  margin: 0;
  padding: 0;
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  text-align: center;
  scroll-behavior: smooth;
  background-color: #2d2a30;
}

section {min-height: 100%;}
a {text-decoration: none;}
li {list-style: none;}
h1, h2, h3, a {font-family: 'Roboto', sans-serif; font-weight: 500; color: #e0ac1c; text-transform: uppercase;}
h2{color: #e0ac1c;}
h3 {font-size: 40px; padding-top: 8%; margin-bottom: 5px; color: #e0ac1c;}
h4 {font-family: 'Roboto Slab', serif; color: #fff; padding-bottom: 25px;}
p  {font-family: 'Roboto Slab', serif; color: #fff;}

hr {
  width: 30px;
  height: 3px;
  border: 0;
  color: #e0ac1c;
  background-color: #e0ac1c;
  margin: 0 auto 40px auto;
}

li, #logo, img, .btn-primary, .fa-bars, .slider-nav a, .to-down,.footer-distributed .footer-links a, .footer-icons a, .footer-distributed .footer-company-about a {
  transition: all 300ms;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
}

.h3-color {text-shadow: 2px 2px 4px #000000;}
.h4-color {text-shadow: 2px 2px 4px #000000; color: #e0ac1c;}
.hr-color {box-shadow:  2px 2px 4px #000000;}


/*********** All end **********/
/*********** Header begin **********/


nav{
  z-index: 10;
  background-color: white;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
}
nav ul{
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
nav li{
  height: 50px;
}
nav a{
  height: 100%;
  padding: 0 30px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: black;
  font-size: 16px;
}
nav a:hover{
  background-color: #f0f0f0;
}
nav li:first-child{
  margin-right: auto;
}
.sidebar{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.sidebar li{
  width: 100%;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;
}
@media(max-width: 800px){
  .hideOnMobile {display: none;}
  .menu-button  {display: block;}
  .mainbar a    {font-size: 20px;}
  .mainbar li   {height: 40px;}
  .sidebar li   {font-size: 30px;}
}

@media(max-width: 500px){
  .sidebar      {width: 100%;}
  .mainbar a    {font-size: 17.5px;}
  .mainbar li   {height: 40px;}
  .sidebar a    {font-size: 30px;}
}

@media(max-width: 450px){
  .mainbar a    {font-size: 15px;}
}

@media(max-width: 380px){
  .mainbar a    {font-size: 12.5px;}
}


/*********** Header end **********/
/*********** Home begin **********/


#home {
  background: url(../IMG/Startbild.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.Start-Image {
  margin-top: 25vh;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border-width: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Start-Image IMG {
  width: 300px;
  height: auto;
}

.to-down {
  background: white;
  width:50px;
  height:50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:32px;
  color:#1f1f1f;
  text-decoration: none;
  cursor: pointer;
  margin: 50px auto 0 auto;
}

.to-down:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

.hr-Start {
  background: transparent;
  color: transparent;
}


/*********** Home end **********/
/*********** About begin **********/


#about img {
  width: 240px;
}

#about img:Hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#about h4 {
  font-size: 25px;
}

#about p {
  margin: 0 5%;
  text-align: justify;
  width: 90%;
}

.p-bottom {
  padding-bottom: 10vh;
  color: #e0ac1c;
}


/*********** About end **********/
/*********** Sience begin **********/


#sience img {
  width: 240px;
}

#sience img:Hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

#sience h4 {
  font-size: 25px;
}

#sience p {
  width: 700px;
  margin: 0 auto 12% auto;
}


/*********** Sience end **********/
/*********** Projects begin **********/


#work {
  background: url(../IMG/Dacharbeiten.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 100px;
}

.card {
  width: 350px;
  background-color: #2d2a30;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20px;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  font-size: 28px;
  margin-bottom: 8px;
  padding-top: 0;
  text-align: left;
  text-transform: none;
}

.card-content p {
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}

.card-content .btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #e0ac1c;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 16px;
  color: #2d2a30;
  text-transform: none;
}


/*********** Projects end **********/
/*********** Contact begin **********/


#contact {
  background: url(../IMG/Checkout.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

form input, textarea {
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 2px solid;
  border-color: #2d2a30;
  outline: none;
}

#contactForm input:first-child {
  margin-top: 10px;
}

form input {
  width: 60%;
  height: 30px;
}

form textarea {
  width: 60%;
  height: 200px;
  resize: none;
}

.g-recaptcha {
  margin-left: 20%;
}

.input_text {
  color: #2d2a30;
  padding-left: 10px;
}

::-webkit-input-placeholder {color: #999999;}
::-moz-input-placeholder {color: #999999;}
:-ms-input-placeholder {color: #999999;}
:-moz-input-placeholder {color: #999999;}

.btn-primary {
  background-color: #f0f0f0;
  color: #2d2a30;
  width: 62%;
  height: 50px;
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
}

.btn-primary:hover {
  background-color: #2d2a30;
  color: #f0f0f0;
}


/*********** Contact end **********/
/*********** Footer begin **********/


footer {
  position: relative;
  bottom: 0;
  font-family: 'Roboto', sans-serif;
}

@media (max-height: 800px) {
  footer {position: static;}
}

.footer-distributed {
  background-color: #2d2a30;
  box-sizing: border-box;
  text-align: left;
  padding: 50px 50px 60px 50px;
  font-family: 'Roboto', sans-serif;
}

.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
  display: inline-block;
  vertical-align: top;
  font-family: 'Roboto', sans-serif;
}

.footer-distributed .footer-left {
  width: 30%;
}

.footer-distributed .footer-h3 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  margin: 0;
}

.footer-distributed .footer-h3 span {
  color: #e0ac1c;
}

.footer-distributed .footer-links {
  color: #fff;
  margin: 20px 0px 12px;
}

.footer-distributed .footer-links a {
  display: inline-block;
  line-height: 1.8;
  padding: 0 5px;
  text-decoration: none;
  color: inherit;
}

.footer-distributed .footer-company-name {
  color: #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-center {
  width: 35%;
}

.footer-distributed .footer-center i {
  background-color: #33383b;
  color: #fff;
  font-size: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-phone {
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p {
  display: inline-block;
  color: #fff;
  vertical-align: middle;
  margin: 0;
}

.footer-distributed .footer-center p span {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 2.0;
}

.footer-distributed .footer-center p a{
  color: #e0ac1a;
  text-decoration: none;
}

.footer-distributed .footer-right {
  width: 30%
}

.footer-distributed .footer-company-about {
  line-height: 20px;
  color: #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}

.footer-distributed .footer-company-about a{
  line-height: 20px;
  color: #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
  text-transform: none;
}

.footer-distributed .footer-company-about a:hover {
  color: #e0ac1c;
}

.footer-distributed .footer-icons {
  margin-top: 25px;
}

.footer-distributed .footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.footer-distributed .footer-icons a:hover {
  background-color: #e0ac1c;
}

.footer-links a:hover {
  background-color: #e0ac1c;
}

@media (max-width: 1300px) {
  .footer-distributed .footer-h3 {font-size: 30px;}
}

@media (max-width: 1100px) {
  .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }
  .footer-distributed .footer-center i {margin-left: 0;}
  .footer-distributed .footer-center p {display: block; margin-bottom: 25px;}
  .footer-distributed .footer-left .footer-h3  {font-size: 25px;}
}


/*********** Footer end **********/
/*********** ScrollToTop begin **********/


.to-top {
  background: white;
  position: fixed;
  bottom: 16px;
  right:32px;
  width:50px;
  height:50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:32px;
  color:#1f1f1f;
  text-decoration: none;
  opacity:0;
  pointer-events: none;
  transition: all .4s;
}

.to-top.active {
  bottom:32px;
  pointer-events: auto;
  opacity:1;
}

.to-top:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}


/*********** ScrollToTop end **********/
/*********** Media Queries begin **********/


@media screen and (max-width: 1100px) {#home h1 {font-size: 90px; margin-top: 200px;}}

@media screen and (max-width: 1024px) {
#home h1 {font-size: 80px; margin-top: 200px;}
#home h2 {font-size: 22px;}
h3 {padding-top: 12%;}
#sience p {width: 80%;}
#projects {width: auto;}
#projects ul li {width: 100%; float: none;}
#projects ul li:last-child {padding-bottom: 20%;}
#projects img {width: 55%; height: auto;}
form input, form textarea {width: 60%;}
.btn-primary {width: 62%;}
}

@media screen and (max-width: 875px) {#home h1 {font-size: 70px; margin-top: 200px;}}
@media screen and (max-width: 750px) {#home h1 {font-size: 60px; margin-top: 200px;}}
@media screen and (max-width: 650px) {#home h1 {font-size: 50px; margin-top: 200px;}}
@media screen and (max-width: 550px) {#home h1 {font-size: 40px; margin-top: 200px;}}
@media screen and (max-width: 450px) {#home h1 {font-size: 30px; margin-top: 200px;}}
@media screen and (max-width: 350px) {#home h1 {font-size: 20px; margin-top: 200px;}}
@media screen and (max-width: 250px) {#home h1 {font-size: 15px; margin-top: 200px;}}


@media screen and (max-width: 480px) {
  #home h2 {width: 70%; height: auto;}
  #projects img {width: 70%; height: auto;}
  form input, form textarea {width: 70%;}
  .btn-primary {width: 72%;}
}


/*********** Impressum-Datenschutz begin **********/


.Impressum, .Datenschutz {
  min-height: 100vh;
  background-color: #2d2a30;
}

.Datenschutz h4, .Impressum h4 {
  font-size: 24px;
  text-align: left;
  margin: 0 5%;
}

.Datenschutz p, .Impressum p {
  text-align: justify;
  font-size: 16px;
  margin: 0 5%;
}

.bottom-p {
  padding-bottom: 10vh;
}

.Datenschutz table, .Impressum table{
  text-align: justify;
  font-size: 16px;
  margin: 0 5%;
  color: #fff;
  font-family: 'Roboto Slab', serif;
  padding-bottom: 10vh;
}

.column-1 {
  padding-right: 16px;
}


/*********** Impressum-Datenschutz end **********/
/*********** Leistungen begin **********/

.Placeholder-IMG {
  background: url(../IMG/Dacharbeiten.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

#Steildach, #Flachdach, #Dachklempnerei, #Fassaden, #Dach-undFassadenreinigung {
  width: 80%;
  min-height: 25vh;
  background-color: #2d2a30;
  margin-left: 10%;
  margin-bottom: 10vh;
  padding-bottom: 12%;
}

.Placeholder-Section {
  min-height: 10vh;
}

.p-Leistungen {
  text-align: left;
  margin: 0 10%;
  font-family: 'Roboto Slab', serif;
  color: #fff;
}

.slider-wrapper {
  position: relative;
  width: auto;
  margin: 5%;
}

.slider {
  display: flex;
  aspect-ratio: 16 / 9;
  overflow-x:  auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
  border-radius: 0.5rem;
  overflow: hidden;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1
}

.slider-nav a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #2d2a30;
  opacity: 0.75;
  transition: opacity ease 250ms;
}

.slider-nav a:hover {
  opacity: 1;
  background-color: #e0ac1c;
}

#slide-1:checked ~ .slider-nav a{
  background-color: #e0ac1c;
}

@media screen and (max-width: 900px) {
  #Steildach h3, #Flachdach h3, #Dachklempnerei h3, #Fassaden h3, #Dach-undFassadenreinigung h3 {font-size: 30px; }
  .ul-Leistungen, .p-Leistungen {font-size: 16px;}
}
@media screen and (max-width: 450px) {
  #Steildach h3, #Flachdach h3, #Dachklempnerei h3, #Fassaden h3, #Dach-undFassadenreinigung h3 {font-size: 20px; }
  .ul-Leistungen, .p-Leistungen {font-size: 12px;}
}


/*********** Leistungen end **********/