#dokumentation {
    font-family: Arial, sans-serif;
    line-height: 2.2 !important;
    color: #056379;
    top: 50px;
    position: fixed;
    margin-top: 10px;
}

#dokumentation .content a,
.body a {
    color: #056379;
}



#dokumentation ul.tree li ul {
    padding-left: 1rem;
}

.dokumentation .wrapper {
    width: 1300px;
    margin: 0 auto;
    padding-right: 0px;
}

#baum-struktur {
    font-family: monospace;
    font-size: 1em;
    line-height: 1em;
    background: #fff;
    color: #000;
    padding: 2em;
    border: 0.125em solid #f8f8f8;
}


.doku-content-wrapper {
    margin-left: 0;
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    height: 100vh;
}



#dokumentation h4,
#dokumentation .unterabschnitt h3 {
    color: #056379;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}

#dokumentation p.beschreibung,
#dokumentation h4,
#dokumentation .unterabschnitt h3{
    background-color: #f7f7f7;
}

.content textarea {
    width: 100%;
}

#dokumentation h4 + .beschreibung {
    text-align: center;
}

#dokumentation p.beschreibung {
    font-style: italic;

}



#dokumentation .doku-tree-standard h1,
#dokumentation h2,
#dokumentation h3,
#dokumentation h4,
#dokumentation h5,
#dokumentation h6,
#dokumentation h7,
#dokumentation h8 {
    font-size: 1em;
    cursor: pointer;
    border: none;
    background: #0196ab;
    color: #fff;
    text-align: center;
    font-style: normal;
    transition: border-radius ease-in-out .2s;
}

#dokumentation .doku-tree-standard .doku-tree-item.is-open > .doku-tree-head {
    border-radius: 5px 5px 0 0;
}


#dokumentation .doku-tree-standard h1,
#dokumentation .doku-tree-standard h2,
#dokumentation .doku-tree-standard h3,
#dokumentation .doku-tree-standard h4,
#dokumentation .doku-tree-standard h5,
#dokumentation .doku-tree-standard h6,
#dokumentation .doku-tree-standard h7,
#dokumentation .doku-tree-standard h8
{
    margin-bottom: 1em;
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    min-height: 2.5em;
}


#dokumentation .doku-spalten-layout .content-headline {
    border-bottom: 0px solid #0096ab;
    text-align: left;
    padding-left: 20px;
    padding-right: 0 !important;
    min-width: 100%;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    position: relative;
}

#dokumentation .doku-spalten-layout .content-headline .headline-ueberschrift,
.content-headline.with-name .headline-name,
#dokumentation .doku-spalten-layout .content-headline {
    background: none;
    color: #434847;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-content: center;
    padding: 0;
    line-height: 2em;
}

.content-headline.with-name .headline-name {
    margin-right: 0.5em;
    width: fit-content;
    margin-left: 1.5em;
}

#dokumentation .doku-spalten-layout .content-headline .headline-ueberschrift {
    margin-left: 0.5em;
}

#dokumentation .content-headline.gross {

    position: relative;
    border-bottom: 2px solid #0096ab;
    display: inline-block;
    justify-content: flex-end;
    /*
    margin-bottom: 15px;
    top: -15px;*/
    top: 0;
    margin-bottom: 0;
}

#dokumentation .doku-spalten-layout .content-headline.gross {
    margin-bottom: 10px;

}



#dokumentation .doku-tree-standard h2 {
    background: #018697;
}

#dokumentation .doku-tree-standard h3 {
    background: #017885;
}

#dokumentation .doku-tree-standard h4 {
    background: #016a74;
}

#dokumentation .doku-tree-standard h5,
#dokumentation .doku-tree-standard h6,
#dokumentation .doku-tree-standard h7 {
    background: #015c63;
}

#dokumentation .doku-tree-standard .doku-tree-item.is-open .doku-tree-item.no-children {
    margin: 0 auto;
    left: -1.25em;
    position: relative;
    box-shadow: none;
}

#dokumentation .doku-tree-standard .doku-tree-item.is-open .doku-tree-item.no-children .doku-tree-head {
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: #056379;
    font-weight: bold;
    border-bottom: 0px solid #016a7478;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 3em;
    margin-top: 1em;
}

#dokumentation .doku-tree-standard .doku-tree-item.is-open .doku-tree-item.no-children .doku-tree-head + .doku-content-section {
    padding: 0 1em;
}



#dokumentation .doku-tree-standard .doku-tree-item[aria-level="5"] {
   /* width: 94%;*/
}

#dokumentation .doku-tree-standard .doku-tree-item[aria-level="4"] {
    /*width: 96%;*/
}

#dokumentation .doku-tree-standard .doku-tree-item[aria-level="3"] {
    /*width: 98%;*/
}

#dokumentation .doku-tree-standard .doku-tree-item[aria-level="2"],
#dokumentation .doku-tree-standard .doku-tree-item[aria-level="3"],
#dokumentation .doku-tree-standard .doku-tree-item[aria-level="4"] {
    width: calc(100% - 80px);
    box-shadow: 0 -12px 14px rgba(0, 0, 0, 0.06);
}


#dokumentation .doku-tree-standard .doku-children {
    border: none;
}

#dokumentation button.doku-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    border-radius: 0;
    border: none;
    min-height: 1.6em;
    min-width: 3em;
    background-color: #87e8d38a;
    font-size: 1.5em;
    color: #fff;
    border-left: 10px solid #ffffff40;
}

#dokumentation button.doku-toggle-btn:hover {
    cursor: pointer;
    background-color: #e8f7f9;
    border-color: #b0c9d0;
}

#dokumentation button.doku-toggle-btn.opened {
    background-color: #e89687;
}

#dokumentation .content h5 {
    padding: 0;
}

button#change-design {
    color:#0096ab;
    padding: 0.4em 0.6em;
    transition: color 0.2s;
}

button#change-design:hover {

    color: #1cb1c6;
}


#dokumentation p.beschreibung {
    background-color: #f7f7f7;
    text-align: center;
    padding: 1em;
}

#dokumentation .kapitel > p.beschreibung {
    text-align: center;
    padding: 1em;
}

#dokumentation .content,
#dokumentation .unterabschnitt .content .docu-content {
    position: unset;
    padding: 0 20px 30px 20px;
    background-color: transparent;
    display: block;
    text-align: center;
    margin: 0;
    width: 100%;
    max-width: unset;
    box-sizing: border-box;
}

#dokumentation .doku-spalten-layout .content  {
    margin-top:60px;
}

#dokumentation .unterabschnitt .content .docu-content {
    margin-bottom: 0;
}

#dokumentation .content  b,
#dokumentation .content  a,
#dokumentation .content  i {
    display: unset;
    font-weight: bold;
}

#dokumentation .content span.vorschlag {
    font-weight: bold;
    color: red;
}

#dokumentation .content .marker {
    position: absolute;
    font-weight: bold;
    padding: 5px 20px;
    right: 0;
    top: 0;
    max-width:200px;
    width: fit-content;
    text-transform: uppercase;
}

#dokumentation .content .marker.tipp {
    background: #e8f7f9;
    color: #0196ab;
}

#dokumentation .content .marker.neue_funktion {
    background: #e8f4eb;
    color: #277a4d;
}




#dokumentation .bereich.tipp  .marker.tipp,
#dokumentation .bereich.neue_funktion .marker.neue_funktion,
#dokumentation .bereich.faq .marker.faq
{
    display: none;
}

#dokumentation .headline-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-top: 10px solid #fff;
}

#dokumentation .teilfunktion-img  {
    display: inline-block;
    max-width: 1.8em;
    margin-left: 7px;
}

#dokumentation .unterabschnitt .content {
    width: auto;
    max-width: 100%;
}

div.bereich,
div.abschnitt,
div.unterabschnitt,
div.teilfunktion {
    margin-bottom: 0;
}

