@font-face {
    font-family: ns;
    src: url(ns.ttf);
}
:root, * {
   margin: 0px;
   padding: 0px;
   --ci-black: #221f1f;
   --ci-white: #fff;
   --ci-green: #038e53;
   --ci-grey:#f9f9f9;
   --ci-space: 1.5rem;
   scroll-behavior: smooth;
   scroll-padding: var(--headerheight);
      box-sizing: border-box;
          scrollbar-color: var(--ci-white) var(--ci-black);
}
body{
   font-family: "ns", sans-serif;
   font-size:15px;
   font-weight: 100;
   hyphens: auto;
   background-color: var(--ci-black);
   color: var(--ci-white);
   line-height: 1.5em;
   scroll-behavior: smooth;
   scroll-padding: var(--headerheight);
   &:has(.modal.active){
      overflow: hidden;
   }

}
a{
   color:var(--ci-white);
   text-decoration: none;
   cursor: pointer;
   &:hover{
      color:var(--ci-green);
   }
   &.green{
      color:var(--ci-green);
   }
}
h1,h2,h3,h4,h5,h6{
   font-weight:100;
       text-wrap-style: balance;
}
h1{
   font-size:2.1em;
   line-height: 1.1em;
}
h2{
   line-height:1.2em;
}
p{
   margin-bottom:calc(2 * var(--ci-space));
}
b{
   font-weight: 100;
    opacity: 0.5;
    text-transform: uppercase;
}
i.zitatname{
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0 9px;
    color: var(--ci-green);
    padding: 10px 40px 0 0;
    flex-wrap: wrap;
   &:before{
      content:'';
      width:20px;
      height: 1px;
      background-color: var(--ci-green);
   }
   span{
      color: var(--ci-black);
      font-size: 0.8em;
      width: 100%;
      line-height: 1em;
   }
}
ul{
   margin-left: var(--ci-space);
   margin-bottom:calc(2 * var(--ci-space));
   &:last-child {
      margin-bottom: 0px !important;
   }
}
ul.plus{
   list-style-type:"+  ";
}
.shadow{
   box-shadow: 0 -0.2rem 1rem #00000080 ;
}

form{
    display: contents;
}

label, .label{
    margin-bottom: calc(var(--ci-space) / 3.6);
    font-size: 0.8rem;
    display:block;
    line-height: 1.3em;
}
input, select, textarea{
    border: 1px solid var(--ci-white);
    padding: 10px;
    width: 100%;
    background-color: var(--ci-black);
    color: var(--ci-white);
    margin-bottom: var(--ci-space);
    &:focus-visible{
        outline-color: var(--ci-green);
        outline-style: solid;
        outline-width: 2px;
    }
    &:-webkit-autofill, &:-webkit-autofill:focus{
      background-color: var(--ci-black);
    }
    &:user-invalid{
        outline-color: #690000;
        outline-style: solid;
        outline-width: 1px;
        border-color: red;
        background-color: #690000;
    }
}

textarea{
   min-height:150px;
}


  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active  {
    color : black !important;
    -webkit-text-fill-color: black !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }


input[type="checkbox"]{
   display:none;
   + label{
      border: 1px solid var(--ci-white);
      cursor: pointer;
      padding: 10px;
      text-align: center;
      margin-bottom: calc(var(--ci-space) / 2);
   }
   :last-child + label{
      margin-bottom: var(--ci-space);
   }
   &:checked + label{
      background-color:var(--ci-green);
      color:var(--ci-white);
      border:1px solid var(--ci-green);
   }
   &:user-invalid + label{
      background-color:#690000;
      color:var(--ci-white);
      border:1px solid red
   }
}
.checkboxbox{
   display: flex;
   align-items: center;
   border: 1px solid #028e5436;
   margin-bottom: var(--ci-space);
   background-color: #028e5424;
   input[type="checkbox"]{
      display: unset;
      margin: 0px var(--ci-space) 0 calc(var(--ci-space) * 2);
      width: auto;
   
      + label{
         margin:0px;
         border:0px;
         flex-grow:1;
         text-align: left;
         background-color: unset;
         padding:var(--ci-space);
      }
      &:checked + label{
         background-color:var(--ci-green);
      }
      &:user-invalid + label{
         background-color:#690000;
      }
   }
   &:has( > input:checked){
      background-color:var(--ci-green);
   }
   &:has( > input:user-invalid){
      background-color:#690000;
   }
}

