/*index.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.html*/

header,footer{
    height: 5vw;
    max-width: calc(100% - 10vw);
    margin-inline: auto;
    border-left: 0.75vw solid #de7800;
    border-right: 0.75vw solid #de7800;
}

main{
    flex-grow: 1;
    border-top: 0.75vw solid #de7800;
    border-bottom: 0.75vw solid #de7800;
}

nav{
    padding-bottom: 0.55vw;
    padding-top: 0.55vw;
}

nav h1{
    font-size: 3.5vw;
    font-weight: normal;
}

details{
    max-width: calc(100% - 10vw);
    border-left: 0.75vw solid #de7800;
    border-right: 0.75vw solid #de7800;     /*clamp anwenden!!!! border-right: clamp(2px,0.75vw,4px) */
    padding-top: 1.75vw;
    padding-left: 1.6vw;
}

summary{
    font-size: 3.75vw;
    padding-bottom: 1.75vw;
}

.projects-details,
.about-details,
.contact-details {
    padding-left: 3vw;
    margin-inline: auto;
}

.projects-details, .about-details{
    border-bottom: 0.75vw solid #de7800;
}

.projects-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center; 
    margin-inline: auto;
    padding-right: 3vw;
    margin-top: 1vw;
}

.projects-container img{
    width: 75vw;
    height: auto;
}


.about-container {
    flex-direction: column;
    margin-inline: auto;
    padding-top: 3vw;
    padding-right: 3vw;
    padding-bottom: 2.75vw;
    align-content: center;
    margin-top: 1vw;
    gap: 0;
}

.about-details h1{
    font-size: 4.5vw;
    margin-inline: auto;
    margin-top: 0;
    padding-right: 5.5vw;
}

.about-container img {
    padding-left: 0;
    padding-right: 2vw;
    width: 75vw;
    height: auto;
}

.about-column1{
    padding-bottom: 1vw;
}

.about-column2{
    padding-top: 5vw;
    padding-right: 2.5vw;
}

.about-column2 p{
    width: 75vw;
    align-self: center;
    font-size: 3.5vw;
}

.contact-details h1{
    font-weight: normal;
    font-size: 4.5vw;
    text-align: right;
    margin-inline: auto;
    padding-right: 5.5vw;
}

.contact-container{
    flex-direction: column;
    align-content: center;
    margin-inline: auto;
    padding-top: 23.1vw;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.contact-column1{
    padding-left: 0;
}
                                        /*krieg das scheiß img nicht zentriert*/
.contact-column1{
    text-align: center;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 20vw;
}

.contact-column1 p{
    font-size: 3.5vw;
}

.contact-column2{
    padding-left: 0;
    justify-content: center;
}

.contact-column2 img{
    width: 83vw;
    height: auto;
    padding-left: 1vw;
    padding-bottom: 13vw;
}

footer{
    font-size: 2vw;  
}

footer ul{
    padding-top: 0.5vw;
    padding-right: 1vw;
    padding-bottom: 0;
}

/*DIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.cssDIY.css*/

.diy-details, .partypizzacutter-details, .modelling-details{
    border-bottom: 0.75vw solid #de7800; 
}

.diy-details, .partypizzacutter-details, .sackapult-details, .modelling-details{
    padding-left: 3vw;
    margin-inline: auto;
}

.diy-container{
    margin-inline: auto;
    margin-top: 1vw;
    padding-top: 0;
    padding-bottom: 7vw;
    padding-right: 3vw;
    padding-left: 0;
    gap: 5vw
}

.diy-column1{
    flex-direction: column;
    gap: 5vw;
}

.diy-column1 img{
    width: 75vw;
    height: auto;
}

.diy-column1 p{
    width: 75vw;
    font-size: 3.5vw;
}

.diy-column2{
    flex-direction: column;
    gap: 6vw;
    padding-top: 0;
}

.diy-column2 img{
    width: 75vw;
    height: auto;
}

/*Impressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSSImpressum CSS*/

.impressum-container h2{
    font-size: 4vw;
    padding: 2vw;
}

.impressum-container p{
    font-size: 3.25vw;
}

/*DATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNGDATENSCHUTZERKLÄRUNG*/

.daten-container{
    max-width: 60vw;
    padding-left: 4vw;
    padding-bottom: 4vw;
}

.daten-details h1{
    font-size: 4vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.daten-details h2{
    font-size: 4vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.daten-details h3{
    font-size: 4vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.daten-details h4{
    font-size: 4vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.daten-details p{
    font-size: 3.25vw;
}

.daten-details li{
    font-size: 3.25vw;
}

.daten-container{
    max-width: 80vw;
}