#dokumentation .doku-tree-standard .doku-tree {
    padding: 10px 0;
    padding-bottom: 1em;
}

#dokumentation figure {
    margin: 5em 0;
    margin-top: 0;
    padding: 30px 20px;
    border: 0px solid #c2d1cf;
    background: #fff;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    padding-bottom: 5px;
    max-width: 100%;
    box-sizing: border-box;
}

#dokumentation .doku-spalten-layout figure {
    padding-bottom: 1em;
    background: #0196ab1a;
    margin-bottom: 0;
}

#dokumentation .doku-spalten-layout figure.big {
    min-width:100%;
    margin: 1em 0;
}

#dokumentation figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

#dokumentation .bild-1.small figure img {
    max-width: 30%;
    height: auto;
    display: block;
}

#dokumentation figcaption {
    color: #647176;
    font-style: oblique;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.8rem;
    background: #fff;
    bottom: 0;
    position: relative;
    width: auto;
    left: 0;
    right: 0;
}

#dokumentation .doku-spalten-layout figcaption {
    min-width: 35%;
    display: flex;
    align-items: center;
}

#toggleAll {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background-color: #056379;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}



#dokumentation .bereich {
    background: #e6ecee;
    padding: 0px;
    overflow: hidden;
}
#dokumentation .bereich,
#dokumentation .unterabschnitt .content
{
    background: #e6ecee;
}






#dokumentation .content-image {
    margin: 40px 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    border: 1px silver solid;
    padding:20px;
    padding-top: 50px;
}

#dokumentation .content-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

#dokumentation .content-image figcaption {
    background: #607D8B;
    color: #fff;
    padding: 0.5em;
    font-size: 0.75em;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0;
    width: 100%;
    height: fit-content;
}

@media (max-width: 1300px) {
    #dokumentation .wrapper {
        padding: 0 0px;
        width: 100%;
    }
    #dokumentation .abschnitt:(not:button) {
        margin-left: 10px;
    }

    #dokumentation .unterabschnitt {
        margin-left: 10px;
    }
    #dokumentation .content {
        margin-left: 10px;
    }
    #dokumentation figcaption {
        position: relative;
    }
    #dokumentation figure {
        padding-bottom: 20px;
    }
}

#dokumentation [id]::before {
    content: "";
    display: none;
    height: 72px; /* Höhe des Offsets */
    margin-top: -72px;
}

#doku-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 0 15px !important;
}

button#toggleAll,
#doku-back-button,
.doku-header-btn{
    padding: 0.5em 0.6em;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    font-size: 14px;
}



#doku-back-button:hover {
    background-color: #eee;
}

#doku-back-button svg {
    fill: currentColor;
}

button#toggleAll,
.doku-header-btn{
    margin-bottom:0;
    padding: 0.5em 0.75em;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #056379;
}

button#toggleAll:hover {
    cursor: pointer;
    background-color: #e8f7f9;
    border-color: #b0c9d0;
}

#inhalt {
    margin-bottom: 2em;
    border: 1px solid #ccc;
    background: #f9f9f9;
    border-radius: 8px;
}

#inhalt h2 {
    margin: 0;
    cursor: pointer;
    user-select: none;
}

#inhalt ul.toc {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0.5em;
    display: none; /* initial geschlossen */
}

#inhalt ul.toc li {
    margin: 0.2em 0;
}

#inhalt ul.toc li a {
    text-decoration: none;
    color: #004c99;
    font-size: 0.95em;
}

#inhalt ul.toc li a:hover {
    text-decoration: underline;
}

/* Einrückungen für Ebenen */
#inhalt ul.kapitel-ebene { padding-left: 20px; }
#inhalt ul.abschnitt-ebene { padding-left: 1em; }
#inhalt ul.unterabschnitt-ebene { padding-left: 2em; }
#inhalt ul.bereich-ebene { padding-left: 1em; }
#inhalt ul.funktion-ebene { padding-left: 2em; }
#inhalt ul.teilfunktion-ebene { padding-left: 3em; }

.content {
    display: none;
}
.kapitel > .abschnitt,
.abschnitt > .unterabschnitt,
.unterabschnitt > .content,
.bereich > .funktion,
.funktion > .teilfunktion,
.teilfunktion > .content {
    display: none;
}

