/* =============================== */
/* VISUAL SITEMAP – CLEAN MINIMAL  */
/* =============================== */

.visual-sitemap{
  
/* --------  Globale Variablen ------------- */

   /* Variablen (alles hier anpassen) */
  --vs-font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --vs-font-size: 18px;
  --vs-color: #1f2937;

  --vs-link-color: #25274d;
  --vs-link-hover-color: #C3C3F0;

  --vs-border: 0 solid rgba(0,0,0,.12);
  --vs-radius: .75rem;

  --vs-row-hover-bg: rgba(10,102,194,.06);
  --vs-group-header-hover-bg: rgba(0,0,0,.04);

 
  --vs-icon-glyph-color: #666;
  --vs-icon-glyph-hover: #333;

  --vs-group-title-weight: 400; /* NICHT fett */
  --vs-row-hover-bg-strong: rgba(10,102,194,.12);
  --vs-toggle-nudge-y-normal: 2px;  /* 1–3px je nach Geschmack */
  --vs-toggle-em: 1.35em;
  
  /* Dunklere Gruppen-Hover-Farbe (kannst du feintunen) */
  --vs-group-deep-hover-bg: rgba(10,102,194,.10);

  --vs-icon-glyph-size-virt: var(--vs-icon-glyph-size); 


  /* --------  Alles in Zusammenhang von Zeilenabständen und Zeichengrössen ------------- */
  
  /* Normale Gruppen – Hauptordner */
    --vs-normal-row-line: 23px;    /* 1.00–1.10 macht’s merklich kompakter VAH OK*/
    --vs-toggle-em-normal: 22px; /* kleiner als 1.35em = weniger Zeilenhöhe VAH OK*/
    --vs-icon-glyph-size: 16px; /*Pfeilgrösse VAH OK*/
  
  /* Globaler Zeilenabstand */
    --vs-node-gap: 0px;   /* normaler Zeilenabstand, kannst auf -0.03rem runter, wenn noch nötig VAH OK*/
    --vs-root-node-gap: 0px;   /* Zeilenabstand nur für Hauptordner (normale Gruppen), /* ggf. -1px möglich */
  
  /* Virtuelle Gruppen */
    --vs-virtual-row-line: 22px;  /* vorher 1.2, VAH OK */
    --vs-toggle-em-virt: 20px;        /* falls virtuell anders sein soll: z.B. 1.25em VAH ok*/
    /* Abstand je Zeile (erste Ebene im virtuellen Ordner) */
    --vs-virtual-node-gap: 0px;     /* vorher .15rem VAH OK*/
    /* Abstand je Zeile in tieferen Ebenen */
    --vs-virtual-child-gap: 0px;    /* vorher .15rem VAH OK*/  

  /* Header minimal flacher */
    --vs-group-header-py: 0px; /* Zeilenabstand, nimmmt keine Werte unter 0 an VAH OK   */

  /* Abstand zwischen Gruppen-Boxen (optional) */
    --vs-group-mt: 0px; /* VAH OK */
    --vs-group-mb: -8px; /* VAH OK */
    --vs-virtual-group-mt: -5px;     /* Abstand NACH OBEN VAH OK */
    --vs-virtual-group-mb: -5px;     /* Abstand NACH UNTEN Vorher -15px VAH OK */


  /* --------  Alles in Zusammenhang mit Zeileneinzügen ------------- */
   
  /* EINZÜGE – NORMAL */
  /* Nicht zu breit fahren (je nach Verzeichnistiefe), da sonst Mobile hoch nicht alles anzeigen kann) */
  --vs-global-shift-x: -42px; /* negativ = nach links */
  --vs-tree-ml: 100px;           /* Start der 1. Ebene in normalen Gruppen */
  --vs-tree-pl: 0px;            /* Innen-Padding der 1. Ebene */
  --vs-subindent: 60px;         /* Schrittweite je Unterebene */

  /* EINZÜGE – GANZE GRUPPENBOX */
  --vs-group-ml: 10px; /*Linker Außen-Versatz normaler Gruppen (bei dir 0)  */
  --vs-virtual-group-ml: 30px;   /* virtueller Ordner – Box etwas eingerückt */
  --vs-group-ml-normal: 28px; /* Einzug NUR für normale Gruppen */

  /* GAPS */
  --vs-gap: 7px;               /* Icon ↔ Text in Zeilen */
  --vs-header-gap: 8px;        /* Abstand im Gruppenheader */
  --vs-toggle-mr: 0px;           /* Extra-Abstand rechts vom Toggle (mit Einheit!) */
  
   --vs-indent: 138px;    /* Einzug für Unterebenen normale Ordner (nicht virtuelle) --> hat ev. keine Funktion mehr*/

  /* Abstand zwischen dem Gruppen-Header und der ersten Ebene */
  --vs-virtual-tree-mt: 0px;      /* vorher .25rem */
  --vs-margin-bottom-gap: 10px; 
  --vs-margin-top-gap: 0px; 
  --vs-virtual-tail-gap-outside: 0px;   /* zusätzl. unten bei offen */
    
  /* linkes Innen-Padding der .vs-group (muss zu deiner .vs-group padding passen) */
  --vs-group-pad-l: 11px;                /* bei dir: padding: .25rem .5rem .5rem; => .5rem links */

  /* Berechnet: wie weit Level-1 unter dem Header nach rechts eingerückt ist
     relativ zum Gruppen-Innenrand – diese Distanz gleichen wir aus */
  --vs-hl-base-virt: calc(
    var(--vs-virtual-tree-ml) + var(--vs-virtual-tree-pl) - var(--vs-group-pad-l)
  );
  
    
  /* --- Feinkorrektur nur für die Markierungsfläche (nicht für Inhalt) --- kenne die Verwendung nicht??? */
    --vs-left-fill: calc(var(--vs-tree-ml) + var(--vs-tree-pl) - var(--vs-group-pad-l));
    --vs-left-fine: 0px;  /* Feintrimm in px nach Bedarf */
    --vs-virt-l1-fine: 0px;
    --vs-subindent-fill: calc(var(--vs-left-fill) + var(--vs-subindent));
    --vs-virtual-left-fill: calc(var(--vs-virtual-tree-ml) + var(--vs-virtual-tree-pl) - var(--vs-group-pad-l));
    --vs-virtual-left-fine: 0px;
    --vs-virtual-subindent-fill: calc(var(--vs-virtual-left-fill) + var(--vs-subindent));

  
  /* Normale Gruppen (falls du die später brauchst) */
 
  --vs-group-mr: 0;
 
  /* >>> Virtuelle Gruppen – HIER anpassen <<< */
  
  --vs-virtual-group-mr: 0;          /* rechts */

   /* NEU: wie stark die NÄCHSTE Box über dem virtuellen Ordner zusammenrücken soll */
  --vs-virtual-gap-next: 0px;  /* z.B. .25rem oder 0 */

  /* Einrückung/Versatz der Bäume (global) */
  /* Basis für UL-Einrückungen (falls noch nicht vorhanden) */
 
 
  --vs-tree-gap-top: 0rem;

  /* NEU: Kompensation, damit die Baum-UL im virtuellen Ordner trotz +16px Gruppe
     nicht „zu weit“ rechts wirkt. Stell’ das notfalls auf 0 oder leicht negativ. */
  --vs-virtual-tree-ml: calc(var(--vs-tree-ml) - var(--vs-virtual-group-ml));
  --vs-virtual-tree-pl: var(--vs-tree-pl);

  /* Einzug aller Unterordner (pro Ebene) – hier zentral einstellen */
  --vs-group-pad-t: .10rem;
  --vs-group-pad-b: .15rem;

  /* Ungruppierte Wurzelebene (falls genutzt) */
  --vs-ungrouped-tree-gap-top: 0;
  --vs-ungrouped-root-gap: 0;

  /* Zeilenabstände */
  --vs-row-bleed-fix: 2px;     /* bei Bedarf auf 1px stellen */
  --vs-group-header-py: 1px;   /* Header minimal höher als 0px */


}

