body {
    background-color: #f2f2f2;
    margin: 0;
}

.button {
    background-color: #101010; 
    color: #f2f2f2;
    border: none;
    border-radius: 1vh;
    padding: 1.3vh 4.8vh;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    font-size: 2vh;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    transition: 0.3s ease;
  }

.button:hover {
    background-color: #050505;
    transform: translateY(-0.5vh);
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f2f2f2;
}

.btnright {
    margin-top: 3.8vh;
    margin-bottom: 3.8vh;
    margin-right: 30.8vh;
}

.logo {
    float: left;
    display: flex;
    align-items: center;
    margin-left: 30.8vh;
}

.logo_a {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.4vh;
    letter-spacing: 0.4vh;
    padding-right: 0.8vh;
}

.logo_b {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.4vh;
    letter-spacing: 0.4vh;
}

.mainportrait {
    position: relative; /* Container für die absolute Positionierung */
    width: 100%; /* Setze die Breite nach Bedarf */
    height: 100%; /* Setze die Höhe nach Bedarf */
}

.picturemain {
    position: absolute;
    z-index: 0;
    width: 100%; /* Passe die Breite nach Bedarf an */
    height: auto; /* Behalte das Seitenverhältnis bei */
}

.picturemainoverlay {
    position: absolute;
    z-index: 1;
    width: 100%; /* Passe die Breite nach Bedarf an */
    height: auto; /* Behalte das Seitenverhältnis bei */
}

.scroll-text {
    cursor: pointer;
    color: #ffffff;
    position: absolute;
    top: 75vh;
    z-index: 2;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 250;
    font-size: 1.8vh;
    transition: 0.3s ease;
    animation: moveUpDown 2s ease-in-out infinite;
}

@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3vh); /* Adjust the amount of movement */
    }
}

.titleh1h2 {
    position: absolute;
    z-index: 0; /* Höher als die Bilder */
    top: 0; /* Passe nach Bedarf an */
    left: 0; /* Passe nach Bedarf an */
}

h1 {
    margin: 0; /* Entferne Standard-Abstände */
    padding-top: 8vh;
    padding-left: 10.0vh;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    color: #222222;
    font-size: 11.8vh;
    font-style: normal;
}

h2 {
    margin: 0; /* Entferne Standard-Abstände */
    padding: 0vh;
    margin-top: -6.9vh;
    padding-left: 120.8vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #f2f2f2;
    font-size: 3.2vh;
    font-style: normal;
}

.project1 {
    display: flex;
    padding-bottom: 32.6vh;
    position: relative; /* Add this line */

    max-width: fit-content; /*center div*/ 
    margin-left: auto;
    margin-right: auto;
}


.project2 {
    display: flex;
    padding-bottom: 28.6vh;
    position: relative; /* Add this line */

    max-width: fit-content; /*center div*/ 
    margin-left: auto;
    margin-right: auto;
}

.project3 {
    display: flex;
    padding-bottom: 18vh;
    position: relative; /* Add this line */

    max-width: fit-content; /*center div*/ 
    margin-left: auto;
    margin-right: auto;
}

h3 {
    margin-top: 98vh;
    padding-bottom: 4vh;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #101010;
    font-size: 3.6vh;
    font-style: normal;
}

.aboutmetitle {
    margin-top: 0vh;
}

.bez {
    position: relative;
    padding-left: 4vh;
    margin-top: -0.01vh;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #101010;
    font-size: 2.4vh;
}

h4 {
    position: relative;
    padding-left: 4vh;
    margin-top: -1.6vh;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    color: #101010;
    font-size: 3.6vh;
}

.infotxt {
    position: relative;
    padding-left: 4vh;
    padding-top: 8vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #101010;
    font-size: 2.4vh;
}

.bez2 {
    position: relative;
    padding-right: 4vh;
    margin-top: -0.01vh;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #101010;
    font-size: 2.4vh;
}

h5 {
    position: relative;
    padding-right: 4vh;
    margin-top: -1.6vh;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    color: #101010;
    font-size: 3.6vh;
}

.infotxt2 {
    position: relative;
    padding-right: 4vh;
    padding-top: 8vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #101010;
    font-size: 2.4vh;
}

.images {
    position: relative;
    width: 80vh;
    height: auto;
}

.bedrockhub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 1vh;
    transition: opacity 1s ease-in-out;
}

.ben {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 1vh;
    transition: opacity 1s ease-in-out;
}

.peddys {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 1vh;
    transition: opacity 1s ease-in-out;
    margin-top: 0vh;
    padding-bottom: 0vh;
}

