/* ════════════════════════════════════════════════════════════════════════════
   Hestiaro · Seitenleiste (Silas 04.11.2026) und Hestia-Zeichen
   ------------------------------------------------------------------------------
   Für Kollegen mit Maus am Laptop: Oberpunkte und Unterpunkte auf einen Blick getrennt, nur was gebraucht wird. Leicht
   gehalten (Silas 04.11.: „zu fett“, „vorher übersichtlicher“): normale Schrift, nur Aktives fett, keine Flächen hinter
   offenen Bereichen. Lädt nach theme.css, nur var(--h-…)/var(--k-…). Verhalten: nav2.js (leisteKern),
   Regeln: leiste_kern.js. Prüffall: test/menue.test.js.

   Symbolachse x = 32 px (Mitte der 64-px-Leiste): 8 px Rand + 15 px + halbes Symbol (18 px).
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  html.kern body.nav2{--nav2-x:248px}
  html.kern .nav2-panel{transition:width .16s cubic-bezier(.4,0,.2,1),box-shadow .16s ease}
  html.kern .nav2-fade{transition:opacity .1s ease}
  html.kern .nav2-side.exp .nav2-fade{transition:opacity .12s ease .02s}

  /* Oberpunkte: normale Schrift, Fett bleibt dem Aktiven vorbehalten */
  html.kern .nav2-item{font-size:14px;font-weight:400;color:var(--k-text)}
  html.kern .nav2-search{font-size:14px;color:var(--k-neben)}
  /* Passt die Liste nicht ganz (kleiner Bildschirm, langer Bereich), zeigt der weiche Rand unten, dass es weitergeht */
  html.kern .nav2-scroll{padding-bottom:16px;-webkit-mask:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}

  /* Wo bin ich: Fett, leichte Fläche, kurzer Strich im Akzent. Gilt auch für den zugeklappten aktiven Bereich. */
  html.kern .nav2-item.on .nav2-lbl,html.kern .nav2-grp.active > .nav2-item .nav2-lbl{font-weight:600!important}
  html.kern .nav2-grp.active:not(.open) > .nav2-item{background:var(--k-grau)!important}
  html.kern :is(.nav2-item.on,.nav2-grp.active:not(.open) > .nav2-item,.nav2-side:not(.exp) .nav2-grp.active > .nav2-item)::after{
    content:'';position:absolute;left:4px;top:50%;width:2.5px;height:14px;margin-top:-7px;border-radius:2px;background:var(--k-ak)}
  html.kern .nav2-side.exp .nav2-grp.active.open > .nav2-item::after{display:none}
  html.kern .nav2-grp.open .nav2-hier{display:none}
  html.kern .nav2-hier{flex:none;max-width:92px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:400;color:var(--k-neben)}

  html.kern .nav2-subs{transition:grid-template-rows .18s cubic-bezier(.4,0,.2,1)}

  /* Unterpunkte: ohne Symbol, zarte Linie unter dem Symbol des Oberpunkts, Text unter dem Text des Oberpunkts */
  html.kern .nav2-subs-in{position:relative}
  html.kern .nav2-subs-in::before{content:'';position:absolute;left:23px;top:3px;bottom:9px;width:1px;background:var(--k-tief-2)}
  html.kern .nav2-sub{min-height:32px;margin:1px 0 1px 33px;padding:6px 8px 6px 12px!important;
    font-size:13.5px;font-weight:400;color:var(--k-text)}
  html.kern .nav2-subs-in > .nav2-sub:first-child{margin-top:1px}
  html.kern .nav2-subs-in > .nav2-sub:last-child{margin-bottom:5px}
  html.kern .nav2-sub::before{display:none!important}
  html.kern .nav2-sub.on{background:var(--k-grau)!important;color:var(--k-anthr)!important;font-weight:600!important;overflow:visible}
  html.kern .nav2-sub.on::after{left:-10.5px;top:8px;bottom:8px;width:2px;height:auto;margin:0;border-radius:2px;background:var(--k-ak)}

  /* Pfeil: das einzige Zeichen für „hier gibt es Unterpunkte“, darum bleibt er, aber leise */
  html.kern .nav2-chev{color:var(--k-neben)}

  /* Stecknadel: erst nach einer Sekunde Ruhen auf der Zeile, vorher nicht einmal klickbar */
  html.kern .nav2-pin{color:var(--k-neben);visibility:hidden;opacity:0!important;transition:none}
  html.kern .nav2-side.exp :is(.nav2-sub,.nav2-item):hover .nav2-pin{visibility:visible;opacity:1!important;transition:opacity .2s ease 1s,visibility 0s linear 1s}
  html.kern .nav2-pin:focus-visible{visibility:visible;opacity:1!important}
  html.kern .nav2-pinned small{color:var(--k-neben)}
  html.kern .nav2-sect{color:var(--k-neben)}

  /* Fuß: nur die Person. Der Stern ist als „Zuletzt geöffnet“ ins Benutzermenü gezogen. */
  html.kern .nav2-side.exp .nav2-foot-user{margin-right:0}
  html.kern body.nav2 .nav2-foot .zz-btn{display:none}
  html.kern body.nav2 .nav2-foot .zz-wrap{left:8px;right:auto;opacity:1;visibility:visible}
  html.kern body.nav2 .nav2-foot .zz-menu{bottom:30px}
  html.kern body.nav2 .nav2-foot .user-chevron{display:none}
  html.kern .nav2-inbox-wrap{padding-bottom:2px}
  html.kern .nav2-inbox-wrap .nav2-item{margin-top:0}
  html.kern .nav2-foot{padding-top:6px;padding-bottom:8px}
  html.kern #nav2-tel .nav2-ico .nav2-badge{opacity:1!important}   /* verpasste Anrufe bleiben auch im offenen Menü sichtbar */

  /* „Menü immer offen“: die Leiste nimmt sich dauerhaft ihren Platz, der Inhalt rückt einmal nach rechts */
  html.kern .k-dd-gross,html.kern .k-dd-zeile{display:none}
}
@media (min-width:1024px){
  html.kern body.nav2.nav2-fest{--nav2-w:var(--nav2-x)}
  html.kern body.nav2.nav2-fest .nav2-side.exp .nav2-panel{box-shadow:none!important}
  html.kern .k-dd-gross{display:flex}
  html.kern .k-dd-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;cursor:pointer;
    font-size:14px;color:var(--k-text)}
  html.kern .k-dd-zeile:hover{background:var(--k-grau)}
}
html.kern .k-schalter{position:relative;width:38px;height:22px;flex:none;padding:0;border:0;border-radius:999px;background:var(--k-tief-2);cursor:pointer;transition:background-color .15s ease}
html.kern .k-schalter i{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--k-weiss);transition:transform .15s ease}
html.kern .k-schalter[aria-checked="true"]{background:var(--k-anthr)}
html.kern .k-schalter[aria-checked="true"] i{transform:translateX(16px);background:var(--k-umkehr)}
html.kern .k-schalter:focus-visible{outline:2px solid var(--h-fokus);outline-offset:2px}

