/* ===== Unified Menu (eine Logik für alle Viewports) ===== */
/* Resets NUR im Menü-Bereich */
#mainMenu ul, #mainMenu li{ margin:0; padding:0; }
#mainMenu ul{ list-style:none; }

#mainMenu .menu-teaser { display:none; }
:root{ --menu-offset-top: 0px; }

/* Overlay + Panel – immer unterhalb des Headers, volle Breite */
#mainMenu .mm-overlay{ position:fixed; left:0; right:0; top:var(--menu-offset-top); height:calc(100vh - var(--menu-offset-top)); background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.25s; z-index:9998; display:block; cursor:pointer; }
#mainMenu .mm-panel{ position:fixed; left:0; right:0; top:var(--menu-offset-top); height:calc(100vh - var(--menu-offset-top)); background:transparent; z-index:9999; display:none; }
html.is-menu-open #mainMenu .mm-overlay{ opacity:1; visibility:visible; background:#FFF}
html.is-menu-open #mainMenu .mm-panel{ display:block; background:#FFF }

/* Grid-Container für dynamische Spalten (1–4 je nach Platz) */
#heniMega{ display:none; }
html.is-menu-open #heniMega{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(320px,1fr); gap:16px; align-items:start; height:100%; width:100%; }
html.is-menu-open body{
	overflow:hidden;
}
/* Spalten-Inhalt */
.mega-col{ background:#fff; border:1px solid var(--heni-border); height:100%; overflow:auto; }
.mega-col ul{ margin:0; padding:0; list-style:none; }
.mega-col li{ border-bottom:1px solid var(--heni-border); }
.mega-col a{ display:block; padding:.4rem .5rem; color:var(--heni-text); text-decoration:none; }
.mega-col a:hover{ background:var(--heni-hover); color:var(--heni-blue); }
.mega-col .row{ display:flex; align-items:center; }
.mega-col .name{ flex:1 1 auto; }
.mega-col .go{ width:44px; display:flex; align-items:center; justify-content:center; }
.mega-col .col-heading{ font-weight:700; padding:.85rem 1rem; border-bottom:1px solid var(--heni-border); }
.mega-col .col-back a{ font-weight:600; }
.mega-col .col-back a:before{ content:"\104"; font-family:'FontAwesome'; margin-right:.5rem; }

/* Aktiver Eintrag links hervorheben (dein Stil) */
.heni-active-root > a.link,
.heni-active-root > a.UInavLink{ background:#e9eefb; }

/* Dünne Scrollbars */
#heniMega, #heniMega .mega-col{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent; }
#heniMega::-webkit-scrollbar, #heniMega .mega-col::-webkit-scrollbar{ width:8px; }
#heniMega::-webkit-scrollbar-thumb, #heniMega .mega-col::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); border-radius:8px; }
#heniMega::-webkit-scrollbar-track, #heniMega .mega-col::-webkit-scrollbar-track{ background:transparent; }

/* Kategorie-Baum (mobile Styling wie v5) */
.category-tree{ max-height:70vh; overflow:auto; border:1px solid var(--heni-border); text-align:left; }
.mm-panel li{ list-style:none }
.category-tree > li{ display:flex; align-items:stretch; border-bottom:1px solid var(--heni-border); }
.category-tree > li > a.link{ flex:1 1 auto; display:block; padding:.9rem 1rem; color:var(--heni-text); text-decoration:none; }
.category-tree > li > a.UInavLink{ flex:0 0 44px; display:flex; align-items:center; justify-content:center; color:var(--heni-bg-blue); text-decoration:none; }
.category-tree > li:hover{ background:var(--heni-hover); }
.badge{ display:inline-block; font-size:.72em; background:var(--heni-blue); color:#fff; line-height:1; padding:.2em .45em; border-radius:.4em; margin-left:.4rem; }
/* Standard: Sub-Listen verstecken – wird mobil per MQ überschrieben */
.category-tree ul.sub{ display:none; }
.category-tree li.active > ul.sub{ display:block; }
.category-tree ul.sub > li > a{ display:block; padding:.85rem 1rem; color:var(--heni-text); text-decoration:none; }
.category-tree ul.sub > li > a:hover{ color:var(--heni-blue); background:var(--heni-hover); }

/* ==== MOBILE 1:1 (max-width: 799px) – original Verhalten (unverändert) ==== */
@media (max-width:799px){
  .mainMenuMobile{ display:block; padding:0; position:relative; }
  .mainMenuMobile li{ width:100%; display:flex; padding:0; }
  .mainMenuMobile li.spacer{ margin-top:10px; margin-bottom:10px; background:#F4F4F4; height:5px; }
  .mainMenuMobile li a.UInavLink{ width:50px !important; text-align:center; border-left:1px solid #EEE !important; }
  .mainMenuMobile li.dash{ display:none; }
  .mainMenuMobile li a{ width:100%; border:0 !important; line-height:30px; background:#F4F4F4; margin:0 0 2px 0; padding:.5em; transition:background .2s ease; }
  .mainMenuMobile li a:hover{ background:#CCC; }
  .mainMenuMobile .sub{ visibility:hidden; height:auto; min-height:100%; position:absolute; right:-100%; top:0; transition:all .3s ease 0s; width:100%; z-index:10001; background:#FFF; padding:0; margin:0; display:block; }
  .mainMenuMobile li.active > .sub{ visibility:visible; right:0; }
  .mainMenuMobile li.back a{ flex:1 1 auto; border-bottom:1px solid rgba(0,0,0,.5); width:100%; line-height:30px; background:#CCC; margin:0 0 2px 0; padding:.5em; transition:background .2s ease; }
  .mainMenuMobile li.back a strong{ color:#555; }
  .mainMenuMobile li.back a:before{ font-family:'FontAwesome'; font-size:24px; width:30px; text-align:center; color:#555; content:"\f104"; display:inline-block; }
  .category-tree{ border:0 !important; }
  #mainMenu, #mainMenuPanel, #mainMenuPanel .heni-mega, #mainMenuPanel .heni-mega__left, #mainMenuPanel .category-tree{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
}

/* =============================================== */
/* ===== DESKTOP (>=800px): 4 Ebenen, Spalten  ==== */
/* =============================================== */
@media (min-width:800px){
  :root{ --menu-offset-top: 0px; }

  #mainMenu .mm-header, #mainMenu .mm-footer{ display:none; }

  /* Overlay/Panels unterhalb des Headers; Header ist relative */
  #mainMenu .mm-overlay{ top: var(--menu-offset-top); height: calc(100vh - var(--menu-offset-top)); }
  #mainMenu .mm-panel{ left:0; right:auto; width:auto; top: var(--menu-offset-top); height: calc(100vh - var(--menu-offset-top)); background:transparent; }

  /* Grid-Container für Spalten */
  #heniMega{ display:none; }
  html.is-menu-open #heniMega{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(450px, 1fr); gap:16px; align-items:start; height:100%; width:max-content; }

  /* Spalten */
  .mega-col{ background:#fff; border:1px solid var(--heni-border); height:100%; overflow:auto; }
  .mega-col ul{ margin:0; padding:0; list-style:none; }
  .mega-col li{ border-bottom:1px solid var(--heni-border); }
  .mega-col a{ display:block; padding:.4rem .5rem; color:var(--heni-text); text-decoration:none; }
  .mega-col a:hover{ background:var(--heni-hover); color:var(--heni-blue); }
  .mega-col .row{ display:flex; align-items:center; }
  .mega-col .name{ flex:1 1 auto; }
  .mega-col .go{ width:44px; display:flex; align-items:center; justify-content:center; }

  /* Headings + Back */
  .mega-col .col-heading{ font-weight:700; padding:.85rem 1rem; border-bottom:1px solid var(--heni-border); }
  .mega-col .col-back a{ font-weight:600; }
  .mega-col .col-back a:before{ content:"\f104"; font-family:'FontAwesome'; margin-right:.5rem; }

  /* Aktiver Eintrag links hervorheben (dein Stil) */
  .heni-active-root > a.link,
  .heni-active-root > a.UInavLink{ background:#e9eefb; }
}

/* Ultra-dünne Scrollbars (Menu only) */
/* Firefox (nur auto/thin/none möglich – thin ist Minimum) */
#heniMega, #heniMega .mega-col,
#mainMenu .category-tree,
#mainMenu .mainMenuMobile .sub{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent; }

/* Chromium/WebKit */
#heniMega::-webkit-scrollbar,
#heniMega .mega-col::-webkit-scrollbar,
#mainMenu .category-tree::-webkit-scrollbar,
#mainMenu .mainMenuMobile .sub::-webkit-scrollbar{ width:4px; height:4px; }
#heniMega::-webkit-scrollbar-thumb,
#heniMega .mega-col::-webkit-scrollbar-thumb,
#mainMenu .category-tree::-webkit-scrollbar-thumb,
#mainMenu .mainMenuMobile .sub::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); border-radius:999px; }
#heniMega::-webkit-scrollbar-thumb:hover,
#heniMega .mega-col::-webkit-scrollbar-thumb:hover,
#mainMenu .category-tree::-webkit-scrollbar-thumb:hover,
#mainMenu .mainMenuMobile .sub::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.4); }
#heniMega::-webkit-scrollbar-track,
#heniMega .mega-col::-webkit-scrollbar-track,
#mainMenu .category-tree::-webkit-scrollbar-track,
#mainMenu .mainMenuMobile .sub::-webkit-scrollbar-track{ background:transparent; }

/* Besseres Scroll-Verhalten in verschachtelten Containern */
#heniMega, #heniMega .mega-col,
#mainMenu .category-tree,
#mainMenu .mainMenuMobile .sub{ overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }


html.is-menu-open #mainMenu{
  position:static !important;
  inset:auto !important;
  z-index:auto !important;
  display:block !important;
  pointer-events:none;               /* Container klicktransparent */
}

/* Nur Overlay & Panel sind klickbar und fixed unter dem Header */
#mainMenu .mm-overlay,
#mainMenu .mm-panel{
  pointer-events:auto;
  position:fixed;
  left:0; right:0;
  top:var(--menu-offset-top);
  height:calc(100vh - var(--menu-offset-top));
  z-index:9998; /* overlay */
}
#mainMenu .mm-panel{ z-index:9999; } /* panel über overlay */

.mega-col .row { padding: .45rem .6rem; transition: background-color .15s ease; }
.mega-col .row a { text-decoration: none; }

/* 6) Hover als Fläche */
.mega-col li > .row:hover { background: #e5e7eb; }

/* 3) Aktiver Pfad invertiert */
.mega-col li.is-active > .row { background: var(--heni-blue, #2753A8); }
.mega-col li.is-active > .row a { color: #fff; }

/* 4) Sicherheit: ul paddings nullen */
#mainMenu ul { padding: 0 !important; }

/* 5) (optional) Wenn du doch :before nutzen willst:
   Font Awesome 6 Free → solid = weight 900 */
.mega-col .col-back a:before {
  content: "\f104";           /* angle-left */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: .5rem;
}

/* Spaltenlayout (JS setzt nur .is-single / .is-multi) */
#heniMega.is-multi{
  --col-w: 450px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--col-w);
  width: max-content;
}
#heniMega.is-multi .mega-col{ min-width: var(--col-w); max-width: var(--col-w); }
#heniMega.is-single{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  width: 100%;
}

/* UL-Reset nur im Menü */
#mainMenu ul{ padding:0 !important; }

/* Zeilenstil (vorher inline) */
.mega-col .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .6rem;
  transition: background-color .15s ease;
}
.mega-col .row a{ text-decoration:none; }

/* Hover (Klavier-Effekt) */
.mega-col li > .row:hover{
  background:#e5e7eb; /* gern auf var(--heni-hover) ändern */
}

/* Aktiver Pfad (JS setzt .is-active auf <li>) */
.mega-col li.is-active > .row{ background:var(--heni-blue, #2753A8); }
.mega-col li.is-active > .row a{ color:#fff; }

/* Pfeil/Go-Spalte optional fixieren */
.mega-col .row .go{ display:flex; width:44px; min-width:44px; justify-content:center; align-items:center; }

/* Preview-Spalte (statt Inline-Styles) */
.mega-col--preview{ display:flex; }
.mega-col--preview .preview-box{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:8px;
}
.mega-col--preview .preview-img{
  max-width:100%; height:auto; width:auto;
  opacity:0; transition:opacity .2s ease;
}
.mega-col--preview .preview-img.is-loaded{ opacity:1; }

/* Back-Link: echtes Icon vorhanden, optional Pseudo-Unterstützung */
.mega-col .col-back a{ display:inline-flex; align-items:center; gap:.5rem; }