/* Reset nur im Sitemap-Bereich */
.visual-sitemap ul, .visual-sitemap li { margin:0; padding:0; list-style:none; }

/* Basis */
.visual-sitemap{ font-family:var(--vs-font-family); font-size:var(--vs-font-size); color:var(--vs-color); }
.visual-sitemap a.vs-link{ color:var(--vs-link-color); text-decoration:none; transition:color .15s ease; }
.visual-sitemap a.vs-link:hover{ color:var(--vs-link-hover-color); text-decoration:none; }

/* Gruppen (virtuell & normal identisch) */
/*.visual-sitemap .vs-group{
  border:var(--vs-border); border-radius:var(--vs-radius);
  /* padding/margin kommen weiter unten var-basiert /
} */



.visual-sitemap .vs-group:last-child{ margin-bottom:0; }

/* Header */
.visual-sitemap .vs-group-header{
  display:flex; align-items:center; gap: var(--vs-header-gap); padding: var(--vs-group-header-py) 0;
  font-weight:var(--vs-group-title-weight);
  border-radius:.35rem; cursor:pointer; transition:background .15s ease;
}
.visual-sitemap .vs-group-header:hover{ background:var(--vs-group-header-hover-bg); }

/* Bäume: Einrückung überall gleich */
/* NEU – GRUPPIERT: Bäume innerhalb von .vs-group */
.visual-sitemap .vs-group > .vs-tree{
  margin: var(--vs-tree-gap-top) 0 0 var(--vs-tree-ml) !important;
  padding-left: var(--vs-tree-pl) !important;
}

/* NEU – UNGROUPED: Top-Level-Baum direkt unter .visual-sitemap */
.visual-sitemap > .vs-tree{
  margin: var(--vs-ungrouped-tree-gap-top) 0 0 .25rem !important;
  padding-left: var(--vs-indent) !important;
}

/* Knoten – EINHEITLICH */
.visual-sitemap .vs-tree .vs-node{
  display:flex;
  align-items:flex-start;
  column-gap: var(--vs-gap);  /* nur horizontal */
  row-gap: 0;                 /* vertikal KEIN zusätzlicher Abstand */
  margin: var(--vs-node-gap) 0;
  border-radius:.25rem;
  transition:background .15s ease;
  flex-wrap: wrap;            /* Kinder umbrechen dürfen */
}
.visual-sitemap .vs-children{ margin-left:var(--vs-indent); }
.visual-sitemap .vs-node.collapsed > .vs-children{ display:none; }

/* ========= Toggle (nur ▸ / ▾) – HARTE Neutralisierung ========== */
.visual-sitemap .vs-group-toggle,
.visual-sitemap .vs-node > .vs-toggle{
  width:var(--vs-toggle-em); height:var(--vs-toggle-em); display:inline-flex; align-items:center; justify-content:center;
  border:none !important; background:transparent !important; box-shadow:none !important;
  padding:0; cursor:pointer; position:relative; z-index:1;
  margin: 0 !important;
  margin-right: var(--vs-toggle-mr) !important;
}
/* kleiner in virtuellen Gruppen */
.visual-sitemap .vs-group-virtual .vs-node > .vs-toggle{
  width: var(--vs-toggle-em-virt);
  height: var(--vs-toggle-em-virt);
}
.visual-sitemap .vs-group-virtual .vs-node > .vs-toggle::before{
  font-size: var(--vs-icon-glyph-size-virt);
}
.visual-sitemap .vs-group-virtual .vs-link{
  line-height: var(--vs-virtual-row-line);
}

/* Optional (falls du den Header ebenfalls über dieselbe Gap-Logik fahren willst): */
.visual-sitemap .vs-group-toggle{
  margin-right: var(--vs-toggle-mr) !important; /* einheitliches Verhalten */
}


/* ALLES, was Plus/Minus/Masken/Striche sein könnte, killen */
.visual-sitemap .vs-group-toggle::after,
.visual-sitemap .vs-node > .vs-toggle::after{ content:none !important; display:none !important; border:0 !important;
  background:none !important; -webkit-mask:none !important; mask:none !important; }

