:root {
    --col1: rgb(30, 48, 61); /* #1E303D */
    --col2: rgb(10, 95, 131); /* #0A5F83 */
    --col3: rgb(145, 142, 137); /* #918E89 */
    --col4: rgb(230, 230, 224); /* #E6E6E0 */
    --col5: rgb(137, 203, 208); /* #89CBD0 */
    --col6: rgb(188, 186, 181); /* #BCBAB5 */
    --bg: rgb(230, 230, 224);
    --bodyLine: 1.6875rem;
    --bodyLineMinus: -1.6875rem;
    --font: 'Atkinson Hyperlegible Next', sans-serif;
    --text: rgb(16, 22, 33);
    --h1: rgb(16, 22, 33);
    --h2: rgb(42, 42, 42);
    --h3: rgb(16, 22, 33);
    --h4: rgb(54, 97, 159);
    --h5: rgb(54, 97, 159);
    --h6: rgb(16, 22, 33);
    --link: rgb(10, 95, 131);
    --focus: 0.125em solid rgb(30, 48, 61);
    --tableBg: transparent;
    --tableThBg: rgb(188, 186, 181);
    --tableColor: rgb(16, 22, 33);
    --tableBorder: 0.0635em solid rgb(30, 48, 61);
    --border: rgb(16, 22, 33);
    --inputBG: rgb(230, 230, 224);
    --hinweisBG: rgba(255, 255, 255, 0.5);
    --hinweisBorder: 0.125rem solid rgba(255, 255, 255, 0.5);
    --hinweisText: rgb(30, 48, 61);
    --hinweisShadow: rgba(54, 97, 159, 0.05);
    --fileWrapperBG: rgb(230, 230, 224);
    --fileWrapperBorder: 0.125rem solid rgb(16, 22, 33);
    --buttonBG: radial-gradient(100% 100% at 100% 0, rgb(10, 95, 131) 0, rgb(10, 95, 131) 100%);
    --buttonBoxShadow: rgba(45, 35, 66, .4) 0 0.125em 0.25em, rgba(45, 35, 66, .3) 0 0.4375em 0.8125em -0.1875em, rgba(58, 65, 111, .5) 0 -0.1875em 0 inset;
    --buttonText: rgb(230, 230, 224);
    --buttonFocus: 0.1875rem solid rgb(137, 203, 208);
    --imgBorder: 0.25rem solid rgb(16, 22, 33);
    --paddingM: calc(var(--bodyLine) / 2);
    --radiusM: 0.375em; 
    --radiusPaddingS: 0.125em 0.375em;
    --radiusPaddingM: 0.25em 0.375em;
    --codeBg: rgb(188, 186, 181);
    --codeVoiceBg: rgb(137, 203, 208);
    --codeVoiceQuote: rgb(10, 95, 131);
    --codeFont: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@font-face {
    font-display: swap;
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/atkinson-hyperlegible-next-v7-latin-300.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/atkinson-hyperlegible-next-v7-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/atkinson-hyperlegible-next-v7-latin-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/atkinson-hyperlegible-next-v7-latin-800.woff2') format('woff2');
}

/* Mini-Reset */
@-ms-viewport {
    width: device-width;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-weight: 400;
    font-size: 100%;
    line-height: 1.5;
}
main {
    font-size: 1.25rem;
    line-height: 1.32em;
    margin: 0 auto;
    padding: 0.9375rem;
    position: relative;
}

footer p {
    margin: 0 auto;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
}

#fnav {
    margin: 0 auto;
    padding: 0.9375rem;
}

@media (min-width: 576px) {
    .breadcrumb, main, footer p, #fnav {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .breadcrumb, main, footer p, #fnav {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .breadcrumb, main, footer p, #fnav {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .breadcrumb, main, footer p, #fnav {
        max-width: 1170px;
    }
}

h1 {
    color: var(--h1);
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0.5em 0 0.5em 0;
    padding: 0;
}
@media (min-width: 992px) {
 h1 {
    font-size: 2.75rem;
    line-height: 1.25em;
 }   
}
h2 {
    color: var(--h2);
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15em;
    margin: 0.5em 0 0.5em 0;
    padding: 0;
}
h3 {
    color: var(--h3);
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15em;
    max-width: 45ch;
    margin: 0.5em 0;
    padding: 0;
}
h4, h5, h6 {
    color: var(--h4);
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.15em;
    max-width: 45ch;
    margin: 0.5em 0 0 0;
    padding: 0;
}
h5 {
    color: var(--h5);
}
h6 {
    color: var(--h6);
}

ul,
ol {
    margin: 0.5em 0 1.5em 1.125em;
}
ul ul,
ul ol,
ol ol,
ol ul {
    padding-top: 0;
}

li {
    line-height: 1.55em;
}

ol {
    counter-reset: item;
}

ol>li {
    counter-increment: item;
}

ol ol>li {
    display: block;
}

ol ol>li:before {
    content: counters(item, ".") ". ";
    margin-left: -1.125em;
}

a {
    background-color: transparent;
    color: var(--link);
    text-decoration: underline;
}
a:hover,
a:focus,
a:visited {
    color: var(--link);
    outline: var(--focus);
    text-decoration: none;
}

