/* Banner-Streifen (Black Week / Adventskalender) – 1:1 vom Shop (EmcgnCustomTopbar dev c177f14f: la-sale-bar.html.twig + _la-sale-bar.scss,
   übersetzt mit den Shop-Umbrüchen 768/1008/1366/1920; Infoleisten-Selektoren auf .sk-top übertragen). Erzeugt mit uebernahme_salebar.py – NICHT von Hand ändern. */
/*
Sale banner (la-sale-bar)
==================================================
Two placements of the same banner (la-sale-bar.html.twig):
- .la-sale-bar--topbar: replaces the rotating texts of the top bar. The script sets
  .la-sale-bar-is-active / .la-sale-bar-has-image and the colour/image variables on
  .emcgn-topbar. Below md (1008px) two lines (text, countdown), from md one line.
- .la-sale-bar--box: block on the product page above the advantages line; always two
  lines (the buy box column is narrow on every screen). Variables and classes sit on
  the banner itself.
Look: quiet and premium - light type, countdown as small translucent tiles with the
units below (no hh:mm:ss that reads like a time of day).

Readability over a photo: --la-sale-overlay (admin field, default 30 %) darkens the
whole image, --la-sale-scrim adds a soft halo behind text and tiles only. Together they keep
even a white pixel behind the text at <= 45 % brightness (255 * 0.45 = 115 -> luminance
0.17 -> white text 4.8:1). Countdown tile: 35 % black on top (the script checks the
accent colour against that).
*/
/* ---------- background (colour, image, overlay) ---------- */
.emcgn-topbar.la-sale-bar-is-active,
.la-sale-bar--box {
  background-color: var(--la-sale-bg, #b32020);
}

.la-sale-bar-has-image {
  background-image: linear-gradient(var(--la-sale-overlay, rgba(0, 0, 0, 0.3)), var(--la-sale-overlay, rgba(0, 0, 0, 0.3))), var(--la-sale-image);
  background-position: center center, center var(--la-sale-image-y, 50%);
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 767.98px) {
  .la-sale-bar-has-image {
    background-image: linear-gradient(var(--la-sale-overlay, rgba(0, 0, 0, 0.3)), var(--la-sale-overlay, rgba(0, 0, 0, 0.3))), var(--la-sale-image-sm, var(--la-sale-image));
  }
}

.la-sale-bar--box.la-sale-bar-has-image {
  background-image: linear-gradient(var(--la-sale-overlay, rgba(0, 0, 0, 0.3)), var(--la-sale-overlay, rgba(0, 0, 0, 0.3))), var(--la-sale-image-sm, var(--la-sale-image));
}

/* ---------- top bar placement ---------- */
.emcgn-topbar.la-sale-bar-is-active {
  height: 76px;
}
@media (min-width: 1008px) {
  .emcgn-topbar.la-sale-bar-is-active {
    height: 88px;
  }
}
.emcgn-topbar.la-sale-bar-is-active > .container-fluid,
.emcgn-topbar.la-sale-bar-is-active .emcgn-topbar--row,
.emcgn-topbar.la-sale-bar-is-active .emcgn-topbar--col {
  height: 100%;
}
.emcgn-topbar.la-sale-bar-is-active .emcgn-topbar--content {
  display: none;
}
.emcgn-topbar.la-sale-bar-is-active .emcgn-lang-switch {
  color: var(--la-sale-color, #fff);
}

.emcgn-topbar.la-sale-bar-is-active ~ .header-main:not(.emcgn-sticky-header) {
  top: 76px;
}
@media (min-width: 1008px) {
  .emcgn-topbar.la-sale-bar-is-active ~ .header-main:not(.emcgn-sticky-header) {
    top: 88px;
  }
}

.la-sale-bar--topbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 0 40px;
}
@media (min-width: 1008px) {
  .la-sale-bar--topbar {
    padding: 0 150px;
  }
}

/* ---------- product page placement ---------- */
.la-sale-bar--box {
  position: relative;
  width: 100%;
  min-height: 84px;
  margin: 16px 0;
  padding: 10px 44px;
  border-radius: 2px;
  overflow: hidden;
}

@media (min-width: 1025px) {
  .product-detail-buy .la-pdp-sale-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .product-detail-buy .la-pdp-sale-wrap .emcgn-product-actions {
    position: static;
  }
}

/* ---------- shared content ---------- */
.la-sale-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--la-sale-color, #fff);
  text-align: center;
}
.la-sale-bar[hidden] {
  display: none;
}
.la-sale-bar [hidden] {
  display: none !important;
}