/* Unser Pfeil */
.visual-sitemap .vs-group-toggle::before,
.visual-sitemap .vs-node > .vs-toggle::before{
  all:unset;
  content:'▶'; display:inline-block; line-height:1;
  font-size:var(--vs-icon-glyph-size); color:var(--vs-icon-glyph-color);
}

.visual-sitemap .vs-group-toggle:hover::before,
.visual-sitemap .vs-node > .vs-toggle:hover::before{ color:var(--vs-icon-glyph-hover); }

/* Offen = ▾ */
.visual-sitemap .vs-node:not(.collapsed) > .vs-toggle::before{ content:'▼'; }

/* ========= Sichtbarkeit NUR über data-open steuern (robust) ======== */
/* Standard: alles zu */
.visual-sitemap .vs-group > .vs-tree{ display:none !important; }
/* Auf: nur wenn data-open="1" (Klassen anderer Skripte sind egal) */
.visual-sitemap .vs-group[data-open="1"] > .vs-tree{ display:block !important; }

/* Hover: Wenn offen, färbe die DIREKTEN Kinderzeilen mit (wie gewünscht) */
.visual-sitemap .vs-group[data-open="1"] .vs-group-header:hover + .vs-tree > .vs-node{
  background:var(--vs-row-hover-bg);
}

/* Einzelzeile: bewusst dunkler und mit !important, damit sie die Gruppen-Markierung übersteuert */
.visual-sitemap .vs-tree .vs-node:hover{
  background: var(--vs-row-hover-bg-strong) !important;
}

/* Zeilenabstand der 1. Ebene – nur normale Gruppen (nicht virtuell) */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > .vs-node{
  margin-top: var(--vs-root-node-gap) !important;
  margin-bottom: var(--vs-root-node-gap) !important;
}

/* Normale Gruppen: Header-Pfeil minimal nach unten schieben */
.visual-sitemap .vs-group:not(.vs-group-virtual) .vs-group-toggle{
  transform: translateY(var(--vs-toggle-nudge-y-normal));
}

/* (Optional) auch die Toggle-Icons der normalen Unterknoten leicht „nudgen“ */
.visual-sitemap .vs-group:not(.vs-group-virtual) .vs-node > .vs-toggle{
  transform: translateY(var(--vs-toggle-nudge-y-normal));
}
.visual-sitemap .vs-toggle-spacer{
  display:inline-block;
  width: 1.35em;   /* wie dein Toggle */
  height: 1.35em;
}

/* Normal: kleinere Toggle-Fläche = flachere Zeile */
.visual-sitemap .vs-group:not(.vs-group-virtual) .vs-node > .vs-toggle{
  width: var(--vs-toggle-em-normal);
  height: var(--vs-toggle-em-normal);
}

/* Normal: Links mit niedrigerer Zeilenhöhe */
.visual-sitemap .vs-group:not(.vs-group-virtual) .vs-link{
  line-height: var(--vs-normal-row-line);
}

/* =========================
   VIRTUELLER ORDNER – ABSTÄNDE/INDENTS STEUERN
   -> Werte hier anpassen, restliche Regeln lassen wir in Ruhe.
   ========================= */

/* 2) Anwendung – normale Gruppen lassen wir wie sie sind */
/*.visual-sitemap .vs-group{
  padding: var(--vs-group-pad-t) .5rem var(--vs-group-pad-b);
  margin: var(--vs-group-mt) var(--vs-group-mr) var(--vs-group-mb) var(--vs-group-ml) !important;
}*/

.visual-sitemap .vs-group{
  border:var(--vs-border); border-radius:var(--vs-radius);
}

.visual-sitemap .vs-group{
  padding: var(--vs-group-pad-t) .5rem var(--vs-group-pad-b);
  margin:
    calc(var(--vs-group-mt) + var(--vs-gap-top, 0px))
    var(--vs-group-mr)
    calc(var(--vs-group-mb) + var(--vs-gap-bottom, 0px))
    var(--vs-group-ml) !important;
}



/*.visual-sitemap .vs-group-virtual{
  margin: var(--vs-virtual-group-mt) var(--vs-virtual-group-mr) var(--vs-virtual-group-mb) var(--vs-virtual-group-ml) !important;
}*/


.visual-sitemap .vs-group-virtual{
  margin:
    calc(var(--vs-virtual-group-mt) + var(--vs-gap-top, 0px))
    var(--vs-virtual-group-mr)
    calc(var(--vs-virtual-group-mb) + var(--vs-gap-bottom, 0px))
    var(--vs-virtual-group-ml) !important;
}

/* Kinderliste auf eigene Zeile + einrücken (steuert den sichtbaren Einzug) */
.visual-sitemap .vs-tree .vs-node > .vs-children{
  flex-basis: 100%;             /* WICHTIG: zwingt neue Zeile */
  margin-left: var(--vs-subindent) !important;
  padding-left: 0 !important;   /* wir steuern nur über margin */
}

/* Hauptordner (normale Gruppen, 1. Ebene) wirklich flach machen */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > li.vs-node{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: var(--vs-normal-row-line) !important;
}

/* Wichtig: Theme-Padding am Link killen + gleiche Zeilenhöhe wie Container */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > li.vs-node > a.vs-link{
  line-height: var(--vs-normal-row-line) !important; /* nutzt deine 22px */
  display: inline-block;
}

/*
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > li.vs-node > a.vs-link{
  /*padding-top: 0 !important;/
  padding-bottom: 0 !important;
  /*line-height: inherit !important;*/   /* statt: line-height: line-height: 1 !important; /
  line-height: 1 !important;
  display: inline-block; /* stabilisiert die Zeilenhöhe /
}
*/

/* Toggle auf der 1. Ebene kleiner + ohne „eigene“ Line-Box */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > li.vs-node > .vs-toggle{
  width: var(--vs-toggle-em-normal) !important;
  height: var(--vs-toggle-em-normal) !important;
  line-height: var(--vs-normal-row-line) !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: var(--vs-toggle-mr) !important;
  /*margin: 0 4px 0 0 !important;*/
}

