@charset "UTF-8";
/* ---------------------------- */
/* --- vendor-prefix mixins --- */
/* ---------------------------- */
/* --------------- */
/* --- helpers --- */
/* --------------- */
/* === flip animation ===
   This effect needs the following elements:
   * flip-container: the container the mixin is applied to. Element that contains all the other elements; on this element the perspective
     property is set and the actual animation is triggered (by applying another class, on hover or however ... )
   * flipper: element that is flipped; this contains an element that serves as the front of the flipped thingy.
   * front: element that serves as the front of the flipped thingy
   * back: element that serves as the back of the flipped thingy. In the current implementation this is realized by an after-pseudoelement on
     the flipper-element. This could also be a separate element

   This mixin up to now is not too generic to keep it simple right now and mainly serves to make the CSS where it is called less cluttered.
   Can be made more generic as soon as needed.
*/
/* === breakpoints === */
.clsy-c-loading-indicator, .clsy-c-btn.clsy-c-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clsy-c-loading-indicator::after, .clsy-c-btn.clsy-c-loading-indicator::after {
  content: " ";
  box-sizing: border-box;
  display: block;
  width: var(--loading-indicator-width);
  height: var(--loading-indicator-width);
  min-width: auto;
  min-height: auto;
  margin: 1px;
  background-color: transparent;
  border-radius: 50%;
  border: var(--loading-indicator-line-thickness) solid;
  border-color: var(--emphasized-color) transparent var(--emphasized-color) transparent;
  animation: rotate-360-deg 1.2s linear infinite;
}

.clsy-c-message {
  --animation-duration-unitless: 200;
  --animation-duration: calc(var(--animation-duration-unitless) * 1ms);
  --mask-icon-width: calc(24px + .8em);
  --mask-icon-height: 100%;
  --mask-icon-color: var(--icon-color-messages);
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--mask-icon-width);
  line-height: var(--smaller-line-height);
  background-color: var(--cardlike-item-bg-color);
  border-style: solid;
  border-color: var(--message-class-color) !important;
  box-shadow: 0 -1px 0 0 var(--contentsection-border-color), 0 3px 0 0 var(--contentsection-border-color);
  margin: .8em auto;
  max-width: 80ch;
  border-width: 0 5px 0 var(--mask-icon-width);
  transition: opacity var(--animation-duration) ease-out, transform var(--animation-duration) var(--bouncy-transition-function);
  transform: scaleY(1);
  opacity: 1;
}

.clsy-c-message::before {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
  position: absolute;
  top: 0;
  left: calc(-1 * var(--mask-icon-width));
  bottom: 0;
}

.clsy-c-message--info {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/belck9g/image/pwa/icons/icon-message-info.svg);
  --message-class-color: var(--message-color-info);
}

.clsy-c-message--warning {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/86ckdgje/image/pwa/icons/icon-message-warning.svg);
  --message-class-color: var(--message-color-warning);
}

.clsy-c-message--error {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/ihhdd7kg/image/pwa/icons/icon-message-error.svg);
  --message-class-color: var(--message-color-error);
  --mask-icon-color: var(--icon-color-messages--error);
}

.clsy-c-message--success {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/l9gccbbe/image/pwa/icons/icon-message-success.svg);
  --message-class-color: var(--message-color-success);
}

.clsy-c-message:has(.clsy-c-message__close) {
  display: flex;
  gap: var(--button-gutter);
  align-items: flex-start;
}

.clsy-c-message--hidden {
  opacity: 0;
  transform: scaleY(0);
}

.clsy-c-message__close {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/ifjbbllb/image/pwa/icons/icon-close.svg);
  --mask-icon-color: var(--standard-link-color);
  margin-left: auto;
}

.clsy-c-message > div:first-child {
  padding: var(--standard-content-padding-vertical) var(--fixed-content-padding-horizontal);
}

.clsy-c-message ul {
  margin: .4em 0 0 .4em;
  padding: 0;
  list-style-type: none;
}

.clsy-c-message ul > li {
  position: relative;
  margin: 0;
  padding: .2em 0 .2em .6em;
}

