/* lusweb: custom styles @2024.1.2 */
/* ! these styles are inherited in luswebw and luswebwaa */
@charset 'iso-8859-15';

/* ----- vars ----- */
:root {
  --lusDiscountBG: #D82424;
  --lusEbookProtectionFG: #ff0000;
  --lusTagBG: #B8CFA8CC;
  --lusTagHoverBG: #B8CFA8;
  --lusSpacerFG: #CED2D2;
  --lusArticleBG: #FFFFFF87;
  --lusAnimationButtonBG: #005038;
  --lusBannerHeadingFG: #2B2B2B;
  --lusBannerHeadingBG: rgba(255, 255, 255, 0.89);
  --lusRankingBG: #F2F0ED;
}

/* ----- custom top bar (LUS-6887) ----- */
header .screen .row2::before {
  border-bottom: 0.1rem solid var(--headerBorderColor);
}
header .screen .row2 .leftElement .topBarNavigation nav ul {
  gap: 0.6rem; /* relation #1 */
}
header .screen .row2 .leftElement .topBarNavigation nav ul > li:not(:last-child) a::after {
  content: '|';
  margin-left: 0.6rem; /* relation #1 */
}
header .screen .row2 .centerElement .topBarContribution .articleHtmlText .value > span a:hover,
header .screen .row2 .centerElement .topBarContribution .articleHtmlText .value > span a:focus,
header .screen .row2 .centerElement .topBarContribution .articleHtmlText .value > span a:active,
header .screen .row2 .centerElement .topBarContribution .articleHtmlText .value > span a:hover [class*='icon-']::before,
header .screen .row2 .centerElement .topBarContribution .articleHtmlText .value > span a:focus [class*='icon-']::before,
header .screen .row2 .centerElement .topBarContribution .articleHtmlText .value > span a:active [class*='icon-']::before {
  color: var(--topbarActiveColor);
}
header .screen .row2 .rightElement .topBarContribution .articleHtmlText .value > span a.secret[href="#"] {
  visibility: hidden !important; /* prevent CLS */
  display: inline-flex !important;
  width: 16.5rem;
}
header .screen .row2 .rightElement .topBarContribution a + a {
  margin-left: 1.2rem; /* relation #1 */
}

/* ----- logo: optimize for all steps ----- */
.headerLogo .logo {
  margin-right: 0;
}
@media (min-width: 320px) {
  .headerLogo {
    width: 6.8rem;
  }
  .headerLogo .logo img {
    object-position: 0 0.3rem;
    object-fit: cover;
  }
}
@media (min-width: 340px) {
  .headerLogo {
    width: 8.8rem;
  }
  .headerLogo .logo img {
    object-position: 0 0.2rem;
  }
}
@media (min-width: 360px) {
  .headerLogo {
    width: 10.8rem;
  }
  .headerLogo .logo img {
    object-position: 0 -0.3rem;
  }
}
@media (min-width: 370px) {
  .headerLogo {
    width: 11.8rem;
  }
  .headerLogo .logo img {
    object-position: 0 -0.5rem;
  }
}
@media (min-width: 400px) {
  .headerLogo {
    width: 14rem;
  }
  .headerLogo .logo img {
    object-position: 0 -1.1rem;
  }
}
@media (min-width: 440px) {
  .headerLogo {
    width: 16rem;
  }
  .headerLogo .logo img {
    object-position: 0 -1.5rem;
  }
}
@media (min-width: 481px) {
  .headerLogo .logo {
    margin-right: 0.8rem;
  }
  .headerLogo .logo img {
    object-position: 0 -1.3rem;
  }
}
@media (min-width: 769px) {
  .headerLogo {
    width: 12rem;
  }
  .headerLogo .logo img {
    object-position: 0 -1rem;
  }
  header .screen .row3 {
    grid-template-columns: 13.2rem auto 19.2rem; /* value of first column overwritten */
  }
}
@media (min-width: 1025px) {
  .headerLogo {
    width: 25.2rem;
  }
  .headerLogo .logo {
    margin-right: 4rem;
  }
  .headerLogo .logo img {
    object-position: 0 0.4rem;
  }
  header.collapsed .headerLogo .logo img {
    object-position: 0 0.1rem;
  }
  header .screen .row3 {
    grid-template-columns: 25.2rem auto 30rem; /* back to beeline-default values */
  }
}

/* ----- navigation ----- */
nav.columnNavigation li ul {
  transition-delay: 0.01s;
}
header nav.flyoutNavigation > ul > li > a,
header nav.flyoutNavigation > ul > li > div {
  transition-delay: 0s;
  transition-duration: 0.2s;
}