/* optional, falls du die virtuelle Gruppe separat verstellt hattest */
/* 1) Header → Baum (nur virtuell) */
/* bisher bei dir: margin-left: var(--vs-subindent) … */
.visual-sitemap .vs-group-virtual > .vs-tree{
  margin-top: var(--vs-margin-top-gap) !important;
  margin-left: var(--vs-virtual-tree-ml) !important;
  padding-left: var(--vs-virtual-tree-pl) !important;
  margin-bottom: var(--vs-margin-bottom-gap) !important;
}

/* 3) Zeilenabstand in tieferen Ebenen (nur virtuell) */
.visual-sitemap .vs-group-virtual .vs-children > .vs-node{
  margin-top: var(--vs-virtual-child-gap) !important;
  margin-bottom: var(--vs-virtual-child-gap) !important;
}

/* ============================
   Virtueller Ordner – Extra-Abstand NACH dem letzten Unterordner
   ============================ */

.visual-sitemap{
  /* Wie viel EXTRA-Gap unter dem letzten Unterordner sichtbar sein soll */
  --vs-virtual-tail-gap-inside: 0px;   /* innen, unter der letzten Zeile */
  --vs-virtual-tail-gap-outside: 0px;  /* außen, unter der ganzen Gruppe */
}

/* 1) Innen: mehr Luft unter der letzten Zeile (nur wenn Gruppe offen) */
.visual-sitemap .vs-group-virtual[data-open="1"] > .vs-tree > .vs-node:last-child{
  margin-bottom: var(--vs-virtual-tail-gap-inside) !important;
}

/* 2) Außen: zusätzlicher Abstand zur NÄCHSTEN Gruppe/Liste (additiv zu deinem -12px) */
.visual-sitemap .vs-group-virtual[data-open="1"]{
  margin-bottom: calc(var(--vs-virtual-group-mb) + var(--vs-virtual-tail-gap-outside)) !important;
}

.vs-group-virtual[data-open="1"] + .vs-group,
.vs-group-virtual[data-open="1"] + ul.vs-tree{ margin-top: var(--vs-virtual-gap-next) !important; }

/* 3) Außen: Abstand zur NÄCHSTEN Gruppe/Liste explizit steuern */
.visual-sitemap .vs-group-virtual[data-open="1"] + .vs-group{
  margin-top: var(--vs-virtual-gap-next) !important;
}
.visual-sitemap .vs-group-virtual[data-open="1"] + ul.vs-tree{
  margin-top: var(--vs-virtual-gap-next) !important;
}
/* 2) Zeilenabstand in der ersten Ebene (nur virtuell) /
.visual-sitemap .vs-group-virtual > .vs-tree > .vs-node{
  margin-top: var(--vs-virtual-node-gap) !important;
  margin-bottom: var(--vs-virtual-node-gap) !important;
}
*/

/* ===========================================
   Animierte Chevron-Pfeile für GRUPPEN (auch virtuell)
   – kein Zeichenwechsel mehr, sondern Rotation
   =========================================== */

/* geschlossen */
.visual-sitemap .vs-group-toggle::before{
  content: '▶';                 /* immer ▸, nie ▾ */
  display: inline-block;
  font-size: var(--vs-icon-glyph-size);
  line-height: 1;
  color: var(--vs-icon-glyph-color);
  transform: rotate(0deg);
  transition: transform .18s ease, color .15s ease; /* Animation */
}

/* geöffnet */
.visual-sitemap .vs-group[data-open="1"] > .vs-group-header .vs-group-toggle::before{
  /* gleiches Zeichen, nur gedreht */
  content: '▼';
  /*transform: rotate(90deg);*/
}

/* optional: Hover-Farbe wie gehabt */
.visual-sitemap .vs-group-toggle:hover::before{
  color: var(--vs-icon-glyph-hover);
}

/* 1) Zeilen der offenen Gruppe markieren, egal ob Header ODER Unterbereich gehovered */
.visual-sitemap .vs-group[data-open="1"]:is(:hover, :has(.vs-tree :hover)) > .vs-tree > .vs-node{
  background: var(--vs-row-hover-bg) !important;
}

/* 2) DEN HEADER der offenen Gruppe ebenfalls markieren – gleiche Farbe wie Zeilen */
.visual-sitemap .vs-group[data-open="1"]:is(:hover, :has(.vs-tree :hover)) > .vs-group-header{
  background: var(--vs-row-hover-bg) !important;
}

/* 3) Für den „nur Header“-Hover weiterhin ok (gleiches Bild) */
.visual-sitemap .vs-group .vs-group-header:hover{
  background: var(--vs-row-hover-bg) !important;
}

/* ================================
   Markierungs-Startpunkt fein steuern
   – getrennt für normal & virtuell
   ================================ */

.visual-sitemap > .vs-tree > .vs-node{
  margin: var(--vs-ungrouped-root-gap) 0 !important;
}

/* 1. Ebene unter einer normalen Gruppe */
.visual-sitemap .vs-group > .vs-tree > .vs-node{
  margin-left: calc(-1 * (var(--vs-left-fill) + var(--vs-left-fine))) !important;
  padding-left: calc(var(--vs-left-fill) + var(--vs-left-fine)) !important;
}

/* tiefere Ebenen */
.visual-sitemap .vs-children > .vs-node{
  margin-left: calc(-1 * var(--vs-subindent-fill)) !important;
  padding-left: var(--vs-subindent-fill) !important;
}

/* ===== Virtuelle Gruppen ===== */
/* 1. Ebene unter einem virtuellen Ordner */
.visual-sitemap .vs-group-virtual > .vs-tree > .vs-node{
  margin-left: calc(-1 * (var(--vs-virtual-left-fill) + var(--vs-virtual-left-fine))) !important;
  padding-left: calc(var(--vs-virtual-left-fill) + var(--vs-virtual-left-fine)) !important;
}
/* tiefere Ebenen innerhalb virtueller Gruppen */
.visual-sitemap .vs-group-virtual .vs-children > .vs-node{
  margin-left: calc(-1 * var(--vs-virtual-subindent-fill)) !important;
  padding-left: var(--vs-virtual-subindent-fill) !important;
}

