/* Diese CSS Datei enthält alle CSS-Befehle die die Struktur/Anordnung der Website betreffen (Display, margin/padding, height/width etc...) */

/* World Struktur */

* {
    box-sizing: border-box;
}



/* Body Struktur */

body {
    width: 100vw;
    height: 100vw; 
    margin: 0;
    display: flex;
    flex-direction: column;
    letter-spacing: 1px;
    justify-content: space-between;
}


/* Header Struktur */

header {
    background-color: #150422;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    width: 100vw;
    z-index: 9999;
}



/* Main Struktur */

main {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100vw;
    margin-top: 2rem;
}

.hero {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    width: 100vw; 
}

section {
    max-width: 100vw;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    flex-wrap: wrap;
}




article {
    max-width: 100vw; 
}

.text { 
    padding: 1.4rem; 
    max-width: 100vw;
}

.vorher-nachher {
    display: flex; 
}

.buttons {
    display: flex;
    flex-direction: column; 
    gap: 1rem; 
}

main a {
    padding: 10px; 
    max-width: 90vw; 
}

.artikelbeschreibung { 
    text-align: left;
    display: flex; 
    flex-direction: column; 
}

.artikelbeschreibung h3 {
    text-align: center;
}

.artikelbeschreibung a {
    padding: 10px;  
    text-align: center; 
}

.produkt {
    margin-top: 3rem;
    margin: 1rem;
    padding: 1rem; 
}

.cta {
    margin-bottom: 2rem; 
}

.text li {
    text-align: left; 
}

.hero { 
    padding: 1rem;  
    transform: translateY(20px);
}

.text-container {
    max-width: 100vw; 
    gap: 2rem; 
}

.text-container ul {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.main-buttons {
    margin-top: 2rem; 
}

.insta {
    display: flex;
    align-items: center; 
    gap: 1rem;
}

.img-container {
    display: flex; 
    flex-direction: column;
    align-items: center;
    max-width: 100vw;
}

#pc-cta {
    margin-top: 2rem; 
}

.pc-angebot {
    gap: 2rem; 
    max-width: 100vw; 
}

.angebot {
    display: flex; 
    flex-direction: column; 
    gap: 2rem;
    max-width: 100vw; 
}

#custom {
    align-self: center; 
}

#custom-cta {
    align-self: center; 
}

.button-container {
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.bewertungen h3 {
    justify-self: center;
}

/* Footer Struktur */

footer {
    background-color: #150422;  
    display: flex; 
    justify-content: space-evenly;
    align-items: center;
    width: 100vw;
}

#footer-nav {
    display: none; 
}