.last-change-hint { font-style: italic; color: #666; margin: 30px 0; border-top: 1px solid #666; padding-top:20px; width: 100%; text-align: center; }

.last-change-hint {
    margin: 0;
    border-top: none;
    padding-top: 0;
}

.doku-tree { list-style: none; padding-left: 0; margin-left: 0; }
.doku-tree-item { margin: 0 0 .5em 0; }
.doku-tree-head { cursor: pointer; margin: 0; font-weight: 500; padding: .3em .5em; border-radius: .2em; transition: background .1s; }
.doku-tree-head:hover { background: #f2f2f2; }
.doku-number { color: #888; font-size: .95em; margin-right: .5em; display: inline-block; font-style: normal; }
.doku-tree-standard .doku-number {
    color: #fff;
    background: #87e8d38a;
    padding: 10px 10px;
    font-size: 1em;
}
.doku-content { margin-left: 2em; margin-top: .2em; color: #333; font-size: .97em; }
.doku-children { margin-left: 1.5em; border-left: 1px dashed #e0e0e0; padding-left: 1em; }

#editor #dokumentation .mf_button {
    max-width: fit-content;
    display: block;
    position: absolute;
    text-align: center;
    background: #ab8181;
    color: #fff;
    margin-top: 6px;
    margin-left: 20px;
    margin-bottom: -20px;
    font-size: 10px;
    padding: 2px 5px;
    bottom: unset;
    opacity: 1;
    z-index: 1;
    right: 0;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    left: unset;
    top: 0;
    max-height: 20px;
}

/* Hinzufügen am Ende der style.css */

/* --- NEUES ZWEI-SPALTEN-LAYOUT --- */

.doku-spalten-layout {
    display: grid; /* Behält das Grid-Layout bei */
    grid-template-columns: minmax(30%, 2fr) 4fr; /* Linke Spalte flexibel, aber min. 250px */
    gap: 0rem;
    align-items: start;
}

.doku-toc-wrapper {
    position: sticky; /* Wichtig: Macht das Menü "festklebend" beim Scrollen */
    top: 20px;
    max-height: 95vh;
    overflow-y: auto;
    height: 100vh;
    padding: 10px;
    background: transparent;
    border: none;
} /* Behält die Sticky-Position bei */


.doku-content-section  {
    padding: 0;
    max-width: 100%;
}



#dokumentation .doku-spalten-layout .doku-panel.is-active .doku-content-section {

}

#dokumentation .doku-spalten-layout .doku-group-panel.is-active .content {
    text-align: left;
    border: 1px solid #c0c0c05c;
    border-radius: 0.5em;
    background-color: #f8f8f8 !important;
    /* z-index: 1; */
    /* position: relative; */
    box-shadow: 0.25em 0.25em 10px 0 #e2e2e2;
    margin: 0 auto;
}

.doku-content-section b {font-weight: bold; display: contents; }

.doku-toc {
    list-style: none; /* Behält Listenstil bei */
    padding-left: 0; /* Behält Padding bei */
    margin: 0; /* Behält Margin bei */
}

.doku-toc ul {
    list-style: none; /* Behält Listenstil bei */
    padding-left: 1.2em; /* Behält Padding bei */
    margin-top: 0.3em; /* Behält Margin bei */
}

.doku-toc-link {
    display: block; /* Behält Display-Typ bei */
    padding: 0.4em 0.6em;
    text-decoration: none;
    color: #056379;
    border-radius: 0px;
    transition: background-color 0.2s, color 0.2s;
}

.doku-toc-link:hover {
    background-color: #e8f7f9; /* Behält Hover-Farbe bei */
}

.doku-toc-link.is-active {
    background-color: #0196ab; /* Behält aktive Hintergrundfarbe bei */
    color: #fff; /* Behält aktive Textfarbe bei */
    font-weight: bold;
}

.doku-toc-link.is-active + ul {
    font-style: oblique;
}

/* Steuerung der Inhalts-Panels */
.doku-panel {
    display: none; /* Standardmäßig alle Panels ausblenden */
}

.doku-panel.is-active {
    display: block; /* Behält Display-Typ bei */
}

.doku-panel-section {
    margin-bottom: 1.5rem;
}

.doku-spalten-layout .doku-toc ul {
    margin-left: 0; /* Behält Margin bei */
    padding-left: 0.5em; /* Behält Padding bei */
    display: none;
}

/* === Elegantes Spalten-Layout Menü === */

/* Grundlegende Gestaltung des Menü-Wrappers */
.doku-toc-wrapper {
    padding-right: 0rem;
}

.doku-content-wrapper h2,
.doku-content-wrapper h3,
.doku-content-wrapper h4 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Alle Listen im Menü (Basis-Reset) */
.doku-toc, .doku-toc ul {
    list-style: none; /* Behält Listenstil bei */
    padding-left: 0; /* Behält Padding bei */
    margin: 0; /* Behält Margin bei */
}

/* Einrückung für Untermenüs */
.doku-toc ul {
    padding-left: 0.8rem; /* Behält Padding bei */
    margin-top: 0.25rem; /* Behält Margin bei */
    margin-bottom: 0.5rem; /* Behält Margin bei */
    border-left: 2px solid #eef2f3; /* Behält Border bei */
}

/* Basis-Styling für alle Links im Menü */
.doku-toc-link {
    display: flex; /* Flexbox für saubere Ausrichtung von Pfeil und Text */
    align-items: center;
    padding: 0.5em 0.6em;
    text-decoration: none;
    color: #056379; /* Hauptfarbe */
    border-radius: 0;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 400; /* Normales Gewicht als Basis */
    position: relative;
    font-size: 0.9em;
    line-height: 1.4; /* Fügt Zeilenhöhe hinzu */
}

nav.doku-toc-wrapper ul.doku-toc a.doku-toc-link[aria-level="1"]{
    font-size: 1em;
}

/* --- Hierarchische Abstufung --- */

/* Ebene 1 (z.B. Kapitel) */
.doku-toc-link[aria-level="1"] {
    font-weight: normal; /* Wichtiger, daher dicker */
    margin-top: 0.6rem;
}

.doku-toc-link:hover {
    font-weight: bold;
}

.doku-toc-link[aria-level="1"]:first-child {
    margin-top: 0;
} /* Behält Margin bei */

/* Ebene 2 (z.B. Abschnitt) */
.doku-toc-link[aria-level="2"] {

}

/* Ebene 3 und tiefer */
.doku-toc-link[aria-level="2"],
.doku-toc-link[aria-level="3"],
.doku-toc-link[aria-level="4"]
{ /* Behält Schriftgröße bei */
    font-size: 0.9em;

}

/* --- Interaktive Zustände --- */

/* Hover-Effekt für alle Links */
.doku-toc-link:hover {
    background-color: #e8f7f9; /* Behält Hover-Farbe bei */
    color: #056379; /* Behält Hover-Textfarbe bei */
}

/* Aktiver Link (der gerade angezeigte Inhalt) */
.doku-toc-link.is-active {
    background-color: #2D92AA; /* Deine zweite Markenfarbe für den aktiven Zustand */
    color: #fff; /* Behält aktive Textfarbe bei */
    font-weight: 600; /* Behält aktive Schriftstärke bei */
}
.doku-toc-link.is-active:hover {
    background-color: #288197; /* Behält Hover-Farbe bei */
    color: #fff;
}

.doku-toc-link.is-active:hover .doku-number{
    color: #f8f8f8;
}


/* --- Indikator für aufklappbare Menüs (Pfeil) --- */

/* Fügt den Pfeil nur bei Links mit Untermenü hinzu (dank der JS-Ergänzung) */
.doku-toc-link.has-children::before {
    content: '›'; /* Chevron als Pfeil-Symbol */
    font-weight: bold; /* Behält Schriftstärke bei */
    font-size: 1.4em; /* Behält Schriftgröße bei */
    line-height: 1; /* Behält Zeilenhöhe bei */
    margin-right: 0.3em; /* Behält Margin bei */
    color: #b0c9d0; /* Behält Farbe bei */
    transition: transform 0.2s ease-in-out; /* Behält Transition bei */
    transform-origin: center; /* Behält Transform-Origin bei */
    position: relative; /* Behält Position bei */
    top: -1px; /* Behält Top-Position bei */
}

/* Geöffneter Zustand: Pfeil dreht sich */
.doku-toc-link.has-children.is-open::before {
    transform: rotate(90deg); /* Behält Transformation bei */
    color: #056379; /* Behält Farbe bei */
}

/* Pfeil-Farbe anpassen, wenn der Link aktiv ist */
.doku-toc-link.has-children.is-active::before {
    color: #fff; /* Behält Farbe bei */
}

/* Anpassung der Nummerierung, falls vorhanden */
.doku-toc-link .doku-number {
    color: #888;
    margin-right: 0;
    flex-shrink: 0; /* Verhindert, dass die Nummer bei langem Text umbricht */
}

.doku-toc-link.is-active .doku-number {
    color: #fff;
}

 .doku-toc-link.is-active.search-hit .doku-number {
    color: #888;
}



/* Spalten-Layout */

/* =================================================================== */
/* == FINALE STYLES FÜR DAS ZWEI-SPALTEN-LAYOUT                      == */
/* =================================================================== */

.doku-spalten-layout {
    display: grid;
    grid-template-columns: minmax(30%, 1fr) 3fr;
    gap: 2rem;
    align-items: start;
}

.doku-search-container {
    width: 100%;
}

/* --- Linke Spalte: Inhaltsverzeichnis (TOC) --- */

.doku-toc-wrapper {
    position: sticky;
    top: 20px;
    max-height: 95vh;
    overflow-y: auto;
    padding-right: 1rem;
}

.doku-toc, .doku-toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.doku-toc ul {
    padding-left: 0.8rem;
    margin-top: 0.25rem;
    border-left: 2px solid #eef2f3;
    /* Wichtig: Untermenüs sind standardmäßig versteckt */
    display: none;
}

.doku-toc-link {
    display: block;
    padding: 0.4em 0.6em;
    text-decoration: none;
    color: #056379;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.4;
}

.doku-toc-link:hover {
    background-color: #e8f7f9;
}

.doku-toc-link.is-active {
    background-color: #0196ab;
    color: #fff;
    font-weight: bold;
}

/* --- Rechte Spalte: Inhalt --- */

/* Alle Gruppen-Container standardmäßig verstecken */
.doku-content-wrapper .doku-group-panel {
    display: none;
}

/* NUR die Gruppen anzeigen, die explizit die Klasse .is-active haben */
.doku-content-wrapper .doku-group-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    padding: 0 1em;
}

/* NEU: Stellt sicher, dass der "eigene" Inhalt eines Kapitels immer an erster Stelle steht. */
.doku-group-panel .doku-group-self-content {
    order: 0 !important; /* Niedrigster Wert, um es nach ganz oben zu zwingen */
    margin-top: 0 !important; /* Entfernt den oberen Abstand, da es das erste Element ist */
}


.doku-spalten-layout .doku-content-wrapper .doku-panel:last-child {
    padding-bottom: 175px;
}


/* Kosmetische Anpassungen für die Inhalte rechts */
.doku-content-wrapper .doku-panel {
    padding-bottom: 2em;
    padding-right: 1em;
    position: relative;
    margin-bottom: 10em;
}
.doku-content-wrapper .doku-panel:last-child {
    border-bottom: none;
}

li.offline a,
li.offline {
    color: red;
    font-weight: bold;
}


.doku-spalten-layout .doku-group-panel.is-active > .doku-content-section .content {
    display: block !important;
}



.doku-spalten-layout  .content-link img, #dokumentation .content-link img
 {
    max-width: 1em;
    position: relative;
    top: -2px;
    margin-left: 7px;
    margin-right: 0;
    display: inline-block;
}

#dokumentation .doku-tree-standard .content-link img {
    display: inline-block;
}

