@font-face {
  font-family:"Days One";
  src: url("fonts/DaysOne-Regular.ttf") format('truetype');
}
@font-face {
  font-family:"Gruppo";
  src: url("fonts/Gruppo-Regular.ttf") format('truetype');
}
@font-face {
  font-family:"Lato";
  src: url("fonts/Lato-Regular.ttf") format('truetype');
}
@font-face {
  font-family:"Lato";
  src: url("fonts/Lato-Black.ttf") format('truetype');
  font-weight: bold;
}
@font-face {
  font-family:"Lato";
  src: url("fonts/Lato-BoldItalic.ttf") format('truetype');
  font-style: italic;
}

body {
  background: #23262f;
  background-image: linear-gradient(90deg, hsl(225 14% 13%) 0, hsl(225 12% 23%) 50%, hsl(225 14% 13%) 100%);
  margin:0;
  font-size:1.125em;
  counter-reset: section;
}

.Box {
  background: #4b4b4b;
  background-image: linear-gradient(90deg, hsl(292 7% 20%) 0, #444 100%);
  box-sizing: content-box;
  margin: 2em auto;
  max-width: 1000px;
  padding:2em 0;
  border: none;
  border-radius: 15px;
  box-shadow: 0 -2px 1px 1px #282828 inset, 0 1px 1px 1px #b4b4b4 inset;
  font-size:1em;
}
.Box_Content {
  position: relative;
  background: #333;
  background-image: radial-gradient(farthest-corner at 50% 0, #444444 0, hsl(193deg 18% 20%) 100%);

  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
  padding:1em 2em 0.75em 2em;
  box-shadow: 0 1px 1px 1px #1e1506 inset, 0 -1px 1px 1px #b2a692 inset;
}
.Box_Columns  {
  column-count: 2;
  column-gap: 30px;
  column-rule: #5d646c 1px solid;
  padding:1em 2em 1.4em 2em;
}

h1 {
  color: #76263c;
  margin:0 0 0.3em 0;
  font: normal 2.3em/1 "Days One", sans-serif;
  text-shadow: 0 0 2px #fced00 , 0 0 8px #e091b2 ;
  text-overflow: clip;
  column-span: all;
}
h2 {
  color: #ea3;
  /* kein margin-top, da in Box ganz oben */
  margin: 0 0 0.4em 0;
  font: normal 2em/1 "Days One", sans-serif;
  text-shadow: 0 0 2px #fc006d , 0 0 8px #e091b2 ;
  text-overflow: clip;
  column-span: all;
}
h3 {
  color:#d8c1ff;
  margin: 0.8em 0 0.2em 0;
  font: normal 1.5em/1 "Days One", sans-serif;
  text-shadow: 0 0 3px #4200fa, 0 0 6px #c77352;
  column-span: all;
}
h4 {
  color: #a36bff;
  margin: 0.7em 0 0.2em 0;
  font: normal 1.5em/1 "Gruppo", sans-serif;
  text-overflow: clip;
  text-shadow: 0 0 1px #ddc590;
  break-after: avoid-column;
}
h5 {
  margin: 1em 0 0.3em 0;
  font-family: monospace;
  font-size: 1.3em;
  color: #1b986e;
  text-shadow: 1px 1px 2px #000000e3, 1px 1px 2px #000000e3, 0px 0px 8px #aab7bb;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0.5em;
}
h5 + h5 {
  margin-top: 0;
}
p + h5 {
  padding-top: 5px;
  border-top: 1px solid #4b5063;
}
h5 + p {
  padding-bottom: 0.4em;
  padding-left: 0.5em;
  border-bottom: 1px solid #282b35;
}
h5 .return {
  color: #c19e5c;
}
/* Nummerieren von Überschriften */
.nr::before {
  counter-increment: section;
  content: counter(section) ". ";
}
p, li, .TCell, .TCell_long, .TCell_short, .caption {
  color: #fff;
  font-family:"Lato", sans-serif;
  font-size: 0.85em;
  text-shadow: 0 0 3px #e5b139, 0 0 1px #0057e5;
}
p {
  /* top kann wg. Columns nicht verwendet werden! */
  margin: 0 0 0.6em 0;
}
p > b {
  text-shadow: 1px 1px 0px #000, 0px 0px 8px #fff8;
  color: #caecff;
}
p ~ ul {
  color: #caf;
}
.caption {
  font-size: 0.65em;
  margin-left: 0.8em;
  margin-top: 0.3em;
}
ul, ol {
  margin:0 0 0.5em 0;
  padding-left:1.125em;
}
li {
  margin:0;
}
li:first-child {
  break-after: avoid-column;
}
ul.todo {
  list-style: none;
}
ul.todo > li {
  text-indent: -1.6em;
  margin-left: 0.25em;
}
ul.todo > li::before {
  /* ➼ */
  content: "\27B8";  
  padding-right: 1ch;
}

/* Links */
a[name] {
  scroll-margin-top: 2em;
}
a[href="#top"] {
  scroll-margin-top: 2em;
  font-size: 1.5em;
  text-decoration: none;
}
#toparrow {
  position: absolute;
  right: 1em;
  bottom: -1.75em;
}
.Box a {
  color: #9cf1b0;
  text-decoration: none;
}
.Box a:visited {
  color: #53d271;
}
.Box a:hover {
  text-shadow: 0 0 6px #ffffff;
}
b {
	color: #fff;
}
i {
  color: #ffe24b;
  font-style: italic;
}
u {
  text-decoration:none;
	color: #000;
	background-color: #999;
	padding-left: 5px;
	padding-right: 5px;
  padding-bottom: 2px;
	border-width: 1px;
	border-style: solid;
	border-color: #CCC #333 #333 #CCC;
}
/* Code */
tt {
  background-color: #55305a;
  border: white 1px solid;
  border-radius: 4px;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 1.2em;
}
cite {
  color: white;
  background-color: #648199;
  background-image: linear-gradient(340deg, #324e4e, transparent);
  border: white 1px solid;
  font-weight: 800;
  font-family: 'Days One';
  font-size: 1.6em;
  font-style: italic;
  margin: 0.5em 1em 1em 1em;
  padding: 0.6em;
  display: inline-block;
  text-shadow: 2px 1px 5px black;
  box-shadow: 6px 7px 5px 3px #0006;
}
cite::before {
  content: "\"";
}
cite::after {
  content: "\"";
}
pre {
  font-size: 1.2em;
  background-color: #ffcf88;
  padding: 0.3em 0.6em;
  white-space: pre-wrap;
  user-select: all; 
}
pre tt {
  font-size: revert;
  background-color: revert;
  border: revert;
  padding: revert;
  color: #00811c;
}
/* Tabellen */
.TRow, .THead {
  display: table-row;
  background: hsl(193deg 25% 28%);
}
.TRow:nth-child(odd) {
  background: hsl(0deg 25% 30%);
}
.THead {
  font-weight: bold;
  background: #714154;
}
.TCell, .TBild, .TCell_long, .TCell_short {
  width: 206px;
  display: table-cell;
  padding: 3px 9px;
  /* white-space: pre; gerade schlecht, wenn in Box_Columns */
  border-bottom: 1px solid #6c6b6b;
}
.TCell:first-child, .TCell_short {
  border-right: 1px solid #6c6b6b;
}
.TCell_long, .TCell_short {
	width: revert;
}
.TCell_short {
	white-space: pre-line;
}

/* Bilder */
img {
}
.TBild {
  padding:0;
}

.avoidbreak {
  break-after: avoid-column;
}
.einspaltig {
  column-span: all;
}

.Footer {
  color: #ffdd1a;
  font: normal 1.4em/1 "gruppo", sans-serif;
  text-shadow: 1px 1px 1px #1d0077;
  width: fit-content;
  height: 0;
  margin: 5px auto 0 auto;
}