/* ================================
   Virtuelle Gruppen – Markierung bis zum Header-Start ausrichten
   (Level 1–4, wie bei dir maximal genutzt)
   ================================ */


/* 2) Level 1 (direkte Kinder unter dem virtuellen Ordner) /
.visual-sitemap .vs-group-virtual > .vs-tree > .vs-node{
  margin-left: calc(-1 * var(--vs-hl-base-virt)) !important;
  padding-left: var(--vs-hl-base-virt) !important;
}
/*

/* 3) Level 2 */
.visual-sitemap .vs-group-virtual > .vs-tree > .vs-node > .vs-children > .vs-node{
  margin-left: calc(-1 * (var(--vs-hl-base-virt) + var(--vs-subindent))) !important;
  padding-left: calc(var(--vs-hl-base-virt) + var(--vs-subindent)) !important;
}

/* 4) Level 3 */
.visual-sitemap .vs-group-virtual > .vs-tree > .vs-node > .vs-children > .vs-node
  > .vs-children > .vs-node{
  margin-left: calc(-1 * (var(--vs-hl-base-virt) + 2 * var(--vs-subindent))) !important;
  padding-left: calc(var(--vs-hl-base-virt) + 2 * var(--vs-subindent)) !important;
}

/* 5) Level 4 */
.visual-sitemap .vs-group-virtual > .vs-tree > .vs-node > .vs-children > .vs-node
  > .vs-children > .vs-node > .vs-children > .vs-node{
  margin-left: calc(-1 * (var(--vs-hl-base-virt) + 3 * var(--vs-subindent))) !important;
  padding-left: calc(var(--vs-hl-base-virt) + 3 * var(--vs-subindent)) !important;
}


/* 1) Wenn in einer offenen VIRTUELLEN Gruppe irgendwo in den Unterordnern gehovered wird:
      – Header + alle Zeilen der Gruppe dunkler färben */
.visual-sitemap .vs-group-virtual[data-open="1"]:has(.vs-tree :hover) > .vs-group-header,
.visual-sitemap .vs-group-virtual[data-open="1"]:has(.vs-tree :hover) > .vs-tree > .vs-node,
.visual-sitemap .vs-group-virtual[data-open="1"]:has(.vs-tree :hover) > .vs-tree .vs-node{
  background: var(--vs-group-deep-hover-bg) !important;
}

/* 2) WICHTIG: auch die ELTERN-ZEILE eines gehoverten Unterordners dunkler färben
      (markiert die gesamte Kette nach oben) */
.visual-sitemap .vs-group-virtual[data-open="1"] .vs-node:hover,
.visual-sitemap .vs-group-virtual[data-open="1"] .vs-node:has(:hover){
  background: var(--vs-group-deep-hover-bg) !important;
}


/* Link-Stil für Gruppen-Titel (virtuell & normal, nur wenn verlinkt) */
.visual-sitemap .vs-group-link{
  color: var(--vs-link-color);
  text-decoration: none;
}
.visual-sitemap .vs-group-link:hover{
  color: var(--vs-link-hover-color);
  text-decoration: none;
}

/* Root-Seiten, die als "Gruppenblock" gerendert werden, unauffällig stylen */
.visual-sitemap .vs-group-root{
  border: none !important;
  margin: var(--vs-group-mt) var(--vs-group-mr) var(--vs-group-mb) var(--vs-group-ml) !important;
  /* optional: linkes Innen-Padding auch variabel machen */
  padding: var(--vs-group-pad-t) .5rem var(--vs-group-pad-b) var(--vs-group-pad-l, .5rem) !important;
}

.visual-sitemap .vs-group-root .vs-group-header{
  font-weight: var(--vs-group-title-weight);
}

/* Nur NORMALE Gruppen mit Baum einrücken */
.visual-sitemap .vs-group:not(.vs-group-virtual):has(> .vs-tree){
  margin-left: var(--vs-group-ml-normal) !important;
}

/* Virtuelle Gruppen behalten ihren eigenen Einzug (hast du bereits) */
.visual-sitemap .vs-group-virtual{
  margin-left: var(--vs-virtual-group-ml) !important;
}

/* Root-Gruppen NICHT einrücken */
.visual-sitemap .vs-group-root{
  margin-left: 0 !important;
}

/* einmal anwenden */
.visual-sitemap{
  margin-left: var(--vs-global-shift-x);
}


/* Nudge ausschalten – normaler Gruppen-Header & -Zeilen */
.visual-sitemap .vs-group:not(.vs-group-virtual) .vs-group-toggle,
.visual-sitemap .vs-group:not(.vs-group-virtual) .vs-node > .vs-toggle{
  transform: none !important;
}

/* Zeile der 1. Ebene: Inhalt wirklich mittig */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > .vs-node{
  align-items: center !important;
}