h3, h4, h5, p, .aboutmeimg, .bez, .bez2 {
    animation: CSSscrollReveal ease-in-out both;
    animation-timeline: view();
    animation-range: entry 1% cover 50%;
}

.bedrockhub, .ben, .peddys {
    animation: CSSsatReveal ease-in-out both;
    animation-timeline: view();
    animation-range: entry 1% cover 50%;
}

@keyframes CSSscrollReveal {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes CSSsatReveal {
    from {
        filter: saturate(0);
        transform: translateY(100px);
    }
    to {
        filter: saturate(1);
        transform: translateY(0);
    }
}

.aboutme, .contact {
    text-align: center;
}

.aboutmeimg {
    width: 125vh;
    height: auto;
    margin-top: -2vh;
}

.contacttitle {
    margin-top: 8vh;
    padding-bottom: 0;
    margin-bottom: 0;
    animation: CSSsatReveal ease-in-out both;
    animation-timeline: view();
    animation-range: entry 50% cover 20%;
}

.contactuh {
    padding: 0vh;
    margin-bottom: 0vh;
    margin-top: 1.6vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #909090;
    font-size: 2.4vh;
    font-style: normal;
    padding-bottom: 0vh;
    animation: CSSsatReveal ease-in-out both;
    animation-timeline: view();
    animation-range: entry 75% cover 10%;
}

#button2 {
    margin-top: 3.2vh;
    margin-left: 0vh;
  }

  .footer {
    text-align: center;
}

.footer p {
    animation: none;
}

.logofooter {
    display: inline-flex;
    text-align: center;
    padding: 0vh;
    padding-top: 8vh;
    padding-bottom: 0vh;
    padding-left: 0vh;
}

.cp {
font-size: 1.6vh;
font-family: "Poppins", sans-serif;
font-weight: 600;
margin-top: -1.6vh;
}

.impressum {
    font-size: 1.6vh;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    margin-top: -1.6vh;
    text-decoration: none;
    color: #909090;
    transition: 0.3s ease;
    padding: 4.8vh 1.6vh;
}

.impressum:hover {
    color: #535353;
}

.fixbes3 {
    position: relative;
    margin-top: -32vh;
    padding-top: 0vh;
}

#bes3 {
    position: relative;
    margin-top: 0vh;
    padding-top: 0vh;
    top: 0;
}

.beschreibung {
    /* Adjust the vertical alignment for larger screens */
    position: relative;
    top: 0; /* Add this line */
}

.beschreibung3 {
    /* Adjust the vertical alignment for larger screens */
    position: relative;
    margin-top: 32vh; /* Add this line */
}


/*!!!Cookie Banner!!!*/

.cookie-buttons {
    box-sizing: border-box;
    float: left;
    padding-top: 2.4vh;
    padding-bottom: 3.2vh;
}

.cookietext-inline {
    display: inline;
    text-align: left;
    float: left;
}

#cookie-banner { 
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F2F2F2;
    color: #101010;
    padding: 0px;
    text-align: center;
    z-index: 1000;
    padding-left: 25vh;
    padding-right: 25vh;
    display: inline;
}

h6 {
    margin: 0; /* Entferne Standard-Abst�nde */
    padding: 0vh;
    margin-top: 0vh;
    padding-left: 0vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2.4vh;
    font-style: normal;
    float: left;
    padding-top: 3.2vh;
    padding-bottom: 2.4vh;
}

.cookie-text {
    margin: 0; /* Entferne Standard-Abst�nde */
    padding: 0vh;
    margin-top: 0vh;
    padding-left: 0vh;
    padding-right: 0vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 2vh;
    color: #050505;
    font-style: normal;
    animation: none;
    display: inline;
}

.cookie-link {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 2vh;
    font-style: normal;
    color: #007bff;
    text-decoration: underline;
    display: inline;
    transition: 0.3s ease;
}

.cookie-link:hover {
    color: #0056b3;
}

#cookie-banner button {
    border-radius: 1vh;
    padding: 1.3vh 4.8vh;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    font-size: 2vh;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    transition: 0.3s ease;
}

#accept-cookies:hover {
    background-color: #050505; 
    transform: translateY(-0.5vh);
    padding: 1.6vh 5.2vh;
}

#reject-cookies:hover {
    border-color: #5e5e5e;
    color: #5e5e5e; 
    transform: translateY(-0.5vh);
    padding: 1.6vh 5.2vh; 
}

#accept-cookies {
    background-color: #101010; 
    color: #f2f2f2;
    border: none;
}

