/* SBJ Menü – Leiste, Mega-Menü (PC) und Ebenen-Menü (Handy) */
#sbjm {
	--sbjm-bar-bg: #000000; --sbjm-bar-fg: #ffffff;
	--sbjm-bg: #ffffff; --sbjm-ink: #000000; --sbjm-muted: #5c5c5c; --sbjm-rule: #e6e6e6; --sbjm-mist: #f3f3f1; --sbjm-signal: #e4002b;
	--sbjm-max: 1280px; --sbjm-h: 56px;
	position: relative; z-index: 9990; font: inherit; color: var(--sbjm-ink);
}
/* Grundwerte: gegen Theme-Stile abgesichert (IDs haben Vorrang vor allen Theme-Regeln) */
#sbjm, #sbjm-drawer { text-transform: none; letter-spacing: normal; line-height: 1.4; text-align: left; }
#sbjm *, #sbjm-drawer * { box-sizing: border-box; }
#sbjm ul, #sbjm li, #sbjm-drawer ul, #sbjm-drawer li { list-style: none; margin: 0; padding: 0; background: none; border: 0; }
#sbjm li::before, #sbjm li::after, #sbjm-drawer li::before, #sbjm-drawer li::after { content: none; display: none; }
#sbjm a, #sbjm-drawer a { color: inherit; text-decoration: none; background: none; border: 0; box-shadow: none; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: none; line-height: inherit; }
#sbjm button, #sbjm-drawer button { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
#sbjm img, #sbjm-drawer img { max-width: none; margin: 0; border: 0; box-shadow: none; }
#sbjm :focus-visible, #sbjm-drawer :focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* ---------- Leiste ---------- */
:is(#sbjm, #sbjm-drawer) .sbjm-bar { background: var(--sbjm-bar-bg); color: var(--sbjm-bar-fg); }
:is(#sbjm, #sbjm-drawer) .sbjm-inner { max-width: var(--sbjm-max); height: var(--sbjm-h); margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; }

:is(#sbjm, #sbjm-drawer) .sbjm-worlds { display: flex; align-items: stretch; gap: 8px; margin-right: 20px; padding-right: 20px; position: relative; }
:is(#sbjm, #sbjm-drawer) .sbjm-worlds::after { content: ""; position: absolute; right: 0; top: 16px; bottom: 16px; width: 1px; background: currentColor; opacity: .25; }
:is(#sbjm, #sbjm-drawer) .sbjm-worlds button { position: relative; display: flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 600; letter-spacing: .01em; opacity: .55; transition: opacity .15s; }
:is(#sbjm, #sbjm-drawer) .sbjm-worlds button:hover { opacity: .85; }
:is(#sbjm, #sbjm-drawer) .sbjm-worlds button[aria-selected="true"] { opacity: 1; }
:is(#sbjm, #sbjm-drawer) .sbjm-worlds button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 10px; height: 2px; background: currentColor; }

:is(#sbjm, #sbjm-drawer) .sbjm-list { display: flex; align-items: stretch; flex: 1; min-width: 0; }
:is(#sbjm, #sbjm-drawer) .sbjm-list[hidden] { display: none; }
:is(#sbjm, #sbjm-drawer) .sbjm-item { display: flex; }
:is(#sbjm, #sbjm-drawer) .sbjm-link { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s; }
:is(#sbjm, #sbjm-drawer) .sbjm-item:hover > .sbjm-link { background: rgba(255,255,255,.08); }
/* Offener Punkt wird weiß und geht nahtlos in das Menü über */
:is(#sbjm, #sbjm-drawer) .sbjm-item.is-open > .sbjm-link { background: var(--sbjm-bg); color: var(--sbjm-ink); }
:is(#sbjm, #sbjm-drawer) .sbjm-item.is-sale > .sbjm-link { color: #ff6b78; }
:is(#sbjm, #sbjm-drawer) .sbjm-item.is-sale.is-open > .sbjm-link { color: var(--sbjm-signal); }
:is(#sbjm, #sbjm-drawer) .sbjm-item.is-current > .sbjm-link { box-shadow: inset 0 -2px 0 currentColor; }

:is(#sbjm, #sbjm-drawer) .sbjm-cta { align-self: center; margin-left: auto; padding: 9px 18px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s; }
:is(#sbjm, #sbjm-drawer) .sbjm-cta:hover { background: var(--sbjm-bar-fg); color: var(--sbjm-bar-bg); }

:is(#sbjm, #sbjm-drawer) .sbjm-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--sbjm-ink); color: #ffffff; font-size: 11px; font-weight: 600; line-height: 1.4; }
:is(#sbjm, #sbjm-drawer) .sbjm-badge.is-sale { background: var(--sbjm-signal); }
:is(#sbjm, #sbjm-drawer) .sbjm-link .sbjm-badge { background: var(--sbjm-bar-fg); color: var(--sbjm-bar-bg); }
:is(#sbjm, #sbjm-drawer) .sbjm-link .sbjm-badge.is-sale, :is(#sbjm, #sbjm-drawer) .sbjm-item.is-open > .sbjm-link .sbjm-badge.is-sale { background: var(--sbjm-signal); color: #ffffff; }
:is(#sbjm, #sbjm-drawer) .sbjm-item.is-open > .sbjm-link .sbjm-badge { background: var(--sbjm-ink); color: #ffffff; }

/* ---------- Mega-Menü (PC) ---------- */
:is(#sbjm, #sbjm-drawer) .sbjm-panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--sbjm-bg); color: var(--sbjm-ink);
	visibility: hidden; opacity: 0; transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	box-shadow: 0 30px 50px -30px rgba(0,0,0,.35);
}
:is(#sbjm, #sbjm-drawer) .sbjm-item.is-open > .sbjm-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
:is(#sbjm, #sbjm-drawer) .sbjm-panel-inner { max-width: var(--sbjm-max); margin: 0 auto; padding: 40px 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; }
:is(#sbjm, #sbjm-drawer) .sbjm-panel-inner.no-tiles { grid-template-columns: minmax(0, 1fr); }
:is(#sbjm, #sbjm-drawer) .sbjm-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 220px)); gap: 32px 36px; align-content: start; }
:is(#sbjm, #sbjm-drawer) .sbjm-col { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
:is(#sbjm, #sbjm-drawer) .sbjm-h { display: block; margin-bottom: 14px; font-size: 16px; font-weight: 600; }
:is(#sbjm, #sbjm-drawer) a.sbjm-h:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
:is(#sbjm, #sbjm-drawer) .sbjm-col li a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; color: var(--sbjm-muted); transition: color .12s; }
:is(#sbjm, #sbjm-drawer) .sbjm-col li a:hover { color: var(--sbjm-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

:is(#sbjm, #sbjm-drawer) .sbjm-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 16px; align-content: start; }
:is(#sbjm, #sbjm-drawer) .sbjm-tiles[data-count="3"], :is(#sbjm, #sbjm-drawer) .sbjm-tiles[data-count="4"] { grid-auto-flow: row; grid-template-columns: repeat(2, 150px); grid-auto-columns: auto; row-gap: 20px; }
:is(#sbjm, #sbjm-drawer) .sbjm-tiles[data-count="3"] .sbjm-tile-img, :is(#sbjm, #sbjm-drawer) .sbjm-tiles[data-count="4"] .sbjm-tile-img { aspect-ratio: 1; }
:is(#sbjm, #sbjm-drawer) .sbjm-tile { display: flex; flex-direction: column; gap: 4px; }
:is(#sbjm, #sbjm-drawer) .sbjm-tile-img { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 8px; overflow: hidden; border-radius: 4px; background: var(--sbjm-mist); }
:is(#sbjm, #sbjm-drawer) .sbjm-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
:is(#sbjm, #sbjm-drawer) a.sbjm-tile:hover .sbjm-tile-img img { transform: scale(1.04); }
:is(#sbjm, #sbjm-drawer) .sbjm-tile-img .sbjm-badge { position: absolute; top: 10px; left: 10px; }
:is(#sbjm, #sbjm-drawer) .sbjm-tile-ph { display: block; width: 100%; height: 100%; padding: 12% 14%; fill: #e1e1dd; }
:is(#sbjm, #sbjm-drawer) .sbjm-tile-t { font-size: 15px; font-weight: 600; }
:is(#sbjm, #sbjm-drawer) .sbjm-tile-s { font-size: 13px; color: var(--sbjm-muted); }
:is(#sbjm, #sbjm-drawer) a.sbjm-tile:hover .sbjm-tile-t { text-decoration: underline; text-underline-offset: 4px; }

:is(#sbjm, #sbjm-drawer) .sbjm-all { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 36px; padding: 18px 0 22px; border-top: 1px solid var(--sbjm-rule); font-size: 15px; font-weight: 600; }
:is(#sbjm, #sbjm-drawer) .sbjm-all::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
:is(#sbjm, #sbjm-drawer) .sbjm-all:hover::after { transform: translateX(3px) rotate(45deg); }
:is(#sbjm, #sbjm-drawer) .sbjm-panel-inner:not(:has(.sbjm-all)) { padding-bottom: 40px; }

:is(#sbjm, #sbjm-drawer) .sbjm-scrim { position: fixed; left: 0; right: 0; bottom: 0; top: var(--sbjm-scrim-top, 0); z-index: -1; background: rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
#sbjm.is-active .sbjm-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
#sbjm.is-active { z-index: 99990; } /* offenes Menü liegt immer über dem Theme-Header */

/* ---------- Handy: Leiste mit „Menü“ ---------- */
#sbjm .sbjm-burger { display: none; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
:is(#sbjm, #sbjm-drawer) .sbjm-burger-i, :is(#sbjm, #sbjm-drawer) .sbjm-burger-i::before, :is(#sbjm, #sbjm-drawer) .sbjm-burger-i::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
:is(#sbjm, #sbjm-drawer) .sbjm-burger-i { position: relative; }
:is(#sbjm, #sbjm-drawer) .sbjm-burger-i::before, :is(#sbjm, #sbjm-drawer) .sbjm-burger-i::after { content: ""; position: absolute; left: 0; }
:is(#sbjm, #sbjm-drawer) .sbjm-burger-i::before { top: -6px; }
:is(#sbjm, #sbjm-drawer) .sbjm-burger-i::after { top: 6px; }

@media (max-width: 1023px) {
	#sbjm { --sbjm-h: 50px; }
	:is(#sbjm, #sbjm-drawer) .sbjm-inner { padding: 0 16px; }
	:is(#sbjm, #sbjm-drawer) .sbjm-worlds, :is(#sbjm, #sbjm-drawer) .sbjm-list, :is(#sbjm, #sbjm-drawer) .sbjm-cta, :is(#sbjm, #sbjm-drawer) .sbjm-scrim { display: none !important; }
	#sbjm .sbjm-burger { display: flex; }
}

/* ---------- Handy: Ebenen-Menü ---------- */
html.sbjm-lock, html.sbjm-lock body { overflow: hidden !important; }
#sbjm-drawer { position: fixed; inset: 0; z-index: 100000; display: flex; font: inherit; color: #000000; }
#sbjm-drawer[hidden] { display: none; }
:is(#sbjm, #sbjm-drawer) .sbjm-dscrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
:is(#sbjm, #sbjm-drawer) .sbjm-dpanel { position: relative; display: flex; flex-direction: column; width: min(440px, 92vw); height: 100%; background: #ffffff; transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-top: env(safe-area-inset-top, 0px); }
#sbjm-drawer.is-in .sbjm-dscrim { opacity: 1; }
#sbjm-drawer.is-in .sbjm-dpanel { transform: none; }

:is(#sbjm, #sbjm-drawer) .sbjm-dhead { flex: none; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 6px 0 20px; }
:is(#sbjm, #sbjm-drawer) .sbjm-dhead strong { font-size: 17px; font-weight: 600; }
:is(#sbjm, #sbjm-drawer) .sbjm-x { width: 48px; height: 48px; display: flex !important; align-items: center; justify-content: center; color: #000000 !important; }
:is(#sbjm, #sbjm-drawer) .sbjm-x::before, :is(#sbjm, #sbjm-drawer) .sbjm-x::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; }
:is(#sbjm, #sbjm-drawer) .sbjm-x::before { transform: rotate(45deg); }
:is(#sbjm, #sbjm-drawer) .sbjm-x::after { transform: rotate(-45deg); }
:is(#sbjm, #sbjm-drawer) .sbjm-x { position: relative; }

:is(#sbjm, #sbjm-drawer) .sbjm-dworlds { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 20px 8px; padding: 4px; border-radius: 10px; background: #f3f3f1; }
:is(#sbjm, #sbjm-drawer) .sbjm-dworlds a { display: flex !important; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px !important; border-radius: 7px !important; font-size: 14px; font-weight: 600; color: #5c5c5c !important; text-align: center; }
:is(#sbjm, #sbjm-drawer) .sbjm-dworlds a[aria-selected="true"] { background: #000000 !important; color: #ffffff !important; }

:is(#sbjm, #sbjm-drawer) .sbjm-levels { position: relative; flex: 1; min-height: 0; overflow: hidden; }
:is(#sbjm, #sbjm-drawer) .sbjm-level { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #ffffff; transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
:is(#sbjm, #sbjm-drawer) .sbjm-level.is-right { transform: translateX(100%); }
:is(#sbjm, #sbjm-drawer) .sbjm-level.is-left { transform: translateX(-24%); }

:is(#sbjm, #sbjm-drawer) .sbjm-row { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 14px; width: 100%; min-height: 60px; padding: 8px 20px !important; border-bottom: 1px solid #efefed !important; color: #000000 !important; font-size: 17px; font-weight: 500; text-align: left !important; }
:is(#sbjm, #sbjm-drawer) .sbjm-row.is-sale { color: #e4002b !important; }
:is(#sbjm, #sbjm-drawer) .sbjm-thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: #f3f3f1; }
:is(#sbjm, #sbjm-drawer) .sbjm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(#sbjm, #sbjm-drawer) .sbjm-row .sbjm-grow { flex: 1; min-width: 0; }
:is(#sbjm, #sbjm-drawer) .sbjm-chev { flex: none; margin-left: auto; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; }

:is(#sbjm, #sbjm-drawer) .sbjm-back { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; width: 100%; min-height: 56px; padding: 0 20px !important; color: #000000 !important; font-size: 17px; font-weight: 600; text-align: left !important; border-bottom: 1px solid #efefed !important; }
:is(#sbjm, #sbjm-drawer) .sbjm-back .sbjm-chev { margin-left: 2px; transform: rotate(-135deg); opacity: 1; }
:is(#sbjm, #sbjm-drawer) .sbjm-allrow { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }

:is(#sbjm, #sbjm-drawer) .sbjm-strip { display: flex; gap: 12px; overflow-x: auto; padding: 16px 20px 20px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
:is(#sbjm, #sbjm-drawer) .sbjm-strip::-webkit-scrollbar { display: none; }
:is(#sbjm, #sbjm-drawer) .sbjm-strip .sbjm-tile { flex: 0 0 140px; width: 140px; min-width: 0; scroll-snap-align: start; }
:is(#sbjm, #sbjm-drawer) .sbjm-strip .sbjm-tile-t { font-size: 14px; }

:is(#sbjm, #sbjm-drawer) .sbjm-acc { border-bottom: 1px solid #efefed; }
:is(#sbjm, #sbjm-drawer) .sbjm-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 20px; font-size: 16px; font-weight: 600; cursor: pointer; }
:is(#sbjm, #sbjm-drawer) .sbjm-acc summary::-webkit-details-marker { display: none; }
:is(#sbjm, #sbjm-drawer) .sbjm-acc summary .sbjm-chev { transform: rotate(135deg); transition: transform .2s; }
:is(#sbjm, #sbjm-drawer) .sbjm-acc[open] summary .sbjm-chev { transform: rotate(-45deg); }
:is(#sbjm, #sbjm-drawer) .sbjm-acc ul { padding: 0 20px 12px; }
:is(#sbjm, #sbjm-drawer) .sbjm-acc li a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; color: #3d3d3d; }
:is(#sbjm, #sbjm-drawer) .sbjm-acc li:first-child a { font-weight: 600; color: #000000; }

:is(#sbjm, #sbjm-drawer) .sbjm-dfoot { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #efefed; }
:is(#sbjm, #sbjm-drawer) .sbjm-dfoot a { display: flex !important; align-items: center; justify-content: center; min-height: 46px; border: 1.5px solid #000000 !important; border-radius: 999px !important; background: #ffffff !important; color: #000000 !important; font-size: 15px; font-weight: 600; }
#sbjm-drawer:not([data-world="design"]) .sbjm-dfoot { display: none; }

@media (prefers-reduced-motion: reduce) {
	#sbjm *, #sbjm-drawer * { transition: none !important; }
}