:root {
    --hintergrund-1: #050100;
    --hintergrund-2: #c4ebf0;
    --hintergrund-3: #0d6d43;
    --hintergrund-4: #d4c0c1;
    --hintergrund-5: #94639b;
    --hintergrund-6: #e6c8ea;
    --hintergrund-7: #fef8ea;
    --hintergrund-8: #c1995b;
    --hintergrund-9: #f25707;
    --hintergrund-10: #9d0d04;
    --hintergrund-11: #c06536;
    --hintergrund-12: #717c76;
    --hintergrund-13: #dcd6be;
    --hintergrund-14: #959387;
    --hintergrund-15: #516949;
    --hintergrund-16: #f1bbb9;
    --hintergrund-17: #41717f;
    --hintergrund-18: #4b5a43;
    --hintergrund-19: #a71903;
    --hintergrund-20: #faab44;
    --hintergrund-21: #e0c49c;
    --hintergrund-22: #641c04;
    --hintergrund-23: #aa8be9;


    --text-1: #000000;
    --text-2: #a08244;
    --text-3: #921009;
    --text-4: #bacb65;
    --text-5: #dc8e4c;
    --text-6: #535353;
    --text-7: #fcf8f8;
    --text-2a: #a3823f;
}
*{
margin:0;
padding: 0;
}
body {
height: 99vh;
background-color: var(--hintergrund-2);
font-size: 1.5vw;
font-weight: 500;
color: var(--text-farbe-e);
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 100;
}
#header-titel {
grid-area: titel;
background-color: var(--hintergrund-7);
color: var(--text-2);
display: flex;
align-items: center;
justify-items: center;
padding-left: 15vw;
font-weight: 900;
}
#by-xia{
font-size: 50%;
color: var(--text-3);
}
#header-logo {
grid-area: logo;
background-color: var(--hintergrund-7);
display: flex;
align-items: center;
justify-content: right;
margin: 4vw 5vw 0 0;
height: 60%;
}
footer {
grid-area: footer;
display: grid;
grid-template-areas:
"impressum" 
"datenschutz"
"cookie" 
"copyright"; 
background-color: var(--hintergrund-5);
color: var(--textfarbe-4);
padding: 0 3px 0 3px;
font-size: calc(10px + (12 - 10) * ((100vw - 100px) / (400 - 100)));
font-family: Yu Gothic;
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;
}
#zurück {
grid-area: zurück;
position: fixed;
background-color: var(--hintergrund-21);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
writing-mode: vertical-lr; 
text-orientation: upright;
margin: 17vh 0 5vh 1vw; 
padding: 1.5vh 0vw;
color: var(--text-n-6);
font-size: 1.25vh;
font-weight: 500;
}

.text-upper {
text-transform: uppercase;
font-size: 90%;}
#font-größer {
font-size: 100%;
color: #f25707;
}
#kleiner{
font-size: 40%;
}
.fettschrift {
font-weight: bolder;
}
figcaption {
text-align: center;
font-size: 50%;
}
.hochformat {
font-size: 1.25vh;
}
a {
text-decoration: none;
color: var(--text-1);
}
a:hover {
color: var(--text-1);
font-weight: 900;
letter-spacing: .5em;
}
a.fix {
text-decoration: none;
}
a:hover.fix {
color: var(--text-1);
letter-spacing: 0;
}
a.fix-2 {
text-decoration: none;
color: var(--text-2);
  }
a:hover.fix-2 {
color: var(--text-2);
letter-spacing: 0;
}
a.l-2 {
text-decoration: none;
color: var(--text-2);
}
a:hover.l-2 {
color: var(--text-5);
letter-spacing: 0;
}

@media screen and (min-width: 400px) and (min-height: 300px){
body {
grid-template-rows: 10vh 84vh 4vh;
}
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 0);
font-size: calc(9px + (12 - 8) * ((100vw - 400px) / (2000 - 400)));
color: #94639b;
padding: 0;
}
#copyright {
padding-left: calc(10px + (20 - 10) * ((100vw - 400px) / (2000 - 400)));
justify-content: left;
align-items: center;
margin: 0;
font-size: 100%;
}
#cookie {
justify-content: right;
align-items: center;
padding-right: calc(10px + (20 - 10) * ((100vw - 400px) / (2000 - 400)));
margin: 0;
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: 800px),  (orientation: landscape) {
#header-titel {
font-size: 6vh;
}
}