@font-face {
    font-family: 'BalooThambi';
    src: url('BalooThambi2-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'BalooThambi2';
    src: url('BalooThambi2-SemiBold.ttf') format('truetype');
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'BalooThambi', sans-serif;
    scroll-behavior: smooth;
}

body {
    background:#fff;
}

.preventselect {
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}

img {
    user-select: none; 
    -webkit-user-drag: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
}

br {
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}

::selection {
    background:#FAB01F;
    color: #000000;
}

::-webkit-scrollbar {
    display: none;
}

header {
    color: #fff;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 25px;
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0;
}

#logo {
    width: 130px;
    height: 100%;
}

header div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 70px 0 70px;
}

header div img {
    width: 40px;
}

header div a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.2s;
}

header div a:hover {
    color: #FAB01F;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
    background-image: url(hero-foto.png);
    background-repeat: no-repeat;
    background-position: right 180px top;
    background-size: contain;
    padding: 110px 0;
}

main div {
    display: flex;
    flex-direction: column;
    text-align: left;
    max-width: 50%;    
    margin-left: -400px;
}

main div h1 {
    font-size: 120px;
    line-height: 120px;
}

main div p {
    font-size: 40px;
    color: #6e6e6e;
}

main div div {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    margin: 0;
}

main div button {
    margin-top: 10px;
    background: #000;
    color: #fff;
    font-size: 30px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    transition: 0.3s;
    gap: 2px;
    display: flex;
    align-items: center;
    padding: 6px 20px;
    width: 300px;
    justify-content: center;
}

#spanh {
    text-decoration: underline #FAB01F;
}

main div button:hover {
    scale: 1.009;
}

main div button img {
    width: 45px;
    height: 45px;
    margin-left: -10px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.192);
  overflow: none;
  backdrop-filter: blur(7px);
}

.modal-content { 
  position: relative;
  width: 80%;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #fff;
  flex-direction: column;
  margin: 4% auto;
    overflow: scroll;
}

.modal-content h3 {
    font-size: 50px;
    margin-top: 40px;
  }

.formular {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    gap: 20px;
    border-radius: 30px;
    background: #f1f1f1;
    padding: 50px;
}

.formular input {
    border: none;
    outline: none;
    border-radius: 30px;
    background: #dadada;
    width: 100%;
    height: 40px;
    font-size: 20px;
    padding: 5px 10px 5px 20px;
    transition: 0.5s;
}

.formular textarea {
    border: none;
    outline: none;
    border-radius: 30px;
    background: #dadada;
    width: 100%;
    height: 130px;
    font-size: 20px;
    padding: 10px 10px 10px 20px;
    resize: none;
    transition: 0.5s;
}

.formular input:focus {
    border-radius: 18px;
}

.formular textarea:focus {
    border-radius: 18px;
}

.formular button {
    border: none;
    outline: none;
    border-radius: 30px;
    background: #FAB01F;
    width: 100%;
    height: 50px;
    font-size: 20px;
    padding: 5px 10px 5px 20px;
    cursor: pointer;
    transition: 0.3s;
}

.formular button:hover {
    scale: 1.007;
}

.close {
  color: #aaa;
  float: right;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 50px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

.kontakt {
    margin: 20px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.kontakt a {
    color: #fff;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 30px;
    padding: 5px 15px;
    transition: 0.3s;
}

.kontakt a:hover {
    color: #FAB01F;
    scale: 1.008;
}

.kontakt a img {
    width: 40px;
    height: 40px;
}

#leistungen {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 43px;
    padding-top: 77px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-container label {
    width: 100%;
    font-size: 14px;
}

.checkbox-container input {
    width: 20px;
    height: 20px;
}

#leistungen h2 {
    font-size: 80px;
    text-decoration: underline #FAB01F;
    margin-left: -900px;
}

#container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 40px;
    flex-wrap: wrap;
    width: 80%;
}

#leistungen1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

#leistungen2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 30px;
    margin-top: 15px;
    flex-wrap: wrap;
}

