html {
    scroll-behavior: smooth;
    font-family: 'Source Sans Pro', sans-serif;
    width: 100%;
    min-height: 100vh;
    overflow-x: clip;
}

body {
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    align-content: center;
    margin: 0;
    scroll-behavior: smooth;
overflow-x: clip;
}



.sections {
    	
    height:fit-content;


    display: grid;
    justify-content: center;
    align-content: center;
}

#impressum-page {
    height: fit-content;
}

#mainPage {
    height: 100vh;
    background-image: url(img/background.jpg);
    background-color: rgba(0, 0, 0, 0.7);
    background-size: cover;
    background-blend-mode: overlay;
}

.work-header {
    margin-top: 150px;
}

.project-header, .workpartners-header {
    margin-top: 300px;
}



.scroll-button-container {
    display: flex;
    justify-content: center;
}

.logo {
    
    margin-left: 20px;
    height: 60px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;           /* das ist entscheidend */
  width: auto;        /* NICHT 100vw! */
  max-width: 100%;    /* Sicherheit */
  background-color: #212830;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  transition: 0.5s;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 3;
  box-sizing: border-box; /* schützt vor Überbreite durch Padding */
}

.navbar ul {

    list-style: none;
    display: flex;
    margin-left: 50px;
    gap: 100px;
    font-size: 20px;
    font-weight: bold;
}

li > a {
    text-decoration: none;
    color: white;
}

.navbar > a {
    margin-right: 20px;
    margin-left: auto;
}

.impressum-link {
    text-decoration: none;
    color: white;
}

.titleContainer {
    text-align: center;
}



h1, .subline {
    color: white;
}

h1 {
    font-weight:800;
    font-size: 50px;
    margin-bottom: 50px;
    line-height: 60px;
}

h1 > span {
    font-size: 90px;
}

.subline {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 35px;
}

 


.contact {
    width: 200px;
    padding: 20px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    background-color: #2b9daa;
    overflow: hidden;
    transition: color 0.4s ease;
    border-radius: 5px;
}

.navbar .contact {
    display: block;
    align-content: center;
    align-self: center;
    height: 30px;
}

.titleContainer .contact {
    display: none;
}



.contact::before {
    content: '';
    position: absolute;
    top: 0;
    right: -70%;
    width: 100%;
    height: 100%;
    background: #00ffff; 
    filter: blur(30px);  
    transition: right 0.4s ease;
    z-index: 1;
}

.contact:hover::before {
    right: 70%;
}

.contact span {
    position: relative;
    z-index: 2;
}


h1 > span, .home-link {
    background: linear-gradient(to bottom, #26777e 10%, #00ffff 90%); 
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}



.scroll-button {
    justify-self: center;
    color: white;
    display: flex;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 20px;
}


#impressum-page {
    position: relative;
}

.impressum-container {
    display: grid;
    background-color: #425163;
    position: absolute;
    width: 100%;
    color: white;
}

.impressum {
    display: flex;
    align-items: flex-start;
    align-items: center;
    justify-content: center;
    overflow-x: clip;
}

.impressum-data {
    text-align: center;
    height: 60%;
    margin:100px;
    margin-bottom: 20px;
    margin-top: 20px;
}



hr {
    margin: 0;
    width: 100%;
    border-top: 1px solid white;
}

.impressum-container p {
    margin-left: 20px;
    margin-top: 20px;
    margin-left: 0;
}

.social_media {
    text-align: right;
    margin: 20px;
    margin-bottom: 10px;
}

.social_media a {
    color: #425163;
    margin-right: 10px;
}

.impressum-compname {
    background-color: #212830;

    
}


.impressum-span {
    font-weight: bold; 
}


#projects {
    background-color: #212830;
}

.project-page-container, .work-page-container {
    display: grid;
    align-items: center;
    justify-items: center;
}

.project-header {
    width: 70%;
}


.project-container {
    display: flex;
    gap: 20px;
}

.project-reference {
    width: 500px;
    height: 300px;

}


.button-container {
    display: flex;
    width: 100%;
    height: 60px;
    gap: 10px;
}

.button-container button {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    background-color: #425163;
    border: solid 1px #425163;
}

.button-container button svg {
    fill: white;
    width: 40px;
    height: 40px;
}

#leftButton, #leftButton2 {
    opacity: 0.6;
}




.outer-project-container {
    display: flex;
    width: 70%;
    margin-top: 100px;
    
}

.inner-project-container {
        
    border-right: solid 2px;
    border-image: linear-gradient(to bottom, #00ffff 0%, #26777e 100%) 1;
    
}

.project-text, .work-text {
    color: white;
    font-size: 40px;

    padding: 30px;
    align-content: center;
}


.project-text {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.4);
    margin-left: 50px;
}

.project-example {
    color: white;
    margin-left: auto;
    margin-right: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: right;
    margin-top: auto;
}

#projectImage2 {
    height: 317px;
    width: 452px;
    
}

#project-example2 {
    font-size: 95%;
}


#work {
    background-color: #212830;
    align-items: center;
    justify-items: center;
}

.outer-work-container, .work-container {
    display: grid;

}



.work-examples {
    display: flex;
    margin: 50px;
    padding-bottom: 40px;
    border-bottom: solid 2px;
    border-image: linear-gradient(to right, #00ffff 0%, #26777e 100%) 1;
}

#last {
    border: none;
    padding-bottom: 0;
}

.work-text {
    margin: 50px;
    margin-top: 20px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.4);
}

.work-img-container {
    display: grid;
    margin: 50px;
    margin-top: 20px;
}