#reject-cookies {
    color: #101010;
    border: solid 0.25vh;
    border-color: #101010;
    background: none;
    margin-left: 1.6vh;
}

@media (max-width: 1405px) {
    
    .scroll-text {
        top: 70vh;
        font-size: 2vh;
    }

    h2 {
        margin: 0; /* Entferne Standard-Abstände */
        padding: 0vh;
        margin-top: -6.9vh;
        padding-left: 108vh;
    }

    h1 {
        padding-left: 12.4vh;
        font-size: 11vh;
    }

    .projects {
        margin-top: -12vh
    }

}

@media (max-width: 1281px) {
    
    .scroll-text {
        top: 60vh;
        font-size: 2vh;
    }

    h2 {
        margin: 0; /* Entferne Standard-Abstände */
        padding: 0vh;
        margin-top: -6.9vh;
        padding-left: 98vh;
    }

    h1 {
        padding-left: 10.4vh;
        font-size: 10vh;
    }

    .projects {
        margin-top: -19vh
    }

}

@media (max-width: 1115px) {
    
    .scroll-text {
        top: 55vh;
        font-size: 2vh;
    }

    h2 {
        margin: 0; /* Entferne Standard-Abstände */
        padding: 0vh;
        margin-top: -6.9vh;
        padding-left: 84vh;
        font-size: 2.8vh;
        
    }

    h1 {
        padding-left: 7.4vh;
        font-size: 9vh;
    }

    .projects {
        margin-top: -28vh
    }

}

@media (max-width: 1100px) {
    
    .scroll-text {
        top: 46vh;
        font-size: 2vh;
    }

    h2 {
        margin: 0; /* Entferne Standard-Abstände */
        padding: 0vh;
        margin-top: -6.9vh;
        padding-left: 78vh;
        font-size: 2.2vh;
    }

    h1 {
        padding-left: 13.4vh;
        font-size: 7vh;
    }

    .projects {
        margin-top: -36vh
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f2f2f2;
    }
    
    .btnright {
        margin-top: 3.8vh;
        margin-bottom: 3.8vh;
        margin-right: 2.4vh;
    }
    
    .logo {
        float: left;
        display: flex;
        align-items: center;
        margin-left: 2.4vh;
    }
    
    .logo_a {
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 2.4vh;
        letter-spacing: 0.4vh;
        padding-right: 0.8vh;
    }
    
    .logo_b {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.4vh;
        letter-spacing: 0.4vh;
    }

    .aboutmeimg {
        width: 110vh;
        height: auto;
        margin-top: -2vh;
    }
}

