:root {
  --blau: #31547d;
  --header-bgr:  #ffffff;
  /* --blau: #002f6c; */
}

    
    body {
      margin: 0;
      padding: 0;
      font-family:Arial, Helvetica, sans-serif;
      ;
      max-width: 100vw!important;
      color: var(--blau);
      min-height: 100vh;
    }

    .only-mobile {
      display: none;
    }

    .d-none {
      display: none!important;
    }

    header {
      position: fixed;
      right: 0;
      left: 0;
      top:0;
      /* width: 100vw; */
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--header-bgr);
      background-color: #ffffffcd;
      z-index: 5;
      height: 12vh;
    }

    .headerLink {
        color: var(--blau);
        cursor: pointer;
        border-radius: 4px;
    }

    .headerLink:hover {
        color: white;
        background-color:var(--blau);
        transition: all 425ms ease-in-out;
    }

    header img {
      height: 12vh;
    }

    header nav {
      display: flex;
      margin-right: 4px;
      /* gap: 20px; */
    }

    header nav a{
        padding: 20px;;
        text-decoration: none;
        font-size: 1.3em;
        color: #fff;
    }

    .overlayToCloseMenu {
      position: fixed;
      z-index: 2;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      /* width: 100vw;
      height: 100vh; */
    }

    .menu-button {
      width: 32px;
      height: 32px;
      padding: 6px;
      border-radius: 6px;
    }

    .bgr-blue {
      background-color: var(--blau);
    }

    section {
      height: 100vh;
      width: 100vw;
      background-image: url("img/pool2layer.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
    }

    section h1 {
      font-size: 68px;
      margin-bottom: 20px;
      /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
    }

    section span {
      font-size: 34px;
      /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
    }

    .container-blue {
      /* background-color: #727272; */
      /* padding: 50px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 20px; */
      /* background-color: var(--blau); */
    }

    .container h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    .headline-service {
      text-align: center;
      font-size: 2.4em;
      color: var(--blau);
      padding-top: 24px;
      padding-bottom: 24px;
    }

    .about-us {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
    }

    .person-foto {
      width: 230px;
      height: 230px;
      border-radius: 100%;
      object-fit: cover;
      margin-bottom: 14px;
    }

    .about-us-subheadline {
      font-size: 1.4em;
    }

    .about-us-text {
      max-width: 300px;
      text-align: justify;
      font-size: 1.3em;
    }

    /* .aboutus-container {
      background-image: url("aboutus.jpg");
      background-size: cover;
      max-width: 100vw;
      height: 100vh;
      padding: 50px;
      color: white;
      text-align: center;
    }

    .aboutus-container p {
      font-size: 18px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    } */

    footer {
      background-color: var(--blau);
      padding: 20px;
      text-align: center;
      color: white;
      font-size: 14px;
    }

    footer a {
      color: #fff;
      text-decoration: none;
    }

    .leistungen-container {
        width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-bottom: 40px; */
    /* margin-top: 40px; */
    text-decoration: none;

    border-bottom: 6px solid white;
    }

    .leistungsart-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100vw;
        height: 50vh;
        border: none;
        border-radius: 4px;
        color: white;
        background-size: 100% auto;
        background-repeat: no-repeat;
        object-fit:cover;
        /* border: 3px groove var(--blau); */
        transition: transform 0.5s;

        background-size: cover;
    }

    .leistungsart-container:hover {
      /* border: 3px groove rgb(52, 28, 236); */
      transform: scale(1.03);
    }



    .leistungenbild {
        width: 100%;
    }

    .leistungenheadline {
        font-size: 2.8em;
        margin: 20px;  
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .leistungentext {
        margin: 20px;
        font-size: 1.92em;
        text-decoration: none!;
        text-align: left;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .leistungssubheadline {
        font-size: 1.3em;

    }

    .headline-sand {
      text-align: center; 
      font-size: 1.5em; 
    }

    form {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cont {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
    .form-group {
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"],
    input[type="email"],
    textarea {
        width: 300px;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    textarea {
        resize: vertical;
        height: 150px;
    }
    input[type="submit"] {
        background-color: var(--blau);
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 20px;
    }
    input[type="submit"]:hover {
        background-color:var(--blau);

    }


    .bgr-black {
      background-color: var(--blau);
      max-width: 100vw;
      height: 50vh;
    }


    .foto-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


    .click-further {
      width: 88px;
      height: 88px;
      background-color: rgb(128, 128, 128);
      border-radius: 100%;
      border: 2px solid  rgb(128, 128, 128);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .click-further:hover {
      background-color: rgb(152, 152, 152);
      border: 2px solid white;
    }
  
    .click-further-left {
      margin-left: 2.5vw;
      }
  
     .click-further-right {
      margin-right: 2.5vw;
      }

      
      .foto-content {
        /* background-color: red; */
        /* width: 50%; */
        height: 100%;
      }

      .clickshow-img {
        width: unset;
        height: 100%;
    }

  
    .unterseitentitelbild {
      width: 100vw;
      height: 80vh;
      object-fit: cover;
    }

    .unterseiten-container {
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24px;
      text-align: center;
    }
    
    .unterseiten-text {
      max-width: 80vw;
      text-align: justify;
      font-size: 1.34em;
    }

    .danke {
      width: 100vw;
      height: 88vh;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 2em;
    }

    .logo {
      padding-top: 12px;
      max-width: 200px;
      height: 50px;
      margin-left: 24px;
    }


    @media (max-width: 1200px) { 

    .bgr-black {
      width: 100vw;
      /* height: 75vh; */
      /* height: unset; wenn bessere fotos da sind */
    }
  
    .foto-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .foto-content {
      /* background-color: red; */
      /* width: 50%; */
      height: 100%;
  
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .clickshow-img {
      max-width: unset;
      /* width: 100vw; */
      height: unset;
      max-height: 100%;
    }
  
    .click-further {
      width: 10vw;
      height: 10vw;
      position:absolute;
      margin-left: 0px;;
      margin-right: 0px;;
  
      }
  
      .click-further-left {
          left: 1.5vw;
      }
  
      .click-further-right {
          right: 1.5vw;
      }
  
      iframe {
          /* margin-top: 40px; */
          width: 100vw !important;
          margin-bottom: -4px;
          /* height: 50vh; */
      }

      .unterseitentitelbild {
        height: 50vh;
      }
  
    }


    @media (max-width: 680px) { 

      .only-wide-device {
        display: none;
      }

      .only-mobile {
        display: flex;
      }

      section h1 {
        font-size: 2.5em;
      }

      section span {
        font-size: 1.6em;
        margin: 0px 12px;
      }

      .about-us-text {
        max-width: 89vw;;
      }


      .nav-mobile {
        position: absolute;
        top: 12vh;
        right: 0;
        background-color: var(--header-bgr);
        flex-direction: column;
      }

      .headerLink {
        border-radius: 0px;
      }

      .leistungentext {
        font-size: 1.5em;
      }

      .clickshow-img {
        width: 100vw;
      }
    }


    @media (max-width: 350px) { 
      .leistungenheadline {
        font-size: 2.2em;
      }

      .leistungentext {
        font-size: 1.2em;
      }

      .about-us-text {
        max-width: 92vw;;
      }

      input[type="text"], input[type="email"], textarea
      {
        max-width: 85vw;;

      }

      .headline-service {
        font-size: 2em;
      }


      .unterseitentitelbild {
        height: 50vh;
      }

      .clickshow-img {
        width: 100vw;
      }
    }