.tree ul {
    list-style-type: none;
    padding-left: 20px;
    border-left: 1px solid #ccc;
}

.tree li {
    margin: 5px 0;
}

.tree summary {
    cursor: pointer;
    font-weight: bold;
}

    .tree summary::before {
        content: '\25B6\FE0E '; /* Dreieck nach rechts (geschlossen) */
        display: inline-block;
        margin-right: 5px;
    }

.tree details[open] > summary::before {
    content: '\25BC\FE0E '; /* Dreieck nach unten (offen) */
}

.tree .file::before {
    content: '\1F4C4\FE0E '; /* Dokument-Icon */
    display: inline-block;
    margin-right: 5px;
}

.tree .folder > summary::before {
    /* content: '📁 '; Dreieck wird von details gesteuert, hier ggf. Ordner-Icon */
    /* Man könnte das Dreieck auch durch ein Ordner-Icon ersetzen oder ergänzen */
}