div.VARS {
   z-index: 3000;
   position: fixed;
   top: 0;
   right: 0;
   background: #efefefef;
   padding: 1em;
   font-family: Courier;
   transition: transform 0.3s ease;  /* Sanfte Animation */
   transform: scale(0.2);              /* Normal: 100% */
   transform-origin: top right;
   display: flex;
   gap: 1em;
   max-height: 60vh;        /* z.B. 60% der Viewport-Höhe */
   overflow-y: auto;        /* vertikaler Scroll nur bei Bedarf */
   overflow-x: hidden;      /* horizontal verhindern */
}
div.VARS:hover {
   transform: scale(1);            /* Hover: 120% vergrößert */
}
div.VARS h3 {
   margin-top:0.6em;
   ;
   margin-bottom:0;
}
div.ERRORS {
   position: fixed;
   bottom: 0;
   right: 0;
   background: #efefefef;
   padding: 1em;
   font-family: Courier;
   transition: transform 0.3s ease;  /* Sanfte Animation */
   transform: scale(0.2);              /* Normal: 100% */
   transform-origin: bottom right;
   max-width: 30em;
   max-height: 40em;
   overflow-y: auto;           /* ← Vertikale Scrollbar */
   overflow-x: hidden;         /* ← Horizontale verstecken */
   box-sizing: border-box;     /* ← Padding in height einbeziehen */
}
div.ERRORS:hover {
   transform: scale(1);            /* Hover: 120% vergrößert */
}

div.ROLLEN {
   position: fixed;
   top: 0;
   right: 30px;
   background: #efefefef;
   padding: 1em;
   font-family: Courier;
}



.dump-tree,
.dump-tree ul {
   list-style-type: none;
   margin: 0;
   padding-left: 1em;
}

.dump-tree .dump-node {
   position: relative;
   margin: 2px 0;
   cursor: default;
   font-family: monospace;
   font-size: 0.9rem;
}

/* Toggle-Symbol vor Elternknoten */
.dump-tree .has-children > .dump-toggle::before {
   content: '\25BC'; /* ▼ */
   display: inline-block;
   width: 1em;
   cursor: pointer;
   margin-right: 4px;
   font-size: 0.8rem;
}

/* Blätter bekommen „Einrück-Platzhalter“, aber kein Toggle */
.dump-tree .dump-node:not(.has-children) > .dump-leaf::before {
   content: '';
   display: inline-block;
   width: 1em;
   margin-right: 4px;
}

/* eingeklappt */
.dump-tree .collapsed > ul {
   display: none;
}

.dump-tree .collapsed > .dump-toggle::before {
   content: '\25B6'; /* ▶ */
}