:focus {
    outline: 0.1875rem solid var(--focus);
    outline-offset: 0.1875rem;
}
:target {
    border-top: var(--targetBorder);
    scroll-margin-top: 2rem;
}

.breadcrumb {
    margin: 0.9375rem auto 0 auto;
    padding: 0.9375rem;
    position: relative;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: end;
}

.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 0.25rem;
    content: "→";
}

#fnav {
    margin: 0.9375rem auto 0 auto;
    padding: 0.9375rem;
    position: relative;
}
#fnav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: end;
}
#fnav li a, 
#fnav li strong {
    padding: 0.25em 0.375em;
}

.table-wrapper {
    max-width: 100%;
    width: fit-content;
    overflow-x: auto;
}
table {
    background-color: var(--tableBg);
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--tableColor);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0.5em 0 1.5em 0;
    max-width: 100%;
    width: fit-content;
    hyphens: auto;
}
caption {
    background-color: inherit;
    border-bottom: var(--tableBorder);
    color: inherit;
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.15em;
    padding: var(--paddingM);
    text-align: left;
}
tr {
    border-bottom: var(--tableBorder);
}

th {
    color: inherit;
    font-family: inherit;
    font-weight: 600;
    padding: var(--paddingM);
    text-align: left;
    vertical-align: top;
    hyphens: auto;
}

thead th {
    background-color: var(--tableThBg);
    color: inherit;
}
td {
    padding: var(--paddingM);
    color: inherit;
    font-family: inherit;
    text-align: left;
    vertical-align: top;
    hyphens: auto;
}

p {
  margin: 0.5em 0 1.5em 0;
}

figure {
margin: 0.5em 0 1.5em 0;
}
figure img {
    border: var(--imgBorder);
}

hr {
  margin: 1.5em 0;
}

label {
  font-weight: 600;
}

/* Button */
button,
input[type="file"]::file-selector-button {
  appearance: button;
  background-image: var(--buttonBG);
  border: 0;
  border-radius: 0.375em;
  box-shadow: var(--buttonBoxShadow);
	color: var(--buttonText);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 100%;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: inherit;
  margin: 0 0.25em 1em 0;
  outline: none;
  overflow: visible;
  padding: 0.8125em 1em;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
button:hover, 
button:focus,
input[type="file"]::file-selector-button:hover, 
input[type="file"]::file-selector-button:focus {
  outline: var(--buttonFocus);
  outline-offset: -0.25rem;
}

/* File-Uploader noch etwas stylen, sofern Browser das zulassen */
input[type="file"] {
  position: relative;
}
input[type="file"]::file-selector-button {
  padding-left: 2.5em;
}
input[type="file"]::before {
  position: absolute;
  pointer-events: none;
  top: 0.625em;
  left: 1em;
  height: 1.25em;
  width: 1.25em;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
  background-size: contain;
}

#dateienListe {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* File-Wrapper */
.file-wrapper {
    max-width: 60ch;
    background: var(--fileWrapperBG);
    padding: 1rem;
    border: var(--fileWrapperBorder);
    border-radius: 0.375em;
    margin: 0.5em 0;
}

/* Uploader angepasst */
#upload-angepasst input[type="file"] {
    position: absolute;
    left: -100vw;
    list-style: none;
}
#upload-angepasst label {
    appearance: button;
    background-image: var(--buttonBG);
    border: 0;
    border-radius: 0.375em;
    box-shadow: var(--buttonBoxShadow);
    color: var(--buttonText);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 100%;
    font-weight: 600;
    letter-spacing: .045em;
    line-height: inherit;
    margin: 0 0.25em 1em 0;
    outline: none;
    overflow: visible;
    padding: 0.8125em 1em 0.8125em 2.5em;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
#upload-angepasst label::before {
    position: absolute;
    pointer-events: none;
    top: 0.5625em;
    left: 1em;
    height: 1.25em;
    width: 1.25em;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
    background-size: contain;
}
#upload-angepasst label:hover,
#upload-angepasst label:focus {
    outline: var(--buttonFocus);
    outline-offset: -0.25em;
}

/* Hinweis */
.hinweis {
    background-color: var(--hinweisBG);
    border: var(--hinweisBorder);
    border-radius: 0.375em;
    box-shadow: 0 0.9375em 1.875em var(--hinweisShadow);
    color: var(--text);
    margin: 0.5em 0;
    max-width: 60ch;
    padding: 0.5em 0.5em 0.5em 1.5em;
}

/* Settings-Pfad */
.settings ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 0;
    align-items: end;
}
.settings li {
    line-height: 1.55em;
}
.settings li::after {
    display: inline-block;
    line-height: 1.55em;
    margin: 0 0.25rem;
    content: " ";
}
.settings li:not(:last-child)::after {
    content: "→";
}

/* Taste / Code */
kbd,
code,
.menu-option {
    border-radius: var(--radiusM);
    padding: var(--radiusPaddingS);
}
kbd,
code,
.menu-option,
pre {
    background-color: var(--codeBg);
    font-family: var(--codeFont);
}
kbd.voice {
    background-color: var(--codeVoiceBg);
}