/* Table of contents
    0. Specifications and file imports
    1. General stylings and basic tags
    2. Main navigation bar
    3. Side navigation bar
    4. Meta information
    5. Main and content styles
    6. Email Form
    7. Sidepanel
    8. Adjacent navigation bar
    9. Footer */

/* 0. Specifications and file imports */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

@font-face {
    font-family: "Source Code Pro";
    font-weight: bold;
    font-style: italic;
    src: url("src/Fonts/SourceCodePro/SourceCodePro-BoldItalic.ttf");
}
@font-face {
    font-family: "Source Code Pro";
    font-weight: bold;
    src: url("src/Fonts/SourceCodePro/SourceCodePro-Bold.ttf");
}
@font-face {
    font-family: "Source Code Pro";
    font-style: italic;
    src: url("src/Fonts/SourceCodePro/SourceCodePro-Italic.ttf");
}
@font-face {
    font-family: "Source Code Pro";
    src: url("src/Fonts/SourceCodePro/SourceCodePro-Regular.ttf");
}

/* 1. General stylings and basic tags */

:root {
    font-family: Overpass, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 19px;
    line-height: 1.4;
    color: var(--font-clr);
    hyphens: auto;

    --clr-link: #51c5e7;
    --clr-link-hover: #34bae7;
    --bg-clr-hover: #bae8f7;
    --bg-clr-active: #d2eff9;

    --font-clr: #4f4f4f;
    --bg-clr: #f3f3f3;

    --hover-transition: all ease-in-out 75ms;

    --shadow-normal: rgba(0, 0, 0, 0.2) 2px 5px 10px -4px;
    --border-top-normal: 1px solid rgba(255, 255, 255, 0.1);
    --border-bottom-normal: 1px solid rgba(0, 0, 0, 0.1);
}

body {
    width: 100%;
}

a {
    color: var(--clr-link);
    text-decoration: none;
}
a:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin-bottom: 0.4em;
    text-transform: uppercase;
    font-size: 1.7em;
    font-weight: lighter;
    letter-spacing: 0.4px;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.4rem;
}
h3 {
    font-size: 1.1rem;
}
h4 {
    font-size: 0.95rem;
}

.subhead{
    opacity: 0.75;
}
.b {
    font-weight: bold;
}

p {
    margin-bottom: 1em;
    line-height: 1.4;
}