/* ── Suchen (⌘K): Fenster im Stil der übrigen, X zum Schließen ─────────────────────────────── */
html.kern .nav2-pal-wrap{padding-top:13vh;background:var(--h-scrim-leise)}
html.kern .nav2-pal{width:min(600px,100%);max-height:min(540px,74vh);border-radius:20px!important;box-shadow:var(--k-schwebend)!important}
html.kern .nav2-pal-in{gap:12px;padding:10px 12px 8px 20px}
html.kern .nav2-pal-in > svg{width:19px;height:19px;color:var(--k-neben)}
html.kern .nav2-pal-in input{height:40px;font-size:16px!important;color:var(--k-anthr)}
html.kern .nav2-pal-in input::placeholder{color:var(--k-neben)}
html.kern .nav2-pal-x{width:34px;height:34px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--k-neben);cursor:pointer;transition:background-color .12s ease,color .12s ease}
html.kern .nav2-pal-x svg{width:16px;height:16px;color:inherit}
html.kern .nav2-pal-x:hover{background:var(--k-grau);color:var(--k-anthr)}
html.kern .nav2-pal-x:focus-visible{outline:2px solid var(--h-fokus);outline-offset:1px}
html.kern .nav2-pal-list{padding:2px 10px 10px}
html.kern .nav2-pal-g{padding:12px 10px 4px;color:var(--k-neben)}
html.kern .nav2-pal-r{min-height:40px;padding:8px 10px;gap:12px;border-radius:12px;font-size:14px;color:var(--k-text)}
html.kern .nav2-pal-r .ico{color:var(--k-neben)}
html.kern .nav2-pal-r .s{font-size:13px;color:var(--k-neben)}
html.kern .nav2-pal-r.on .t{font-weight:500!important}
html.kern .nav2-pal-leer{color:var(--k-neben)}
html.kern .nav2-pal-f{gap:16px;padding:10px 20px 12px;background:transparent!important;color:var(--k-neben)}
html.kern .nav2-pal-f b{font-weight:500;color:var(--k-text)}
@media (max-width:768px){
  html.kern .nav2-pal-wrap{padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 12px}
  html.kern .nav2-pal{max-height:72dvh;border-radius:18px!important}
  html.kern .nav2-pal-in{padding-left:16px}
  html.kern .nav2-pal-x{width:40px;height:40px}
  html.kern .nav2-pal-r{min-height:44px}
}