.la-sale-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__link {
    flex-direction: row;
    gap: 0;
  }
}

.la-sale-bar--box .la-sale-bar__link {
  gap: 6px;
}

.la-sale-bar-has-image .la-sale-bar__texts,
.la-sale-bar-has-image .la-sale-bar__countdown-prefix,
.la-sale-bar-has-image .la-sale-bar__units {
  border-radius: 14px;
  background-color: var(--la-sale-scrim, rgba(0, 0, 0, 0.36));
  box-shadow: 0 0 14px 8px var(--la-sale-scrim, rgba(0, 0, 0, 0.36));
}
.la-sale-bar-has-image .la-sale-bar__link {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

a.la-sale-bar__link:hover, a.la-sale-bar__link:focus {
  color: inherit;
  text-decoration: none;
}
a.la-sale-bar__link:hover .la-sale-bar__texts {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.la-sale-bar__link:focus-visible,
.la-sale-bar__pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.la-sale-bar__texts {
  display: grid;
  max-width: 100%;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__texts {
    font-size: 1.0625rem;
    text-align: right;
  }
}
.la-sale-bar--topbar .la-sale-bar__texts:last-child {
  text-align: center;
}

.la-sale-bar--box .la-sale-bar__texts {
  font-size: 0.9375rem;
}

.la-sale-bar__text {
  grid-row: 1;
  grid-column: 1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.la-sale-bar__text.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.la-sale-bar__text strong,
.la-sale-bar__text b {
  font-weight: 600;
}

@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__text {
    -webkit-line-clamp: 1;
  }
}

.la-sale-bar__countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__countdown {
    gap: 12px;
  }
  .la-sale-bar--topbar .la-sale-bar__countdown::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin: 6px 8px 6px 24px;
    background-color: var(--la-sale-color, #fff);
    opacity: 0.35;
  }
}

.la-sale-bar__countdown-prefix {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__countdown-prefix {
    font-size: 0.6875rem;
  }
}

.la-sale-bar__units {
  display: inline-flex;
  gap: 4px;
}

.la-sale-bar__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.35);
  line-height: 1;
}

.la-sale-bar__num {
  color: var(--la-sale-accent, inherit);
  font-size: 0.875rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.la-sale-bar__label {
  margin-top: 2px;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.la-sale-bar__label-long {
  display: none;
}

@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__units {
    gap: 6px;
  }
}
@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__unit {
    min-width: 46px;
    padding: 5px 7px 4px;
  }
}
@media (min-width: 1920px) {
  .la-sale-bar--topbar .la-sale-bar__unit {
    min-width: 64px;
  }
}
@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__num {
    font-size: 1.3125rem;
  }
}
@media (min-width: 1008px) {
  .la-sale-bar--topbar .la-sale-bar__label {
    margin-top: 4px;
  }
}
@media (min-width: 1920px) {
  .la-sale-bar--topbar .la-sale-bar__label-long {
    display: inline;
  }
}
@media (min-width: 1920px) {
  .la-sale-bar--topbar .la-sale-bar__label-short {
    display: none;
  }
}

.la-sale-bar--box .la-sale-bar__units {
  gap: 6px;
}
.la-sale-bar--box .la-sale-bar__unit {
  min-width: 44px;
  padding: 4px 6px 3px;
}
.la-sale-bar--box .la-sale-bar__num {
  font-size: 1.125rem;
}
.la-sale-bar--box .la-sale-bar__label {
  margin-top: 3px;
}

.la-sale-bar__pause {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  transform: translateY(-50%);
}
.la-sale-bar__pause:hover {
  opacity: 1;
}
.la-sale-bar__pause .la-sale-bar__icon-play {
  display: none;
}
.la-sale-bar__pause[aria-pressed=true] .la-sale-bar__icon-pause {
  display: none;
}
.la-sale-bar__pause[aria-pressed=true] .la-sale-bar__icon-play {
  display: block;
}

.la-sale-bar--box .la-sale-bar__pause {
  left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .la-sale-bar__text,
  .la-sale-bar__text.is-active {
    transition: none;
  }
}