#leistungen1 div {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 50px;
    padding: 20px;
    flex-direction: column;
    width: 250px;
}

#leistungen2 div {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 50px;
    padding: 20px;
    flex-direction: column;
    width: 250px;
}

#container div p {
    font-size: 22px;
    margin-top: 20px;
    padding: 2px 10px;
    background: #fff;
    border-radius: 30px;
}

#container div img {
    width: 150px;
    height: 150px;
    background: #fff;
    padding: 6px;
    border-radius: 100px;
}

.jztrmn {
    margin-top: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    border-radius: 50px;
    background: #000000;
    width: 100%;
    font-size: 20px;
    padding: 5px 25px;
    transition: 0.5s;
    color: #fff;
    font-size: 21px;
    cursor: pointer;
}

.jztrmn:hover {
    scale: 1.008;
}

.jztrmn img {
    width: 50px;
    height: 50px;
}

#uberuns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 63px;
    padding-top: 77px;
    margin-bottom: 150px;
}

#uberuns h3 {
    font-size: 80px;
    text-decoration: underline #FAB01F;
    margin-left: -1000px;
    margin-bottom: -5px;
}

#uberuns p {
    font-size: 26px;
    max-width: 70%;
    color:#636363;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 40px 40px 20px 40px;
    border-radius: 30px 30px 0 0;
    margin-top: 100px;
}

footer a {
    color: #fff;
    cursor: pointer;
    font-size: 25px;
}

footer a:hover {
    color: #FAB01F;
}

.footer-container {
    width: 70%;
}

.footer-container hr {
    width: 100%;
    border: none;
    background: #fff;
    height: 1px;
    margin: 30px 0;
}

.recht {
    position: relative;
}

.info {
    display: flex;
    align-items: center;
    justify-content: start;
    color: #fff;
    font-size: 25px;
    margin: 10px 0;
    position: relative;
}

.info div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.rechtliches {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
}

.recht-container {
    text-align: left;
    margin: auto;
    max-width: 55%;
}

.recht-container h1 {
    text-align: left;
}

.recht-container p {
    text-align: left;
}


@media (max-width: 1700px) {
    main {
        background-image: none;
    }

    main div { 
        margin-left: 0px;
        max-width: 60%
    }

    #brl {
        display: none;
    }

    #leistungen h2 { 
        margin-left: 0px;
    }

    #uberuns h3 {  
        margin-left: 0px;
    }
}

@media (max-width: 1350px) {
    .info {
        flex-direction: column;
        gap: 20px;
    }

    #div1 {
        position: relative !important;
    }

    .formular {
        width: 80%;
    }

    .kontakt a {
        font-size: 18px;
    }

    .kontakt a img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 1203px) {
    main div h1 {
        font-size: 100px;
        line-height: 100px;
    }

    .recht-container {
        max-width: 95%;
    }
}

@media (max-width: 1003px) {
    header div {
        margin: 0 20px;
    }
}

@media (max-width: 840px) {
    main div h1 {
        font-size: 80px;
        line-height: 80px;
    }

    main {
        margin-top: 50px;
    }

    main div p {
        font-size: 30px;
    }
    
    main div button {
        font-size: 25px;
        padding: 6px 15px;
        width: 250px;
    }
}

.menu {
    display: none;
    position: fixed;
    align-items: center;
    transform: translateX(1000px);
    transition: transform 0.2s;
    width: 50%;
    height: 100%;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: #fdfdfd;
    border-left: 0.5px solid #c5c5c5;
}