.keywords a.content-link {

}

.keywords a.content-link.doku-child-preview-link {
    top: 0;
    right: 0;
}

.keywords a.content-link img {
    display: none;
}

.content .keywords {
    border-top: 0px solid #e0e0e0;
    padding-top: 0px;
    margin-top: 30px;
}

.content .keywords .keyword-headline {
    margin-bottom: 0px;
    margin-left: 0px;
    background: #4e757e21;
    color: #0196ab;
    color: #fff;
    padding: 0px 20px;
    width: fit-content;
    text-transform: uppercase;
    font-weight: bold;
    font-style: oblique;
}
.content .keywords .keyword-liste {
    padding: 5px 20px;
    background: #4e757e21;
    color: #056379e0;
}

.content .keywords .keyword-liste,
.content .keywords .keyword-headline {
    background-color: #0196ab1a;
    color: #0196ab;
}

.content .keywords .keyword-headline svg {
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 0;
    margin-bottom: -8px;
    fill: #66bcc8;
}

#dokumentation .content .keywords a.content-link {
    font-style: oblique;
    font-weight: bold !important;
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    margin-right: 12px;
    font-size: 0.9em;
    color: #0196ab;
}

#dokumentation .content .keywords a.content-link:hover {
    font-weight: bold;
}



.doku-spalten-layout .doku-group-panel.is-active .doku-content-section-beschreibung .content {
    background-color: #0196ab1a !important;
    background-color: #fff !important;
    padding: 1em !important;
    margin-top: 0 !important;
    margin-bottom: 14em !important;
}

.doku-spalten-layout .doku-group-panel.is-active .doku-content-section-beschreibung .content:first-of-type {
    margin-bottom: 4em !important;
}

.doku-spalten-layout .doku-volltext {
    max-width: 65ch;

    background: #e5f4f6;
    background: none;
    padding: 1.5em;
    border-radius: 2em;
    line-height: 1.5em;
}





.printer-friendly .doku-content-section.doku-content-section-beschreibung .content {
    margin-left: 105px !important;

}

#dokumentation  .content ul {
    margin-left: 20px;
}
#dokumentation  .content ul.doku-marks {
    margin-left: 0px;
    margin-right: 20px;
}



h6, h7, h8, h9 {
    font-weight: bold;
}





.doku-preview-popover {
    position: absolute;
    display: none; /* Standardmäßig versteckt */
    max-width: 350px;
    padding: 12px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 9999; /* Stellt sicher, dass es über anderen Elementen liegt */
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    /* Wichtig: Verhindert, dass das Popover selbst Maus-Events abfängt,
       was zu Flackern führen könnte, wenn es unter dem Cursor erscheint. */
    pointer-events: none;
}

   /*******************/
  /* CONTENT-OPTIONS */
 /*******************/
/* Farbbasis – ggf. via :root oder .doku-viewport setzen */
:root{
    --brand-teal: #089aa5;             /* nahe am Titelbalken */
    --chip-bg:    #eaf7f9;             /* sehr helles Türkis */
    --chip-bd:    #cfecef;             /* dezente Kontur */
    --bd:         #e5e7eb;             /* Standard-Kontur */
    --txt-muted:  #5b6776;
}

@media print {
    .no-print {
        display: none !important;
    }
}

/* Infobar passend zum Layout */
.doku-infobar{
    display: flex;
    align-items: center;
    gap: 0;
    font-size: .875rem;
    margin: 0;
    opacity: 1;
    position: absolute;
    padding: 0 10px;
    right: 0;
    bottom: -50px;
    z-index: 12;
    background-color: #066379;
    border-radius: 6px;
}

.printer-friendly .doku-infobar {

}




.printer-friendly .doku-infobar.no-print {
    display: none !important;
}
#dokumentation .doku-tree-standard .doku-infobar {
    display: flex;
    bottom: unset;
    top: 44px;
    border-radius: 0;
    right: -25px;
    height: fit-content;
    left: -25px;
    justify-content: space-between;
    width: auto;
    background: #0096abd1;
}

.doku-infobar:hover{ opacity:1 }
.doku-marks{ display:flex; gap:.25rem; list-style:none; margin:0; padding:0; margin-right: 5px; }
.doku-mark{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 0px solid var(--chip-bd);
    /* background: var(--chip-bg); */
    border-radius: 0;
    color: #fff;
    white-space: nowrap;
    margin-left: 0px;
    text-transform: uppercase;
    width: 100%;
    justify-content: center;
    height: auto;
    font-weight: bold;
}
.doku-mark .icon{ line-height:1; display: none; }

.doku-mark.doku-mark-tipp {
    background-color: #a1d3a1;
}

.doku-mark.doku-mark-hinweis {
    background-color: #e4a6b5;
}

#dokumentation .content .doku-mark-faq {
    background: #056379;
    color: #fff;
}


.doku-mark.doku-mark-neue_funktion  {
    background: #7979c3;
    color: #fff;
}

.doku-mark.doku-mark-optional {
    background: rgba(255, 224, 0, 0.71);
}

.doku-mark.doku-mark-vollversion {
    background: #fff;
    color: #0096aa;
}

.doku-mark.doku-mark-bearbeitung {
    background: #a1d3a1;
}

.doku-mark.doku-mark-geplant {
    background: rgba(112, 131, 143, 0.69);
}

.doku-mark:not(:first-of-type) {
    margin-left: 0;
}

.dokumentation span.button {
    display: inline-block;
    padding: 4px 10px;
    background-color: #f1f1f1;
    color: #444;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    font-weight: normal;
    margin: 0 1px;
    margin: 0.15em 0.15em 0.15em 0;
}

.dokumentation span.button.gruen {
    color: #fff;
    border: none;
    background-color: #0096ab;
}

.dokumentation span.button.schwarz {
    color: #fff;
    border: none;
    background-color: #444;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dokumentation span.button.cta {
    color: #fff;
   background-color: #066379;
}

.dokumentation span.button.highlight {
    color: #790520;
    font-style: italic;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    background-color: #f9edbe;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #f0c36d;
    color: #444;
    font-size: 0.9em;
}

.dokumentation span.button.abschnitt {
    font-family: "Tahoma", sans-serif;
    font-size: 1.3em;
    background-color: #fff;
    padding: 3px 40px;
    border: 1px solid black;
    width: fit-content;
    text-align: center;
    box-sizing: content-box;
    line-height: 1em;
    margin: 0.15em 0.15em 0.15em 0;
    top: 1px;
    display: inline-block;
    position: relative;
}

.dokumentation span.button.option {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    display: inline-block;
    padding-right: 45px;
    position: relative;
    margin: inherit;
    margin-right: inherit;
    margin-right: 0.15em;
}

.dokumentation span.button.option:after {
    top: 50%;
    margin-top: -3px;
    z-index: 2;
    right: 10px;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 6px solid rgba(0, 0, 0, 0);
    border-top-color: rgba(0, 0, 0, 0);
    border-top-color: #666;
    margin-left: -6px;
}

.dokumentation span.button.rot {
    color: #fff;
    background-color: #ff3c7e;
    border-color: #f690b2;
}

.dokumentation span.button.text {
    padding: 0;
    color: #0096ab;
    background-color: transparent;
    border: none;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #0096ab;
    text-decoration-style: dotted;
    text-underline-offset: 5px;
}

.dokumentation span.button.text:hover {
    cursor: pointer;
}

