:root {
    --color-marginBox: transparent !important;

    --font-size-xs: 7pt;
    --font-size-s: 9pt;
    --font-size-m: 11pt;
    --font-size-l: 12pt;
    --font-size-xsl: 15pt;
    --font-size-xl: 30pt;
}

section {
    break-before: page;
    font-size: var(--font-size-m);
}

/* textformatierung*/
h1 {
    string-set: category content(text);
    font-size: var(--font-size-l);
    margin: 1cm;
    margin-top: 0.5cm;
}

h2 {
    string-set: title content(text);
    font-size: var(--font-size-xl);
}

h3 {
    margin-top: 1cm;
    font-size: var(--font-size-xsl);
}

h4 {
    font-size: var(--font-size-m);
    font-family: var(--main-text);
}

h6 {
    font-size: var(--font-size-xl);
}

p {
    text-align: left;
    text-indent: 2em;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

p:first-of-type {
    text-indent: 0;
}

h3 + p,
h2 + p {
    text-indent: 0;
}

ul {
    font-size: var(--font-size-s);
}

li {
    font-size: var(--font-size-s);
}

pre {
    overflow-y: auto;
    position: relative;
    background-color: var(--article-bg-color);
    padding: 0.2rem 0.4rem;
    color: var(--dark-color);
}

code {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
    overflow: hidden;
    display: block;
    max-width: 100%;
}

.title {
    font-size: var(--font-size-m);
}

.cursive {
    text-indent: 2em;
}

.content {
    margin: 0.5cm;

    &:nth-child(1) {
        margin-top: 9.5ch;
    }
}

a {
    word-break: break-all;
}

#toc a {
    text-decoration: none;
    font-family: var(--main-text);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

#toc a::before {
    content: target-counter(attr(href), page) "              ";
    font-family: var(--main-header);
    font-size: var(--font-size-l);
}

a::after {
    content: "";
}

.design-rules h3 {
    font-size: var(--font-size-xs);
    margin: 0.3cm;
}

.bilder-extra {
    display: flex; /* Flexbox für die Anordnung */
    align-items: center; /* Vertikale Ausrichtung */
    max-width: 100%; /* Maximale Breite */
    margin: 3ch 0 -1.5ch 0; /* Abstand oben und unten */
}

.bilder-extra img {
    flex: 0 0 200px; /* Feste Breite für das Bild */
    margin-right: 15px; /* Abstand zwischen Bild und Untertitel */
    border-radius: 4px; /* Optional: abgerundete Ecken */
}

.bilder-extra figcaption {
    flex: 1; /* Untertitel füllt den restlichen Platz */
    font: var(--text-kursive);
    font-size: 0.8em; /* Schriftgröße anpassen */
    text-align: left; /* Text linksbündig ausrichten */
    transform: rotate(90deg) translate(-70%, 20%);
    transform-origin: top left;
    white-space: nowrap;
}

/* Verhindert, dass Überschriften und Textabsätze getrennt werden */
@media print {
    /* Container für Überschriften und Text */
    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Überschriften */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid;
    }

    /* Textabsätze nach Überschriften */
    h1 + p,
    h2 + p,
    h3 + p,
    h4 + p,
    h5 + p,
    h6 + p {
        break-before: avoid;
    }

    /* Verhindert Witwen und Waisen */
    /* p {
    orphans: 3;
    widows: 2;
  }*/
}

@page {
    size: 105mm 148.5mm;
    margin-top: 8.2mm;
    margin-bottom: 4.8mm;
}

@page:first {
    @right-middle {
        content: none !important;
    }
}

@page :right {
    margin-left: 21mm;
    margin-right: 13mm;
    @right-middle {
        content: counter(page);
        font-family: var(--main-header);
        font-size: var(--font-size-xsl);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    @top-center {
        content: string(category, first-except);
        max-width: 60ch;
        font: var(--text-kursive);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3mm;
        margin-left: -10mm;
    }
}

@page :left {
    margin-right: 21mm;
    margin-left: 13mm;
    @left-middle {
        content: counter(page);
        font-family: var(--main-header);
        font-size: var(--font-size-xsl);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    @top-center {
        content: string(title, first-except);

        font: var(--text-kursive);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3mm;
    }
}