/* ── Hestia-Zeichen ────────────────────────────────────────────────────────────
   In Ruhe steht es still, wie jedes Symbol der Leiste, und kostet nichts. Beim Überfahren der Zeile läuft es einmal (Silas
   04.11.: „so beim Hover“): Der Strich läuft um den Ring, die Rechtecke heben sich, wenn er sie berührt, das Feuer glimmt
   und kommt ruhig zurück. nav2.js setzt dafür .hs-runde und nimmt sie am Ende wieder weg, die Runde läuft also auch dann
   zu Ende, wenn die Maus schon weiter ist. Etwas länger als die übrigen Symbole (0,4 bis 0,6 s), weil acht Module drankommen.
   Nur Hestia selbst bewegt es von allein, leise: solange sie denkt, zuhört oder spricht (html[data-hestia], hestia.js).
   Bewegt werden nur transform und opacity eigener Ebenen. Der Ring ist bewusst heller als die Module: Auf dunklem Ring war
   der Strich kaum zu sehen. Die Dauern der Zustände teilen 18 s, denn die Uhr --hs-t (nav2.js) läuft in 18-s-Runden. */
html.kern{--hs-dauer:6s;--hs-glut:4.5s;--hs-runde:1.2s}
html.kern[data-hestia="denkt"]{--hs-dauer:2.25s;--hs-glut:1.5s}
html.kern[data-hestia="hoert"]{--hs-dauer:4.5s;--hs-glut:3s}
html.kern[data-hestia="spricht"]{--hs-dauer:3s;--hs-glut:1.5s}
html.kern[data-hestia="wach"]{--hs-dauer:4.5s;--hs-glut:3s}
html.kern .hs-sym{position:relative;display:block;width:100%;height:100%;color:inherit}
html.kern .hs-sym svg{position:absolute;inset:0;width:100%!important;height:100%!important;overflow:visible}
html.kern .hs-sym svg circle{opacity:.38}
/* nav2.css setzt für die Symbol-Spielereien transform-box:fill-box auf alles im SVG. Das verschob die acht Module: sie
   drehten sich um sich selbst statt um den Ring und standen als lose Punkte neben dem Zeichen. */
