/* E3/DC Produktleiste
 * Desktop: identisch zum Mega-Menü-Panel (gleiche Klassen aus assets/mega.css).
 * Schmal (unter 1000 px Leistenbreite): kompakte, wischbare Leiste.
 */

.e3pn {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100vw - var(--e3pn-sb, 0px));
    max-width: none !important;
    margin-left: calc(50% - (100vw - var(--e3pn-sb, 0px)) / 2);
    margin-right: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .08);
    container: e3pn / inline-size;
    -webkit-tap-highlight-color: transparent;
}
/* Startwerte bis das Skript exakt unter den Header ausgerichtet hat */
.e3pn[data-align="auto"] { margin-top: -10px; margin-bottom: 0; }
@media (max-width: 999px) { .e3pn[data-align="auto"] { margin-top: -17px; } }
/* Abstand der Theme-Zeile (1.5em) unter der Leiste entfernen */
.wpb_row:has(.e3pn[data-align="auto"]), .wpb_row.e3pn-row { margin-bottom: 0 !important; }

.e3pn .e3mm__track { -webkit-user-select: none; user-select: none; }
.e3pn .e3mm a.e3mm__item, .e3pn .e3mm a.e3mm__item:hover, .e3pn .e3mm a.e3mm__item:focus { color: #fff; text-decoration: none !important; box-shadow: none; }
.e3pn .e3mm img { -webkit-user-drag: none; }

/* Pfeile gegen Button-Styles aus dem Seiteninhalt absichern */
.e3pn .e3mm button.e3mm__nav {
    width: 40px !important; height: 40px !important; min-width: 0 !important; margin: -24px 0 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: #5cc244 !important; color: #fff !important; line-height: 1 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .12) inset !important; text-transform: none; letter-spacing: 0;
}
.e3pn .e3mm button.e3mm__nav:hover { background: #52b53b !important; }

.e3pn-empty { padding: 14px 18px; border: 1px dashed #c3c4c7; border-radius: 10px; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #50575e; background: #fff; }

/* ---------- Kompakt (Smartphone / Tablet) ---------- */
@container e3pn (max-width: 999px) {
    .e3pn .e3mm__row { padding: 12px 14px 10px; }
    .e3pn .e3mm__group + .e3mm__group { margin-left: 18px; }
    .e3pn .e3mm__group + .e3mm__group::before { left: -9px; top: 8px; height: 34px; opacity: .22; }
    .e3pn .e3mm__items { gap: 0; }
    .e3pn .e3mm a.e3mm__item { padding: 6px 7px 8px; scroll-snap-align: center; }
    .e3pn .e3mm__logo { height: 30px; }
    /* Die Logo-Bilder haben viel Luft oben und unten: größer zeigen, die Luft per negativem Rand abschneiden */
    .e3pn .e3mm__logo img { height: 48px !important; margin: -9px 0 !important; }
    .e3pn .e3mm__word { font-size: 17px; }
    .e3pn .e3mm__label { margin-top: -1px; padding-top: 0; font-size: 10.5px; line-height: 14px; letter-spacing: .05em; opacity: .75; }
    .e3pn .e3mm__group.is-current .e3mm__label { opacity: 1; }
    .e3pn .e3mm__glow { bottom: 6px; height: 22px; max-width: 90px; filter: blur(8px); }
    .e3pn .e3mm__track { scroll-snap-type: x proximity; scroll-padding-inline: 14px; scroll-behavior: auto; }
    .e3pn .e3mm .e3mm__nav { display: none !important; }
    .e3pn .e3mm.has-next .e3mm__track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
    .e3pn .e3mm.has-prev .e3mm__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
    .e3pn .e3mm.has-prev.has-next .e3mm__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
    .e3pn .e3mm a.e3mm__item .e3mm__logo { transition: opacity .15s ease-out, transform .15s ease-out; }
    .e3pn .e3mm a.e3mm__item:active .e3mm__logo { opacity: .55; transform: scale(.96); }
}

/* Touch: kein Hover-Zoom, der nach dem Tippen hängen bleibt */
@media (hover: none) {
    .e3pn .e3mm__item:hover .e3mm__logo img, .e3pn .e3mm__item:hover .e3mm__word { transform: none; }
    .e3pn .e3mm__group:hover:not(.is-current) .e3mm__label { background: none; -webkit-text-fill-color: currentColor; }
}