/* =============================================================
   MD-Handel · Dokumentation (/Doku)
   Zweispaltiges Layout: Navigationsbaum links, Inhalt rechts.
   Nutzt die Designtokens (--mdh-*) aus site.css.
   ============================================================= */

.doku-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 2.2rem;
    align-items: start;
    padding: 2rem 0 3rem;
}

/* ---------- Seitennavigation ---------- */
.doku-sidebar {
    position: sticky;
    top: 76px; /* unter der Sticky-Marketing-Navigation */
}
.doku-sidebar__toggle { display: none; }

/* ---------- Suchfeld ---------- */
.doku-suche {
    display: flex;
    background: var(--mdh-card);
    border: 2px solid var(--mdh-line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .8rem;
}
.doku-suche:focus-within { border-color: var(--mdh-accent); }
.doku-suche input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    padding: .5rem .7rem;
    font: inherit;
    font-size: .92rem;
    background: transparent;
}
.doku-suche button {
    flex: 0 0 auto;
    border: none;
    background: var(--mdh-navy);
    color: #fff;
    padding: 0 .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.doku-suche button:hover { background: var(--mdh-accent); }
.doku-suche button .mdh-ico { width: 1rem; height: 1rem; }

.doku-nav {
    background: var(--mdh-card);
    border: 1px solid var(--mdh-line);
    border-radius: var(--mdh-radius);
    box-shadow: var(--mdh-shadow-sm);
    padding: 1rem .9rem;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    font-size: .92rem;
}
.doku-nav__home {
    display: block;
    font-weight: 800;
    color: var(--mdh-navy);
    padding: .3rem .55rem .6rem;
    border-bottom: 1px solid var(--mdh-line);
    margin-bottom: .55rem;
}
.doku-nav__list { list-style: none; margin: 0; padding: 0; }
.doku-nav__list--sub { padding-left: .85rem; }
.doku-nav__item { margin: 1px 0; }

.doku-nav__link {
    display: block;
    padding: .32rem .55rem;
    border-radius: 8px;
    color: var(--mdh-ink);
    line-height: 1.3;
}
.doku-nav__link:hover { background: var(--mdh-bg); color: var(--mdh-accent-dark); }
.doku-nav__link--active {
    background: var(--mdh-navy);
    color: #fff !important;
    font-weight: 600;
}
/* Aktiver Eintrag bleibt beim Hover dunkel – sonst stünde der weiße Text
   auf dem hellen Hover-Hintergrund und wäre unlesbar. */
.doku-nav__link--active:hover { background: var(--mdh-navy-2); }

/* Aufklappbare Kapitel: Pfeil links neben dem Kapitel-Link */
.doku-nav__group > summary {
    display: flex;
    align-items: center;
    gap: .5rem; /* Luft zwischen Pfeil und (aktiv hervorgehobenem) Kapitel-Link */
    cursor: pointer;
    list-style: none;
}
.doku-nav__group > summary::-webkit-details-marker { display: none; }
.doku-nav__group > summary::before {
    content: "";
    flex: 0 0 auto;
    width: .55rem; height: .55rem;
    border-right: 2px solid var(--mdh-muted);
    border-bottom: 2px solid var(--mdh-muted);
    transform: rotate(-45deg);
    transition: transform .15s;
    margin-left: .15rem;
}
.doku-nav__group[open] > summary::before { transform: rotate(45deg); }
.doku-nav__group > summary .doku-nav__link { flex: 1 1 auto; }

/* ---------- Inhalt ---------- */
.doku-content { min-width: 0; }

.doku-breadcrumb {
    display: flex; flex-wrap: wrap; gap: .45rem;
    font-size: .85rem;
    color: var(--mdh-muted);
    margin-bottom: .9rem;
}
.doku-breadcrumb a { color: var(--mdh-muted); }
.doku-breadcrumb a:hover { color: var(--mdh-accent-dark); }

.doku-body {
    background: var(--mdh-card);
    border: 1px solid var(--mdh-line);
    border-radius: var(--mdh-radius);
    box-shadow: var(--mdh-shadow-sm);
    padding: 2rem 2.4rem 2.4rem;
    line-height: 1.65;
}
.doku-body h1 {
    font-size: 1.75rem; font-weight: 800;
    color: var(--mdh-accent-dark);
    margin: 0 0 1.1rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid var(--mdh-line);
}
.doku-body h2 {
    font-size: 1.25rem; font-weight: 700;
    color: var(--mdh-navy);
    margin: 1.8rem 0 .7rem;
}
.doku-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--mdh-navy); margin: 1.4rem 0 .5rem; }
.doku-body h4 { font-size: .95rem; font-weight: 700; color: var(--mdh-navy); margin: 1.2rem 0 .4rem; }
/* Kleiner Akzentbalken vor Unterüberschriften */
.doku-body h2::before, .doku-body h3::before, .doku-body h4::before {
    content: "";
    display: inline-block;
    width: .32rem;
    height: 1em;
    background: var(--mdh-accent);
    border-radius: 3px;
    margin-right: .55rem;
    vertical-align: -0.12em;
}
.doku-body h3::before { height: .85em; width: .28rem; }
.doku-body h4::before { height: .75em; width: .25rem; }
.doku-body p { margin: 0 0 .9rem; }
.doku-body ul, .doku-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.doku-body li { margin: .2rem 0; }
.doku-body img {
    max-width: 100%;
    border: 1px solid var(--mdh-line);
    border-radius: 10px;
    box-shadow: var(--mdh-shadow-sm);
    margin: .4rem 0 1rem;
}
.doku-body code {
    background: var(--mdh-bg);
    border: 1px solid var(--mdh-line);
    border-radius: 6px;
    padding: .1rem .35rem;
    font-size: .86em;
}
.doku-body pre {
    background: var(--mdh-navy);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    /* Zeilenkästen kleiner als die Glyphenhöhe, damit Rahmenzeichen-Diagramme
       (│ ─ └ …) zeilenübergreifend lückenlos durchgezogene Linien ergeben. */
    line-height: 1;
}
.doku-body pre code { background: none; border: none; padding: 0; color: inherit; }
.doku-body blockquote {
    border-left: 4px solid var(--mdh-accent);
    background: var(--mdh-bg);
    border-radius: 0 10px 10px 0;
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    color: var(--mdh-ink);
}
.doku-body blockquote p:last-child { margin-bottom: 0; }