/* Toggle-Box sicher quadratisch + Inhalt mittig */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > .vs-node > .vs-toggle{
  width: var(--vs-toggle-em-normal) !important;
  height: var(--vs-toggle-em-normal) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Feintrimm (optional, wenn das Glyph 1–2px „kippelt“) */
.visual-sitemap{
  --vs-toggle-fine-y: 0px; /* bei Bedarf auf -1px / 1px stellen */
}
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree > .vs-node > .vs-toggle::before{
  position: relative;
  top: var(--vs-toggle-fine-y);
}


/* Nur normale Gruppen: UL-Einzug (Pfeil-Start) */
.visual-sitemap .vs-group:not(.vs-group-virtual) > .vs-tree{
  margin-left: var(--vs-tree-ml) !important;
  padding-left: var(--vs-tree-pl) !important;
}


/* Allgemein hilfreich auf kleinen Screens */
.visual-sitemap{
  overflow-x:auto;                /* falls sehr tiefe Ebenen */
  -webkit-overflow-scrolling:touch;
}
.visual-sitemap .vs-link{
  overflow-wrap:anywhere;         /* lange Titel umbrechen */
}

/* ≤ 1024px (Tablet quer) – leicht kompakter */
@media (max-width:1024px){
  .visual-sitemap{
    --vs-font-size: 17px;
    --vs-normal-row-line: 20px;
    --vs-icon-glyph-size: 14px;

    --vs-global-shift-x: -40px;   /* Anpassung VAH */
    --vs-tree-ml: 80px;          /* Start 1. Ebene normal */
    --vs-subindent: 48px;        /* Schrittweite je Ebene */
    --vs-virtual-group-ml: 24px; /* Box-Einzug virtuell */
    --vs-group-ml-normal: 22px;  /* Box-Einzug normal  Anpassung VAH */
    --vs-group-pad-l: 10px;

    --vs-gap: 6px;
    --vs-header-gap: 6px;

    --vs-toggle-em-normal: 20px;
    --vs-toggle-em-virt: 20px;

    /* Feintrimm Markierungsflanke, optional */
    --vs-left-fine: 6px;
  }
}

/* ≤ 768px (Tablet hoch / kleines Phone quer) – deutlich enger */
@media (max-width:768px){
  .visual-sitemap{
    --vs-font-size: 16px;
    --vs-normal-row-line: 20px;

    --vs-global-shift-x: -35px;    /* nicht mehr nach links schieben Anpassung VAH */
    --vs-tree-ml: 64px;
    --vs-subindent: 40px;
    --vs-virtual-group-ml: 24px;    /* Anpassung VAH */
    --vs-group-ml-normal: 22px;      /* Anpassung VAH */
    --vs-group-pad-l: 10px;

    --vs-gap: 6px;
    --vs-header-gap: 6px;

    /* Touch-Ziele etwas größer */
    --vs-toggle-em-normal: 24px;
    --vs-toggle-em-virt: 24px;

    --vs-left-fine: 4px;
  }
}

/* ≤ 480px (Phone) – sehr kompakt, aber gut bedienbar */
@media (max-width:480px){
  .visual-sitemap{
    --vs-font-size: 15px;
    --vs-normal-row-line: 19px;

    --vs-global-shift-x: -30px;     /* nicht mehr nach links schieben Anpassung VAH */
    --vs-tree-ml: 52px;
    --vs-subindent: 32px;
    --vs-virtual-group-ml: 22px;     /* Anpassung VAH */
    --vs-group-ml-normal: 20px;      /* Anpassung VAH */
    --vs-group-pad-l: 8px;

    --vs-gap: 5px;
    --vs-header-gap: 5px;

    --vs-toggle-em-normal: 26px; /* große Touch-Fläche */
    --vs-toggle-em-virt: 26px;

    --vs-left-fine: 2px;
  }
}

.visual-sitemap .vs-tree .vs-node{
  padding-top: calc(var(--vs-row-bleed-fix)/2);
  padding-bottom: calc(var(--vs-row-bleed-fix)/2);
}

/* Containerhöeh vergrössern */
.visual-sitemap{
  padding-block: 3px; /* oben & unten je 3px Luft */
}

.visual-sitemap .vs-group-virtual .vs-group-header a.vs-group-link[target="_blank"]{
  position: relative;
  padding-right: 1.1em; /* Platz fürs Icon */
}
.visual-sitemap .vs-group-virtual .vs-group-header a.vs-group-link[target="_blank"]::after{
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-55%);
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23000" d="M10.5 1h4v4h-2V4.207L8.354 8.354l-1.414-1.414L11.086 2.793H10.5V1zM3 3h5v2H5v6h6V8h2v7H3z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23000" d="M10.5 1h4v4h-2V4.207L8.354 8.354l-1.414-1.414L11.086 2.793H10.5V1zM3 3h5v2H5v6h6V8h2v7H3z"/></svg>') no-repeat center / contain;
  opacity: .75;
}
.visual-sitemap .vs-group-virtual .vs-group-header a.vs-group-link[target="_blank"]:hover::after{
  opacity: 1;
}

/* Falls .visual-sitemap der scrollende Container ist */
.visual-sitemap {
  /* sicherstellen, dass überhaupt gescrollt werden kann */
  overflow: auto;           /* oder overflow-y: auto; */
  max-height: 70vh;         /* nur Beispiel, anpassen oder entfernen */
  
  /* Scrollbar verstecken (cross-browser) */
  -ms-overflow-style: none; /* IE/Edge Legacy */
  scrollbar-width: none;    /* Firefox */
}
.visual-sitemap::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* macht NUR markierte virtuelle Ordner fett */
.visual-sitemap .vs-group.vs-group-bold{
  --vs-group-title-weight: 600; /* oder 600, wenn dir das genügt */
}

/* falls dein Titel-Link die Variable ignoriert, zusätzlich: */
.visual-sitemap .vs-group.vs-group-bold .vs-group-title{
  font-weight: 600 !important;
}

/* Virtuelle Ordner ohne Unterordner – Header wirklich bündig links */
.visual-sitemap .vs-group-virtual.vs-no-kids .vs-group-header{
  margin-left: 6px !important;
}

/* Verhindert Theme-/Plugin-Umsortierung (Flex/Grid/Order) */
.visual-sitemap { display: block !important; }
.visual-sitemap .vs-group { display: block !important; order: 0 !important; flex: 0 0 auto !important; }


/* ========== Akzentfarben pro virtuelle Gruppe ========== */
/* Übergabewerte kommen als CSS-Variablen vom Wrapper-DIV (inline style) */

.visual-sitemap .vs-group-virtual {
  /* Defaults: nichts gesetzt */
  --vs-accent: initial;        /* z.B. #2563eb */
  --vs-accent-bg: initial;     /* z.B. #eef2ff */
  --vs-accent-text: initial;   /* z.B. #111 */
}

/* Titel & Pfeil in Akzentfarbe */
.visual-sitemap .vs-group-virtual[style*="--vs-accent:"] .vs-group-header .vs-group-title,
.visual-sitemap .vs-group-virtual[style*="--vs-accent:"] .vs-group-header .vs-group-toggle::before {
  color: var(--vs-accent) !important;
}