.doku-rate{ display: flex;
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: #fff;
    height: 45px;
    box-sizing: border-box;
    width: fit-content;
    justify-content: center;
    flex-direction: row;
}

.doku-rate-btn {
    border:none; background:#fff; color:#0f1a28;
    border-radius:4px; padding:5px 10px; line-height:1.2;
    cursor:pointer; transition: background .15s, border-color .15s;
    font-size: 1.2em;
}
.doku-rate-btn:hover{
    background-color: #e8f7f9;
    border-color: #b0c9d0;
}
.doku-rate-btn:focus{ outline:2px solid rgba(8,154,165,.25); outline-offset:2px }
.doku-rate-btn:disabled{ opacity:.55; cursor:default }
.doku-rate-feedback {
    color: #fff;
    font-style: italic;
    padding: .18rem .5rem;
    margin: 0 15px 0 5px;
}
.doku-rate-feedback {
    padding: 0;
}

.doku-rate-stats{ margin-left:.25rem; color:#555; font-variant-numeric:tabular-nums }


.doku-rate .doku-rate-stats {
    color: #fff;
}

@media (max-width: 860px){
    .doku-infobar{ float:none; flex-wrap:wrap; margin:.5rem 0 1rem 0 }
}

.doku-rate-stats.disable {
    opacity: 0.75;
    pointer-events: none;
    margin-left: 0;
}

/* Rating Summary Box */
.doku-rating-summary,
#dokumentation summary {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 2rem;
    background: #fcfcfc;
}
.doku-rating-summary summary,
#dokumentation summary {
    padding: 0.75rem 1rem;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    color: #056379;
}
.doku-rating-summary summary:hover,
#dokumentation summary:hover {
    background: #f5f5f5;
}
.doku-rating-summary .summary-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem 1rem 1.5rem 1rem;
    border-top: 1px solid #e0e0e0;
}
.doku-rating-summary .summary-column h3 {
    margin-top: 0;
    font-size: 1.1rem;
    border-bottom: 2px solid #0196ab;
    padding-bottom: 0.5rem;
    color: #056379;
}
.doku-rating-summary ol {
    padding-left: 1.5rem;
    margin: 0;
}
.doku-rating-summary li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.doku-rating-summary li span {
    font-size: 0.85em;
    color: #5b6776;
    margin-left: 0.5em;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .doku-rating-summary .summary-container {
        grid-template-columns: 1fr;
    }
}

/* ================================================================== */
/* == DOKU LADEANIMATION                                           == */
/* ================================================================== */

#doku-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#doku-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-spinner {
    border: 5px solid #f3f3f3; /* Heller Kreis */
    border-top: 5px solid #0196ab; /* Markenfarbe */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1.2s linear infinite;
}

.loader-text {
    margin-top: 20px;
    font-size: 1.1em;
    color: #056379; /* Markenfarbe */
    font-weight: bold;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================================================== */
/* == DOKU CHILD PREVIEW (Vorschau für Unterpunkte)                == */
/* ================================================================== */

/* Wrapper für einen Kind-Inhalt, wenn er im Elternelement angezeigt wird */
.doku-content-wrapper .doku-group-panel > .doku-content-section {
    border: none;
    border-left: none;
    padding:0;
    margin-top: 2.5rem;
    margin-bottom: 5em;
    position: relative;
    background-color: transparent;
    /* Wichtig: Standardmäßig ausblenden */
    display: none;
}


.doku-content-wrapper .doku-group-panel > .doku-content-section:last-of-type {
    margin-bottom: 200px;
}




/* Entfernt den Rahmen für den Hauptinhalt des Elternelements selbst */
.doku-content-wrapper .doku-group-panel > .doku-content-section:first-of-type {
    border: none;
    padding: 0;
    margin-top: 0;
    background-color: transparent;
}

/* "Zum Abschnitt"-Button */
.doku-child-preview-link,
.kapitel-name {
    position: relative;
    top: 0;
    right: -00px;
    padding: 5px 10px;
    background-color: #066379;
    color: #fff !important;
    text-decoration: none;
    border-radius: 0;
    font-size: 0.9em;
    font-weight: bold;

    z-index: 10;
}

.zum-inhalt-button {
    width: fit-content;
    font-weight: normal;
    right: unset;
    top: unset;
    bottom: -50px;
    left: 0;
    position: absolute;
}

.doku-child-preview-link,
.kapitel-name,
.content-link span {
    transition: all 0.2s;
}

.doku-child-preview-link:hover,
.content-link span:hover {
    transform: scale(1.05);
}

.doku-child-preview-link:hover {
    transform: scale(1.05);
}

.is-open * {

}

/* =================================================================== */
/* == DRUCKVERSION-ANPASSUNGEN                                      == */
/* =================================================================== */
@media print {
    /* Grundlegende Seiteneinstellungen und Ausblenden nicht benötigter Elemente */
    body, html {
        font-size: 10pt; /* Kleinere Schriftgröße für den Druck */
        color: #000;
        background: #fff;
    }

    .doku-toc-wrapper,
    .doku-infobar,
    button#toggleAll,
    .no-print {
        display: none !important;
    }

    /* Layout auf eine Spalte umstellen und volle Breite nutzen */
    .doku-spalten-layout,
    .dokumentation .wrapper,
    .doku-content-wrapper,
    .doku-content-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Alle versteckten Inhalte (Akkordions, etc.) für den Druck sichtbar machen */
    .doku-children,
    .content,
    .doku-content-wrapper .doku-group-panel,
    .doku-spalten-layout .doku-group-panel.is-active > .doku-content-section .content {
        display: block !important;
    }

    /* Abstände für Überschriften, Absätze und Panels reduzieren */
    #dokumentation h1, #dokumentation h2, #dokumentation h3, #dokumentation h4, #dokumentation h5, #dokumentation h6, #dokumentation h7, #dokumentation h8  {
        margin-top: 1.2rem;
        margin-bottom: 0.4rem;
        background: #eee !important; /* Heller Hintergrund zur Abgrenzung */
        color: #000 !important;
        border-bottom: 1px solid #ccc;
        page-break-after: avoid; /* Keinen Seitenumbruch direkt nach einer Überschrift */
        padding: 0.25rem 0.5rem !important;
    }

    #dokumentation p, #dokumentation ul, #dokumentation ol {
        margin-bottom: 0.5rem;
    }

    .doku-content-wrapper .doku-panel {
        padding-bottom: 0.5rem;
        border: none;
        margin-bottom: 10em;
    }

    .doku-spalten-layout .doku-content-wrapper .doku-panel {

    }

    /* Bilder für den Druck optimieren: Höhe begrenzen und Umbrüche vermeiden */
    #dokumentation figure {
        margin: 1em 0;
        padding: 0;
        border: 1px solid #ccc;
        page-break-inside: avoid; /* Verhindert Seitenumbrüche innerhalb von Bildern */
    }

    #dokumentation figure img {
        max-width: 100%;
        max-height: 60vh; /* Verhindert, dass Bilder zu hoch werden */
        object-fit: contain; /* Stellt sicher, dass das Bild skaliert und nicht verzerrt wird */
    }

    /* Links im Ausdruck sichtbar machen */
    #dokumentation a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}

/* ================================================================== */
/* == DOKU TOOLBAR & SEARCH                                        == */
/* ================================================================== */

#doku-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 1em;
    background-color: #f8f8f8;
    border: 1px solid #d0d0d0;
    gap: 0.5em;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 20;
    right: 0;
    left: 0;
    margin: unset;
    width: 100%;
    height: 48px;
}





#doku-toolbar .doku-toolbar-left {
    flex: 1 1 45%;
    min-width: 320px;
}
#doku-toolbar .doku-toolbar-center {
    flex: 1 1 50%;
    text-align: center;
    margin-left: 1em;
}
#doku-toolbar .doku-toolbar-right {
    flex: 1 1 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