/* ----- columns spacer in flyout ----- */
.columns .rack > div .verticalSpacer {
  height: 6.3rem;
}

/* ----- animations ----- */
.animation .panel .navigation .icon-prev.isEnabled:active,
.animation .panel .navigation .icon-next.isEnabled:active {
  background-color: var(--colorDefault2); /* green */
}

/* ----- elements ----- */
table {
  border-bottom: none;
}
table td {
  border-top: none;
}

/* ----- articles ----- */

/* articleDetail, e.g. eventDetail */
.articleDetail .overview .articlePicture .value {
	display: inline-block;
}

/* LUS teaser/banner with green button and white bar via cArticleStyleType */
.articleItem.teaserItem.teaserLUSBanner .sectionTexts {
  justify-content: space-between;
}
.articleItem.teaserItem.teaserLUSBanner .sectionTexts .sectionHeading {
  margin-top: 1.8rem;
  color: var(--lusBannerHeadingFG);
  background-color: var(--lusBannerHeadingBG);
  word-wrap: break-word;
  width: 50%;
  text-align: center;
  transform: translateX(-2.8rem);
}
.articleItem.teaserItem.teaserLUSBanner .sectionTexts .sectionHeading .articleHeading {
  font-size: 2.8rem !important;
}
.articleItem.teaserItem.teaserLUSBanner .sectionTexts .sectionLink {
  align-self: flex-end;
  margin-bottom: 1.8rem;
  transform: translateX(2.8rem);
}
.articleItem.teaserItem.teaserLUSBanner .sectionTexts .sectionLink .articleLink {
  color: var(--colorWhite);
  background-color: var(--lusAnimationButtonBG);
  border-color: var(--lusAnimationButtonBG);
  border-width: 0.2rem;
  transition-duration: 0.4s;
}
.articleItem.teaserItem.teaserLUSBanner .sectionTexts .sectionLink .articleLink:hover {
  color: var(--colorBlack);
	background-color: var(--colorWhite);
}