.clsy-c-message ul > li::before {
  content: "›";
  position: absolute;
  top: .18em;
  left: 0;
  font-weight: bold;
  color: var(--less-important-text-color);
}

/* === unread items indicator === */
.clsy-count-badge {
  --badge-diameter: 1.9em;
  display: inline-block;
  min-width: var(--badge-diameter);
  height: var(--badge-diameter);
  line-height: 1.7em;
  color: var(--emphasized-background-text-color);
  font-size: var(--fontsize-small);
  font-weight: bold;
  text-align: center;
  background-color: var(--emphasized-color);
  border: 2px solid var(--standard-bg-color);
  border-radius: calc(var(--badge-diameter) / 2);
  transform: scale(1);
  transition: transform 300ms var(--very-bouncy-transition-function), visibility 300ms;
}

.clsy-count-badge--hidden {
  visibility: hidden;
  transform: scale(0);
}

.clsy-count-badge--nav-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
}

/* === home === */
.clsy-main-home {
  --container-gutter: 1.4rem;
  padding-top: var(--search-header-height);
}

.clsy-main-home .clsy-webpush-request {
  margin-bottom: var(--standard-content-padding-vertical);
}

@media (min-width: 700px) {
  .clsy-main-home {
    padding-top: calc(var(--search-header-height) + var(--container-gutter));
  }
}

/* === home - categories === */
.clsy-c-cat {
  --mask-icon-width: 28px;
  --mask-icon-height: 28px;
  --icon-right-gap: 12px;
  border-bottom: var(--standard-border-style);
}

.clsy-c-cat:first-of-type {
  border-top: var(--standard-border-style);
}

#clsy-home-categories-more .clsy-c-cat:first-of-type {
  border-top: none;
}

.clsy-c-collapsible-more-block__body .clsy-c-cat:first-of-type {
  border-top: none;
}

.clsy-c-cat__sub {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.clsy-c-cat__sub .clsy-c-blocklink--padding-hor {
  padding-left: calc(var(--mask-icon-width) + var(--icon-right-gap));
  line-height: var(--smaller-line-height);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

[class^="clsy-c-cat__root-link"] {
  display: flex;
  gap: var(--icon-right-gap);
  width: 100%;
  padding-left: var(--blocklink-padding-horizontal);
  padding-right: var(--blocklink-padding-horizontal);
  color: var(--standard-text-color);
  text-align: left;
  background-color: transparent;
  border: none;
  position: relative;
}

[class^="clsy-c-cat__root-link"]:hover, [class^="clsy-c-cat__root-link"]:focus-visible {
  background-color: var(--link-hover-bg-color);
}

[class^="clsy-c-cat__root-link"] span {
  line-height: var(--smaller-line-height);
}

[class^="clsy-c-cat__root-link"]::before {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
  flex: none;
}

/* === home - latest adverts === */
.clsy-c-latest-adverts {
  --minimum-link-width: 38ch;
  margin: 0 calc(var(--standard-content-padding-horizontal) * -1) 1em;
}

.clsy-c-latest-advert:focus-visible {
  outline-offset: calc(var(--standard-outline-width) * -1);
  border-radius: calc(2 * var(--standard-outline-border-radius));
}

.clsy-c-latest-advert__title {
  flex: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.clsy-c-latest-advert__date {
  color: var(--less-important-text-color);
}

.clsy-c-home-gallery .clsy-c-carousel {
  --carousel-container-height: 295px;
  --carousel-container-bottom-margin: -1.5rem;
  --carousel-image-aspect-ratio: calc( var(--thumbnail-aspect-ratio-y) / var(--thumbnail-aspect-ratio-x) * 100%);
  --carousel-item-subject-fontsize: var(--fontsize-small);
  --carousel-item-subject-lines: 2;
  --carousel-number-of-items: 1;
}

@media (max-width: 374px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-item-subject-fontsize: var(--fontsize-xsmall);
  }
}

@media (min-width: 185px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 2;
  }
}

@media (min-width: 355px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 3;
  }
}

@media (min-width: 525px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 4;
  }
}

@media (min-width: 700px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 3;
  }
}