/* Markdown-Tabellen */
.doku-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.1rem;
    font-size: .92rem;
}
.doku-table th, .doku-table td {
    border: 1px solid var(--mdh-line);
    padding: .5rem .7rem;
    text-align: left;
    vertical-align: top;
}
.doku-table th { background: var(--mdh-bg); color: var(--mdh-navy); font-weight: 700; }
.doku-table tr:nth-child(even) td { background: #fafbfd; }

/* ---------- Suchergebnisse ---------- */
.doku-body mark {
    background: #ffe4cc; /* helles Akzent-Orange */
    color: inherit;
    border-radius: 3px;
    padding: 0 .15em;
}
.doku-treffer-anzahl { color: var(--mdh-muted); }
.doku-treffer { list-style: none; margin: 0; padding: 0; }
.doku-treffer li {
    padding: .9rem 0;
    border-bottom: 1px solid var(--mdh-line);
}
.doku-treffer li:last-child { border-bottom: none; }
.doku-treffer__titel { font-weight: 700; font-size: 1.02rem; }
.doku-treffer__pfad { display: block; color: var(--mdh-muted); margin: .1rem 0 .3rem; }
.doku-treffer__text { margin: 0; color: var(--mdh-ink); font-size: .92rem; }

/* ---------- Zurück/Weiter-Blättern ---------- */
.doku-pager {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 1.2rem;
}
.doku-pager__link {
    display: flex; flex-direction: column;
    background: var(--mdh-card);
    border: 1px solid var(--mdh-line);
    border-radius: 12px;
    box-shadow: var(--mdh-shadow-sm);
    padding: .6rem 1rem;
    max-width: 48%;
    color: var(--mdh-ink);
    transition: border-color .15s;
}
.doku-pager__link:hover { border-color: var(--mdh-accent); color: var(--mdh-accent-dark); }
.doku-pager__link small { color: var(--mdh-muted); font-size: .75rem; }
.doku-pager__link span { font-weight: 600; }
.doku-pager__link--next { margin-left: auto; text-align: right; }

/* ---------- Mobil: Navigation einklappbar über dem Inhalt ---------- */
@media (max-width: 899.98px) {
    .doku-layout { grid-template-columns: 1fr; gap: 1rem; }
    .doku-sidebar { position: static; }
    .doku-sidebar__toggle {
        display: block;
        width: 100%;
        background: var(--mdh-navy);
        color: #fff;
        font-weight: 700;
        border: none;
        border-radius: 10px;
        padding: .6rem 1rem;
        cursor: pointer;
        text-align: left;
    }
    .doku-nav { display: none; margin-top: .6rem; }
    .doku-nav--open { display: block; }
    .doku-body { padding: 1.3rem 1.1rem 1.6rem; }
    .doku-table { display: block; overflow-x: auto; }
}