/* Zauberberg Mega-Menü 1.0 – Desktop-Panels + Burger-Menü */
.zbm-root, .zbm-burger {
  --zbm-red: #DE3034; --zbm-red-soft: rgba(222,48,52,.55);
  --zbm-bg: #0B0B0B; --zbm-card: rgba(255,255,255,.035); --zbm-card-hi: rgba(255,255,255,.06);
  --zbm-line: rgba(255,255,255,.08); --zbm-text: #C8C8C8; --zbm-muted: #8A8A8A; --zbm-white: #FFFFFF;
  --zbm-ease: cubic-bezier(.2,.75,.2,1);
}
.zbm-root *, .zbm-root *::before, .zbm-root *::after { box-sizing: border-box; }
.zbm-root a { text-decoration: none !important; }
.zbm-root img { max-width: none; }

/* Sternenstaub + roter Schimmer – passend zur Bühne der Startseite */
.zbm-panel, .zbm-drawer {
  background-color: var(--zbm-bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 72%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 86% 84%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 54% 8%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(900px 420px at -5% -20%, rgba(222,48,52,.16), transparent 70%),
    radial-gradient(700px 380px at 105% 120%, rgba(255,255,255,.04), transparent 70%);
  background-size: 260px 260px, 330px 330px, 410px 410px, 290px 290px, 370px 370px, 100% 100%, 100% 100%;
  color: var(--zbm-text);
}

.zbm-eyebrow { display: block; margin: 0; padding: 0; color: var(--zbm-red); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; }
.zbm-title { display: block; color: var(--zbm-white); font-weight: 700; line-height: 1.2; }
.zbm-text { display: block; color: var(--zbm-text); }
.zbm-badge { display: inline-block; color: var(--zbm-red); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.zbm-arrow { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .3s var(--zbm-ease); }

/* ======================= Desktop ======================= */
.zbm-chev-top { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--zbm-ease); opacity: .7; }
.zbm-active > a .zbm-chev-top { transform: translateY(0) rotate(-135deg); }
.zbm-trigger > .sub-menu { display: none !important; }
.zbm-trigger > a::after { display: none !important; }
.zbm-trigger > a { position: relative; }
.zbm-trigger > a::before { /* rote Linie unter dem aktiven Menüpunkt */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--zbm-red, #DE3034);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.75,.2,1);
}
#top-menu .zbm-trigger > a::before { bottom: 22px; right: 15px; }
.zbm-active > a::before { transform: scaleX(1); }

.zbm-backdrop {
  position: fixed; left: 0; right: 0; bottom: 0; top: 80px; z-index: 99998;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.zbm-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.zbm-panel {
  position: fixed; left: 0; right: 0; top: 80px; z-index: 99999;
  max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--zbm-line); box-shadow: 0 40px 80px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .25s ease, transform .4s var(--zbm-ease), visibility 0s linear .4s;
}
.zbm-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--zbm-red) 0%, var(--zbm-red) 30%, rgba(222,48,52,0) 100%);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--zbm-ease) .05s;
}
.zbm-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.zbm-panel.is-open::before { transform: scaleX(1); }
.zbm-panel.zbm-swap { transition: none; }

.zbm-inner { max-width: 1280px; margin: 0 auto; padding: 44px 48px 48px; display: grid; grid-template-columns: minmax(220px, 290px) 1fr; gap: 56px; align-items: start; }