@media (min-width: 810px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 4;
  }
}

@media (min-width: 1250px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 5;
  }
}

@media (min-width: 1650px) {
  .clsy-c-home-gallery .clsy-c-carousel {
    --carousel-number-of-items: 6;
  }
}

.clsy-c-home-gallery .clsy-c-carousel__item {
  border: solid var(--standard-border-color);
  border-width: 1px 1px 3px;
  border-radius: var(--standard-border-radius);
}

.clsy-c-home-gallery .clsy-c-carousel__item-subject {
  color: var(--standard-text-color);
}

.clsy-home-marktlet-wrapper-top-multicol {
  display: grid;
  grid-template-columns: 2fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: var(--standard-column-gutter);
  align-items: stretch;
}

.clsy-home-marktlet-wrapper-top-multicol .clsy-marktlet-wrapper:has(> a:focus-visible) {
  outline: var(--standard-outline-style);
  outline-offset: var(--standard-outline-offset);
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_RIGHT_PWA {
  display: none;
  padding: 0;
  overflow: hidden;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_RIGHT_PWA > :first-child:not(script) {
  display: flex;
  width: 100%;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_RIGHT_PWA > :first-child:not(script) > div {
  display: flex;
  width: 100%;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_RIGHT_PWA img {
  height: auto;
}

@media (min-width: 700px) {
  .clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_RIGHT_PWA {
    display: flex;
  }
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE {
  position: relative;
  overflow: auto;
  padding-top: 50%;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA > :first-child:not(script),
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE > :first-child:not(script) {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA > :first-child:not(script) div:first-child:last-child,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE > :first-child:not(script) div:first-child:last-child {
  display: flex;
  height: 100%;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA img,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE img {
  height: auto;
  width: auto;
  max-height: 100%;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA .markt_cms_sliderDecorator > li div.mamo_marktlet_slider_contentwrapper,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA .markt_cms_slider > li div.mamo_marktlet_slider_contentwrapper,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE .markt_cms_sliderDecorator > li div.mamo_marktlet_slider_contentwrapper,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE .markt_cms_slider > li div.mamo_marktlet_slider_contentwrapper {
  position: relative;
  display: block;
  padding-top: 50%;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA .markt_cms_sliderDecorator > li div.mamo_marktlet_slider_contentwrapper a,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA .markt_cms_slider > li div.mamo_marktlet_slider_contentwrapper a,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE .markt_cms_sliderDecorator > li div.mamo_marktlet_slider_contentwrapper a,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE .markt_cms_slider > li div.mamo_marktlet_slider_contentwrapper a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA .markt_cms_sliderDecorator > li div.mamo_marktlet_slider_contentwrapper a > img,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_HOME_TOP_LEFT_PWA .markt_cms_slider > li div.mamo_marktlet_slider_contentwrapper a > img,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE .markt_cms_sliderDecorator > li div.mamo_marktlet_slider_contentwrapper a > img,
.clsy-home-marktlet-wrapper-top-multicol #markt_marktletWrapper_MOBILE_HOME_TOP_MIDDLE .markt_cms_slider > li div.mamo_marktlet_slider_contentwrapper a > img {
  display: block;
  margin: 0 auto;
  height: auto;
}

#markt_marktletWrapper_HOME_TOP_MOBILE {
  display: flex;
  padding: 0;
  overflow: hidden;
}

#markt_marktletWrapper_HOME_TOP_MOBILE > :first-child:not(script) {
  display: flex;
}

#markt_marktletWrapper_HOME_TOP_MOBILE > :first-child:not(script) > div {
  display: flex;
}

#markt_marktletWrapper_HOME_TOP_MOBILE > a:first-child:focus-visible {
  outline: var(--standard-outline-style);
  outline-offset: -2px;
  border-radius: var(--stronger-border-radius);
}

#markt_marktletWrapper_HOME_TOP_MOBILE > a:first-child:focus-visible > picture, #markt_marktletWrapper_HOME_TOP_MOBILE > a:first-child:focus-visible > img {
  overflow: hidden;
  border-radius: var(--stronger-border-radius);
}

#markt_marktletWrapper_HOME_TOP_MOBILE img {
  width: auto;
  height: auto;
}

#markt_marktletWrapper_HOME_SEO_FOOTER_ABOVE {
  display: block;
}

#markt_marktletWrapper_HOME_SEO_FOOTER_ABOVE .clsy-cms-article-teasers + a.markt_cmsCustom_inlineBlocklink {
  margin-left: var(--fixed-content-padding-horizontal);
}

.clsy-home-footer {
  padding: var(--standard-content-padding-vertical) var(--fixed-content-padding-horizontal);
  font-size: var(--fontsize-small);
}

.clsy-home-footer h1 {
  font-size: var(--fontsize-xlarge);
}

.clsy-home-footer h2 {
  font-size: var(--fontsize-large);
}

.clsy-home {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "messages" "marktlet-top" "gallery" "advsection-below-gallery" "categories" "advsection-bottom" "latest-items" "advsection-below-categories" "advsection-morebottom" "marktlet-above-footer" "footer" "advsection-below-footer";
}

.clsy-home #clsy-clsds-cont-home_top_sticky.clsy-c-advsection {
  padding: 0;
}