.buttons{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ci-space);
    .button{
        flex-grow: 1;
    }
}
.button{
    background-color: var(--ci-green);
    color: var(--ci-white);
    border:1px solid var(--ci-green);
    padding: 10px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    &:hover{
        background-color:var(--ci-black);
        color:var(--ci-white);
    }
    &.back{
      background-color:var(--ci-black);
      &:hover{
         color:var(--ci-green);
      }
    }
}

video{
   max-width: 900px;
   width: 100%;
}
img{
   width: 100%;
}
.modal{
   opacity: 0;
   pointer-events: none;
   z-index: 4;
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: color-mix(in srgb, var(--ci-black), transparent 20%);
   top: 0px;
   left: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(5px);
   transition: all ease 1s;
   &.active{
      opacity: 1;
      pointer-events: unset;
   }
   .content{
        width: 90%;
        height: 75%;
        overflow: auto;
        padding: 80px;
        background-color: var(--ci-black);
        color: var(--ci-white);
        position: relative;
        max-width: 600px;
        max-height: 600px;
      button{
         position: absolute;
         top: 0px;
         right: 0px;
         background-color: unset;
         border: unset;
         color: var(--ci-white);
         font-size: 20px;
         cursor: pointer;
         padding:30px;
      }
   }
}

/*.scroll {
   scroll-behavior: smooth;
   scroll-snap-type: y mandatory;
   overflow-y: scroll;
   height: 100dvh;
   margin: 0px;
   padding: 0px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;*/


   header {
      position: sticky;
      top: 0px;
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background-color:var(--ci-black);
      z-index: 1;
      .logo {
            background-image: url(img/Logo.svg);
            height: 80px;
            margin: calc(var(--ci-space) * 1) 0 calc(var(--ci-space) * 1) 24px;
            background-size: contain;
            width: 80%;
            background-repeat: no-repeat;
            background-position: center;
      }
      navigation {
         display: flex;
         flex-wrap: wrap;
         margin-bottom: var(--ci-space);
         gap: calc(var(--ci-space) / 4) var(--ci-space);
         justify-content: center;
         a {
            cursor: pointer;
            text-decoration: none;
            &.highlighted {
               color: var(--ci-green);
            }
         }
      }

   }

         .googlev2{
            background-color: #f1f1f1;
            color: var(--ci-black);
            position: sticky;
            top: var(--headerheight);
            padding: 10px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            div{
               margin-right:10px;
            }
            .star{
               clip-path: polygon(50% 0, 79% 90%, 2% 35%, 98% 35%, 21% 90%);
               background-color: #fbbc04;
               width: 20px;
               height: 20px;
               display:inline-block;
            }
            a{
               color:var(--ci-black);
               margin-left:10px;
            }
      }

                  .social{
               background-color:var(--ci-grey);
               color:var(--ci-black);
               display: flex;
               justify-content: center;
               div{
                  max-width: 1200px;
                  padding: 10px;
                  a.insta{
                     background: -webkit-linear-gradient(-70deg, #fdca00, #fc0062, #7317fc);
                     -webkit-background-clip: text;
                     -webkit-text-fill-color: transparent;
                     margin-right:10px;
                  }
                  .whatsapp{
                     color:#25d366;
                     margin-left:10px;
                  }
               }
            }


   section {
      scroll-snap-align: start;
      width: 100%;
      /*padding: var(--headerheight) 0dvh calc(3 * var(--stickyheight));*/
      padding:20px 0;
      > div{
         min-height: calc(100dvh - var(--headerheight) - var(--stickyheight));
         min-height:50vh;
      }
      &.light{
         background-color:var(--ci-white);
         color:var(--ci-black);
      }
      &.light-green{
         background-color: color-mix(in srgb, var(--ci-green), var(--ci-white) 90%);
         color:var(--ci-black);
      }
      .center-v {
         padding: var(--ci-space);

         display: flex;
         align-items: center;
      }
      .center-h{
         padding: var(--ci-space);
         display: flex;
         justify-content: center;
         margin: 0 auto;
      }
      .column{
         flex-direction: column;
      }
      .space{
         padding: var(--ci-space);
      }
      .center-text{
         text-align:center;
      }
      &.start-1 {
            /*.google{
               background-color:#f1f1f1;
               color:var(--ci-black);
               overflow:hidden;
               box-sizing:border-box;
               
               > div {
                  display: flex;
                  width:800vw;
                  gap:20px;
                  animation: rolling 60s infinite linear;
                  > div {
                     flex-grow: 1;
                     padding:20px;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-between;
                     .name{
                        font-size:0.6em;
                        line-height:1em;
                     }
                  }
                  &:hover{
                     animation-play-state: paused;
                  }
               }
            }*/
            .content{
               flex-grow: 1;
               display: grid;
               gap: 40px;           
               align-items: start;
               margin: 0 auto;
               max-width: 1200px;
               div{
                  padding:40px;
                  &:first-child{
                     height: 100%;
                     display: flex;
                     align-items: center;
                     flex-direction: column;
                     justify-content: center;
                     img{
                        max-width: 200px;
                     }
                     h2{
                        font-size:40px;
                        margin-top:20px;
                     }
                  }
                  &:last-child{
                     img{
                        aspect-ratio: 1.5 / 1;
                        object-fit: cover;
                        margin-bottom: 40px;
                     }
                  }
               }
            }
         
      }
      &.start-2{
         > div{
            display: grid;
            justify-items: start;
            align-items: start;
            gap:40px;
            max-width: 1200px;
            margin: 0 auto;
            > div{
               padding:40px;
               img{
                  margin-bottom:40px;
               }
            }
         }
      }
      &.start-3{
         .faq-link{
            width: 100%;
            max-width: 700px;
            display: flex;
            align-items: center;
            &:before{
               content: '';
               background-color: #fff;
               width: 10px;
               height: 10px;
               position: relative;
               display: inline-block;
               margin-right: 10px;
               clip-path: polygon(0% 10%, 10% 10%, 50% 80%, 90% 10%, 100% 10%, 50% 90%);
               transition: all ease 1s;
            }
            &.active:before{
               transform: scaleY(-1);
               /*clip-path: polygon(0% 90%, 50% 10%, 100% 90%, 90% 90%, 50% 20%, 10% 90%);*/
            }
         }
         .faq{
            opacity: 0;
            grid-column: 1;
            grid-row: 1;
            padding: 0;
            transition: all ease 1s;
            interpolate-size: allow-keywords;
            height: 0px;
            filter: blur(2px);
            pointer-events: none;
            font-size: 0.8em;
            margin-bottom:20px;
            max-width: 700px;
            text-align: center;
            
            div{
               display: flex;
               justify-content: center;
               gap: 30px;
               padding: 20px;
               a{
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
               }
               svg{
                  height:100px;
                  path{
                     fill:#fff;
                  }
               }
            }
            &.active {
               opacity: 1;
               height: min-content;
               filter: blur(0px);
               pointer-events: unset;
               padding: 10px 0 10px;
            }
         }
         hr{
            width: 100%;
            max-width: 700px;
            background-color: #fff;
            border: 0px;
            height: 1px;
            margin-bottom: 20px;
            opacity: 0.2;
         }
         



      }
      &.start-4{
         > div{
            display: grid;
           
            align-items: center;
            justify-items: center;
            div.karte{
               height: calc(100% - 80px);
               width: calc(100% - 80px);
               min-height: 400px;
               &.karte-cookie{
                  display:flex;
                  justify-content: center;
                  align-items: center;
                  a{
                     color:var(--ci-green);
                  }

               }
            
               iframe{
                  width: 100%;
                  height:100%;
               }
            }
         }
      }

   }
   footer {
      scroll-snap-align: center;
      min-height: unset;
      padding: var(--ci-space)!important;
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      gap: calc(var(--ci-space) / 3);
      flex-direction: column;
      background-color:var(--ci-black);
      img {
         height: calc(var(--ci-space)*2);
         flex-grow: 1;
         object-fit: contain;
      }
      a{
         white-space: nowrap;
      }
   }
   .sticky{
      position:sticky;
      bottom:0px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 3fr;
      justify-items: center;
      background-color:var(--ci-black);
      align-items: center;
      a{
         padding:5px;
         text-align:center;
         transition: all ease 0.3s;
         &:first-child{
            background-color: #107aca;
            height:100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover{
               background-color: color-mix(in srgb, #107aca, transparent 10%);
            }
            img{
               object-fit: contain;
               max-width: 60px;
               margin:10px;
            }
         }
         &:last-child{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--ci-green);
            &:hover{
               color:var(--ci-white);
               background-color: color-mix(in srgb, var(--ci-green), transparent 10%);
            }
         }
      }

   }
/*}*/








@media only screen and (min-width: 800px) {
   /*.scroll{
      & */header {
         .logo {
            height:80px;
         }
      }
      section{
         padding: 100px 0;
         &.start-1{
               .content{
                  grid-template-columns: 1fr 1fr;
                  div{
                     &:first-child{
                        img{
                           max-width: 300px;
                        }
                     }
                     &:last-child{
                        img{
                           max-width: calc(100% + 40px);
                           margin: -40px -40px 40px 40px;
                        }
                     }
                  }
               }
               /*.google{
                  > div{
                     width: 300vw;
                  }
               }*/
            
         }
         &.start-2{
            > div{
               grid-template-columns: 1fr 1fr;
               div:first-child img{
                  max-width: calc(100% + 40px);
                  margin: -40px 40px 40px -40px;
               }
               div:last-child{
                  grid-column-start: 1;
                  grid-column-end: 3;
               }
            }
         }
         &.start-4{
            > div{
                grid-template-columns: 1fr 1fr;
            }
         }
      }
      footer{
         flex-direction: row;
         gap: var(--ci-space);

      }
   }

/*}*/


@keyframes rolling {
   0% { transform: translate(0) }
   100%   { transform: translate(-50%) }
}



@view-transition {
    navigation: auto
}

@keyframes out {
    0% {
        opacity: 1;
        z-index: 1;
        filter: blur(0px)
    }

    100% {
        opacity: 0;
        z-index: 1;
        filter: blur(2px)
    }
}

@keyframes in {
    0% {
        opacity: 0;
        z-index: 2;
        filter: blur(2px)
    }

    50%,100% {
        opacity: 1;
        z-index: 2;
        filter: blur(0px)
    }
}

::view-transition-old(root) {
    animation: out 1.5s;
    animation-timing-function: cubic-bezier(0.89, 0.01, 0.23, 1.04)
}

::view-transition-new(root) {
    animation: in 1.5s;
    animation-timing-function: cubic-bezier(0.89, 0.01, 0.23, 1.04)
}














/*Cookies*/
.wrapper {
    position: fixed;
    bottom: 100px;
    right: -370px;
    max-width: 345px;
    width: 100%;
    background: var(--ci-black);
    border-radius: 8px;
    padding: 15px 25px 22px;
    transition: right 0.3s ease;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 8px 0px;
    z-index: 100;
}
  
.wrapper.show {
    right: 50px;
}
  
.wrapper header {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.wrapper .data {
    margin-top: 16px;
}

.wrapper .buttons {
    margin-top: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  
.buttons .button {
    border: none;
    color: #fff;
    padding: 8px 0;
    border-radius: 4px;
    background: var(--ci-green);
    cursor: pointer;
    width: calc(100% / 2 - 10px);
    transition: all 0.2s ease;
    border: 2px solid var(--ci-green);
}

.buttons .button:hover,
.buttons .button:focus {
    background-color: var(--ci-black);
    border: 2px solid var(--ci-green);
    color: var(--ci-white);
}