/* =====================================================================
   SweetDesk: Menü als Glasleiste (wie sweetpixel.it, 04.11.2026)
   Gilt für die Kopfzeile der Webseite (.bar .nav) und das Admin-Menü
   (.topbar nav). Greift erst, wenn sp-glasnav.js die Klasse setzt –
   ohne JavaScript bleibt alles wie vorher.
   ===================================================================== */
.sp-glasnav a { transition: color .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), text-shadow .3s, background .3s, border-color .3s, box-shadow .3s; }
.sp-glasnav a:not(.pill)::after { display: none !important; }
.sp-glasnav a:focus-visible { outline: 2px solid rgba(125, 211, 252, .8); outline-offset: 2px; }
@media (min-width: 861px) {
    .sp-glasnav { position: relative; gap: 2px !important; padding: 5px !important; margin: 0 !important; border-radius: 999px; isolation: isolate; flex-wrap: nowrap !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
        border: 1px solid rgba(255, 255, 255, .11);
        backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
        box-shadow: 0 10px 34px rgba(2, 8, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .03); }
    .sp-glasnav a:not(.pill) { position: relative; z-index: 1; background: none !important; border-color: transparent !important; box-shadow: none !important;
        color: rgba(226, 232, 240, .8); text-decoration: none !important; }
    .sp-glasnav a:not(.pill):hover, .sp-glasnav a.sp-linse-hier:not(.pill), .sp-glasnav a.sp-aktiv:not(.pill) { color: #fff; text-shadow: 0 0 14px rgba(125, 211, 252, .55); }
    .sp-glasnav a:not(.pill):active { transform: scale(.94); }
    .sp-glasnav a.pill { position: relative; z-index: 1; margin-left: 6px; }
    .sp-glasnav .sp-linse { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--lw, 0px); border-radius: 999px; pointer-events: none;
        transform: translateX(var(--lx, 0px)) scale(var(--ls, 1), var(--lsy, 1)); opacity: 0;
        transition: transform .55s cubic-bezier(.34, 1.45, .5, 1), width .55s cubic-bezier(.34, 1.45, .5, 1), opacity .3s ease, background .3s, border-color .3s;
        background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 55%),
            linear-gradient(135deg, rgba(59, 130, 246, .32), rgba(34, 211, 238, .2));
        border: 1px solid rgba(186, 230, 253, .34);
        box-shadow: 0 6px 20px rgba(37, 99, 235, .35), 0 0 24px rgba(34, 211, 238, .18),
            inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -6px 12px rgba(14, 165, 233, .18); }
    .sp-glasnav .sp-linse::after { content: ""; position: absolute; left: 14%; right: 14%; top: 2px; height: 38%; border-radius: 999px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); opacity: .55; }
    .sp-glasnav .sp-linse.an { opacity: 1; }
    .sp-glasnav .sp-linse.ruht { opacity: .72; }
    /* Abmelden im Admin: Linse wird rot */
    .sp-glasnav .sp-linse.rot { background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(229, 72, 77, .42), rgba(251, 146, 60, .25));
        border-color: rgba(254, 202, 202, .4); box-shadow: 0 6px 20px rgba(229, 72, 77, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
    .topbar nav.sp-glasnav a[href*="logout"]:not(:hover) { color: #ffb38c; }
    /* Admin-Menü kompakt rechts; auf der Webseite läuft die Leiste lang über die Breite */
    .topbar nav.sp-glasnav { width: auto !important; flex: 0 0 auto; margin-left: auto !important; }
    .bar .nav.sp-glasnav { flex: 0 1 auto; width: auto !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; }
}
@media (max-width: 860px) {
    /* Handy: lange Glasleiste, Punkte darin, aktiver Punkt als Glaslinse */
    .sp-glasnav .sp-linse { display: none; }
    .sp-glasnav { gap: 2px 4px !important; padding: 5px 6px !important; border-radius: 22px; flex-wrap: wrap !important; justify-content: center !important;
        overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
        border: 1px solid rgba(255, 255, 255, .11);
        backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
        box-shadow: 0 10px 30px rgba(2, 8, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .14); }
    .sp-glasnav a:not(.pill) { padding: 7px 12px; border-radius: 999px; color: rgba(226, 232, 240, .85); text-decoration: none;
        background: none; border: 1px solid transparent; }
    .sp-glasnav a:not(.pill):active { transform: scale(.93); }
    .sp-glasnav a.sp-aktiv:not(.pill) { color: #fff; background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(59, 130, 246, .4), rgba(34, 211, 238, .24));
        border-color: rgba(186, 230, 253, .34); box-shadow: 0 4px 14px rgba(37, 99, 235, .3), inset 0 1px 0 rgba(255, 255, 255, .4); }
    .sp-glasnav a.pill { margin-left: 0 !important; }
    .sp-glasnav a, .sp-glasnav a.pill { font-size: 13.5px !important; padding: 6px 9px !important; }
}
@media (max-width: 380px) { .sp-glasnav a, .sp-glasnav a.pill { font-size: 12.5px !important; padding: 6px 7px !important; } }
@media (max-width: 860px) {
    /* eine lange Leiste in einer Reihe, zum Wischen falls zu lang */
    .sp-glasnav { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important;
        width: 100% !important; border-radius: 999px !important; padding: 4px !important; gap: 2px !important;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .sp-glasnav::-webkit-scrollbar { display: none; }
    .sp-glasnav a { flex: 0 0 auto; white-space: nowrap; }
    .sp-glasnav a:first-of-type { margin-left: auto !important; }
    .sp-glasnav a:last-of-type { margin-right: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .sp-glasnav .sp-linse { transition: opacity .2s; } }
/* Handy: Luft zwischen Logo und Menü und unter dem Menü (sweetdesk.de) */
@media (max-width: 860px) { .bar .nav.sp-glasnav { margin-top: 8px !important; margin-bottom: 12px !important; } }
/* Produktseiten (z. B. SweetPixel Assistent): Kopf „header.top“ – Leiste kompakt rechts, am Handy mittig unter dem Logo */
@media (min-width: 861px) { header.top > nav.sp-glasnav { width: auto !important; margin-left: auto !important; } }
header.top > nav.sp-glasnav a { text-decoration: none; }
@media (max-width: 860px) { header.top > nav.sp-glasnav { width: auto !important; max-width: 100%; margin: 10px auto 12px !important; } }
header.top > nav.sp-glasnav a:not(.pill) { background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
header.top > nav.sp-glasnav a.sp-aktiv:not(.pill) { background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(59, 130, 246, .4), rgba(34, 211, 238, .24)) !important;
    border-color: rgba(186, 230, 253, .34) !important; box-shadow: 0 4px 14px rgba(37, 99, 235, .3), inset 0 1px 0 rgba(255, 255, 255, .4) !important; }
@media (min-width: 861px) { header.top > nav.sp-glasnav a.sp-aktiv:not(.pill) { background: none !important; border-color: transparent !important; box-shadow: none !important; } }

/* 05.11.2026: Handy – Menüleiste so breit wie ihre Einträge und mittig (statt volle Breite mit leerem Rest rechts).
   Die Sprungmarken (#funktionen …) sind auf dem Handy ausgeblendet, darum griff das margin:auto am ersten Eintrag nicht. */
@media (max-width: 860px) {
    .bar .nav.sp-glasnav { width: auto !important; max-width: calc(100% - 8px); margin-left: auto !important; margin-right: auto !important; align-self: center; }
    .bar .nav.sp-glasnav a:first-of-type, .bar .nav.sp-glasnav a:last-of-type { margin-left: 0 !important; margin-right: 0 !important; }
}