#projekte-link {
    color: #bb0d1b;
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #e2e3e6, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #c7c7c7, inset 0 0 30px #e0e0e0;
}

main {
    width: 100%;
    height: auto;
    color: whitesmoke;
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
    "headline headline headline headline"
    "h h h h"
    " . sonder sonder . "
    " . profil profil . ";
    }

h1 {
    grid-area: headline; 
    font-size: 170%;
    font-weight: 700;
    letter-spacing: 0.1rem;
    display: flex;
    margin: 0;
    padding: 1rem 0 0 0;
    justify-content: center;
    background-color: #232228;
    font-family: Nunito Sans, sans-serif;
    }

h2 {
    display: flex;
    margin: 1.5rem 0;
    font-size: 97%;
    font-weight: 300;
    letter-spacing: 2px;
}

.n {
    grid-area: n;
    padding-bottom: 1rem;
    
}

.hintergrund-n {
grid-template-columns: 10% 80% 10%;
grid-template-rows: auto;
grid-template-areas: " . n . ";
background-color: #232228;
width: 100%;
grid-area: h;
display: grid;
}

ul {
    margin-block: 0;
}

h3 {
    margin: 0 0 0.4rem 0;
    font-size: 110%;
    font-weight: 440;
}

.n h4 {
    display: flex;
    margin: 0 0 0.4rem 0;
    font-weight: 300;
    font-size: 80%;
}

.n li {
    font-weight: 300;
    font-size: 100%;
    letter-spacing: 2px;
    list-style: circle;
    margin-bottom: 0.5rem;
}

li a:hover {
    color: #bb0d1b;
}

li a:active {
    color: #bb0d1b;
}

li a {
    text-decoration: none;
    color: whitesmoke;
}

#sonder {
    grid-area: sonder;
}

#profil {
    grid-area: profil;
}


.proj {
    width: 100%;
    height: auto;
}

#sonder .cards {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5,auto);
}

#profil .cards  {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(3,auto);
}



.card {
    padding: 1rem 1.4rem;
    box-shadow: 0.063em 0.75em 1.563em rgb(0 0 0 / 78%);
}

.card p {
    line-height: 150%;
    word-spacing: 1px;
    font-weight: 300;
    margin: 0;
}


#a {
    grid-column: 1;
    grid-row: 1;

    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.stecker {
    grid-column: 1;
    grid-row: 2;
}

#b {
    grid-column: 1;
    grid-row: 3;

    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.ventil {
    grid-column: 1;
    grid-row: 4;
}

#c {
    grid-column: 1;
    grid-row: 5;
    
    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.projekt-bilder {
    display: flex;
    margin: 0 0 3rem 0;
    padding-bottom: 1rem;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    

    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-top: none;
}

.doppelgreifer {
    grid-column: 1;
    grid-row: 6;
}

#d {
    grid-column: 1;
    grid-row: 7;

    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.sprüh {
    grid-column: 1;
    grid-row: 8;
}

#e {
    grid-column: 1;
    grid-row: 9;
    
    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.stand {
    grid-column: 1;
    grid-row: 10;
}



.cards img {
    width: 90%;
    height: auto;
    border-radius: 0.625rem;
}



#f {
    grid-column: 1;
    grid-row: 1;

    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.tuere {
    grid-column: 1;
    grid-row: 2;
}

#g {
    grid-column: 1;
    grid-row: 3;

    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;

    background-color: #232228; 
    border: 2px solid #ffffffcc;
    border-bottom: none;
}

.inku {
    grid-column: 1;
    grid-row: 4;
}

#h {
    grid-column: 1;
    grid-row: 5;
    margin-bottom: 3rem;

    border-radius: 0.625rem;
    background-color: #232228; 
    border: 2px solid #ffffffcc;
}



@media screen and (min-width: 768px) {
h1 {
    font-size: 250%;
    padding-top: 2rem;
}

h2 {
    font-size: 120%;
    font-weight: 600;
    letter-spacing: 3px;
    margin-top: 1.6rem;
}

h3 {
    margin: 0 0 0.5rem 0;
    font-weight: 500;
}

.n h4 {
    font-size: 110%;
}

.n li {
    font-size: 130%;
}


.hintergrund-n {
    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;   
}

#sonder .cards {
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(5,auto);
    row-gap: 7rem;
    column-gap: 1rem;
}

