body {
header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 14vh;
grid-template-areas:
"haupttitel haupttitel";
max-height: 100%;
background-color: rgb(167, 58, 58);
}
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 11.25vh);
grid-template-areas:
"angebot editorialdesign plakat flyer"
"angebot editorialdesign plakat kommunikationsdesign"
"angebot xia xia kommunikationsdesign"
"etiketten xia xia kommunikationsdesign"
"grafikdesign xia xia illustrationen"
"grafikdesign logo film illustrationen"
"bewegtbild füller kontakt kontakt";
margin: 0;
font-family: tekton-pro, sans-serif;
font-style: normal;
font-weight: 300;
}
footer {
color: var(--text-2);
background-color: rgb(252, 252, 252 );
border: 2px solid rgb(0, 0, 0);
}
}
#brand {
grid-area: haupttitel;
font-size: calc(18px + (60 - 18) * ((100vw - 400px) / (2000 - 400)));
background-color: rgb(252, 248, 248);
color: var(--text-2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
letter-spacing: .45em;
border: 2px solid rgb(0, 0, 0);
line-height: 125%;
font-family: proxima-nova-extra-wide, sans-serif;
font-style: normal;
font-weight: 700;
}

.index-themen {
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-lr; 
text-orientation: upright; 
text-align: center;
border: 2px solid rgb(0, 0, 0);
}
#item-1-angebot {
grid-area: angebot;
background-color: var(--hintergrund-20);
color: var(--text-1);
font-size: calc(15px + (40 - 16) * ((100vh - 400px) / (2000 - 400)));
line-height: 7.5vw;
}
#item-2-bewegtbild {
grid-area: bewegtbild;
background-color: var(--hintergrund-6);
color: var(--text-1);
font-size: calc(15px + (35 - 15) * ((100vh - 400px) / (2000 - 400)));
writing-mode: horizontal-tb;
}
#item-3-füller {
grid-area: füller;
background-color: var(--hintergrund-12);
color: var(--text-1);
font-size: calc(10px + (30 - 10) * ((100vh - 400px) / (2000 - 400)));
writing-mode: horizontal-tb;
}
#item-4-editorial {
grid-area: editorialdesign;
background-color: var(--hintergrund-5);
color: var(--text-1);
font-size: calc(6.75px + (40 - 8) * ((100vh - 400px) / (2000 - 400)));
}
#item-5-grafik {
grid-area: grafikdesign;
background-color: var(--hintergrund-3);
color: var(--text-2a);
font-size: calc(11px + (38 - 12) * ((100vh - 400px) / (2000 - 400)));
font-weight: 900;
}
#item-6-etiketten {
grid-area: etiketten;
background-color: var(--hintergrund-2);
color: var(--text-);
writing-mode: horizontal-tb; 
font-size: 20px;
font-size: calc(16px + (120 - 16) * ((100vw - 320px) / (4000 - 320)));
}
#item-7-kommunikations {
grid-area: kommunikationsdesign;
background-color: var(--hintergrund-15);
color: var(--text-2);
padding-top: 5%;
font-size: calc(6.1px + (40 - 7) * ((100vh - 400px) / (2000 - 400)));
font-weight: 900;
}
#item-8-kontakt {
grid-area: kontakt;
background-color: var(--hintergrund-18);
color: var(--text-2);
writing-mode: horizontal-tb; 
font-size: 8vw;
}
#item-9-plakat {
grid-area: plakat;
background-color: var(--hintergrund-9);
color: var(--text-1);
font-size: 2.5vh;
}
#item-10-illustrationen {
grid-area: illustrationen;
background-color: var(--hintergrund-6);
color: var(--text-1);
font-size: calc(5px + (24 - 5) * ((100vh - 400px) / (2000 - 400)));
}
#item-11-xia {
grid-area: xia;
background-color: rgb(0, 3, 1);
color: rgb(188, 184, 204);
writing-mode: horizontal-tb; 
font-size: calc(4px + (36 - 4) * ((100vh - 400px) / (2000 - 400)));
padding: 5%;
border: 5px solid rgb(177, 169, 169);
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 100;
}
#item-12-film {
grid-area: film;
background-color: var(--hintergrund-23);
color: var(--text-1);
font-size: calc(19px + (35 - 15) * ((100vw - 320px) / (4000 - 320)));
font-weight: 500;
writing-mode: horizontal-tb;
padding: 0 2px;
}
#item-13-flyer {
grid-area: flyer;
background-color: var(--hintergrund-23);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(15px + (30 - 8) * ((100vh - 400px) / (2000 - 400)));
writing-mode: horizontal-tb;
}
#item-14-logo {
grid-area: logo;
display: flex;
background-color: var(--hintergrund-11);
align-items: center;
justify-content: center;
text-align: center;
font-size: calc(20px + (40 - 20) * ((100vh - 400px) / (2000 - 400)));
writing-mode: horizontal-tb;
}

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


@media screen and (orientation: landscape){  
body {
grid-template-rows: 5vh 90.5vh 4vh;
}
#item-1-angebot {
writing-mode: horizontal-tb; 
padding-bottom: 7.5%;
font-size: 5vw;
}
#item-2-bewegtbild {
writing-mode: horizontal-tb; 
font-size: 2.5vw;
}
#item-3-füller {
writing-mode: horizontal-tb; 
font-size: 2.5vw;
}
#item-4-editorial {
writing-mode: horizontal-tb; 
font-size: 4vw;
line-height: 100%;
}
#item-5-grafik {
writing-mode: horizontal-tb; 
font-size: 4vw;
line-height: 100%;
}
#item-7-kommunikations {
writing-mode: horizontal-tb; 
font-size: 3vw;
line-height: 100%;
}
#item-8-kontakt {
writing-mode: horizontal-tb; 
font-size: 4vw;
}
#item-9-plakat {
writing-mode: horizontal-tb; 
font-size: 5vw;
}
#item-10-illustrationen {
writing-mode: horizontal-tb; 
font-size: 3vw;
}
#item-11-xia {
writing-mode: horizontal-tb; 
font-size: calc(11px + (42 - 5) * ((100vw - 320px) / (3000 - 400)));
}
#item-12-film {
writing-mode: horizontal-tb; 
font-size: 1.75vw;
}
#item-13-flyer {
writing-mode: horizontal-tb; 
font-size: 2.5vw;
line-height: 70%;
}
#item-14-logo {
writing-mode: horizontal-tb; 
font-size: 2.5vw;
}