/* Optional: Header-Hintergrund färben (Hover-Regeln können es ggf. überlagern) */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg:"] .vs-group-header {
  background: var(--vs-accent-bg);
}

/* Explizite Textfarbe (falls du Titel unabhängig vom Icon einfärben willst) */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-text:"] .vs-group-header .vs-group-title {
  color: var(--vs-accent-text) !important;
}



/* === 1) Virtuelle Ordner: KEIN Hintergrund, wenn bg rein weiß ist === */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg:#fff"] > .vs-group-header,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg: #fff"] > .vs-group-header,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg:#ffffff"] > .vs-group-header,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg: #ffffff"] > .vs-group-header{
  background: transparent !important;  /* nur Hintergrund neutralisieren */
}

/* auch beim Hover keinen Hintergrund malen */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg:#fff"] > .vs-group-header:hover,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg:#ffffff"] > .vs-group-header:hover{
  background: transparent !important;
}

/* === 2) Toggle sicher klickbar lassen (falls etwas drüber liegt) === */
.visual-sitemap .vs-group-toggle,
.visual-sitemap .vs-node > .vs-toggle{
  position: relative;
  z-index: 2;                /* über evt. Deko-Layern */
  pointer-events: auto !important;
}

/* === 3) Hover-Schriftfarbe für farbige virtuelle Ordner (mit --vs-accent) === */
/* Nutzt deine globale --vs-link-hover-color (bei dir #ffffff) */
.visual-sitemap .vs-group-virtual[style*="--vs-accent"] > .vs-group-header:hover .vs-group-title,
.visual-sitemap .vs-group-virtual[style*="--vs-accent"] > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group-virtual[style*="--vs-accent"] > .vs-group-header:hover .vs-group-toggle::before{
  color: var(--vs-link-hover-color) !important;
}

/* Optional: Wenn du pro Ordner eine eigene Hover-Farbe setzen willst,
   gib inline --vs-accent-hover: <farbe>; dann greift diese: */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-hover"] > .vs-group-header:hover .vs-group-title,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-hover"] > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-hover"] > .vs-group-header:hover .vs-group-toggle::before{
  color: var(--vs-accent-hover) !important;
}

/* =========================================
   VIRTUELLE ORDNER – kompakter Farblogik-Patch
   Liest inline-Variablen (|color:…| |bg:…| |hover:…|)
   und setzt Basis- & Hoverfarbe pro Ordner.
   ========================================= */