/* ---------- inline-Stile aus la-sale-bar.html.twig ---------- */
.la-sale-strip{position:relative;z-index:9}
            /* shop font (Marco: Myriad Pro Light; sizes, not weight, make the hierarchy) */
            .la-sale-bar{font-family:"Myriad Pro",var(--bs-body-font-family),sans-serif}
            .la-sale-bar .la-sale-bar__texts{font-weight:300;letter-spacing:.02em}
            .la-sale-bar .la-sale-bar__units{font-weight:300}
            /* one banner: small rotating line with the advantages below the main text */
            .la-sale-bar__stapel{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;max-width:100%}
            .la-sale-bar__usps{display:grid;max-width:100%;font-size:11px;font-weight:300;letter-spacing:.03em;line-height:1.2;opacity:.92}
            .la-sale-bar__usp{grid-row:1;grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
            .la-sale-bar__usp.is-active{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s linear 0s}
            @media (max-width:1007.98px){.la-sale-bar__usps{font-size:10.5px}.la-sale-bar__usp{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}html.la-ein-banner .la-sale-strip .la-sale-bar--topbar .la-sale-bar__link{gap:4px}}
            @media (min-width:1008px){.la-sale-bar__stapel{align-items:flex-end}.la-sale-bar__stapel .la-sale-bar__texts{text-align:right}.la-sale-bar__usps{font-size:12.5px;justify-items:end;text-align:right}}
            @media (prefers-reduced-motion:reduce){.la-sale-bar__usp,.la-sale-bar__usp.is-active{transition:none}}
            /* pause/play: quiet until used (Marco 11.11.2026); 60 % of the text colour keeps >= 3:1 on every
               banner background (advent #0a0a0b 7.3:1, BW image edge 7.3:1, fallback red 3.2:1, WCAG 1.4.11) */
            .la-sale-bar .la-sale-bar__pause{opacity:.6;background:transparent;border:0;box-shadow:none}
            .la-sale-bar .la-sale-bar__pause:hover,.la-sale-bar .la-sale-bar__pause:focus,.la-sale-bar .la-sale-bar__pause:focus-visible{opacity:1}
            .la-sale-strip.la-sale-bar-is-active{height:76px;background-color:var(--la-sale-bg,#b32020)}
            .la-sale-strip.la-sale-bar-is-active ~ .sk-kopf:not(.is-fest){top:120px}
            @media (min-width:1008px){.la-sale-strip.la-sale-bar-is-active{height:88px}.la-sale-strip.la-sale-bar-is-active ~ .sk-kopf:not(.is-fest){top:132px}}
            /* one banner (Black Week): the info bar lies transparent over the banner, only its country
               switch stays visible and clickable (right, vertically centred); header offset 76/88 */
            html.la-ein-banner .sk-top{position:absolute;top:0;left:0;right:0;height:88px;background:transparent;pointer-events:none;z-index:100}
            
            html.la-ein-banner .sk-top .sk-top__liste{display:none}
            html.la-ein-banner .sk-top .sk-land{pointer-events:auto;top:50%;transform:translateY(-50%)}
            html.la-ein-banner .la-sale-strip .la-sale-bar--topbar{padding-right:72px}
            /* narrow: the longer advantage texts get at most two lines, so text + countdown fit into 76px */
            @media (max-width:1007.98px){html.la-ein-banner .la-sale-strip .la-sale-bar--topbar .la-sale-bar__texts{font-size:12px;line-height:1.25}html.la-ein-banner .la-sale-strip .la-sale-bar--topbar .la-sale-bar__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}}
            html.la-ein-banner .la-sale-strip.la-sale-bar-is-active{height:88px}
            html.la-ein-banner .la-sale-strip.la-sale-bar-is-active ~ .sk-kopf:not(.is-fest){top:88px}
            @media (min-width:1008px){html.la-ein-banner .sk-top{height:88px}html.la-ein-banner .la-sale-strip .la-sale-bar--topbar{padding-left:150px;padding-right:150px}html.la-ein-banner .la-sale-strip.la-sale-bar-is-active ~ .sk-kopf:not(.is-fest){top:88px}}
.la-sale-bar--kal{justify-content:flex-start;text-align:left}
            .la-sale-bar--kal .la-sale-bar__link{position:relative;z-index:1;flex:1 1 auto;width:100%;max-width:1700px;margin:0 auto;flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
            .la-kal__links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
            .la-kal__z1{display:flex;align-items:baseline;gap:.62em;white-space:nowrap;font-size:13px;line-height:1;font-weight:300}
            .la-kal__logo{display:block;align-self:baseline;height:.7em;width:auto}
            .la-kal__ak{letter-spacing:.3em;text-transform:uppercase}
            .la-sale-bar--kal .la-sale-bar__texts,.la-sale-bar--topbar.la-sale-bar--kal .la-sale-bar__texts{font-size:19px;font-weight:300;letter-spacing:.01em;line-height:1.2;text-align:left}
            .la-kal__cta{white-space:nowrap;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid currentColor}
            .la-kal__cta::after{content:" \2192";letter-spacing:0}
            .la-sale-bar--kal a.la-sale-bar__link:hover .la-sale-bar__texts{text-decoration:none}
            .la-sale-bar--kal a.la-sale-bar__link:hover .la-kal__cta{border-bottom-width:2px;padding-bottom:3px}
            .la-kal__sterne{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
            .la-sale-bar--kal.la-sale-bar--topbar{padding:0 32px}
            @media (min-width:768px){.la-sale-bar--kal.la-sale-bar--topbar{padding:0 45px}}
            @media (min-width:1366px){.la-sale-bar--kal.la-sale-bar--topbar{padding:0 80px}}
            .la-sale-bar--kal.la-sale-bar--topbar .la-sale-bar__pause{left:2px}
            .la-sale-bar--kal.la-sale-bar--box{padding:12px 16px 12px 40px;min-height:76px}
            .la-sale-bar--kal.la-sale-bar--box .la-sale-bar__link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"z1 cta" "satz satz";align-items:baseline;column-gap:12px;row-gap:7px}
            .la-sale-bar--kal.la-sale-bar--box .la-kal__links{display:contents}
            .la-sale-bar--kal.la-sale-bar--box .la-kal__z1{grid-area:z1;font-size:10.5px}
            .la-sale-bar--kal.la-sale-bar--box .la-sale-bar__texts{grid-area:satz;font-size:14px}
            .la-sale-bar--kal.la-sale-bar--box .la-kal__cta{grid-area:cta;font-size:9.5px;letter-spacing:.18em;padding-bottom:3px}
            @media (max-width:1007.98px){
            .la-sale-bar--kal.la-sale-bar--topbar .la-sale-bar__link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"z1 cta" "satz satz";align-items:baseline;column-gap:12px;row-gap:7px}
            .la-sale-bar--kal.la-sale-bar--topbar .la-kal__links{display:contents}
            .la-sale-bar--kal.la-sale-bar--topbar .la-kal__z1{grid-area:z1;font-size:10.5px}
            .la-sale-bar--kal.la-sale-bar--topbar .la-sale-bar__texts{grid-area:satz;font-size:14px}
            .la-sale-bar--kal.la-sale-bar--topbar .la-kal__cta{grid-area:cta;font-size:9.5px;letter-spacing:.18em;padding-bottom:3px}
            }

/* ---------- Anpassung Landings (LP): Strip sitzt zwischen .sk-top (Infoleiste) und .sk-kopf ---------- */
.la-sale-strip { --bs-body-font-family:Inter, system-ui; font-family:"Myriad Pro", Inter, system-ui, sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; }
.la-sale-strip *, .la-sale-strip *::before, .la-sale-strip *::after { box-sizing:border-box; }
.la-sale-strip .visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
/* Farbverlauf des Kopfs beginnt unter dem Banner (sonst würde er Banner/Bild abdunkeln – im Shop auch nicht) */
.la-sale-strip.la-sale-bar-is-active ~ .sk-kopf::before { top:0; }
@media (min-width:1025px){
  body:has(.la-sale-strip.la-sale-bar-is-active) .ntl.lb .lb-hero .lb-hero__link { height:min(56.25vw, calc(100svh - 132px)); }
  html.la-ein-banner body:has(.la-sale-strip.la-sale-bar-is-active) .ntl.lb .lb-hero .lb-hero__link { height:min(56.25vw, calc(100svh - 88px)); }
}