#profil .cards {
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,auto);
    row-gap: 7rem;
    column-gap: 1rem;
}

.card {
    border-radius: 0.625rem;
    padding: 1rem 1.4rem;
    border-radius: 0.625rem;
    height: fit-content;
}

.cards img {
    overflow: hidden;
    height: 10rem;
    width: auto;
}

.flach {
    aspect-ratio: 3 / 2;
    
}

.hoch {
    aspect-ratio: 3 / 4;
    
}

#a {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    border: 2px solid #ffffffcc;
}

.stecker {
    grid-column: 2;
    grid-row: 1;

    justify-content: center;
    align-items: flex-start;    
}

#b {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
    border: 2px solid #ffffffcc;
}

.ventil {
    grid-column: 1;
    grid-row: 2;

    flex-direction: row-reverse;
    align-items: center;
}

#c {
    grid-column: 1;
    grid-row: 3;
    border: 2px solid #ffffffcc;
}

#d {
    grid-column: 2;
    grid-row: 4;
    border: 2px solid #ffffffcc;
}

#e {
    grid-column: 1;
    grid-row: 5;
    border: 2px solid #ffffffcc;
}

.card p {
    font-size: 110%;
}

.projekt-bilder {
    border: none;
    background-color: unset;
    margin-bottom: 0;
    padding-bottom: 0;
    margin: 0.5rem;
}

.doppelgreifer {
    grid-column: 2;
    grid-row: 3;

    justify-content: center;
    align-items: flex-start; 
}

.sprüh {
    grid-column: 1;
    grid-row: 4;

    justify-content: center;
    align-items: flex-end; 
}

.stand {
    grid-column: 2;
    grid-row: 5;

    justify-content: center;
    align-items: flex-start; 
}

#sonder {
     margin-bottom: 5rem;
}


#f {
    grid-column: 1;
    grid-row: 1;
    border: 2px solid #ffffffcc;
}

.tuere {
    grid-column: 2;
    grid-row: 1;
    
    flex-direction: row;
}

#g {
    grid-column: 2;
    grid-row: 2;
    border: 2px solid #ffffffcc;
}

.inku {
    grid-column: 1;
    grid-row: 2;
    
    justify-content: center;
    align-items: flex-end; 
}

#h {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0;
}


}



@media screen and (min-width: 1024px) {
main {
    z-index: 2;
    grid-template-columns: 10% 40% 40% 10%;
}


h2 {
    margin-top: 3rem;
    margin-bottom: 2rem;
}
h3 {
 font-size: 137%;
}

.hintergrund-n {
grid-template-columns: 15% 70% 15%;
}


.n li {
    font-size: 180%;
}

h1 {
    font-size: 350%;
}

.stand {
    width: 80%;
}

.cards img {
    height: 11rem;
}
}

@media screen and (min-width: 1440px) {
h3 {
 font-size: 155%;
}

.n li {
    font-size: 200%;
}

.proj {
    font-size: 105%;
}


.cards img:hover {
  transform: scale(2.2);
  align-self: center;
} 

.sprüh {
    align-items: flex-end;
}


.stecker {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.doppelgreifer {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
}

@media screen and (min-width: 2560px) {
h1 {
        font-size: 550%;
        padding-top: 6rem;
    }

.n li {
        font-size: 350%;
    }

.n {
    padding-bottom: 3rem;
}


h2 {
        font-size: 130%;
        font-weight: 650;
        letter-spacing: 6px;
        margin: 3rem 0;
}

.proj {
    font-size: 240%;
}

.card {
    border-radius: 1.3rem;
    border: 3px solid whitesmoke ;
    padding: 3.6rem 4rem;
}

#sonder .cards {
    row-gap: 10rem;
    column-gap: 5rem;
}

#profil .cards {
    row-gap: 10rem;
    column-gap: 5rem;
}

.projekt-bilder {
    gap: 2rem;
}

.n h4 {
        font-size: 250%;
    }


h3{
    font-weight: 600;
}

.cards img {
    height: 30rem;
}

.stecker {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.doppelgreifer {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
}