.zbm-intro { padding-top: 6px; }
.zbm-intro .zbm-eyebrow { margin-bottom: 14px; }
.zbm-h { margin: 0 0 14px; padding: 0; color: var(--zbm-white); font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.zbm-lead { margin: 0 0 26px; padding: 0; font-size: 15px; line-height: 1.65; color: var(--zbm-text); }
.zbm-cta { display: inline-flex; align-items: center; gap: 10px; color: var(--zbm-white) !important; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid var(--zbm-line); background: rgba(255,255,255,.04); transition: border-color .25s, background .25s; }
.zbm-cta:hover, .zbm-cta:focus-visible { border-color: var(--zbm-red-soft); background: rgba(222,48,52,.12); }
.zbm-cta:hover .zbm-arrow, .zbm-cta:focus-visible .zbm-arrow { transform: translateX(3px); }
.zbm-cta-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--zbm-red); position: relative; flex: 0 0 26px; }
.zbm-cta-ico::after { content: ""; position: absolute; left: 10px; top: 8px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

.zbm-grid { display: grid; gap: 18px; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.zbm-grid.zbm-has-singles { grid-template-columns: repeat(var(--cols), minmax(0, 1.5fr)) minmax(240px, 1fr); }

/* Karten (Reihen) */
.zbm-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 24px 24px 20px; border-radius: 14px; background: var(--zbm-card); border: 1px solid var(--zbm-line);
  color: inherit; overflow: hidden; isolation: isolate;
  transition: border-color .3s, background .3s, transform .35s var(--zbm-ease);
}
.zbm-card::after { /* weicher Lichtschein von oben */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(400px 220px at 30% 0%, rgba(222,48,52,.16), transparent 70%);
}
.zbm-card:hover, .zbm-card:focus-visible { border-color: var(--zbm-red-soft); background: var(--zbm-card-hi); transform: translateY(-3px); outline: none; }
.zbm-card:hover::after, .zbm-card:focus-visible::after { opacity: 1; }

/* Cover-Fächer */
.zbm-fan { --w: 100px; --s: 26px; --s2: 36px; position: relative; display: block; height: 176px; margin-bottom: 22px; }
.zbm-fan img {
  position: absolute; left: 0; bottom: 0; width: var(--w); height: calc(var(--w) * 1.6); object-fit: cover; border-radius: 3px;
  box-shadow: 0 14px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  transform-origin: 50% 100%; z-index: calc(10 - var(--i));
  transform: translateX(calc(var(--i) * var(--s))) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3deg));
  transition: transform .55s var(--zbm-ease);
}
.zbm-card:hover .zbm-fan img, .zbm-card:focus-visible .zbm-fan img {
  transform: translateX(calc(var(--i) * var(--s2))) translateY(calc(var(--i) * -2px - 4px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg));
}

.zbm-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.zbm-card .zbm-eyebrow { margin-bottom: 6px; }
.zbm-card .zbm-title { font-size: 20px; margin-bottom: 8px; letter-spacing: -.01em; }
.zbm-card .zbm-text { font-size: 14px; line-height: 1.55; margin-bottom: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.zbm-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--zbm-line);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--zbm-muted); }
.zbm-go { display: inline-flex; align-items: center; gap: 6px; color: var(--zbm-white); font-weight: 700; letter-spacing: .06em; }
.zbm-card:hover .zbm-go .zbm-arrow, .zbm-card:focus-visible .zbm-go .zbm-arrow { transform: translateX(4px); color: var(--zbm-red); }

/* Zwei Reihen: größere Fächer */
.zbm-wide .zbm-fan { --w: 118px; --s: 36px; --s2: 54px; height: 204px; }
.zbm-wide .zbm-card .zbm-title { font-size: 22px; }
/* Eine Reihe + Einzeltitel: Fächer links, Text rechts */
.zbm-row .zbm-card { flex-direction: row; align-items: stretch; gap: 28px; padding: 26px; }
.zbm-row .zbm-fan { --w: 108px; --s: 30px; --s2: 40px; flex: 0 0 calc(var(--w) + (var(--n) - 1) * var(--s2) + 10px); height: 196px; margin: 0; align-self: center; }