/* Such-Container */
.doku-search-container #doku-search-form {
    display: flex;
    align-items: center;
    gap: 5px;
}

.doku-search-container #doku-search-input {
    flex-grow: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #056379;
}
.doku-search-container #doku-search-input:focus {
    border-color: #0196ab;
    outline: 2px solid rgba(1, 150, 171, 0.2);
}

.doku-search-container button {
    padding: 0.5em 0.6em;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #056379;
}
.doku-search-container button:hover {
    background-color: #e8f7f9;
    border-color: #b0c9d0;
}

.doku-search-container .doku-search-options {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.85em;
    color: #555;
    width: fit-content;
    min-width: 100px;
    justify-content: center;
    flex-direction: revert;
    margin: unset;
}
.doku-search-container .doku-search-options label {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}
.doku-search-container .doku-search-options label input {
    margin-top: -1px;
}
.doku-search-container #doku-search-options-toggle {
    transition: transform 0.2s ease-in-out;
}
.doku-search-container #doku-search-options-toggle.is-open {
    transform: rotate(180deg);
}


/* Suchergebnis-Hervorhebung */
.doku-toc-link.search-hit {
    background-color: #fff3cd; /* Helles Gelb */
    color: #056379;
}



mark.search-highlight {
    background-color: #ffdd77; /* Etwas kräftigeres Gelb */
    padding: 0 2px;
    color: inherit;
    border-radius: 2px;
    display: inline-block;
}

.doku-kurztext .mark.search-highlight {

}



/* ================================================================== */
/* == DOKU CONTENT TEMPLATE                                        == */
/* ================================================================== */

.doku-content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.doku-content-container h2 {
    width:100%;
    /*margin-bottom: 40px;*/
    box-sizing: border-box;
}

.doku-content-container h2.content-headline {
    margin-bottom: 0;
}

.content-headline {
    padding-left: 20px;
}

h3.content-headline.with-name,
h4.content-headline.with-name,
h5.content-headline.with-name,
h6.content-headline.with-name,
h7.content-headline.with-name,
h8.content-headline.with-name,
h9.content-headline.with-name,
h10.content-headline.with-name{
    padding-left: 0 !important;
}

.content-headline .headline-name,
.headline-name.kapitel-name {
    background-color: #0196ab;
    color: #fff;
    padding:4px 0 10px;
    margin-right: 20px;
}

/*
    MENU

 */

#toc-menu,
.doku-search-input-wrapper, .search-top {
    display: flex;
    width: 100%;
}

.doku-search-input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.search-bottom {
    display: flex;
    justify-content: flex-start;
}

.doku-search-options {
    display: flex;
    min-width: unset;
    align-items: normal;
    justify-content: flex-start;
    margin: unset;
}

#toc-menu {
    margin-bottom: 1em;
    gap: 0.125em;
    align-items: self-start;
 }

#doku-search-options-toggle {
    display: none;
}

.doku-search-options {
    display: block;
}

#dokumentation .doku-spalten-layout .content ul {
    list-style: none;
    flex-wrap: wrap;
    gap: 1em;
    display: flex;
    flex: 1 1 200px;
    width: fit-content;
    min-width: unset;
    align-items: stretch;
    margin: 0;
    max-width: fit-content;
}

.headline-name.kapitel-name {
    background-color: #0196ab;
    color: #fff;
    padding: 4px 0 10px;
    margin-right: 20px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.kapitel-name-button {
    position: absolute;
    top: -50px;
    right: 0;
    display: flex;
    width: fit-content;
}

.content-headline.with-name .headline-name {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:1;
}


#dokumentation .content ul.doku-marks {
    min-width: calc(33% - 2em);
    width: calc(33% - 2em);
}
#dokumentation .content ul.doku-marks {
    display: flex;
    justify-content: space-between;
    gap: 0;
    flex-wrap: wrap;
    min-width: calc(33% - 2em);
}

.info-kurztext ul.doku-marks {
    flex-wrap: wrap;
    margin: 0 auto;
    align-items: stretch;
    gap: 0;
    min-width: calc(33% - 1.65em);
    max-width: unset;
    width: calc(33% - 1.65em);
}

.headline-ueberschrift {
    margin-left: 0;
}

.doku-kurztext {
    font-style: italic;
    font-weight: bold;
    margin-bottom: 0;
    border-bottom: none;
    align-items: center;
    text-align: left;
    width: 100%;
    background: none;
    padding: 1em;
    min-height: 45px;
    box-sizing: border-box;
    color: #fff;
    display: flex; /* sonst flex, abeer aktuell fehler mit mark.search-highlight */
    line-height: 1.5em;
}



.info-kurztext {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    justify-content: flex-end;
    margin-top: 0.25em;
    background: #0096aa;
    background: #0096aa8f;
    padding: 0;
    margin-bottom: 0.5em;
}

.content-headline.gross + .info-kurztext {

}

.info-kurztext.marks {
    justify-content: space-between;
    align-items: stretch;
    gap: 1em;
    padding: 0;
    border-radius: 0.5em;
    overflow: hidden;
    margin-bottom: 0.5em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.doku-main-layout {
    display: grid;
    grid-template-columns: 1fr; /* Standard: eine Spalte */
    gap: 2rem;
    margin-top: 0;
    margin-bottom: 3em;
}

/* Zweispaltiges Layout, wenn eine linke Spalte existiert (mit Bild) */
.doku-main-layout:has(.doku-main-column-left) {
    grid-template-columns: 1fr 2fr;
    margin: 0;
    margin-top: 0.5em;
}



.liste-container {
    border-right: none;
    margin-top: 0px;
    font-size: 0.9em;
    line-height: 1.6em;
    padding: 0;
    min-width:100%;
    height: fit-content;
}

.liste-container ul li {
    margin-bottom: 0px;
}

.doku-main-column-right {
    display: flex;
    justify-content: flex-end;
}

.doku-spalten-layout .liste-container ul li.liste-headline,
.doku-spalten-layout .liste-container p.liste-headline{
    background: #0196ab;
    font-size: 0.9em;
    width: 100%;
    min-width: 100%;
    max-width: unset;
    color: #fff;
    border: none;
    text-align: center;
    padding: 1em;
    margin: 0;
    display: flex;
    justify-content: center;
    font-weight: bold;
    box-sizing: border-box;

}

.doku-spalten-layout .liste-container ul li {
    hyphens: unset;
    height: auto;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 0.5em;
    max-width: 20%;
    background: #0196ab1a;
    text-align: center;
}


#dokumentation .doku-spalten-layout .content .liste-container ul {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    gap: 1em;
    align-items: stretch;
    justify-content: space-around;
    padding: 1em;
    background: none;
    min-width: 100%;
    box-sizing: border-box;
}

/* CONTROLS */

.doku-controls-fixed {
    position: relative;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: flex;
    margin-right: 10px;
}

.doku-header-controls {
    display: flex;
}

ol.doku-breadcrumbs {
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #0196ab;
    padding: 0.5em 0.75em;
    border-radius: 0.25em;
    font-style: oblique;
    color: #fff;
}

ol.doku-breadcrumbs li {
    display: inline;
    white-space: nowrap;
    position: relative;
    margin-right: 0.5em;
    padding-right: 0.75em;
}

ol.doku-breadcrumbs li a {
    text-decoration: none;
    color: #fff;
}

.doku-breadcrumbs-container {
    background: #0196ab;
    padding: 0.5em;
    font-style: oblique;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
}

ol.doku-breadcrumbs li a:hover {
    text-decoration: underline;
}

ol.doku-breadcrumbs li:after {
    content: ">";
    display: block;
    position: absolute;
    right: -5px;
    top: 0;
    font-weight: 100;
    font-size: 0.85em;
}

ol.doku-breadcrumbs li:last-of-type:after {
    display: none;
}

.breadcrumb-separator {
    margin: 0 0.5em;
}

