/* ============================== */
/* === Powered by locomputing === */
/* ============================== */


*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

header,aside,main,footer {
display: block;
}

@media screen and (min-width: 17em) {
body {
font-size: calc(1.2em + ((1.2vw - 0.1em) * 2));
}
}
@media screen and (min-width: 60em) {
body {
font-size: calc(.9em + ((.9vw - 0.1em) * 2));
}
}
@media screen and (max-width: 17em) {
html, body {
display: none;
}
}

body {
background: #8D8D74;
display: grid;
height: 99%;
margin: .05em;
grid-template-columns: repeat(1, 1fr);
}

aside {
grid-column: 1;
grid-row: 0;
}
main {
grid-column: 1;
grid-row: 1; 
}
footer {
grid-column: 1;
grid-row: 4;
}

#boxekop {
display: block;
width: 100%;
text-align: center;
background: #6e6e5a;
color: white;
margin: 0;
height: 1.15em;
font-size:70%;
font-weight: bold;
line-height: 1;
border-top: .075em solid white;
border-right: .12em solid black;
border-left: .06em solid black;
border-bottom: .1em solid black;
clip-path: polygon(.90em 0%,100% 0%,100% 20%,100% 80%,100% 100%,0% 100%,0% 80%,0% .90em);
-webkit-text-stroke: .007em black;
}
#boxekop .quad {
display: block;
width: 1em;
height: 1em;
margin: 0 0 0 -.05em;
float: left;
}
#boxekop .corn {
position: absolute;
width: 1.2em;
aspect-ratio: 1;
clip-path: polygon(50% 48%,90% 10%,90% 90%,10% 90%);
background: black;
margin: -.195em 0 0 -.195em;
}
#boxekop .corner {
position: absolute;
width: .98em;
aspect-ratio: 1;
clip-path: polygon(50% 50%,90% 10%,90% 90%,10% 90%);
background: #111111;
background: linear-gradient(135deg,#6e6e5a,#a0a08b,#cfcfc5);
margin: .12em 0 0 .11em;
}


#mainkop {
display: block;
width: 100%;
background: #6e6e5a;
color: white;
text-align: left;
margin: 0;
padding: 0;
height: 1.25em;
font-size:80%;
line-height: 1.2;
border-top: .085em solid white;
border-right: .15em solid black;
border-left: .1em solid black;
border-bottom: .1em solid black;
clip-path: polygon(1.08em 0%,100% 0%,100% 20%,100% 80%,100% 100%,0% 100%,0% 80%,0% 1.08em);
-webkit-text-stroke: .006em black;
}

#mainkop .quad {
display: block;
width: 1.35em;
height: 1.35em;
margin: -.02em 0 0 -.02em;
float: left;
}
#mainkop .corn {
position: absolute;
width: 1.35em;
aspect-ratio: 1;
clip-path: polygon(50% 50%,90% 10%,90% 90%,10% 90%);
background: black;
margin: -.2em 0 0 -.225em;
}
#mainkop .corner {
position: absolute;
width: 1.12em;
aspect-ratio: 1;
clip-path: polygon(50% 50%,90% 10%,90% 90%,10% 90%);
background: #111111;
background: linear-gradient(135deg,#6e6e5a,#a0a08b,#cfcfc5);
margin: .10em 0 0 .10em;
}

.boxinhalt {
width: auto;
font-size: 70%;
text-align: left;
background:#e7e7e2;
border-top:none;
border-right:.12em solid black;
border-left: .085em solid black;
border-bottom: none;
padding: 3px 0 .25em 0;
margin: 0;
}

.boxbor {
height: .012em;
background:white;
border-right: .087em solid black;
border-left: .06em solid black;
margin-top: -.45em;
}

.boxfus {
width: auto;
height: calc(.3em + ((.3vw - 0.1em) * 1));
background:#6e6e5a;
border-top: none;
border-right: .08em solid black;
border-left: .06em solid black;
border-bottom:.05em solid #515151;
padding: 8;
margin: 0 0 .1em 0;
}

.boxend {
width: 100%;
height: calc(.4em + ((.4vw - 0.1em) * 1));
background:#6e6e5a;
border-top: none;
border-right: .01em solid black;
border-left: 0em solid black;
border-bottom:.05em solid black;
padding: 8;
margin: 0 -.25em -.3em 0;
}

@media screen and (max-width: 60em) {
.boxfus1 {
display: none;
}
}


#maininhalt {
display: block;
width: auto;
background:#e7e7e2;
border-top:none;
border-right:.12em solid black;
border-left: .085em solid black;
border-bottom: .05em solid black;
}

footer {
display: block;
width: 100%;
text-align: center;
background: #6e6e5a;
color: white;
margin: 0;
height: 1.15em;
line-height: 1em;
font-size:50%;
font-weight: bold;
border-top: .075em solid white;
border-right: .12em solid black;
border-left: .06em solid black;
border-bottom: .1em solid black;
-webkit-text-stroke: .007em black;
}

.articlend {
height: calc(.35em + ((.35vw - 0.1em) * 1));
background:#6e6e5a;
border-top: none;
border-right: .1em solid black;
border-left: .06em solid black;
border-bottom:.035em solid black;
margin: 0 0 .1em 0;
}


@media screen and (min-width: 60em) {

body {
margin: .025em .05em 0 .05em;
height: 99%;
display: grid;
grid-template-columns: repeat(100, 1fr);
}
body { 
overflow-x: hidden; 
overflow-x: none; 
}

aside {
grid-column: 1 / 18;
grid-row: 1;
}
main {
grid-column: 18 / 101;
grid-row: 1; 
margin: 0 0 0 .05em;
}
footer {
grid-column: 1 / 101;
grid-row: 4;
display: block;
width: 100%;
text-align: center;
background: #6e6e5a;
color: white;
margin: .1em 0 0 0;
height: 1.15em;
line-height: 1em;
font-size:70%;
font-weight: bold;
border-top: .075em solid white;
border-right: .12em solid black;
border-left: .06em solid black;
border-bottom: .1em solid black;
-webkit-text-stroke: .007em black;
}
.footxt {
font-size: 75%;
}

.boxend {
display: none;
}

}