/* Responsive Styles */
@media (max-width: 968px) {

    .button {
        background-color: #101010; 
        color: #f2f2f2;
        border: none;
        border-radius: 1vh;
        padding: 1.3vh 2.8vh;
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        align-items: center; /* Zentriert die Inhalte vertikal */
        font-size: 2vh;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        margin-top: 0vh;
        margin-left: 195.9vh;
        transition: 0.3s ease;
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f2f2f2;
    }
    
    .btnright {
        margin-top: 3.8vh;
        margin-bottom: 3.8vh;
        margin-right: 2.4vh;
    }
    
    .logo {
        float: left;
        display: grid;
        align-items: center;
        margin-left: 2.4vh;
    }
    
    .logo_a {
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 2.4vh;
        letter-spacing: 0.4vh;
        padding-right: 0.8vh;
        padding-bottom: 0vh;
        margin-bottom: 0vh;
    }
    
    .logo_b {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 2.4vh;
        padding-top: 0vh;
        margin-top: 0vh;
        letter-spacing: 0.4vh;
    }

    .logofooter {
        display: block;
    }
    
    .aboutmeimg {
        width: 45vh;
        height: auto;
        margin-top: -2vh;
    }

    .button {
        margin-top: 0vh;
        margin-left: 8vh;
        transition: 0.3s ease;
      }

      .mainportrait {
        position: relative; /* Container für die absolute Positionierung */
        width: 100%; /* Setze die Breite nach Bedarf */
        height: 64vh; /* Setze die Höhe nach Bedarf */
        object-fit: cover;
        object-position: 30% 50%; 
    }

    .picturemain {
        position: absolute;
        z-index: 0;
        width: 100%; /* Setze die Breite nach Bedarf */
        height: 64vh; /* Setze die Höhe nach Bedarf */
        object-fit: cover;
        object-position: 30% 50%; 
    }
    
    .picturemainoverlay {
        position: absolute;
        z-index: 2;
        width: 100%; /* Setze die Breite nach Bedarf */
        height: 64vh; /* Setze die Höhe nach Bedarf */
        object-fit: cover;
        object-position: 30% 50%; 
    }

    .scroll-text {
        top: 48vh;
        left: 20%;
        font-size: 2.4vh;
        font-weight: 400;
        color: #101010;
    }

    .projects {
        margin-top: -0vh /*Important!*/
    }

    h1 {
        margin: 0; /* Entferne Standard-Abstände */
        padding-top: 8vh;
        padding-left: 2.6vh;
        padding-right: 8vh;
        font-family: "Playfair Display", serif;
        font-weight: 600;
        color: #222222;
        font-size: 5.6vh;
        font-style: normal;
    }

    h2 {
        margin: 0; /* Entferne Standard-Abstände */
        margin-top: 0;
        padding: 0vh;
        margin-top: 36vh;
        padding-left: 1.6vh;
        padding-right: 1.6vh;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        color: #101010;
        font-size: 3.2vh;
        font-style: normal;
        text-align: center;
    }

    .titleh1h2 {
        position: relative;
    }

    .h2center {
        display: inline;
        text-align: center;
    }

    h3 {
        margin-top: 24vh;
        padding-bottom: 4vh;
        padding-left: 1.6vh;
        padding-right: 1.6vh;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        color: #101010;
        font-size: 3.2vh;
        font-style: normal;
    }

    .project1, .project2, .project3 {
        display: block;
        padding-bottom: 2vh;
        max-width: 50vh; /*center div*/ 
        margin-left: auto;
        margin-right: auto;

    }

    .images {
        max-width: 50vh; /*center div*/ 
        margin-left: auto;
        margin-right: auto;

        width: 90%;
        height: auto;
        text-align: center;
    }

    .beschreibung {
        text-align: center;
        padding: 2vh;
        padding-top: 28vh;
        top: -0vh; /* Adjust this value as needed to position the text higher */
    }

    .beschreibung3 {
        text-align: center;
        padding-top: 34vh;
        top: -0vh; /* Adjust this value as needed to position the text higher */
        padding-bottom: 0vh;
        margin-bottom: 0vh;
    }

    .bez {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        margin-top: 5vh;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    h4 {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        margin-top: 1vh;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .infotxt {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        padding-top: 2vh;
        margin-top: 0vh;
        padding-bottom: 4vh;
        margin-bottom: 0;
    }

    .bedrockhub {
    position: absolute;
    width: 100%;
    height: auto;
    border-radius: 1vh;
    transition: opacity 1s ease-in-out;
    }
    
    .ben {
        position: absolute;
        width: 100%;
        height: auto;
        border-radius: 1vh;
        margin-top: 0vh;
        padding-top: 0vh;
        padding-bottom: 0vh;
        margin-bottom: 0vh;
        transition: opacity 1s ease-in-out; 
        overflow: hidden;
    }

    .peddys {
        position: absolute;
        width: 100%;
        height: auto;
        border-radius: 1vh;
        margin-top: 5vh;
        padding-bottom: 0vh;
        transition: opacity 1s ease-in-out;
    }

    .bez2 {
        padding-left: 0;
        padding-right: 0;
        margin-top: 6vh;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    h5 {
        padding-left: 0;
        padding-right: 0;
        margin-top: 1vh;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .infotxt2 {
        padding-left: 0;
        padding-right: 0;
        margin-top: -6vh;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .project2 {
        display:flex;
        flex-flow: column;
      }
      .beschreibung{order:2;}
      .images{order:1;}
    }

    .aboutmetitle {
        margin-top: 2.4vh;
    }

    .contacttitle {
        margin-top: 8vh;
        padding-bottom: 0;
        margin-bottom: 0;
        font-size: 3.2vh;
        padding: 0 4.8vh;
        animation: CSSsatReveal ease-in-out both;
        animation-timeline: view();
        animation-range: entry 50% cover 20%;
    }

    .contactuh {
        padding: 0vh 1.6vh;

    }

    hr {
        opacity: 1;
        margin-top: 4vh;
        width: 24vh;
    }

    h3, h4, h5, p, .aboutmeimg, .bez, .bez2 {
        animation: CSSscrollReveal ease-in-out both;
        animation-timeline: view();
        animation-range: entry 10% cover 35%;
    }
    
    .bedrockhub, .ben, .peddys {
        animation: CSSsatReveal ease-in-out both;
        animation-timeline: view();
        animation-range: entry 25% cover 35%;
    }

    #cookie-banner { 
        text-align: center;
        padding-left: 6.4vh;
        padding-right: 2vh;
    }