@font-face {
    font-family: carlito;
    src: url("../fonts/Carlito-Regular.ttf")
}
@font-face {
    font-family: carlito;
    font-weight: bold;
    src: url("../fonts/Carlito-Bold.ttf")
}
@font-face {
    font-family: carlito;
    font-style: italic;
    src: url("../fonts/Carlito-Italic.ttf")
}
@font-face {
    font-family: carlito;
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/Carlito-BoldItalic.ttf")
}

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

div, ul, ol, li, dl, dt, dd { display: block; padding: 0; margin: 0; }
li { display: list-item; margin-left: 0; }
table { border-spacing: 0; }

html { font-family: Calibri, carlito, sans-serif; background: #eee; }
textarea { font-family: monospace; }
html { scroll-padding-top: 4rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-size: 1.5rem; color: black; margin: 1rem 0; }
a { color: #08619d; font-weight: bold; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
body > nav { position: sticky; top: 0; height: 2.6rem; }
nav h1 { flex: auto; margin: 0; font-size: 1.7rem; color: black; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; color: black; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav h1 a img { position: relative; top: 0.3rem; }
a { text-decoration: none; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; text-decoration: none; }

.content {
    padding: 0 1rem 1rem 1rem;
}

.navline {
    display: flex;
    justify-content: space-between;
    position: sticky;
    padding-top: 0.3rem;
    top: 2.6rem;
    background: white;
}

.content > header {
    border-bottom: 1px solid lightgray;
    display: flex;
    align-items: flex-end;
}

.content > header h1 {
    flex: auto;
    margin: 1rem 0 0.25rem 0;
}

.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0 0 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content label.inline { font-weight: normal; display: inline-block; }
.content input, .content textarea { margin-bottom: 1em; }
.content input:last-child { margin-bottom: 0; }
.content textarea { min-height: 12em; resize: vertical; height: 66vh; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }
th { vertical-align: top; text-align: left; }
td { vertical-align: top; padding-right: 1.5rem; margin-right: 1.5rem; }
td { white-space: nowrap; }
h2 { font-size: 1.2rem; font-weight: bold; }
h3 { font-size: 1.2rem; font-weight: normal; text-decoration: underline; }
h4 { font-size: 1.2rem; font-variant: small-caps; }

#unit_toc { display: block; list-style: none; }
#unit_toc li { padding: 0.2rem; padding-right: 1em; display: inline-block; }

#units { width: 100%; margin: 0; padding: 0; border: 0; }
#units * { vertical-align: top; }
#units .heading { font-weight: bold; }
#units .name { border: 0; padding: 0; margin: 0;}
#units .secondary { margin-left: 3rem; }
#units .unit { margin-bottom: 0rem; }
#units .unit:hover { background-color: #ddd; }

#files .file { display: flex; flex-direction: row; }
#files .name { margin-right: 1rem; }

.showimage { max-width: 100%; margin-top: 0.5rem; }

.toc { list-style: none; margin-left: 0; padding-left: 0; }
.section { font-weight: bold; font-size: 1.2rem; margin-top: 0.7em; }
.separator { height: 0.6rem; }
.zusatz { margin-left: 2rem; font-size: 0.9rem; }
.indented { margin-left: 3rem; }
.blau { background: #ddf1f8; padding: 0.3rem; margin-bottom: 0.5rem; }
.grau { background: #dadada; padding: 0.3rem; margin-bottom: 0.5rem; }
.dialog { margin-left: 3rem; }
.standard .large_image { max-width: 930px; }
.large_image { max-width: 100%; }
.dotted_line { width: 100%; border: 0; border-top: 0.1rem dashed black; }
.solid_line { width: 100%; border: 0; border-top: 0.1rem solid black; }
.end_bar { height: 1rem; margin-bottom: 1rem; width: 100%; border: none; }
.end_bar.blau { background-color: #3399de; }
.end_bar.dunkelblau { background-color: #222ba7; }
.end_bar.gruen { background-color: #50ff50; }
.end_bar.rot { background-color: #ff6e6e; }
.end_bar.orange { background-color: #f3cf8c; }
.end_bar.rosa { background-color: #ffe1f8; }
.end_bar.gelb { background-color: #f3f38c; }
.end_bar.grau { background-color: #aaaaaa; }
.end_bar.grauschmal { background-color: #aaaaaa; height: 0.5rem; }
.caps { font-variant: small-caps; }
.fg_blau { color: #3399de; }
.fg_dunkelblau { background-color: #222ba7; }
.fg_gruen { color: #00b050; }
.fg_rot { color: #ee0000; }
.fg_orange { color: #ffa000; }
.fg_rosa { color: #ffe1f8; }
.fg_gelb { color: #ffc000; }
.bg_blau { background-color: #ddf1f8; }
.bg_dunkelblau { background-color: #222ba7; }
.bg_gruen { background-color: #50ff50; }
.bg_rot { background-color: #ff6e6e; }
.bg_orange { background-color: #f3cf8c; }
.bg_rosa { background-color: #ffe1f8; }
.bg_gelb { background-color: #f3f38c; }
.box {
    display: inline-block;
    border: 1px solid black;
    padding: 1rem 0.6rem;
    margin: 1rem 0.5rem;
}
.center { display: block; text-align: center; }


.part {
    display: flex;
    flex-direction: column;
}

.overview-row {
    display: flex;
    border-top: 0.1rem solid black;
}

.overview-title {
    width: 10rem;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-variant: small-caps;
    padding: 0.5rem 1rem 0.5rem 0;
    margin: 0;
}

.overview-contents {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.5rem 1rem;
    margin: 0;
}

.overview-contents > * {
    padding-top: 0;
    margin-top: 0;
}

.overview-contents > :last-child {
    margin-bottom: 0;
}

.overview-contents > ul {
    margin-left: 1rem;
}

.overview-contents > ol {
    margin-left: 1rem;
}

.overview-contents > ul ul,
.overview-contents > ol ul,
.overview-contents > ul ol,
.overview-contents > ol ol {
    margin-left: 2rem;
}

.overview-contents > .blau > ul, .overview-contents > .blau > ol {
    margin-left: 1rem;
}

.overview-contents > *, .blau > *, .grau > * {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.overview-contents > :last-child, .blau > :last-child, .grau > :last-child {
    margin-bottom: 0;
}

.overview-contents p {
    margin: 0;
    padding: 0;
}

.overview-contents ul > li ~ li {
    margin-top: 0.3rem;
}
.overview-contents ul.dense > li ~ li {
    margin-top: 0rem;
}
.overview-contents ul.sparse > li ~ li {
    margin-top: 0.7rem;
}
.overview-contents p ~ p {
    margin-top: 0.5rem;
}
.overview-contents p ~ .blau {
    margin-top: 0.5rem;
}
.overview-contents p ~ ul {
    margin-top: 0.5rem;
}
.overview-contents p ~ ol {
    margin-top: 0.5rem;
}
.overview-contents hr {
    margin-top: 1rem;
}

.overview-contents li > p {
    margin-bottom: 0.5rem;
}

.part-row {
    display: flex;
}

.standard .part-row {
    display: flex;
    flex-direction: column;
}

.geschichte .part-row {
    display: flex;
    flex-direction: column;
}

.breit .part-row {
    display: flex;
    flex-direction: column;
}

.part-title {
    width: 10rem;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 1.10rem;
    font-weight: bold;
    padding: 0.5rem 1rem 0.5rem 0;
    margin: 0;
}

.standard .part-title {
    width: auto;
}

.geschichte .part-title {
    width: auto;
}

.breit .part-title {
    width: auto;
}

.part-abschnitt {
    width: 10rem;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 1.0rem;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    padding: 0.5rem 1rem 0.5rem 0;
    margin: 0;
}

.part-contents {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.5rem 1rem;
    margin: 0;
}

.standard .part-contents {
    padding: 0;
}

.geschichte .part-contents {
    max-width: 45rem;
    padding: 2rem 3rem;
    background: #ddd;
    border-radius: 3rem;
    margin-bottom: 1rem;
}

.breit .part-contents {
    padding: 0;
    max-width: 45rem;
}

.part-contents > *, .blau > *, .grau > * {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.part-contents > :last-child, .blau > :last-child, .grau > :last-child {
    margin-bottom: 0;
}

.part-contents p {
    margin: 0;
    padding: 0;
}

.part-contents ul > li ~ li {
    margin-top: 0.3rem;
}
.part-contents ul.dense > li ~ li {
    margin-top: 0rem;
}
.part-contents ul.sparse > li ~ li {
    margin-top: 0.7rem;
}
.part-contents p ~ p {
    margin-top: 0.5rem;
}
.part-contents p ~ .blau {
    margin-top: 0.5rem;
}
.part-contents p ~ ul {
    margin-top: 0.5rem;
}
.part-contents p ~ ol {
    margin-top: 0.5rem;
}
.part-contents hr {
    margin-top: 1rem;
}

.part-contents li > p {
    margin-bottom: 0.5rem;
}

.part-contents > .spalten {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.part-contents ul, .part-contents ol {
    margin-left: 1rem;
}

#results {
    list-style: none;
}

#results ul {
    list-style: none;
}

#subunits h2 {
    margin-bottom: 0;
}

#subunits ul {
    margin-top: 0;
    list-style: none;
}

footer { font-size: 0.6rem; color: #555; text-align: center; }

@media print {
    html, body, h1, h2, h3, p, div, span, table, tr, td, ul, ol, li { display: none; }
}