/* 0) Wenn ein bg gesetzt ist, keine Rahmen/Hintergründe zeigen */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg"],
.visual-sitemap .vs-group-virtual[style*="--vs-bg"],
.visual-sitemap .vs-group-virtual[style*="--bg"]{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg"] > .vs-group-header,
.visual-sitemap .vs-group-virtual[style*="--vs-bg"] > .vs-group-header,
.visual-sitemap .vs-group-virtual[style*="--bg"] > .vs-group-header{
  border: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Header-Default-Hover von oben explizit aushebeln, falls bg vorhanden */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg"] > .vs-group-header:hover,
.visual-sitemap .vs-group-virtual[style*="--vs-bg"] > .vs-group-header:hover,
.visual-sitemap .vs-group-virtual[style*="--bg"] > .vs-group-header:hover{
  background: transparent !important;
}

/* 1) Variablen vereinheitlichen (wir fangen mehrere Namensvarianten ab) */
.visual-sitemap .vs-group-virtual{
  /* _bg: bevorzugt --vs-accent-bg, sonst --vs-bg, sonst --bg */
  --_vs-bg:    var(--vs-accent-bg, var(--vs-bg, var(--bg, initial)));
  /* _color: bevorzugt --vs-accent-text, sonst --color, sonst --vs-accent, sonst globaler Link-Farbwert */
  --_vs-color: var(--vs-accent-text, var(--color, var(--vs-accent, var(--vs-link-color))));
  /* _hover: bevorzugt --vs-accent-hover, sonst --hover, sonst _bg, sonst _color, sonst globaler Hover */
  --_vs-hover: var(--vs-accent-hover, var(--hover, var(--_vs-bg, var(--_vs-color, var(--vs-link-hover-color)))));
}

/* 2) Basisfarbe anwenden (Titel, Link, Pfeil) */
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-title,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-link,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-toggle::before{
  color: var(--_vs-color) !important;
}

/* 3) Hoverfarbe pro Ordner anwenden */
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-title,
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-toggle::before{
  color: var(--_vs-hover) !important;
}

/* 4) Pfeile klickbar halten (ohne Pointer-Blockaden) */
.visual-sitemap .vs-group-virtual .vs-group-header{
  position: relative;
  display: flex;
  align-items: center;
}
.visual-sitemap .vs-group-virtual .vs-group-toggle{
  position: relative; z-index: 3; flex: 0 0 auto; cursor: pointer;
}
.visual-sitemap .vs-group-virtual .vs-group-header a.vs-group-link{
  position: relative; z-index: 2; display: inline-flex; align-items: center;
  max-width: calc(100% - 2.5em);
}
.visual-sitemap .vs-group-virtual .vs-group-header a.vs-group-link::after{
  pointer-events: none !important;
}

/* === VAH Visual Sitemap – per Ordner Farben & Hover === */
.visual-sitemap .vs-group-virtual{ 
  --_vs-base:  var(--vs-accent-text, var(--vs-accent, var(--vs-link-color)));
  --_vs-hover: var(--vs-accent-hover, var(--vs-accent-bg, var(--vs-accent, var(--vs-link-hover-color))));
}
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-title,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-link,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-toggle::before{
  color: var(--_vs-base) !important;
}
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-title,
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-toggle::before{
  color: var(--_vs-hover) !important;
}
/* bei gesetztem bg nie Rahmen/Hintergrund */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg"] > .vs-group-header{
  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;
}

/* Ableitung direkt auf dem Header (robust gegen Reihenfolge) */
.visual-sitemap .vs-group-virtual > .vs-group-header{
  --_vs-base:  var(--vs-accent-text, var(--vs-accent, var(--vs-link-color)));
  --_vs-hover: var(--vs-accent-hover, var(--vs-accent-bg, var(--vs-accent, var(--vs-link-hover-color))));
}

/* ===== Per-Ordner Hover durchreichen + explizit setzen (GANZ ANS ENDE!) ===== */
.visual-sitemap .vs-group-virtual > .vs-group-header{
  /* lokale Ableitung – bleibt wie gehabt */
  --_vs-base:  var(--vs-accent-text, var(--vs-accent, var(--vs-link-color)));
  --_vs-hover: var(--vs-accent-hover, var(--vs-accent-bg, var(--vs-accent, var(--vs-link-hover-color))));

  /* WICHTIG: globale Link-Hover-Variable im Header überschreiben */
  --vs-link-hover-color: var(--_vs-hover);
}

/* Basisfarbe für Titel/Link/Pfeil */
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-title,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-link,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-toggle::before{
  color: var(--_vs-base) !important;
}

/* Hover über HEADER oder direkt über dem LINK */
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-title,
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group-virtual > .vs-group-header:hover .vs-group-toggle::before,
.visual-sitemap .vs-group-virtual > .vs-group-header .vs-group-link:hover{
  color: var(--_vs-hover) !important;
}

/* =========================
   Global: Hover-Rahmen aus
   (ANS ENDE DER CSS-DATEI)
   ========================= */

/* 1) Gruppen-Header: keine Ränder/Outlines/Schatten bei Hover */
.visual-sitemap .vs-group > .vs-group-header:hover,
.visual-sitemap .vs-group > .vs-group-header:hover::before,
.visual-sitemap .vs-group > .vs-group-header:hover::after,
.visual-sitemap .vs-group > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group > .vs-group-header:hover .vs-group-link::after{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* Hintergrund darf bleiben (dein Header-Hover-Background).
     Wenn du auch den Header-Hintergrund global aus willst:
     background: transparent !important; */
}

/* 2) Normale Seitenlinks in der Baumliste: ebenfalls keinen Rahmen bei Hover */
.visual-sitemap a.vs-link:hover{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 3) (optional) Buttons/Toggles: sicher kein Hover-Rahmen */
.visual-sitemap .vs-group-toggle:hover,
.visual-sitemap .vs-node > .vs-toggle:hover{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === Normale Gruppen: gleiches Deep-Hover wie bei virtuellen === */
.visual-sitemap .vs-group:not(.vs-group-virtual)[data-open="1"]:has(.vs-tree :hover) > .vs-group-header,
.visual-sitemap .vs-group:not(.vs-group-virtual)[data-open="1"]:has(.vs-tree :hover) > .vs-tree > .vs-node,
.visual-sitemap .vs-group:not(.vs-group-virtual)[data-open="1"]:has(.vs-tree :hover) > .vs-tree .vs-node{
  background: var(--vs-group-deep-hover-bg) !important;
}

/* Elternkette mitfärben (dunkler je tiefer, durch Überlagerung) */
.visual-sitemap .vs-group:not(.vs-group-virtual)[data-open="1"] .vs-node:hover,
.visual-sitemap .vs-group:not(.vs-group-virtual)[data-open="1"] .vs-node:has(:hover){
  background: var(--vs-group-deep-hover-bg) !important;
}

/* Fix: externes Icon bei Hover NICHT ausblenden, sondern in Hoverfarbe zeigen */
.visual-sitemap .vs-group-virtual > .vs-group-header:hover a.vs-group-link[target="_blank"]::after,
.visual-sitemap .vs-group-virtual .vs-group-header a.vs-group-link[target="_blank"]:hover::after{
  background: currentColor !important; /* übernimmt die jeweilige Text-/Hoverfarbe */
  opacity: 1 !important;
}

/* Optional: auch für normale Gruppen aktivieren */
.visual-sitemap .vs-group > .vs-group-header:hover a.vs-group-link[target="_blank"]::after,
.visual-sitemap .vs-group .vs-group-header a.vs-group-link[target="_blank"]:hover::after{
  background: currentColor !important;
  opacity: 1 !important;
}

.visual-sitemap { font-size: var(--vs-font-size); color: var(--vs-color); }
.visual-sitemap a { color: var(--vs-link-color); }
.visual-sitemap a:hover { color: var(--vs-link-hover-color); }
.visual-sitemap .vs-toggle { color: var(--vs-icon-glyph-color); }
.visual-sitemap .vs-toggle:hover { color: var(--vs-icon-glyph-hover); }
.visual-sitemap .vs-node:hover { background: var(--vs-row-hover-bg); }
.visual-sitemap .vs-group-header:hover { background: var(--vs-group-header-hover-bg); }

/* --- Farb-Fallbacks: Erzwinge pro virtuelle Gruppe die Farben --- */
.visual-sitemap .vs-group-virtual[style*="--vs-accent:"] > .vs-group-header .vs-group-title,
.visual-sitemap .vs-group-virtual[style*="--vs-accent:"] > .vs-group-header .vs-group-link,
.visual-sitemap .vs-group-virtual[style*="--vs-accent:"] > .vs-group-header .vs-group-toggle::before{
  color: var(--vs-accent) !important;
}

.visual-sitemap .vs-group-virtual[style*="--vs-accent-bg:"] > .vs-group-header{
  background: var(--vs-accent-bg) !important;
}

/* Wenn |text:...| gesetzt wurde, hat das Vorrang vor |color:...| */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-text:"] > .vs-group-header .vs-group-title,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-text:"] > .vs-group-header .vs-group-link{
  color: var(--vs-accent-text) !important;
}

/* Optional: eigene Hoverfarbe über |hover:...| */
.visual-sitemap .vs-group-virtual[style*="--vs-accent-hover:"] > .vs-group-header:hover .vs-group-title,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-hover:"] > .vs-group-header:hover .vs-group-link,
.visual-sitemap .vs-group-virtual[style*="--vs-accent-hover:"] > .vs-group-header:hover .vs-group-toggle::before{
  color: var(--vs-accent-hover) !important;
}