.work-img-container img {
    border: solid 1px #425163;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-img-container img:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px #425163;
}

.work-img-container > .shiftedImg {
    margin-top: -100px;
    margin-left: 150px;
}

.work-header {
    text-align: center;
}

#workpartners {
    background-color: #212830;

}

.workpartners-page-container {
    text-align: center;
    margin: 250px;
    margin-top: 0;
}

.workpartners-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    border: solid 2px;
    padding: 50px;
    border-image: linear-gradient(to right, #00ffff 0%, #26777e 100%) 1;
    
}

.workpartner, .workpartners-page-container p {
    color: white;
    font-size: 30px;
    margin: 20px
}

.workpartner {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.4);
    padding: 10px;
}

.dropbtn {
    display: none;
}

.dropdown-content {
    display: none;
}

@media(max-width: 1200px) {



    .workpartners-container {
        display: grid;
        gap:10px;
        grid-template-columns: repeat(1, 1fr);
        margin: 30px;
        padding: 0;
    }

    .work-container {
        border: none;
    }
    


    .outer-project-container {
        display: grid;
        justify-content: center;
        align-content: center;
        margin: auto;
        
    }

    .project-example {
        text-align: center;
    }

    

    .button-container {
       margin: auto;
    }

    


    .outer-project-container > div {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        justify-content: center;
        align-content: center;
    }

    .project-text {
        
        margin: 0 90px 90px 90px;
        font-size: 15px;
        
    }

    .project-page-container {
        display: grid;
        margin: 0;
        justify-content: center;
        align-content: center;
    }

    .project-header {
        text-align: center;
    }

    .project-example {
        margin-top: 20px;
        text-align: right;
        width: 330px;
    }

    .titleContainer {
        margin-top: -60px;
    }

    h1 {
        font-weight:900;
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 0;
    }
    
    h1 > span {
        font-size: 70px;
        line-height: 60px;
        
    }

    h1 > div {
        margin-top: 10px;
    }

    .subline {
        font-size: 15px;
        margin-top: 0;
    }



    .work-examples {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
        padding: 20px;
        margin: auto;
        margin-top: 100px;
        margin: 30px;
        border: solid 2px;

        border-image: linear-gradient(to right, #00ffff 0%, #26777e 100%) 1;
    }

    #last {
        border: solid 2px;
        padding: 20px;
        border-image: linear-gradient(to right, #00ffff 0%, #26777e 100%) 1;
    }

    .work-header {
        margin-top: 50px;
        margin-bottom: 0;
    }

    .work-text {
        margin: 0;
        font-size: 15px;
        text-align: center;
    }

    .work-img-container{
        display: grid;

    }
    .work-img-container > img {
        width: 200px;
        height: 120px;
        margin: auto;
    }

    .work-img-container > .shiftedImg {
        margin: auto;
        margin-top: 20px;
    }





    .project-example {
        font-size: 10px;
        margin-right: 0;
    }


    #project-example2 {
        font-size: 10px;
    }

    .project-reference {
        display: flex;
        justify-content: center;
    }

    #projectImage, #projectImage2 {
        width: 300px;
        height: 220px;
        margin-top: 100px;
        
    }

        .project-page-container, .workpartners-page-container {
        margin: auto;
    }

    .inner-project-container {
        margin: auto;
        border-right: none;

    }

    .button-container {
        width: 300px;
    }

    .project-header {
        margin-top: 50px;
    }


    .workpartners-page-container {
        margin-bottom: 200px;
    }



    .workpartner {
        font-size: 15px;
    }


    .workpartners-header {
        margin-top: 150px;
        margin: 50px;
    }

}

@media (max-width: 700px) {
    .impressum-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 

    }

    .impressum-data > h2, .impressum-data > p {
        font-size: 15px;
        text-align: left;
    }

    .impressum-data {
        margin: 0;
        margin-bottom: 30px;
        margin-left: 15px;
    }
}

@media (max-width: 1300px) {
    .outer-project-container {
        display: grid;
    }

    .inner-project-container {
        border: none;
        margin: auto;
        margin-bottom: 50px;
    }
    

}


@media (max-width: 1200px) {
    
    .navbar .contact {
        display: none;
    }

    .navbar ul {
        display: none;
    }

    .navbar {
        display: flex;
        align-items: center;
        justify-content: center;
        
    }



    .titleContainer .contact {
        display: block;
        margin: auto;
    }

    li {
        display: none;
    }

    .btn-container {
        display: grid;
        margin-left: auto;
        height: 50px;
        margin-right: 20px;
        align-self: center;
    }

    .dropbtn {
        display: block;
        margin-left: auto;
        background: linear-gradient(to bottom, #26777e 10%, #00ffff 90%);
        border-radius: 5px;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        align-self: center;
      }
      
      .dropbtn-container {
        max-width: 46px;
        margin-left: auto;
      }
      
      .dropdown {
        position: relative;
        display: inline-block;
      }
   
      .dropdown-content {
        display: none;
        margin-right: auto;

        right: 0;
        margin-top: 10px;
        background-color: #212830;
        
        box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
        z-index: 1;
      }
      
     
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        color: white;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: bold;
        text-align: left;
      }

      

      .show {
        display:block;
        
    }
}



    @media (max-height: 500px) {


        .titleContainer > .contact {
            display: none;
        }

        .titleContainer h1 span {
            font-size: 40px;
            line-height: 40px;
        }

        .titleContainer > h1 {
            font-size: 20px;
            line-height: 0px;
        }



        .impressum-data > h2, .impressum-data > p {
            font-size: 15px;
            text-align: left;
        }

    }