:root {
           --primary-color: #154718;
           --secondary-color: #25752A;
           --text-color: white;
           --background-color: rgb(21, 21, 21);
       }
       
       .p {
           margin-left: 40px;
       }

       body {
           font-family: Roboto, sans-serif;
           background-color: var(--background-color);
           color: var(--text-color);
           margin: 0px;

       }

       a:hover {
           color: rgba(255, 255, 255, 0.784);

       }

       .logo-container {
           position: fixed;
           display: flex;
           right: 8px;
           top: 8px;
       }

       .logo {
           width: 55px;
           height: 55px;
         

       }

       .main {
           flex: 1;
       }

       .Container {
           background-image: url('./img/main.png');
           height: 50vh;
           max-width: 100%;
           margin-bottom: 60px;

       }



      
           
               
         

       header a {

           color: white;
           text-decoration: none;
           margin: 10px;
       }

       header {

           display: flex;
           justify-content: flex-start;

           font-size: 15px;
           height: 30px;
       }

       .head {

           display: flex;
           justify-content: center;
           align-items: center;
           height: 260px;
           padding: 20px;
           font-size: clamp(1rem, calc(8vw - 15px), 50px);
           color: rgb(255, 255, 255);
           text-shadow: 2px 2px 4px #0000009a;
       }

       .kopf {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           position: relative;
       }

       #effect {
           animation: fadeIn 1.5s ease-in-out;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: translateX(-700px);
           }
           to {
               opacity: 1;
               transform: translateX(0);
           }
       }

       .head h4 {
           position: absolute;
           margin-top: 10px;
           color: var(--text-color);
           text-shadow: 1px 1px 2px #0000009a;
           bottom: -10vh;
           font-size: clamp(1rem, calc(7vw - 10px), 40px);
           text-align: center;
       }

       .head img {
           max-width: 120px;
           width: 20vw;
           height: 20vw;
       }

       @media (max-width: 500px) {
           .Container {
               height: 37vh;
           }
       }
       @media (max-width: 1000px) and (min-height: 1000px) {
           .Container {
               height: 35vh;
               
           }
         }


       @media (max-width: 400px) {
           .Container {
               height: 33vh;
           }

           .head {
               height: 20vh;
               margin-bottom: 40px;
           }

           .head h1 {
               font-size: 40px;
           }

           #imp {
               font-size: 30px;
               margin-left: 40px;
           }

           .head img {
               display: none;
           }

           .head h4 {
               font-size: 20px;
               text-align: center;
           }
           
       }

       @media (max-width: 700px) {
           .head img {
               position: absolute;
               max-width: 200px;
               width: 20vw;
               height: 20vw;
               top: 50px;

           }

       }

       @media (min-width: 700px) {
           .head img {
               top: 10px;

           }

           .head h4 {
               bottom: -10vh;
               left: 20vh;
               text-align: right;
           }

       }

       @media (max-width: 500px) and (max-height: 330px) {
           .Container {
               height: 100vh;
           }

           .head h4 {
               bottom: -19vh;
           }

           .head img {
               display: none;
           }

           .head {
               height: 50vh;
               margin-bottom: 70px;
           }
       }

       .start {

           margin-left: 20px;
           margin-right: 20px;
           margin-top: 20px;
           padding: 20px;
           border-radius: 8px;
       }
       .starttwo {
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 60px;
            padding: 20px;
            border-radius: 8px;
       }

       .breite {
           width: 50%;
       }

       .mitte {
           display: flex;
           justify-content: center;
           align-items: center;
           text-align: center;


       }


       .rahmen {
           padding: 20px;
           border-radius: 8px;
           border: 2px solid rgba(255, 255, 255, 0.1);
       }

       /* Dienstleistung */
       .projekt {
           
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           align-items: center;
           border: none;
           gap: 10px;

       }

       .Projekt {
           margin-top: 30px;
           object-fit: cover;
           width: 30vh;
           height: 90px;
           border-radius: 8px;
       }
       #zuServices {
           width: 40vh;
           height: 90px;
         }
        @media (min-width: 700px) {
    
           .Projekt {
               width: 30vw;
               height: 120px;
            }
       }
       @media (max-width: 400px) {
           .Projekt {
               width: 100vw;
               height: 80px;
           }
           .projekt {
               margin-bottom: 50px;
               gap:0px;
           }
       }

       @media (max-width: 500px) and (max-height: 330px) {
           .Projekt {
               margin-top: 50px;
           }
           #zuServices {
               width: 70vw;
               height: 80px;
           }
           .starttwo {
               margin-top: 135px;
           }
       }

       .Projekt:hover {
           transform: scale(1.05);
           transition: transform 0.3s;
       }

       
       

       #dienst {
           height: 120px;
           border-radius: 8px;
       }

       .dienstbtn {
           background-color: transparent;
           color: var(--text-color);
           border: none;
           padding: 5px 10px;
           cursor: pointer;
           border-radius: 8px;

       }

       @media (min-width: 700px) {

           #dienst {
               max-width: 100%;
               width: 290px;
               height: 150px;
           }
       }

       @media (max-width: 400px) {
           .Projekt {
                width: 80vw;
                margin-top: 10px;
                padding-top: 0px;
           }

        
            .projekt {
               flex-wrap: wrap;
               gap: calc(15vw + 5px);
           }
       }

       @media (max-width: 500px) and (max-height: 330px) {
           #dienst {
               max-width: 100%;
               width: 290px;
               height: 150px;
           }
       }

       /* Über mich */
       #ümich-section {
           padding: 100px 20px;
       }

       .ümich h2 {
           text-align: center;
           margin-bottom: 40px;
       }


       details {
           background-color: rgb(13, 13, 13);
           margin-top: 10px;
           margin-left: 40px;
           margin-right: 40px;
           max-width: 100%;
           border-radius: 8px;
           padding: 5px 10px;
       }

       .sum summary {
           display: flex;
           align-items: center;
           gap: 10px;
           font-size: 14px;
           font-weight: bold;
           cursor: pointer;
           color: white;
       }

       .sum .number {
           background-color: var(--secondary-color);
           color: white;
           border-radius: 50%;
           min-width: 20px;
           min-height: 20px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 12px;
       }

       .sum li {
           margin-left: 20px;
           margin-top: 10px;
           color: rgba(255, 255, 255, 0.8);
           padding-bottom: 4px;
       }

       .sum a {
           display: inline-block;
           background-color: var(--secondary-color);
           color: var(--text-color);
           padding: 5px 10px;
           border-radius: 8px;
           text-decoration: none;
           text-shadow: 1px 1px 2px #0000009a;
       }

       .sum a:hover {
           background-color: var(--primary-color);
           color: var(--text-color);
           transform: scale(1.05);
           transition: transform 0.3s;
       }

       /* Referenzen */
       .referenz {
           background-color: var(--background-color);
           display: flex;
           justify-content: space-around;
           border: none;
           margin-bottom: 60px;
          
       }

       .ref {
           max-width: 80vw;
           width: 320px;
            margin-top: 20px;
       }

       .effect2 {
           opacity: 0;
       }
       .effect2visible {
          opacity: 1;
          transition: opacity 1.5s ease-in-out;
       }



       /* Kontakt */
       .mail {
           object-fit: cover;
           max-width: 230px;
           height: 120px;
           border-radius: 8px;
           
       }

       .anfragediv {

           margin-left: 20px;
           padding: 20px;
           display: flex;
           justify-content: center;
           align-items: center;

       }


       .mail:hover {
           text-decoration: none;
           color: white;
           transform: scale(1.05);
           transition: transform 0.3s;
       }

       .mail img {
           width: 60px;
           height: 40px;
           
       }

       .Sm img {

           width: 50px;
           height: 30px;
       }

       /* Navigation */
       .links {
           margin-top: 600px;
           margin-left: 20px;
           padding: 20px;
       }

       .openNav {
           /* das ist der Button zum Öffnen der Navigation */
           color: white;
           position: fixed;
       }

       .nav-menü {
           display: none;
       }

       .nav-menü.is-open {
           display: block;

       }

       .openNav.is-open {
           display: none;
       }

       .menu {
           background-color: #25752A;
           color: white;
           border: none;
           padding: 8px 20px;
           cursor: pointer;
           font-size: 16px;
       }

       .sidenav {
           height: 100%;
           max-width: 50vw;
           width: 0;
           position: fixed;
           z-index: 1;
           top: 0;
           left: 0;
           background-color: #154718;
           overflow-x: hidden;
           transition: 0.5s;
           padding-top: 60px;
       }

       .sidenav a {
           padding: 8px 8px 8px 32px;
           text-decoration: none;
           font-size: 25px;
           color: #e0e0e0;
           display: block;
           transition: 0.7s;
           text-shadow: 2px 2px 4px #0000009a;
       }


       .sidenav a:hover {
           color: #ffffff;

       }

       .sidenav .closebtn {
           position: absolute;
           top: 0;
           right: 25px;
           font-size: 36px;
           margin-left: 50px;

       }
       .navdetails {
            
            background-color: #154718;
           text-shadow: 2px 2px 4px #0000009a;
           font-size: 25px;
           margin-inline: -10px;
       }
       .navdetails summary {
            display: flex;
            padding-right: 80px;
           gap: 10px;
           font-size: 25px;
           cursor: pointer;
           color: white;
       }
       .klapnav {
           display: flex;
           flex-direction: column;
           margin-left: 35px;
           padding-top: 0px;
           border-left: solid 4px rgba(255, 255, 255, 0.1);
       }
       .klapnav a {
           color: rgba(253, 253, 253, 0.8);
            font-size: 20px;
            padding-left: 0px;
       }

       @media (max-width: 400px) {
           .sidenav a {
               padding-left: 15px;
               font-size: 18px;
           }
           .klapnav {
               margin-left: 20px;
               margin-right: 400px;
           }
           .klapnav a {
                margin-inline: -10px;
               font-size: 18px;
           }
           .sidenav .closebtn {
               font-size: 30px;
               right: 10px;
           }
       }



       #o {
           display: none;
       }

       /* Footer */

       .Impressum {
            display: flex;
           writing-mode: horizontal-tb;
           margin-top: 20px;
           margin-left: 20px;
           padding: 20px;
       }
       
       .mail2 {
           max-width: 230px;
           height: 120px;
           border-radius: 8px;
           margin-inline: -40px;
       }


       .mail2:hover {
           text-decoration: none;
           color: white;
           transform: scale(1.05);
           transition: transform 0.3s;
       }
   
       

       .kontakt {
            background-color: #1c5f2175;
            margin: 20px;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items:center;
            border: solid 3px rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 20px;
            gap: 15%;

       }
        .kontakt a {
              color: rgb(255, 255, 255);
              text-decoration: none;
              padding: 30px;
        }
        .kontakt a:hover {
              text-decoration: underline;
              transition: transform 0.5s;
        }

         .halb {
            width: calc(15vw + 100px);
            height: 130px;
            
            text-align: center;
            
         }
       .sm {
           height: 20px;
           gap: 20px;
           margin-top: 20px;
           margin-bottom: -4px;
       }

       #kontakt-form {
           display: flex;
           flex-direction: column;
           gap: 10px;
           width: 100%;
       }
         #kontakt-form input, textarea {
              background-color: var(--background-color);
              color: var(--text-color);
              padding: 5px;
              border: none;
              width: 100%;
         }
            #kontakt-form button {
                background-color: var(--secondary-color);
                color: var(--text-color);
                border: none;
                padding: 7px 12px;
                cursor: pointer;
                border-radius: 8px;
            }


       @media (max-width:500px) {
           .kontakt {
               gap: 0px;
               height: 350px; ;
               flex-direction: column;
           }
           .halb {
               width: 100%;
               margin-top: 20px;
           }
           
       }
       @media (max-width: 500px) and (max-height: 330px) {
           .kontakt {
               gap: 0px;
               height: 350px; 
            
               flex-direction: column;
              
           }
           .halb {
               width: 100%;
               margin-top: 20px;
           }
       }


       .fooder {
           background-color: #1c5f2175;
           color: rgba(255, 255, 255, 0.694);
           margin-top: 60px;
           
           max-width: 100%;
           height: 60px;
           display: flex;
           justify-content: center;
           align-items: center;
           padding-left: 15px;
           padding-right: 15px;
           font-size: small;
       }

       .fooder a {
           color: rgba(255, 255, 255, 0.694);
           text-decoration: none;
           padding: 30px;

       }

       .datenschutz {
           writing-mode: horizontal-tb;
           margin-top: 20px;
           margin-left: 20px;
           padding: 20px;
       }
       #null {
           display: none;
       }