.clsy-home #clsy-home-gallery {
  padding-bottom: 1.3rem;
}

@media (min-width: 700px) {
  .clsy-home {
    grid-template-areas: "categories messages" "categories marktlet-top" "categories gallery" "categories advsection-bottom" "categories latest-items" "categories advsection-morebottom" "categories marktlet-above-footer" "categories footer" "categories advsection-below-footer" "page-footer page-footer";
    grid-column-gap: var(--container-gutter);
    grid-template-columns: minmax(3em, 1fr) minmax(6em, 2fr);
    grid-template-rows: repeat(7, min-content) 1fr auto;
  }
  .clsy-home > * {
    margin-bottom: var(--container-gutter);
  }
  .clsy-home .clsy-contentsection + .clsy-advsection-outer,
.clsy-home .clsy-contentsection + .clsy-advsection {
    margin-top: 0;
  }
  .clsy-home #clsy-home-gallery,
.clsy-home #clsy-home-categories,
.clsy-home #clsy-home-latest-items,
.clsy-home #clsy-erotic-home-gallery {
    --standard-content-padding-horizontal: var(--fixed-content-padding-horizontal);
  }
  .clsy-home .clsy-c-messages {
    padding: 0;
  }
  .clsy-home .clsy-c-advsection {
    background-color: transparent;
  }
  .clsy-home #clsy-home-categories-more.clsy-c-collapsibleelement--collapsed > .clsy-c-collapsibleelement__body {
    display: block;
  }
  .clsy-home #clsy-home-categories-more.clsy-c-collapsibleelement--collapsed > .clsy-c-collapsibleelement__header {
    display: none;
  }
}

.clsy-home .clsy-c-messages {
  grid-area: messages;
  padding: 0 var(--fixed-content-padding-horizontal);
}

.clsy-home #clsy-home-marktletTop {
  grid-area: marktlet-top;
}

.clsy-home #clsy-home-gallery {
  grid-area: gallery;
}

.clsy-home #clsy-clsds-cont-home_mobile_below_galerie {
  grid-area: advsection-below-gallery;
}

.clsy-home #clsy-home-categories-block {
  grid-area: categories;
  align-self: start;
}

.clsy-home #clsy-advsection-outer--home-bottom {
  grid-area: advsection-bottom;
}

.clsy-home #clsy-advsection-outer--home-morebottom {
  grid-area: advsection-morebottom;
}

.clsy-home #clsy-home-latest-items {
  grid-area: latest-items;
}

.clsy-home #markt_marktletWrapper_HOME_SEO_FOOTER_ABOVE {
  grid-area: marktlet-above-footer;
}

.clsy-home #clsy-home-footer {
  grid-area: footer;
}

.clsy-home #clsy-clsds-cont-home_footer {
  grid-area: advsection-below-footer;
}

.clsy-home .clsy-c-footer {
  grid-area: page-footer;
}

.clsy-home #clsy-clsds-cont-home_below_newest_adverts {
  grid-area: advsection-morebottom;
}