/* Diese CSS Datei enthält alle CSS-Befehle die das Aussehen und Bilder der Website betreffen (Schriftarten, Schriftgrößen, Farben etc... */

/* World Styles */

* {
    font-family: 'inter', sans-serif;
}

/* Bilder */

#logo {
    max-width: 6rem; 
}

.main-bild {
    filter: brightness(0.95) contrast(1.1) saturate(0.9);
    border-radius: 1rem;
}

#footer-logo {
    max-height: 6rem;
}

#kleinanzeigen {
    max-height: 3rem; 
}

#insta-logo, .insta-logo {
    width: 3rem;
    height: auto;
    max-width: 100%; 
}

#fb-logo {
    width: 8rem;
    height: auto;
    max-width: 100%; 
}

.hero img {
    max-width: 30rem auto; 
}

section img {
    max-width: 14rem;
    border-radius: 10px;
}

section img:hover {
    transform: scale(1.01);
    cursor: pointer;
}

#weltraum {
    max-width: 40vw; 
}

main img {
    max-width: 90vw; 
    margin-top: 2rem;
    margin-bottom: 2rem; 
    border-radius: 1rem; 
}

@media (min-width: 1700px) {

.zoom:hover {
    animation: img-zoom 1s ease forwards;
}

} 




/* Body Styles */

body {
    letter-spacing: 1px;
}


/* Header Styles */






/* Main Styles */

main {
    font-size: 1rem;
    gap: 2rem;
}

h1 {
    font-size: 1.6rem;
    color: #150422; 
    text-shadow: 1px 1px lightblue;
}

h2 {
    font-size: 1.2rem; 
}

.text {
    font-size: 1rem;  
    line-height: 1.4rem;
    background-color: #F8F9FA;
}

.text h3 {
    font-size: 1rem;
}

main a {
    text-decoration: none; 
    color: #150422;
    font-size: 1rem;
    border-radius: 12px;
}

main a:hover {
    transform: scale(1.05);
    box-shadow: 1px 1px #150422;
    animation: button 0.3s ease-in forwards;
}

.web-cta {
    background-color: goldenrod;
}

.pc-cta {
    border: solid lightblue;
    box-shadow: 1px 1px 1px 1px gold;
    background-color: #150422;
    color: white; 
}

.artikelbeschreibung h3 {
    font-weight: 800;
    color: gold;
}

.artikelbeschreibung a {
    text-decoration: none; 
    font-size: 1.2rem;  
    border-radius: 12px;
}

.artikelbeschreibung a:hover {
    transform: scale(1.05); 
}

.farbig {
    color: gold; 
    font-weight: 500; 
}

.preis {
    font-size: 1.6rem; 
    font-weight: 600; 
    color: #4d006e;
}

.text li { 
    line-height: 1.6rem;
    font-size: 1rem; 
}

.text h3 {
    color: gold; 
    font-size: 1.4rem;
}

.text h4 {
    font-size: 1.4rem; 
}

.ablauf li {
    list-style: decimal; 
}

.hero {  
    background-color: rgba(173, 216, 230, 0.33);
}

.opacity {
    animation: opacity 2s ease forwards;
}

.produkt {
    background-color: rgba(78, 163, 230, 0.14);
    border-radius: 1rem; 
    border: solid gold 2px; 
    box-shadow: 4px 4px 6px 6px rgba(78, 163, 230, 0.27);
}

.aufzählung li {
    font-weight: 700;
}

.insta {
    font-size: 1.4rem;
    font-weight: 600;
}

#warum {
    color: gold; 
}

#build {
    color: gold;
    font-size: 1.4rem; 
    text-shadow: 1px 1px #150422;
    border: solid 4px #150422;
    padding: 1rem; 
    border-radius: 2rem; 
    background-color: #150422;
    margin: 1rem; 
}

.pc-text {
    color: #150422; 
    line-height: 1.6rem; 
    font-size: 1rem; 
    margin-bottom: 2em; 
    text-align: center;
    font-weight: 500;
}

.fat {
    font-weight: 600;
    color: gold;
}

/* Footer Styles */