/*
background image for kontainer (LUS-6959)
image size in textArticle: XS-M: 580x460 / L+: 1800x480
*/
.lusCustomBgImage {
  position: relative;
}
.lusCustomBgImage .articleDetail.text {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -50vw;
  right: -50vw;
  z-index: -1;
}
.lusCustomBgImage .articleDetail.text > div {
  display: block;
  height: 100%;
}
.lusCustomBgImage .articleDetail.text > div .articleHeader {
  display: block;
  height: 100%;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.lusCustomBgImage .articleDetail.text .articlePicture {
  position: absolute;
  left: -50vw;
  right: -50vw;
}
.teaser .lusCustomBgImage .articleDetail.text .articlePicture {
  width: auto;
}
.lusCustomBgImage .articleDetail.text .articlePicture .value::before,
.lusCustomBgImage .articleDetail.text .articlePicture .value a::before {
  box-shadow: none;
}
.lusCustomBgImage .articleDetail.text + .animation {
  margin-top: 0;
}
.lusCustomBgImage .articleDetail.text + .animation .positions {
  margin-bottom: 0.8rem;
}

/* ----- biblio elements ----- */

/* discount */
.biblioCover .description {
	box-shadow: none;
	color: var(--colorWhite);
  background-color: var(--lusDiscountBG);
  border-color: var(--lusDiscountBG);
	opacity: 1;
}

/* biblioTags (usage of !important to prevent overwriting all 5 color classes) */
.biblioTag .value > span a .gfx::after {
  background: var(--lusTagBG) !important;
}
.biblioTag .value > span a .text {
  background-color: var(--lusTagBG) !important;
}
.biblioTag .value > span a:hover .gfx::after {
  background: var(--lusTagHoverBG) !important;
}
.biblioTag .value > span a:hover .text {
  background-color: var(--lusTagHoverBG) !important;
}

/* protection hint link */
.biblioProduct .texts .biblioFormatNote .biblioFormatProtection,
.biblioFormatProtection a {
	color: var(--lusEbookProtectionFG);
	font-weight: 600;
}

/* ----- biblio items ----- */
.biblioItem.coverItem .gridArticle {
	background-color: var(--lusArticleBG);
	background-image: linear-gradient(to top, var(--lusArticleBG), var(--lusArticleBG));
}

/* ----- biblioDetail ----- */

/* custom ranking style */
.biblio.detail [class^='ranking-'] {
  background-color: var(--lusRankingBG);
  width: max-content;
  padding: 0.4rem 1.5rem;
}

/* undisplay ranking for ptc12 (LUS-7133) */
.biblio.detail [class^='ranking-'].ptc12 {
  display: none;
}

/* undisplay moreMedia in XS+S (LUS-6846) */
.biblio.detail .sectionCover .moreMedia .icon-zoom {
  display: none;
}
@media (min-width: 481px) {
  .biblio.detail .sectionCover .moreMedia .icon-zoom {
    display: inline-block;
  }
}

/* display full text of relatedArticles.textItem in biblioDetail (LUS-6843) */
.biblio.detail .relatedArticles .articleItem.alternativeItem.textArticle .sectionDesc .articleText {
  -webkit-line-clamp: unset;
}

/* openingHours wider in dialogStoreAvilability (LUS-6888) */
@media screen and (min-width: 1025px), print and (min-width: 300px) {
  .dialogAvailability .storeAvailability .headings .heading.openingHours,
  .dialogAvailability .storeAvailability .headings .columnOpeningHours,
  .dialogAvailability .storeAvailability .item .heading.openingHours,
  .dialogAvailability .storeAvailability .item .columnOpeningHours {
    width: 27rem;
  }
  .dialogAvailability .storeAvailability .item .columnStore {
    word-break: break-word;
  }
}

/* ----- footer ----- */
footer .column.links .actions a {
  transition: all 0.3s;
}
footer .column.links .actions a:hover {
  margin-left: 0.3rem;
}
footer .column.social [class*='icon-'] {
  transform: scale(1.4);
}

/* ----- LUS custom CSS classes used in CMS ----- */
.spacer {
	margin: 4rem 0 4rem 0;
	border-top: 0.1rem solid var(--lusSpacerFG);
}
.spacernoline {
	margin: 4rem 0 4rem 0;
	border-top: none;
}

/* custom external newsletter signup (LUS-7244) */
.customExternalNewsletterSignup {
  margin-bottom: 3.2rem;
}
.customExternalNewsletterSignup form {
  margin-top: 1.6rem;
}
.customExternalNewsletterSignup form > div > div {
  margin-top: 2rem; /* fields */
  position: relative;
}
.customExternalNewsletterSignup form > div > div label {
  position: absolute;
  left: 0.4rem;
  padding: 0 0.2rem 0 0.2rem;
  top: -0.9rem;
  z-index: 2;
  border-radius: 0.2rem;
  color: var(--colorForeground1);
  font-weight: 350;
  line-height: 1;
  background-color: var(--colorWhite);
}
.customExternalNewsletterSignup button[type="submit"] {
  margin-top: 2rem;
  padding: 0.8rem 2.4rem;
  border-radius: 0.2rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--button1TextColor);
  background-color: var(--button1BgColor);
}
.customExternalNewsletterSignup button[type="submit"]:hover {
  color: var(--button1TextActiveColor);
  background-color: var(--button1BgActiveColor);
}

/* ---------- BPM MAINTAINED FIXES ---------- */

/* /themen: detail image fullwidth */
.teaser .articleDetail.text .articlePicture {
  width: 100%;
}

/* flyout: textItem as sibling of column */
nav.flyoutNavigation .columns .rack .articleDetail.text {
  margin: 0 0.8rem 0 0.8rem;
  padding: 0.8rem 0 1.6rem 0;
}

/* flyout: columnArticle as sibling of column */
nav.flyoutNavigation .columns .rack .articleItem.listItem.onlyTextItem.textArticle .articleHeading {
  margin-bottom: 1.6rem;
  font-size: 3.4rem;
}

/* pattern used by customer in lusweb - remove unwanted default-styles */
.bpmMainHasTwoBanners .articleDetail.text:first-child {
  margin-bottom: 0;
}
.bpmMainHasTwoBanners .articleDetail.text:first-child + .animation.articleAnimation {
  margin-top: 0;
}
.bpmMainHasTwoBanners .articleDetail.text:first-child + .articleDetail.text {
  border-top: none;
  padding-top: 0;
}

/* pattern used by customer in luswebwaa - remove unwanted default-styles */
.bpmTeaserHasTwoBanners .articleDetail.text:first-child {
  margin-bottom: 0.8rem;
}
.bpmTeaserHasTwoBanners .articleDetail.text:first-child + .animation.articleAnimation {
  margin-top: 0;
}

/* bgElement in teaser area header clickable (can be removed with BEE-34707) */
.teaser .backgroundElement > :first-child, main:only-child .backgroundElement > :first-child {
  z-index: -1;
}

/* biblioSearch.rounded: remove transparency on non-hover (LUS-7394) - can be removed with 2024.1.3 or + */
@media screen and (min-width: 769px), print and (min-width: 300px) {
  .biblioSearch.rounded .formSearch {
    background-color: var(--colorWhite);
  }
}