/* Sticker auf dem Fächer (z. B. „Neu: Band 2“) */
.zbm-sticker {
  position: absolute; left: -8px; top: 6px; z-index: 20; padding: 5px 10px 4px; border-radius: 4px;
  background: var(--zbm-red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  box-shadow: 0 8px 18px rgba(0,0,0,.5); transform: rotate(-4deg); transition: transform .45s var(--zbm-ease); white-space: nowrap;
}
.zbm-card:hover .zbm-sticker, .zbm-card:focus-visible .zbm-sticker { transform: rotate(-2deg) translateY(-6px); }

/* Einzeltitel */
.zbm-singles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.zbm-singles > .zbm-eyebrow { color: var(--zbm-muted); margin: 4px 0 4px; }
.zbm-single { display: grid; grid-template-columns: 56px 1fr 16px; gap: 16px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 12px;
  border: 1px solid var(--zbm-line); background: var(--zbm-card); color: inherit; transition: border-color .3s, background .3s, transform .35s var(--zbm-ease); }
.zbm-single img, .zbm-noimg { width: 56px; height: 90px; object-fit: cover; border-radius: 3px; box-shadow: 0 8px 18px rgba(0,0,0,.55); display: block; background: #222; }
.zbm-single .zbm-title { font-size: 16px; margin: 3px 0 4px; }
.zbm-single .zbm-text { font-size: 13px; line-height: 1.45; }
.zbm-single .zbm-badge { margin-top: 6px; }
.zbm-single > .zbm-arrow { color: var(--zbm-muted); }
.zbm-single:hover, .zbm-single:focus-visible { border-color: var(--zbm-red-soft); background: var(--zbm-card-hi); transform: translateX(3px); outline: none; }
.zbm-single:hover > .zbm-arrow, .zbm-single:focus-visible > .zbm-arrow { color: var(--zbm-red); transform: translateX(3px); }

/* Einblenden: Intro und Karten nacheinander */
.zbm-intro, .zbm-card, .zbm-singles { opacity: 0; transform: translateY(14px); }
.zbm-panel.is-open .zbm-intro, .zbm-panel.is-open .zbm-card, .zbm-panel.is-open .zbm-singles {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s var(--zbm-ease), border-color .3s, background .3s;
  transition-delay: calc(var(--k, -1) * 70ms + 120ms), calc(var(--k, -1) * 70ms + 120ms), 0s, 0s;
}
.zbm-panel.is-open .zbm-intro { transition-delay: 40ms; }
.zbm-panel.is-open .zbm-card:hover, .zbm-panel.is-open .zbm-card:focus-visible { transform: translateY(-3px); transition-delay: 0s; }

@media (max-width: 1180px) {
  .zbm-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px 36px 40px; }
  .zbm-intro { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: end; }
  .zbm-intro .zbm-eyebrow, .zbm-h { grid-column: 1; }
  .zbm-lead { grid-column: 1; margin-bottom: 0; }
  .zbm-cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .zbm-row .zbm-card { flex-direction: column; }
  .zbm-row .zbm-fan { flex-basis: auto; align-self: flex-start; margin-bottom: 20px; }
}
@media (max-width: 980px) { .zbm-panel, .zbm-backdrop { display: none !important; } }

/* ======================= Burger (Handy & Tablet) ======================= */
.zbm-burger { display: none; }
@media (max-width: 980px) {
  html.zbm-on .et_mobile_nav_menu, html.zbm-on #et_mobile_nav_menu { display: none !important; }
  .zbm-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
    width: 48px; height: 48px; padding: 0 11px; margin: 0; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; vertical-align: middle;
  }
  .zbm-burger span { display: block; height: 2px; width: 26px; border-radius: 2px; background: var(--zbm-burger, #fff); transition: width .3s var(--zbm-ease), transform .3s var(--zbm-ease); }
  .zbm-burger span:nth-child(2) { width: 18px; }
  .zbm-burger span:nth-child(3) { width: 22px; }
  .zbm-burger:hover span, .zbm-burger:focus-visible span { width: 26px; }
  .zbm-burger:focus-visible { outline: 2px solid var(--zbm-red); outline-offset: 2px; }
  #et-top-navigation .zbm-burger { float: right; margin: -8px -11px 16px 0; }
  .zbm-burger-float { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 99990; background: rgba(0,0,0,.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

.zbm-drawer {
  position: fixed; inset: 0; z-index: 100010; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  visibility: hidden; clip-path: circle(0 at calc(100% - 36px) 36px);
  transition: clip-path .6s var(--zbm-ease), visibility 0s linear .6s;
}
.zbm-drawer.is-open { visibility: visible; clip-path: circle(150% at calc(100% - 36px) 36px); transition-delay: 0s; }
@media (min-width: 981px) { .zbm-drawer { display: none !important; } }
html.zbm-lock, html.zbm-lock body { overflow: hidden !important; }

.zbm-d-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--zbm-line); flex: 0 0 auto; }
.zbm-d-logo { color: var(--zbm-white) !important; font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; }
.zbm-d-logo img { max-height: 40px; width: auto; display: block; }
.zbm-close { position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 0 0 48px; }
.zbm-close span { position: absolute; left: 14px; top: 23px; width: 20px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.zbm-close span + span { transform: rotate(-45deg); }
.zbm-close:focus-visible { outline: 2px solid var(--zbm-red); outline-offset: 2px; }

.zbm-d-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 22px calc(32px + env(safe-area-inset-bottom)); }

.zbm-acc { border-bottom: 1px solid var(--zbm-line); }
.zbm-acc-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 20px 2px; margin: 0; background: none; border: 0; cursor: pointer;
  color: var(--zbm-white); font: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
.zbm-acc-label { font-size: 28px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.zbm-acc-count { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zbm-muted); }
.zbm-chev { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--zbm-line); flex: 0 0 32px; transition: background .3s, border-color .3s, transform .4s var(--zbm-ease); }
.zbm-chev::before, .zbm-chev::after { content: ""; position: absolute; left: 10px; top: 15px; width: 11px; height: 1.5px; background: #fff; transition: transform .4s var(--zbm-ease); }
.zbm-chev::after { transform: rotate(90deg); }
.zbm-acc.is-open .zbm-chev { background: var(--zbm-red); border-color: var(--zbm-red); transform: rotate(180deg); }
.zbm-acc.is-open .zbm-chev::after { transform: rotate(0deg); }
.zbm-acc.is-open .zbm-acc-label { color: var(--zbm-white); }

.zbm-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--zbm-ease); }
.zbm-acc.is-open .zbm-acc-panel { grid-template-rows: 1fr; }
.zbm-acc-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .45s; }
.zbm-acc.is-open .zbm-acc-inner { visibility: visible; transition-delay: 0s; padding-bottom: 18px; }