summary {
    border-bottom: 1px solid gray;
    line-height: 1;
    margin-top: 2rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

summary h2, summary h3, summary h4 {
    display: inline-block;
    margin-bottom: 0.25em;
    max-width: calc(100% - 2rem);
}

summary .subhead {
    text-indent: 1.12rem;
}

ol, ul {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

li, label {
    line-height: 1.4;
}

blockquote {
    margin: 1.5rem 3rem;
    font-style: italic;
    font-size: 0.9rem;
  }

.hidden {
    display: none;
}

.hint {
    padding: 12px 0px;
}

.info {
    background-color: #f5f7f9;
    border-color: #8cb3ff;
    border-width: 0;
    padding: 14px 10px;
    border-top-left-radius: 4px;
    border-left-width: 4px;
    border-bottom-left-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    border-style: solid;
}
.sidepanel-content {
    background-color: #f5f7f9;
    border-color: #ffc08c;
    border-width: 0;
    padding: 14px 10px 1px 10px;
    border-left-width: 0.4em;
    border-bottom-left-radius: 0.3em;
    box-sizing: border-box;
    width: 100%;
    border-style: solid;
}

.info summary {
    border-bottom: none;
    line-height: 1.4;
    margin-top: 0em;
    margin-bottom: 0em;
    cursor: pointer;
}

.info summary + * {
    margin-top: 1em;
}

code {
    background: #f9f9f9;
    padding: 0 0.1rem 0 0.1rem;
}

pre > code {
    background: none;
}

@media screen and(min-width: 1000px) {
    :root {
        hyphens: none;
    }
    h1 {
        font-size: 3em;
    }
}

footer {
    height: 8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #e9ecef;
}

/* 2. Main navigation bar */

nav {
    height: 5em;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: stretch;
    align-items: center;
    padding-left: 2em;
    padding-right: 2em;
    z-index: 10;
}
nav > * + * {
    margin-left: 2em;
}

nav #nav-toggle {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;
}
nav label[for=nav-toggle] {
    margin-left: auto;
    display: block;
    width: 40px;
    height: 24px;
    background-image: linear-gradient(
        var(--font-clr) 0% 20%,
        white 20% 40%,
        var(--font-clr) 40% 60%,
        white 60% 80%,
        var(--font-clr) 80% 100%
    );
    cursor: pointer;
}

nav a {
    display: block;
    color: inherit;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
nav a:hover {
    text-decoration: none;
    color: inherit;
}

.nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background-color: white;
}
.nav-item {
    height: 100%;
    padding: 1.5em 2em;
    transition: var(--hover-transition);
}
.nav-item.active {
    background-color: var(--bg-clr-active);
}
.nav-item:hover {
    color: inherit;
    background-color: var(--bg-clr-hover);
}

.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.handbook:hover {
    background-color: rgb(255, 235, 186);
}
.handbook::before {
    content: '';
    width: 2.5em;
    height: 2.5em;
    margin-right: 0.5em;
    background-image: url("src/Images/Book.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translateY(-0.1em);
}

#nav-toggle:checked ~ .nav-list {
    display: flex;
}

@media screen and (min-width: 1000px) {
    nav label[for=nav-toggle] {
        display: none;
    }

    .nav-list {
        display: flex;
        flex-direction: row;
        position: initial;
        margin-left: 2em;
        height: 100%;
    }

    .nav-item {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* 3. Side navigation bar */

.sidenav {
    position: relative;
    width: 100%;
    background-color: var(--bg-clr);
    box-shadow: var(--shadow-normal);
    flex-shrink: 0;
}

.nav-node {
    width: 100%;
    position: relative;
}
.nav-node a {
    display: block;
    color: inherit;
    width: 100%;
    border-left: 0.5em solid transparent;
    padding: 0.75em 1em;
    transition: var(--hover-transition);
}
.nav-node.active > a {
    background-color: var(--bg-clr-active);
}
.nav-node > a:hover {
    color: inherit;
    background-color: var(--bg-clr-hover);
    text-decoration: none;
}
.nav-node > .nav-node > a {
    padding-left: 2em;
}

@media screen and (min-width: 1000px) {
    .sidenav {
        width: 300px;
    }
}

/* 4. Meta information */

.meta {
    display: inline-block;
    text-align: left;
    margin: 1em;
}
.pdf {
    --bg-clr-icon: #ffddd9;
    --bg-clr-icon-active: #ffd0cb;
    color: inherit;
    display: inline-block;
    min-width: 15em;
    max-width: max-content;
    align-items: center;
    background-color: var(--bg-clr-icon);
    border-radius: 1000em;
    margin-left: auto;
    padding: 0.5em 1em;
    padding-top: 0.2em;
    transition: var(--hover-transition);
}
.pdf::before {
    content: '';
    /*background-image: url("data:image/svg+xml;utf8,<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\"><path style=\"fill:#E2E5E7;\" d=\"M128,0c-17.6,0-32,14.4-32,32v448c0,17.6,14.4,32,32,32h320c17.6,0,32-14.4,32-32V128L352,0H128z\"/><path style=\"fill:#B0B7BD;\" d=\"M384,128h96L352,0v96C352,113.6,366.4,128,384,128z\"/><polygon style=\"fill:#CAD1D8;\" points=\"480,224 384,128 480,128 \"/><path style=\"fill:#F15642;\" d=\"M416,416c0,8.8-7.2,16-16,16H48c-8.8,0-16-7.2-16-16V256c0-8.8,7.2-16,16-16h352c8.8,0,16,7.2,16,16 V416z\"/><g><path style=\"fill:#FFFFFF;\" d=\"M101.744,303.152c0-4.224,3.328-8.832,8.688-8.832h29.552c16.64,0,31.616,11.136,31.616,32.48 c0,20.224-14.976,31.488-31.616,31.488h-21.36v16.896c0,5.632-3.584,8.816-8.192,8.816c-4.224,0-8.688-3.184-8.688-8.816V303.152z M118.624,310.432v31.872h21.36c8.576,0,15.36-7.568,15.36-15.504c0-8.944-6.784-16.368-15.36-16.368H118.624z\"/> <path style=\"fill:#FFFFFF;\" d=\"M196.656,384c-4.224,0-8.832-2.304-8.832-7.92v-72.672c0-4.592,4.608-7.936,8.832-7.936h29.296 c58.464,0,57.184,88.528,1.152,88.528H196.656z M204.72,311.088V368.4h21.232c34.544,0,36.08-57.312,0-57.312H204.72z\"/><path style=\"fill:#FFFFFF;\" d=\"M303.872,312.112v20.336h32.624c4.608,0,9.216,4.608,9.216,9.072c0,4.224-4.608,7.68-9.216,7.68 h-32.624v26.864c0,4.48-3.184,7.92-7.664,7.92c-5.632,0-9.072-3.44-9.072-7.92v-72.672c0-4.592,3.456-7.936,9.072-7.936h44.912 c5.632,0,8.96,3.344,8.96,7.936c0,4.096-3.328,8.704-8.96,8.704h-37.248V312.112z\"/></g><path style=\"fill:#CAD1D8;\" d=\"M400,432H96v16h304c8.8,0,16-7.2,16-16v-16C416,424.8,408.8,432,400,432z\"/></svg>");*/
    background-image: url("src/Images/pdf.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    transform: translateY(0.3em)
}
.pdf:hover {
    text-decoration: none;
    background-color: var(--bg-clr-icon-active);
    color: inherit;
}

/* 5. Main and content styles */

main {
    min-height: calc(100vh - 13em);
    display: flex;
    flex-direction: column;
    padding-top: 2em;
}

.content {
    position: relative;
    margin-left: 1em;
    margin-top: 2em;
    text-align: right;
    width: calc(100% - 2em);
}

.cta-read-parent {
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    background-color: hsl(43, 100%, 89%);
    /* border: 3px solid hsl(43, 100%, 50%); */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-normal);
}
.cta-read-parent::before {
    content: '';
    display: inline-block;
    background-image: url("src/Images/Ausrufezeichen.svg");
    background-size: cover;
    background-position: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}
.cta-read-parent > div {
    display: inline-block;
    text-align: left;
    position: relative;
}

.root {
    display: block;
    max-width: 38rem;
    width: 80%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

code pre, .code pre, .linenos pre, .highlight > pre {
    font-family: "Source Code Pro", monospace;
}

pre p {
    margin-bottom: 1.2em;
}

.highlight {
    padding: 0.7em 1em;
    margin-bottom: 1em;
    max-width: 100%;
    overflow: auto;
    font-size: 0.9rem;
}
.highlight > pre {
    padding: 0 1em;
}
.linenos {
    padding: 0 1em 0 0;
    vertical-align: top;
}

@media screen and (min-width: 1000px) {
    main {
        flex-direction: row;
        align-items: flex-start;
    }

    .content {
        margin-top: 0;
        margin-left: 1em; /* info: for comments */
        margin-right: 10em; /* info: for overlay panels */
    }
}

/* 6. Email Form */

.form-container {
    position: relative;
}

.form-container > input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;
}
.form-container > label {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" xml:space=\"preserve\"><defs></defs><g transform=\"matrix(0.44 0 0 0.44 24.24 24.51)\" id=\"ee10545e-2965-43fa-899d-7dcdbb9b9324\"  ><path style=\"stroke: rgb(79,79,79); stroke-width: 2; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;\" vector-effect=\"non-scaling-stroke\"  transform=\" translate(-49.82, -49.94)\" d=\"M 49.844 20.512 C 70.524 20.512 87.273 31.782 87.273 45.668 C 87.273 59.555 70.524 70.129 49.844 70.771 C 45.378 74.564 45.964 77.5 31.982 79.37 C 35.224 76.914 39.371 74.885 38.679 69.916 C 23.421 66.926 12.364 57.046 12.364 45.669 C 12.363 31.622 29.161 20.512 49.844 20.512 z\" stroke-linecap=\"round\" /></g></svg>");
    background-position: top;
    background-size: 75%;
    background-repeat: no-repeat;
    display: block;
    width: 2em;
    height: 100%;
    min-height: 2em;
    cursor: pointer;
    position: absolute;
    right: 100%;
    top: 0;
}

form {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
}

.comment, .email, .send {
    font-size: inherit;
    font-family: inherit;
}
.comment {
    width: 100%;
    resize: none;
    margin-bottom: 1em;
    padding: 0.5em 1em;
}
.email {
    padding: 0.5em 1em;
    margin-bottom: 1em;
}
.send {
    border: none;
    background-color: var(--bg-clr-active);
    border-radius: 1000em;
    cursor: pointer;
    padding: 0.75em 1.25em;
    margin-bottom: 1em;
    transition: var(--hover-transition);
    box-shadow: var(--shadow-normal);
    border-top: var(--border-top-normal);
    border-bottom: var(--border-bottom-normal);
}
.send:hover, .send:focus {
    background-color: var(--bg-clr-hover);
}

.form-container > input[type="checkbox"]:checked ~ form {
    display: flex;
}

@media screen and (min-width: 1000px) {
    .form-container > label {
        width: 2.6em;
        background-size: 95%;
        margin-right: 0.4rem;
    }

    .send {
        margin-left: 2em;
    }
}

@media (hover: hover) {
    .form-container > label {
        opacity: 0;
        transition: var(--hover-transition);
    }
    .form-container > label:hover {
        opacity: 1;
    }
}

/* 7. Sidepanel */

.sidepanel {
    margin-bottom: 2em;
}

.sidepanel > .sidepanel-info {
    margin: 0;
    line-height: inherit;
    border-bottom: none;
    list-style: none;
}

/* 8. Adjacent navigation bar */

.adjacent-nav {
    display: flex;
    padding: 1em 0;
    justify-content: space-between;
}
#next {
    margin-left: auto;
}

/* 9. Footer */

footer {
    text-align: center;
    background-color: var(--bg-clr);
    padding: 2em;
}
.links {
    display: flex;
    justify-content: center;
}
.links > * {
    display: flex;
    color: inherit;
}
.links > * + *::before {
    content: "|";
    display: block;
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: var(--font-clr);
}