#logo {
    display: flex;
    color: #0096ab;
    font-size: 1.5em;
    font-family: Tahoma, sans-serif;
    align-items: center;
}

#logo img {
    height: 70px;
}

#doku-back-button:hover {
    background-color: #eee;
}

#doku-back-button svg {
    fill: currentColor;
}

#dokumentation .doku-spalten-layout figure.small {
    box-sizing: content-box;
    padding: 0;
    display: flex;
    width: 100%;
    max-width: unset;
}

#dokumentation .doku-spalten-layout figure.small img {
    max-width: calc(100% - (62ch));
    object-fit: contain;
    background: #fff;
}

a.link-extern.aa4y {
    position: relative;
    margin-right: 1em;
}
a.button {
    transition: transform 0.2s ease-in-out;
}
a.button:not(.text):hover {
    transform: scale(1.05);
}

a.link-extern.aa4y:after {
    content: "";
    position: absolute;
    top: -0.25em;
    right: -1em;
    background-image: url(daten/handbuch.anfrageassistent4you.com/module/dokumentation/img/logo-aa4y.png);
    height: 1em;
    width: 1em;
    background-size: 1em 1em;
    background-repeat: no-repeat;
    border-radius: 20px;
    border: 1px solid #f8f8f8;
}

.doku-controls-fixed #letzter-artikel {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555;
    font-style: italic;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Verhindert, dass sehr lange Titel das Layout sprengen */
}

.doku-main-column-left {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.doku-main-column-left.small {
    flex-wrap: wrap;
    width: 100%;
}

.doku-main-column-left.small figure.small {
    min-width:  calc(33% - 40px);
}

.doku-main-column-left.small .liste-container {
    min-width: 100%;
    margin-bottom: 1em;
}

.doku-main-layout:has(.doku-main-column-left) {
    display: flex;
    flex-direction: column;
}

.doku-spalten-layout .liste-container ul li:nth-of-type(2n+2) {

}

.doku-spalten-layout .doku-volltext {
    width: 65ch;
    box-sizing: border-box;
    padding: 3em 2em;
}


/* MEDIA SETTINGA */

@media (max-width: 1300px) {
    .doku-content-wrapper .doku-panel {
        padding-right: 0;
    }
    .dokumentation .wrapper {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .dokumentation .doku-toc-wrapper {
        padding: 0;
    }
    .dokumentation .doku-spalten-layout {
        gap: 0;
    }
    #dokumentation .doku-spalten-layout .content-headline {
        padding: 0.5em !important;
        margin: 0;
    }
    #doku-toolbar {
        width: auto;
        left: 0;
        right: 0;
    }
    .content-headline.gross + .info-kurztext {
        margin-bottom: 0.5em;
    }
    #dokumentation .content ul.doku-marks {
        margin: 0;
        max-width: fit-content;
    }
    .doku-mark {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .info-kurztext.marks {
        flex-direction: row;
        display: flex;
        align-items: stretch;
        gap: 1em;
        margin: unset;
    }
}

@media (max-width: 1200px) {

    .doku-main-column-right {
        display: flex;
        justify-content: flex-start
    ;
    }



    #dokumentation .doku-spalten-layout figure.bild-1 {
        display: flex;
        max-width: 33%;
    }
    #dokumentation .doku-spalten-layout figure.bild-1.not-alone {
        max-width: 100%;
        background: #fff;
        box-sizing: border-box;
        border: 20px solid #e5f4f6 !important;
    }
    #dokumentation .doku-spalten-layout figure.bild-1.not-alone figcaption {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .doku-spalten-layout .liste-container ul li {
        margin-bottom: 0;
        padding: 1em 1em;
        align-items: center;
        display: flex;
        background: #0196ab1a;
        gap: 1em;
        min-width: 20%;
        justify-content: center;
        flex-grow: 1;
        text-align: center;
    }


    .liste-container {

        padding: 0;
        box-sizing: border-box;
    }
    .liste-container .liste-headline h1,
    .liste-container .liste-headline h5 {
        padding: 0;
        margin: 0;
    }
    #dokumentation .doku-spalten-layout .content ul {
        flex: 1 1 20%;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: auto;
        justify-content: space-between;
        min-width: unset;
    }
    .content-headline.with-name .headline-name {
        min-width: unset !important;
        line-height: 1.2em;
        margin-right: 0;
        word-break: keep-all;
        width: fit-content !important;
        padding-left: 0;
        margin-left: 0.5em !important;
    }
    #dokumentation .doku-spalten-layout .content-headline > span {
        max-width: unset;
        justify-content: flex-start;
    }
    .headline-ueberschrift {
        line-height: 1.2em;
    }
    .doku-mark {

    }
    #dokumentation .doku-spalten-layout .content-headline .headline-ueberschrift {
        margin: 0;
    }
    #dokumentation .doku-spalten-layout .content-headline .hyphen {
        margin: 0 0.5em;
    }
}



/* ================================================================== */
/* == MOBILE TOOLBAR & NAVIGATION (wird unter 900px aktiv)         == */
/* ================================================================== */

.doku-toolbar-mobile-controls {
    display: none; /* Standardmäßig auf Desktop ausblenden */
    align-items: center;
    gap: 5px;
}

.doku-toolbar-mobile-controls button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

