:root {
  --hintergrund-1: #ffffff;
  --hintergrund-2: #000000;
  --hintergrund-3: #410e0e;
  --hintergrund-4: #757272;
  --hintergrund-5: #e9e4e4;
  --hintergrund-6: #cfce8b;
  --hintergrund-7: #f0eddb;
  --textfarbe-1: #000000;
  --textfarbe-2: #ffffff;
  --textfarbe-3: #410e0e;
  --textfarbe-4: #757272;
  --textfarbe-5: rgb(73, 73, 73);
  --textfarbe-6: #beadad;
  --textfarbe-7: #e9e4e4;
}
*{
margin:0;
padding: 0;
}

body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 10% 88% auto;
grid-template-areas: 
"header"
"main"
"footer";
background-color: var(--hintergrund-1);
color: var(--text-farbe-1);
min-height: 100vh;
margin: 0%;
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 100;
letter-spacing: .1.5em;
}

header {
grid-area: header;
display: grid;
grid-template-columns: 80vw 20vw;
grid-template-areas: 
"brand hamburger"
"bild-header bild-header";
position: fixed;
background-color: var(--hintergrund-1);
width: 100%;
height: 10vh;
text-align: center;
z-index: 1;
}
#brand {
grid-area: brand;
background-color: var(--hintergrund-1);
padding-left: 20%;
padding: auto;
padding-top: 3.5vh;
padding-bottom: 3.5vw;
text-transform: uppercase;
font-size: calc(18px + (27 - 14) * ((100vw - 320px) / (1250 - 320)));
font-weight: 100;
letter-spacing: .25em;
font-family: proxima-nova-extra-wide, sans-serif;
font-style: normal;
font-weight: 500;
}
#titel-recht {
grid-area: brand;
background-color: var(--hintergrund-1);
margin: 0 0 10vh 20%;
padding: 4vh 0 0 3vw;
text-transform: uppercase;
font-size: calc(18px + (27 - 14) * ((100vw - 320px) / (1250 - 320)));
font-weight: 100;
letter-spacing: .25em;
}
#hamburger {
grid-area: hamburger;
background-color: var(--hintergrund-1);
height: 100%;
padding-top: 4.5vh;
}
#bild-header {
grid-area: bild-header; 
background-color: var(--hintergrund-1);
width: 98%;
color: var(--textfarbe-4);
padding: 1.65vh 1vw;
text-align: center;
background-size: cover;
max-height: 8vh;
}
.hr {
padding: 5% 0;
color: #000000;
}

footer {
grid-area: footer;
display: grid;
grid-template-areas:
"impressum" 
"datenschutz"
"cookie" 
"copyright"; 
background-color: var(--hintergrund-5);
color: var(--textfarbe-4);
padding: 0 0 3px 3px;
font-size: calc(10px + (12 - 10) * ((100vw - 100px) / (400 - 100)));
font-weight: 200;
z-index: 10;

}
#copyright {
grid-area: copyright;
display: flex;
margin: 10px 0 10px 0;
justify-content: center;
}
#cookie {
grid-area: cookie;
display: flex;
justify-content: center;
}
#impressum {
grid-area: impressum;
display: flex;
margin-top: 10px;
padding-right: 5%;
justify-content: center;
}
#datenschutz {
grid-area: datenschutz;
display: flex;
padding-right: 5%;
justify-content: center;
}

#kapitel-name{
grid-area: kapitel-name;
display: flex;
position: fixed;
background-color: var(--hintergrund-1);
color: var(--textfarbe-1);
align-items: center;
justify-content: center;
font-size: 75%;
writing-mode: vertical-lr;
letter-spacing: .1em;
text-transform: uppercase;
border-right: 2.5px solid rgb(177, 168, 168 );
border-radius: .5vh;
}
.inhalt-kapitel {
display: flex;
background-color: var(--hintergrund-1);
color: var(--textfarbe-1);
padding: 2vh 2vw;
align-items: center;
justify-content: center;
}
.abbildung-portfolio {
display: flex;
align-items: center;
justify-content: center;
padding: 0 7.5%;
}
.abbildung-portfolio-absatz {
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 12.5vh 0;
padding: 0 7.5%;
}
.text-portfolio {
margin: 3vh 7.5% 10vh 7.5%;
font-size: 70%;
text-align: justify;
}

a {
text-decoration: none;
color: var(--textfarbe);
}
a:hover {
color: var(--textfarbe);
font-weight: 900;
letter-spacing: .05em;
}
a.link-text {
text-decoration: none;
color: var(--textfarbe-4);
font-weight: 900;
letter-spacing: normal;

}
a.link-text:hover {
color: var(--textfarbe-2);
font-weight: 900;
}

@media screen and (min-width: 400px) and (min-height: 300px){
body {
grid-template-columns: 90% 10%;
grid-template-rows: 10vh 83vh 6vh;
}
footer {
grid-area: footer;
display: grid;
grid-template-columns: 
calc(150px + (1600 - 150) * ((100vw - 400px) / (2000 - 400))) 
calc(100px + (150 - 80) * ((100vw - 400px) / (2000 - 400))) 
calc(65px + (100 - 60) * ((100vw - 400px) / (2000 - 400))) 
calc(65px + (100 - 60) * ((100vw - 400px) / (2000 - 400)));
grid-template-rows: 6vh;
grid-template-areas:
"copyright cookie impressum datenschutz"; 
background-color: var(--hintergrund-1);
font-size: calc(9px + (12 - 8) * ((100vw - 400px) / (2000 - 400)));
}
#titel-recht {
margin: 0 0 10vh 10%;
}
#copyright {
padding-left: calc(10px + (20 - 10) * ((100vw - 400px) / (2000 - 400)));
justify-content: left;
align-items: center;
margin: 0;
}
#cookie {
justify-content: right;
align-items: center;
padding-right: calc(10px + (20 - 10) * ((100vw - 400px) / (2000 - 400)));
margin: 0;
}
#impressum {
justify-content: right;
align-items: center;
padding-right: calc(8px + (20 - 8) * ((100vw - 400px) / (2000 - 400)));
margin: 0;
}
#datenschutz {
justify-content: right;
align-items: center;
padding-right: calc(10px + (20 - 10) * ((100vw - 400px) / (2000 - 400)));
margin: 0;
}
}
@media screen and (min-width: 400px) and (min-height: 600px){
body {
grid-template-rows: 10vh 86vh 4vh;
}
footer {
grid-template-rows: 4vh;
}
}
@media screen and (min-width: 400px) and (min-height: 900px){
body {
grid-template-rows: 10vh 87vh 3vh;
}
footer {
grid-template-rows: 3vh;
}
}