.tree-container {
    position: relative;
    padding-top: 1rem;
    padding-left: 1rem;
}

/* Knoten */
.tree-node {
    position: relative;
    margin-bottom: 1rem;       /* 24px */
    padding-left: 2rem;          /* 32px */
}
.tree-node-root {
    margin-bottom: 0.8rem;       /* 12.8px */
}

.tree-node-child {
    margin-left: 0.5625rem;      /* 9px */
}

/* Vertikale Linie */
.tree-vertical-line {
    position: absolute;
    top: 2.2rem;                   /* 32px */
    left: 3.5rem;                /* 40px */
    width: 0.0625rem;            /* 1px */
    height: calc(100% - 4.4rem); /* 100% - 75px */
    background: var(--shimmer-line-vertical);
    z-index: 0;
    background-size: auto 200%;
    background-repeat: no-repeat;
    animation: shimmer-line-vertical 6s infinite linear;
}

/* Waagerechte Linie */
.tree-branch-line {
    position: absolute;
    top: 1em;                    /* bleibt relativ zur Fontgröße */
    left: 0;
    width: 2rem;                 /* 32px */
    height: 0.0625rem;           /* 1px */
    background: var(--shimmer-line-horizontal);
    background-size: 200% auto;
    background-repeat: no-repeat;
    animation: shimmer-line 6s infinite linear;
    z-index: 1;
}

/* COLLAPSING */
.tree-subtree {
    overflow: hidden;
    max-height: 62.5rem;         /* 1000px */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.tree-subtree.collapsed {
    max-height: 0;
    opacity: 0;
}

/* TOGGLE-SYMBOL */
.tree-toggle {
    position: absolute;
    left: 0rem;
    top: 0.6rem;                 /* 9.6px */
    width: 1rem;                 /* 16px */
    height: 1rem;                /* 16px */
    background: rgba(0 , 0, 0, 0.08);
    border: 0.0625rem solid rgba(0, 0, 0, 0.2); /* 1px */
    border-radius: 0.125rem;     /* 2px */
    cursor: pointer;
    transition: transform 0.3s ease;
}
.tree-toggle::before {
    content: "";
    position: absolute;
    inset: 0.1875rem;            /* 3px */
    background: var(--dark-petrol);
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>') center / contain no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>') center / contain no-repeat;
    transition: transform 0.3s ease;
}
.tree-toggle.open::before {
    transform: rotate(90deg);
}

/* Label-Only-Buttons (nicht klickbar) */
.fancy-button.label-only {
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

/* ANIMATIONEN */
@keyframes shimmer-line {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
@keyframes shimmer-line-vertical {
    0% {
        background-position: 0 -200%;
    }
    100% {
        background-position: 0 200%;
    }
}

/* RESPONSIVE */
@media (max-width: 48rem) {      /* 768px */
    .tree-vertical-line {
        top: 1.75rem;            /* 28px */
        left: 2.5rem;            /* 40px */
        height: calc(100% - 1.875rem); /* 30px */
    }
    .tree-branch-line {
        top: 0.85em;
    }
}