html.kern .hs-sym svg,html.kern .hs-sym svg *{transform-box:view-box!important;transform-origin:0 0!important}
html.kern .hs-sym-kern{position:absolute;left:37.5%;top:37.5%;width:25%;height:25%;border-radius:50%;background:var(--k-ak)}
html.kern .hs-sym-lauf{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 66%,color-mix(in srgb,var(--k-ak) 45%,transparent) 84%,var(--k-ak) 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.2px));mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.2px))}
@media (prefers-reduced-motion:no-preference){
  /* Zustände: leise, ohne Überfahren */
  html.kern:is([data-hestia="denkt"],[data-hestia="hoert"],[data-hestia="spricht"],[data-hestia="wach"]) .nav2-side .hs-sym-kern{animation:hs-atem var(--hs-glut) ease-in-out infinite;animation-delay:var(--hs-t,0s)}
  html.kern:is([data-hestia="denkt"],[data-hestia="hoert"],[data-hestia="spricht"],[data-hestia="wach"]) .nav2-side .hs-sym-lauf{opacity:.7;animation:hs-dreh var(--hs-dauer) linear infinite;animation-delay:var(--hs-t,0s)}
  /* Überfahren: eine Runde. Steht hinter den Zuständen und ist stärker, Hestia nimmt danach ihren Zustand wieder auf. */
  html.kern .nav2-side .hs-sym.hs-runde .hs-sym-lauf{animation:hs-runde var(--hs-runde) linear both}
  html.kern .nav2-side .hs-sym.hs-runde rect{animation:hs-modul .42s ease-out;animation-delay:calc(var(--i) * var(--hs-runde) / 8)}
  html.kern .nav2-side .hs-sym.hs-runde .hs-sym-kern{animation:hs-glut 1.5s ease-in-out}
}
/* „Bewegung reduzieren“: nichts läuft herum, nur das Feuer glimmt einmal auf, bei Zuständen sanft auf und ab.
   !important, weil index.html dann alle Animationen auf 0,001 s und einen Durchlauf setzt. */
@media (prefers-reduced-motion:reduce){
  html.kern:is([data-hestia="denkt"],[data-hestia="hoert"],[data-hestia="spricht"],[data-hestia="wach"]) .nav2-side .hs-sym-kern{animation:hs-glimm 6s ease-in-out infinite;animation-duration:6s!important;animation-iteration-count:infinite!important;animation-delay:var(--hs-t,0s)}
  html.kern .nav2-side .hs-sym.hs-runde .hs-sym-kern{animation:hs-glimm 1.5s ease-in-out;animation-duration:1.5s!important;animation-iteration-count:1!important;animation-delay:0s}
  html.kern .nav2-panel,html.kern .nav2-subs{transition:none!important}
}
@keyframes hs-dreh{to{transform:rotate(360deg)}}
@keyframes hs-runde{0%{opacity:0;transform:rotate(0)}10%{opacity:1}88%{opacity:1}100%{opacity:0;transform:rotate(360deg)}}
@keyframes hs-glut{0%,100%{transform:scale(1)}34%{transform:scale(1.26)}62%{transform:scale(.94)}82%{transform:scale(1.05)}}
@keyframes hs-atem{0%,100%{transform:scale(.94)}50%{transform:scale(1.08)}}
@keyframes hs-glimm{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes hs-modul{0%,100%{transform:none}32%{transform:translateY(-1.4px)}}

/* Hochgeladenes Logo der Firma in der Leiste: beliebiges Seitenverhältnis, darum eingepasst statt verzerrt. Eingeklappt nur die 24 px der Marke. */
html.kern .nav2-brand .kern-firmenlogo{object-fit:contain}
html.kern .nav2-brand .kern-mark.kern-firmenlogo{height:30px!important;width:44px!important}
html.kern .nav2-brand .kern-logo.kern-firmenlogo{max-width:168px;object-position:left center}
html.kern.k-dunkel .nav2-brand .kern-firmenlogo.kern-plakette{box-sizing:border-box;padding:2px 4px;border-radius:6px}
html.kern .login-wrap .brand-img.kern-logo{max-width:100%;object-fit:contain}