BODY {position:relative;overflow:auto;background:var(--dbg);color:var(--lfg);min-height:100vH;display:block;margin:50px 0;}
* {font-family:Fliess;}
h1,h2,h3,h4,h5,h6,th {font-family:Akzent;}
th {font-size:1.2rem;}
strong {display:inline;}

HEADER {background:var(--gbg);color:var(--lfg);padding:10px;margin:0;}

DL {display:flex;flex-flow:row nowrap;margin:0 10px;font-size:1.1rem;}
DL:first-child {padding-top:10px}
DL:last-child {padding-bottom:20px;}
DL.text DD {padding-top:8px;}
DT {width:150px;line-height:1.9rem;padding:0 0 0 10px;flex:0 0 auto;}
DD {line-height:1.9rem;}

.text DD {}

ARTICLE {padding:0;}

NAV {background:var(--dfg);}

TABLE {font-size:1.1rem;width:100%;}
TR:hover {background:rgba(0,0,0,.82);}
TR.header:hover {background:rgba(255,255,255,.82);}
TH,TD {padding:5px 10px;line-height:1.9rem;}
TH,TD A {text-decoration:none;line-height:1.9rem;position:relative;}
TD A {display:block;}
TH.active:after {content:'⏶';position:absolute;display:inline-block;top:0px;margin-left:2px;}
TH.active.false:after {content:'⏷';}
TD A:hover {text-decoration:underline;text-decoration-style:dotted;color:#fff;}
TH:active, TD A:active {background:#fff;text-decoration:underline;text-decoration-style:solid;}
TH {text-align:left;color:#000;border-bottom:solid 1px var(--lbg);line-height:1.9rem;cursor:pointer;background:var(--gbg);}
TD.tags {display:flex;flex-flow:row wrap;}
TD.released,TD.projekt,TD.src,TD.cat,TD.tag,TD.gestartet,TD.vollendet {font-weight:700;}
TD.titel {white-space:nowrap;}

OL OL, UL UL {padding-left:15px;;}
LI {list-style-type:square;list-style-position:inside;line-height:1.9rem;margin-left:0;}
LI P {display:inline;}

A {color:inherit;font-family:inherit;text-decoration-style:dotted;}
.menu.crumbs,aside,article,header {margin:0;}
article {margin:0;}
aside header,article header {margin:0;}

MAIN {margin:0;padding:0;overflow-x:hidden;overflow-y:scroll;background:#000;}

NAV.container {padding:0;}

PRE {margin:0 0 30px 0;border:dotted 1px #666;background:#ccc;font-size:1.4rem;line-height:1.4rem;background:rgba(0,0,0,.15);padding:10px;overflow:auto;width:calc(100vW - 380px);}
CODE {font-family:Mono;font-size:1rem;}
PRE CODE {display:block;width:auto;}

H5 {background:var(--gbg);border:solid 1px #000;color:var(--lfg);padding:5px 10px;line-height:140%;margin:20px 0 0 0;width:calc(100vW - 378px);}
H5~PRE, H5~BLOCKQUOTE {border-top:none;}

FOOTER {font-size:.8rem;display:block;position:fixed;bottom:0;left:0;width:100%;height:50px; background:var(--gbg);color:var(--lfg);overflow:hidden;padding-right:10px;}
FOOTER NAV {width:100%;display:flex;justify-content:space-between;}
FOOTER SPAN {margin-left:10px;line-height:50px;flex:1 1 auto;}

FOOTER A {display:inline;line-height:50px;text-decoration:underline;text-decoration-style:dotted;font-size:inherit;}
FOOTER A:hover {text-decoration:underline;text-decoration-style:solid;color:#fff;}
FOOTER A:active {background:#fff;text-decoration:underline;text-decoration-style:solid;}

FOOTER .built {text-align:right;opacity:.5;width:1px;overflow:hidden;padding-right:20px;}
FOOTER .built,FOOTER .ratter.sh {white-space:nowrap;}

.menu.crumbs {margin:0;padding:10px 0 10px 10px;font-weight:700;background:var(--dbg);width:100%;position: fixed; top: 0; z-index:10;}
.menu.btn {display:none;width:40px;height:40px;border-radius:1000px;padding:5px;position:fixed;top:20px;right:25px;background:var(--lfg);z-index:15;cursor:pointer;}
.menu.btn button {display:flex;flex-flow:column nowrap;width:40px;height:40px;padding:13px 5px 5px 5px;border-radius:1000px;background:var(--dbg) url(//static.pieli.net/img/ratter.sh/ratter.sh_plain_logo.svg) no-repeat left top;background-size:40px auto;cursor:pointer;}
.menu.btn .balken {opacity:0;width:26px;height:3px;margin:0 0 2px 2px;background:var(--dfg);}
.menu.btn button:hover {background:var(--dbg);}
.menu.btn button:active {background:#fff;}
.menu.btn button:hover .balken {opacity:1;}

.menu.main {position:fixed;z-index:1;top:0;right:0;display:block;width:100%;background:var(--lbg);border:solid 1px var(--gbg);}
.menu.main ul {display:flex;flex-flow:row noWrap;width:calc(100% - 100px);justify-content:flex-end;}
.menu.main li {margin:0;padding:0;list-style-type:none;position:relative;}
.menu.main a {display:block;font-size:1rem;line-height:30px;height:30px;background:transparent;color:var(--lfg);padding:10px 10px 10px 30px;}
.menu.main a:hover {background:var(--gbg);}
.menu.main a:active {background:#fff;color:var(--dbg);}
.menu.main .active a {background:var(--gbg);color:var(--lfg);}
.menu.main .active a:hover {background:#fff;color:var(--gbg);}
.menu.main.open {right:0;}

.menu.main A:before {content:'';display:block;width:20px;height:20px;background:url(//static.pieli.net/img/ratter.sh/home_logo.svg) no-repeat left 0;background-size:20px auto;position:absolute;top:16px;left:0;margin-left:5px;border-radius:1000px;}
.menu.main .pros A:before {background:url(//static.pieli.net/img/ratter.sh/projekt_logo.svg) no-repeat left 0;background-size:20px auto;}
.menu.main .rels A:before {background:url(//static.pieli.net/img/ratter.sh/release_logo.svg) no-repeat left 0;background-size:20px auto;}
.menu.main .cats A:before {background:url(//static.pieli.net/img/ratter.sh/kategorie_logo.svg) no-repeat left 0;background-size:20px auto;}
.menu.main .tags A:before {background:url(//static.pieli.net/img/ratter.sh/tag_logo.svg) no-repeat left 0;background-size:20px auto;}
.menu.main .active A:before {background-color:var(--lbg);}

.trenner {margin:0 5px;}
.trenner:nth-child(2) {margin:0 0 0 8px;line-height:2rem;}

.bilderrahmen {display:grid;grid-template-columns:300px auto;column-gap:20px;width:100%;overflow:hidden;}
ARTICLE.einzel:last-child {min-height:80vH;}
.bilderrahmen>DT {width:auto;text-align:center;}
.bilderrahmen>DD {display:flex;flex-flow:column wrap;}
.bilderrahmen>DT>IMG { width:300px;height:300px; margin-top:10px;}

HEADER.brand {overflow:hidden;display:flex;flex-flow:row nowrap;gap:5px;}
HEADER.brand .version {font-family:Akzent;}
HEADER.brand H2 {line-height:3rem;}
HEADER.brand H3 {line-height:3.35rem;}

.logo IMG {display:block;width:32px;height:32px;border:none;border-radius:1000px;background:#333;}
.projekt A,.title A,.titel A,.release A,.kategorie A,.reldate A {white-space:nowrap;}
.tags A {display:inline;}
.tags.liste A {display:block;}

.cat .Kategorie,.cat .kategorie {display:none;}

ARTICLE.einzel A {text-decoration:underline;text-decoration-style:dotted;}
ARTICLE.einzel A:hover {color:#fff;}
ARTICLE.einzel UL {margin-bottom:10px;}
ARTICLE.einzel dl:last-child, ARTICLE.einzel table {border-bottom:0;}

ARTICLE.einzel dd,ARTICLE.einzel dt,ARTICLE.einzel td,ARTICLE.einzel dt,ARTICLE.einzel a,ARTICLE.einzel li,ARTICLE.einzel p {font-size:1rem;}
ARTICLE.einzel dt,ARTICLE.einzel dd {line-height:2.6rem;}

ARTICLE.einzel .text {font-size:1rem; padding:20px 10px; }

ARTICLE P {width:calc(100vW - 378px);line-height:1.8em;margin-bottom:.5em;}

@media screen and (max-width: 1024px) {
	HEADER.brand {flex-flow:row wrap;}
	HEADER.brand H1 {width:100%;text-align:center;}
	HEADER.brand H2, HEADER.brand H3 {display:none;}
	H5,ARTICLE P, PRE {width:calc(100vW - 55px);}
}

@media screen and (max-width: 16800px) {
	FOOTER .uncle {display:none;}
}
@media screen and (max-width: 424px) {
	HEADER.brand .version {display:none;}
	HEADER.brand H1 {text-align:left;}
}