body {
grid-template-columns: 100%;
grid-template-rows: auto;
}
header {
grid-area: header;
display: grid;
grid-template-columns: 80vw 20vw;
}
main {
display: grid;
grid-template-columns: 5% 95%;
grid-template-rows: auto;
background-color: var(--hintergrund-13);
}
figcaption {
font-size: 75%;
color: var(--textfarbe-5);
margin-top: -2px;
background-color: var(--hintergrund-13, 0.25);
backdrop-filter: blur(5px);
}

.kapitel-name {
grid-column: 1/2;
display: flex;
position: fixed;
top: calc(50vh + (0 - 50) * ((100vh - 300px) / (600 - 300)));
height: calc(45vh + (30 - 45) * ((100vh - 300px) / (600 - 300)));
padding-right: calc(3px + (6 - 3) * ((100vw - 320px) / (2000 - 320)));
padding-left: calc(3px + (6 - 3) * ((100vw - 320px) / (2000 - 320)));
background-color: var(--hintergrund-1);
color: var(--textfarbe-1);
align-items: center;
justify-content: center;
font-size: calc(7px + (12 - 7) * ((100vh - 300px) / (1000 - 300)));
writing-mode: vertical-lr;
letter-spacing: .1em;
text-transform: uppercase;
border-right: 2.5px solid var(--hintergrund-10);
border-radius: .5vh;
z-index: 1;
}
.projekt {
display: flex;
margin: 7.5vh 30px 10vh 30px;
gap: 50px;
justify-content: center;
align-items: center;
flex-wrap: wrap;        
}
#projekt-1 {
grid-column: 2/3;
grid-row: 1/2;
margin-top: calc(100px + (300 - 160) * ((100vh - 300px) / (1500 - 300)));
}
#projekt-2 {
grid-column: 2/3;
grid-row: 2/3;
margin-bottom: 75px;
}
#projekt-3 {
grid-column: 2/3;
grid-row: 3/4;
margin-bottom: 75px;
}
#projekt-4 {
grid-column: 2/3;
grid-row: 4/5;
margin-bottom: 75px;
}
#projekt-5 {
grid-column: 2/3;
grid-row: 5/6;
margin-bottom: 75px;
}
.card {
width: 220px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
}
.projekt-name {
width: 100%;
margin-left: 15px;
font-size: 150%;
font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (2000 - 300)));
color: var(--textfarbe-1);
font-weight: 900;
}
.projekt-beschreibung {
position: absolute;
width: 85%;
padding: 3px;
color: rgb(252, 252, 252, 0);
font-size: 60%;
hyphens: auto;
}
.projekt-beschreibung-h {
position: absolute;
width: 55%;
padding: 3px;
color: rgb(252, 252, 252, 0);
font-size: 60%;
hyphens: auto;
}
.img-projekt-quer {
width: calc(200px + (400 - 200) * ((100vw - 250px) / (2000 - 300)));
height: auto;
border: 1px solid gray
}
.img-projekt-hoch {
height: 300px;
width: auto;
}
.card:hover {
transform: scale(1.15);
transition: .5s;
}
.card:hover figcaption {
color: var(--textfarbe-1);
transition: 1s;
}
.card:hover .projekt-beschreibung {
color: var(--textfarbe-1);
background-color: rgb(252, 252, 252, 0.35);
backdrop-filter: blur(5px);
transition: 2.5s;
}
.card:hover #projekt-beschreibung-p3 {
background-color: rgb(252, 252, 252, 0.65);
}
.card:hover #projekt-beschreibung-p4 {
background-color: rgb(252, 252, 252, 0.55);
}
.card:hover .projekt-beschreibung-h {
color: var(--textfarbe-1);
background-color: rgb(252, 252, 252, 0.35);
backdrop-filter: blur(5px);
transition: 2.5s;
}
#bild-edit-1 {
width: 150%; 
height: auto;
margin-left: -25%;
}

@media screen and (min-width: 500px) and (min-height: 600px){
.img-projekt-hoch {
height: 400px;
width: auto;
}
.projekt {
column-gap: 150px;   
}
}

@media screen and (min-width: 1000px) and (min-height: 700px){
.img-projekt-hoch {
height: 500px;
width: auto;
}
.projekt {
column-gap: 300px; 
row-gap: 125px;
}
}