.menu-links {
    margin-top: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.menu-links a {
    color: #fff;
    background: #000;
    border-radius: 50px;
    padding: 3px 10px;
    width: 80%;
}

.hamburger {
    display: none;
    position: absolute;
    z-index: 100;
    padding: 4px;
    border: none;
    right: 10px;
    background: none;
    cursor: pointer;
}

.menuIcon img {
    height: 45px;
    width: 45px;
}

.closeIcon img {
    height: 45px;
    width: 45px;
}

.closeIcon {
    display: none;
}

.showMenu {
    transform: translateX(100%);
}

@media (max-width: 843px) {
    footer {
        padding: 20px 20px 20px 20px;
    }

    .footer-container {
        width: 80%;
    }

    header div:nth-child(2) {
        display: none;
    }

    .menu {
        display: block;
    }

    .hamburger {
        display: block;
    }
}

@media (max-width: 780px) {
    #leistungen {
        margin-top: 10px;
        padding-top: 80px;
    }
    
    #leistungen h2 {
        font-size: 65px;
    }
    
    #leistungen1 div {
        width: 200px;
    }
    
    #leistungen2 div {
        width: 200px;
    }
}

@media (max-width: 690px) {
    footer a {
        font-size: 21px;
    }

    .footer-container {
        width: 90%;
    }

    .info {
        font-size: 21px;
    }

    .footer-container hr {
        margin: 20px 0;
    }

    main div h1 {
        font-size: 65px;
        line-height: 65px;
    }

    main div p {
        font-size: 25px;
    }
    
    main div button {
        font-size: 23px;
        padding: 3px 7px;
        width: 200px;
    }
}

@media (max-width: 640px) {
    #leistungen1 div {
        width: 97%;
    }
    
    #leistungen2 div {
        width: 97%;
    }

    #uberuns p {
        width: 100%;
        max-width: none;
    }
    .kontakt {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 535px) {
    footer a {
        font-size: 18px;
    }

    .info {
        font-size: 18px;
    }

    main {
        width: 100%;
        margin-top: 30px;
    }

    main div {
        width: 95%;
        max-width: 95%;
    }

    main div h1 {
        font-size: 60px;
        line-height: 60px;
    }

    main div p {
        font-size: 25px;
    }
    
    main div button {
        font-size: 23px;
        padding: 3px 7px;
        width: 200px;
    }

    #container div img {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 470px) {
    .footer-container {
        width: 95%;
    }

    main div h1 {
        font-size: 50px;
        line-height: 50px;
    }

    footer {
        padding: 10px;
    }

    #leistungen {
        margin-top: -70px;
        padding-top: 80px;
    }
    
    #leistungen h2 {
        font-size: 55px;
    }

    #uberuns h3 {
        font-size: 55px;
    }

    #uberuns p {
        font-size: 20px;
        width: 90%;
    }

    .modal-content h3 {
        display: none;
    }
}

@media (max-width: 450px) {
    main div h1 {
        font-size: 50px;
        line-height: 50px;
    }

    main div  {
        width: 95%;
    }

    main div p {
        font-size: 23px;
    }
    
    main div button {
        font-size: 23px;
        padding: 3px 5px;
        width: 170px;
    }

    #uberuns {
        margin-bottom: 60px;
    }

    footer {
        margin-top: 20px;
    }
}

@media (max-width: 420px) {
    .footer-container {
        width: 100%;
    }

    footer {
        padding: 10px;
    }

    footer a {
        font-size: 17px;
    }

    .info {
        font-size: 17px;
    }
    
    .footer-container hr {
        margin: 10px 0;
    }
}

@media (max-width: 390px) {

    .recht a {
        color: #e0e0e0;
    }

    footer {
        font-size: 16px;
    }
    
    .footer-container hr {
        margin: 10px 0;
    }
}

@media (max-width: 385px) {

    footer a {
        font-size: 15px;
    }

    .info {
        gap: 10px;
        font-size: 15px;
    }

    main div h1 {
        font-size: 45px;
        line-height: 45px;
    }

    main div button img {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 370px) {

    main div h1 {
        font-size: 40px;
        line-height: 40px;
    }

    main div p {
        font-size: 21px;
    }

    main div button {
        font-size: 21px;
        padding: 3px 5px;
        width: 140px;
    }

    main div button img {
        width: 30px;
        height: 30px;
    }
}