.zbm-d-item {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-bottom: 10px; padding: 14px;
  border-radius: 14px; background: var(--zbm-card); border: 1px solid var(--zbm-line); color: inherit; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--zbm-ease), border-color .2s, background .2s;
}
.zbm-acc.is-open .zbm-d-item { opacity: 1; transform: none; }
.zbm-acc.is-open .zbm-d-item:nth-child(2) { transition-delay: 60ms; }
.zbm-acc.is-open .zbm-d-item:nth-child(3) { transition-delay: 120ms; }
.zbm-acc.is-open .zbm-d-item:nth-child(4) { transition-delay: 180ms; }
.zbm-d-item:active { background: var(--zbm-card-hi); border-color: var(--zbm-red-soft); }
.zbm-d-covers { position: relative; display: block; width: calc(54px + (var(--n) - 1) * 16px); height: 86px; }
.zbm-d-covers img { position: absolute; left: calc(var(--i) * 16px); bottom: 0; width: 54px; height: 86px; object-fit: cover; border-radius: 3px; z-index: calc(10 - var(--i));
  box-shadow: 0 8px 16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05); }
.zbm-d-txt { display: flex; flex-direction: column; min-width: 0; }
.zbm-d-txt .zbm-eyebrow { font-size: 10px; margin-bottom: 4px; }
.zbm-d-txt .zbm-title { font-size: 17px; margin-bottom: 4px; }
.zbm-d-txt .zbm-text { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zbm-d-txt .zbm-badge { margin-top: 6px; font-size: 10px; }
.zbm-acc .zbm-cta { margin-top: 6px; }

.zbm-d-more { display: flex; flex-direction: column; padding: 18px 0 6px; }
.zbm-d-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; color: var(--zbm-white) !important; font-size: 19px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.05); }
.zbm-d-link .zbm-arrow { color: var(--zbm-muted); }
.zbm-d-foot { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 22px; }
.zbm-d-foot a { color: var(--zbm-text) !important; font-size: 13px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--zbm-line); }

/* Einblenden beim Öffnen */
.zbm-acc, .zbm-d-more, .zbm-d-foot { opacity: 0; transform: translateX(28px); }
.zbm-drawer.is-open .zbm-acc, .zbm-drawer.is-open .zbm-d-more, .zbm-drawer.is-open .zbm-d-foot {
  opacity: 1; transform: none; transition: opacity .5s ease, transform .6s var(--zbm-ease); transition-delay: calc(var(--k, 4) * 60ms + 160ms);
}
.zbm-drawer.is-open .zbm-d-foot { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .zbm-panel, .zbm-panel::before, .zbm-intro, .zbm-card, .zbm-singles, .zbm-fan img, .zbm-drawer, .zbm-acc, .zbm-d-more, .zbm-d-foot, .zbm-d-item, .zbm-acc-panel {
    transition: none !important;
  }
  .zbm-intro, .zbm-card, .zbm-singles, .zbm-acc, .zbm-d-more, .zbm-d-foot, .zbm-d-item { opacity: 1 !important; transform: none !important; }
  .zbm-drawer { clip-path: none !important; }
}

/* 1.0.1 – Absicherung: ein Theme-/Plugin-Stil setzte die Panels auf position:relative (Panel landete am Seitenende) */
html body .zbm-root .zbm-panel, html body .zbm-root .zbm-backdrop, html body .zbm-root .zbm-drawer { position: fixed !important; left: 0 !important; right: 0 !important; margin: 0 !important; }
html body .zbm-root .zbm-drawer { top: 0 !important; bottom: 0 !important; }
html body .zbm-root .zbm-backdrop { bottom: 0 !important; }