@media (max-width: 900px) {
    .doku-main-layout:has(.doku-main-column-left) {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    .headline-name.kapitel-name {
        margin-right: 0;
        width: 100%;
    }
    .doku-child-preview-link {
        width: fit-content;
        min-width: fit-content;
    }

    figure {
        pointer-events: none;

    }
    figure.bild-1 {
        pointer-events: none;

    }
    .doku-content-wrapper {
    width: 100vw;
    }
    .doku-main-column-left {
        display: flex;
    }
    #dokumentation {
        font-size: 0.85em;
    }
    .doku-spalten-layout {
        grid-template-columns: minmax(200px, 1fr) 3fr;
    }

    /* ================================================================== */
    /* == MOBILE TOOLBAR & NAVIGATION (max-width: 900px)               == */
    /* ================================================================== */


    .doku-toolbar-mobile-controls {
        display: flex;
        width:auto;
    }
    #doku-toolbar {
        flex-wrap: nowrap;
        padding: 0.5em 0.5em;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .doku-spalten-layout .liste-container ul li {
        min-width: unset;
        max-width: unset;
        width: fit-content;
    }

    /* Desktop-Elemente in der Toolbar ausblenden */
    #doku-toolbar .doku-toolbar-center,
    #doku-toolbar .doku-toolbar-right {
        display: none;
    }

    /* Mobile Steuerelemente anzeigen */
    .doku-toolbar-mobile-controls {
        display: flex;
    }

    /* Suchleiste nimmt den Rest des Platzes ein */
    #doku-toolbar .doku-toolbar-left {
        flex-grow: 1;
        min-width: auto;
        display: flex;
        justify-content: flex-end;
    }

    .doku-search-container {
        width: 100%;
    }

    /* Such-Reset-Button anpassen */
    #doku-search-reset {
        position: absolute;
        top: 100%;
        right: 10px;
        margin-top: 5px;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(2px);
    }

    /* Suchoptionen als ausklappbares Menü unter der Leiste */
    .doku-search-options {
        position: absolute;
        top: 100%;
        left: 10px;
        right: 10px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-top: none;
        padding: 10px;
        z-index: -1;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Mobiles Inhaltsverzeichnis (TOC) */
    .doku-toc-wrapper:before {

    }
    .doku-toc-wrapper {
        position: fixed;
        top: 35px; /* Höhe der Toolbar */
        left: 0;
        width: 50%;
        height: calc(100vh - 55px);
        background-color: #f9f9f9;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        padding: 15px;
        box-sizing: border-box;
        border-right: none;
    }

    .doku-toc-wrapper.is-open {
        transform: translateX(0);
        max-width: 75%;
        min-width: 400px;
        top: 4em;
    }

    .doku-search-container .doku-search-options {
        margin-top: 2px;
    }

        /* Hauptinhalt nach rechts verschieben, wenn TOC offen ist (optionaler Effekt) */
    body.mobile-toc-is-open .doku-content-wrapper {
        /* Optional: transform: translateX(100%); */
        overflow: hidden; /* Scrollen des Inhalts verhindern */
    }

    #dokumentation .doku-spalten-layout .content-headline.gross {
        margin-left: 0;
    }

    .doku-content-container {

    }

    .dokumentation .wrapper {
        padding: 0;
    }
    #dokumentation .doku-spalten-layout .content-headline {
        flex-direction: row;
        padding: 0 !important;
        /* flex-wrap: wrap; */
        align-items: center;
        top: unset;
        bottom: unset;
        margin-bottom: 1em;

    }
    .content-headline.with-name .headline-name {
        margin: unset;
        flex: 1 1 25%;
        /* text-align: left; */
        justify-content: flex-start;
        line-height: 1.3em;
        align-items: center;
        height: auto;
        display: flex;
        max-height: unset;
        box-sizing: content-box;
        width: fit-content !important;
        min-width: fit-content !important;
        max-width: fit-content !important;

        margin-left: 1em !important;
    }
    .headline-ueberschrift {
        text-align: right;
        flex: 1 1 66%;
        background: #0196ab1a;
        padding: 10px;
        padding-right: 1em;
        line-height: 1.3em;
        height: 100%;
        display: flex;
        height: auto;
        justify-content: flex-end;
        align-items: center
    }
    .doku-spalten-layout .doku-group-panel.is-active .doku-content-section-beschreibung .content {
        margin-bottom: 4em;
    }
    .doku-content-wrapper .doku-group-panel > .doku-content-section {
        margin-bottom: 0;
    }
    .kapitel-name-button {
        width: 100%;
        justify-content: space-between;
    }

    .bottom-info-bar {
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-content: stretch;
        order: 99;
    }

    .doku-infobar  {
        display: flex;
        align-items: center;
        gap: 0;
        font-size: .875rem;
        margin: 0;
        opacity: 1;
        position: absolute;
        padding: 0 10px;
        right: 0;
        bottom: -50px;
        z-index: 12;
        background-color: #066379;
        border-radius: 6px;
    }

    .doku-infobar,
    .zum-inhalt-button {
        bottom: unset;
        position: relative;
        top: unset;
    }

    .doku-rate {
        justify-content: center;
        width: 100%;
    }
    #dokumentation .doku-spalten-layout .doku-group-panel.is-active .content {
        margin-bottom: 4em !important;
        margin: 0 auto;
        padding: 1em !important;
        border: none;
        padding-top: 1em !important;
    }
    .info-kurztext.marks {
        flex-direction: row;
        display: flex;
        align-items: stretch;
        gap: 1em;
        margin: unset;
        margin-bottom: 0;
        padding-bottom: 0;
    }


    .doku-mark {
        white-space: unset;
    }

    /* Wenn das mobile Menü offen ist... */
    body.mobile-toc-is-open .doku-content-wrapper {
        overflow: hidden; /* Scrollen des Inhalts verhindern */
    }

    /* ...fügen wir ein Overlay hinzu, um den Hintergrund abzudunkeln */
    body.mobile-toc-is-open::after {
        content: '';
        position: fixed;
        top: 39px;
        left: 0;
        width: 100%;
        height: calc(100vh - 55px);
        background-color: rgb(80 163 167 / 3%);
        z-index: 999;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
        display: none;
    }


    #doku-toolbar .doku-toolbar-right {
        display: flex;
    }
    .doku-info-box-placeholder {
        display: none;
    }

    button#toggleAll {
        display: none;
        margin-right: 0.5em;
    }

    
    button#toggleAll {
        box-sizing: border-box;
        padding: 4px 8px;
    }


}

/* MOBILE SETTINGS */
@media (max-width: 700px) {
    /* Auf sehr kleinen Bildschirmen die Suchleiste anpassen */
    .doku-search-container #doku-search-input {
        font-size: 13px;
    }

    #doku-toolbar {
        padding: 0;
        height: auto;
        flex-wrap: wrap;
    }
    #logo {
        font-size: 1.2em;
    }
    #logo img {
        height: 40px;
    }

    .doku-toolbar-mobile-controls button {
        padding: 5px;
    }
    #doku-back-button {
        padding: 0 0.25em !important;
    }
    #doku-back-button > span {
        display: none;
    }
    .doku-spalten-layout .doku-volltext {
        width: 100%;
        max-width: unset;
    }


}

@media (max-width: 700px) {
    #dokumentation .doku-spalten-layout figure {
        display: flex;
        flex-direction: column;
    }
    figure.-bild-1 {

        max-width: unset:
    }
}

@media (max-width: 600px) {
    #dokumentation .doku-spalten-layout .content ul.doku-marks {
        width: fit-content;
        max-width: unset;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .doku-mark, .doku-kurztext {
        height: fit-content;
        min-height: unset;
        max-height: unset;
        width: 100%;
    }
    .doku-kurztext {
        width: 100%;
    }
    .doku-mark {
        width: fit-content;
        height: 100%;
    }
    .doku-controls-fixed #letzter-artikel {
        max-width: 50px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/** CONTENT - ORDER **/

.doku-main-column-left.bild {
    order: 2;
}

.doku-main-column-left.liste {
    order: 5;
}

.info-kurztext.marks,
.info-kurztext {
    order: 1;
    flex-direction: row-reverse;
}

.doku-main-layout {
    order: 3;
}

#dokumentation .doku-spalten-layout figure.big {
    order: 4;
}

.content .keywords {
    order: 99;
}

/** WEITERE ORDER **/

#dokumentation .doku-spalten-layout figure.small {
    order: 2;
}

/** THEMES **/

/*
#themeMenu {
  position: absolute;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #ccc;
  background: #fff;
  min-width: 220px;
  z-index: 9999;
}

.themeItem {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.themeItem[aria-selected="true"] {
  font-weight: 600;
}*/

/* Stile für das Theme-Switcher-Popover */
.doku-theme-popover {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    right: 1em !important;
    left: unset !important;
}
.doku-theme-popover ul {
    list-style: none;
    margin: 0;
    padding: 5px;
}
.doku-theme-popover button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}
.doku-theme-popover button:hover {
    background-color: #f0f0f0;
}
.doku-theme-popover button.is-active {
    font-weight: bold;
    color: #0056b3;
    background-color: #e7f1fa;
}

#dokumentation .content b {
    display: unset;
}

#dokumentation .content a {
    display: inline-block;
}

#editor .doku-content-wrapper {
    overflow: visible;
    min-width: 100%;
}

.doku-workflow-container .doku-panel,
.doku-workflow-container .doku-panel .content {
    display: block !important;
}

#editor span.hinweis-abschnitt {
    color: red;
    font-weight: bold;
}

#editor #doku-toolbar {
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
}

#editor #dokumentation {
    position: relative;
}

@media (max-width: 1200px) {
    #editor #dokumentation .mf_button {
        position: absolute;
        right: 0;
    }
}

/* ================================================================== */
/* == Bildlupe / Magnifier                                         == */
/* ================================================================== */

/* Die Lupe selbst */
.doku-magnifier-loupe {
    position: absolute; /* Wichtig, damit sie frei positioniert werden kann */
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%; /* Macht das Element rund */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0,0,0,0.2);
    background-repeat: no-repeat;

    /* Verhindert, dass die Lupe selbst Maus-Events auslöst, was zu Flackern führen würde */
    pointer-events: none;

    /* Standardmäßig ausgeblendet */
    display: none;

    /* Stellt sicher, dass die Lupe über anderen Elementen liegt */
    z-index: 9999;
    cursor: none; /* Sicherstellen, dass die Lupe selbst keinen Cursor anzeigt */
}