/**
 * @version 25.06.2025
 *
 * Skin "mobile"
 *
 * mobile/css/cms_lists.css
 */

 /**** CMS List: 19.05.2025 Moved from styles.css ****/
 article.cms-list {
	--list-items-height: 25.625rem; /* 410px */
}
/* :root[data-font-size="big"] article.cms-list {
	--list-items-height: 20.625rem;
} */
article.cms-list .tns-outer.has-container-center {
	--tns-controls-height: var(--list-items-height);
}

 /**** Cms List A ****/
.ym-wrapper.wide.Cms_List_A {
	background: var(--theme-color-dark-b1);
}
.ym-wrapper.wide.Cms_List_A .tns-slider > .tns-item {
	padding-right: 2%;
}

article.cms-list.Cms_List_A {
	--list-items-height: clamp(410px, 25.625rem, 515px);
	margin: 0 auto;
    padding: 45px 0;
	/*display: table;*/
	max-width: var(--wrapper-max-width);
}
article.cms-list.Cms_List_A > .title {
	font-size: 1.625rem;
	font-weight: 600;
	text-align: left;
    padding: 0;
}

article.cms-list.Cms_List_A > .description {
	font-size: 14px;
	padding: 10px 0;
}
/*
article.cms-list.Cms_List_A > .items {

}
*/
article.cms-list.Cms_List_A > .items article.cms-list-item {
	/* dimensions */
	--list-item-width: 100%;
	--picture-height: 180px;
	--icon-height: 40px;
	--title-height: 1.75em;

	/*--text-height: calc(var(--info-height) - var(--icon-height) - 40px);*/
	--text-height: auto;

	/* paddings */
	--info-padding: 0.625rem 1.25rem;

	/* colors */
	--info-background-color: var(--theme-color-dark);
	--list-item-border: 0px solid var(--info-background-color);
	--info-foreground-color: var(--theme-color-dark-opposite);

	/* fonts */
	--title-font-size: 1rem;
	--title-font-weight: 600;
	--description-font-size: 0.8125rem;
	--description-font-weight: 400;
}

article.cms-list.Cms_List_A > .items {
	margin: 55px 0px 0 -7px;
}

article.cms-list.Cms_List_A > .items article.cms-list-item {
	border-radius: 4px;
}

article.cms-list.Cms_List_A > .items article.cms-list-item > .picture {
	background: var(--theme-color-dark-opposite);
	background: #fafafa; /* 15.09.2022 because of pictures background only */
}

article.cms-list.Cms_List_A > .items article.cms-list-item > .info {
	border-top: 1px solid var(--theme-color-bright);
	padding: 20px 20px 20px;
}

article.cms-list.Cms_List_A > .items article.cms-list-item > .info > .icon {
	display: block;
}
article.cms-list.Cms_List_A > .items article.cms-list-item > .info > .icon .fa-duotone.fa-circle-check {
	--fa-primary-color: var(--theme-color-white);
	--fa-secondary-color: var(--theme-color-bright);
	font-size: calc(var(--icon-height));
}

article.cms-list.Cms_List_A > .items article.cms-list-item > .info > .text {
	padding: 15px 0 0 0;
}

article.cms-list.Cms_List_A > .items article.cms-list-item > .info > .text > .title {
    font-size: 1rem;
    font-weight: 600;
}

article.cms-list.Cms_List_A > .items article.cms-list-item > .info > .text > .description {
    font-size: 0.8125rem;
    hyphens: auto;
    text-align: justify;
    margin: 0 0 0px 0;
	line-height: 1.25em;
}

/**** Cms List B ****/
.ym-wrapper.wide.Cms_List_B {
	background: var(--theme-color-dark);
}
.ym-wrapper.wide.Cms_List_B .tns-slider > .tns-item {
	padding-right: 2%;
}
article.cms-list.Cms_List_B {
	--list-items-height: clamp(413px, 25.8125rem, 500px);
	margin: 0 auto;
    padding: 45px 0;
	max-width: var(--wrapper-max-width);
	/* height: 620px; */
}

article.cms-list.Cms_List_B .tns-outer > .tns-controls [aria-controls] {
	color: var(--theme-color-dark-opposite);
}
article.cms-list.Cms_List_B .tns-outer > .tns-controls [disabled] {
	color: var(--theme-color-dark);
}

article.cms-list.Cms_List_B > .title {
	font-size: 1.625rem;
	font-weight: 600;
	text-align: left;
	padding: 0;
	color: var(--theme-color-bright);
}

:root[data-theme='contrast'] article.cms-list.Cms_List_B > .title {
	color: var(--theme-color-dark-opposite);
}

article.cms-list.Cms_List_B > .description {
	font-size: 0.875rem;
	padding: 10px 0;
	color: var(--theme-color-dark-opposite);
}
/*
article.cms-list.Cms_List_B > .items {

}
*/
article.cms-list.Cms_List_B > .items article.cms-list-item {
	/* dimensions */
	/*--list-item-height: var(--list-items-height);*/
	--list-item-width: 100%;
	--picture-height: 220px;
	--icon-height: 50px;
	--title-height: 1.75em;

	--text-height: calc(var(--info-height) - var(--icon-height) - 0px);
	/*--text-height: auto;*/

	/* paddings */
	--info-padding: 0.625rem 1.25rem;

	/* colors */
	--info-background-color: var(--theme-color-dark-b1);
	--list-item-border: 0px solid var(--info-background-color);
	--info-foreground-color: var(--theme-color-dark-b1-opposite);

	/* fonts */
	--title-font-size: 16px;
	--title-font-weight: 600;
	--description-font-size: 13px;
	--description-font-weight: 400;
}

article.cms-list.Cms_List_B > .items {
	margin: 55px 0px 0 -7px;
}

article.cms-list.Cms_List_B > .items article.cms-list-item {
	border-radius: 4px;
}

article.cms-list.Cms_List_B > .items article.cms-list-item > .picture {
	background: var(--theme-color-dark-opposite);
}

article.cms-list.Cms_List_B > .items article.cms-list-item > .info {
	grid-template-areas:
	 "text"
	 "icon"
	;
	border-top: 1px solid var(--theme-color-bright);
	/*padding: 20px 20px 20px;*/
}

article.cms-list.Cms_List_B > .items article.cms-list-item > .info > .icon {
	display: block;
}
article.cms-list.Cms_List_B > .items article.cms-list-item > .info > .icon img {
	width: 40px;
	height: auto;
}

article.cms-list.Cms_List_B > .items article.cms-list-item > .info > .text {
	padding: 5px 0 0 0;
}

article.cms-list.Cms_List_B > .items article.cms-list-item > .info > .text > .title {
    font-size: 1rem;
    font-weight: 600;
}

article.cms-list.Cms_List_B > .items article.cms-list-item > .info > .text > .description {
	font-size: 0.9375rem;
	hyphens: auto;
	white-space: normal;
	text-align: justify;
	padding: 0 0 10px 0;
	line-height: 1.2em;

	overflow-y: auto;
}


/**** Cms List C ****/
.ym-wrapper.wide.Cms_List_C {
	background: var(--theme-color-white);
}
.ym-wrapper.wide.Cms_List_C .tns-slider > .tns-item {
	padding-right: 2%;
}
article.cms-list.Cms_List_C {
	font-size: 1rem;
	--list-items-height: 20rem;
	margin: 0 auto;
    padding: 55px 0;
	/*display: table;*/
	/*max-width: var(--wrapper-max-width);*/
	--list-item-max-width: clamp(200px, 12.5rem, 250px);
	max-width: clamp(800px, 50rem, 1000px);
}
:root[data-font-size="big"] article.cms-list.Cms_List_C {
	padding-bottom: 0px;
}
article.cms-list.Cms_List_C > .title {
	font-size: 1.625em;
	font-weight: 600;
	text-align: center;
	padding: 0;
}

article.cms-list.Cms_List_C > .description {
	font-size: 14px;
	padding: 10px 0;
}
/*
article.cms-list.Cms_List_C > .items {

}
*/
article.cms-list.Cms_List_C > .items article.cms-list-item {
	/* dimensions */
	--list-item-width: 100%;
	max-width: var(--list-item-max-width);
	--picture-height: 203px;
	--icon-height: 0px;
	--title-height: 0px;

	/*--text-height: calc(var(--info-height) - var(--icon-height) - 40px);*/
	--text-height: auto;

	/* paddings */
	--info-padding: 0px 0px;

	/* colors */
	--info-background-color: var(--theme-color-white);
	--list-item-border: 0px solid var(--info-background-color);
	--info-foreground-color: var(--theme-color-white-opposite);

	/* fonts */
	--title-font-size: 16px;
	--title-font-weight: 600;
	--description-font-size: 13px;
	--description-font-weight: 400;
}

article.cms-list.Cms_List_C > .items {
	margin: 20px 0px 0 0px;
}

article.cms-list.Cms_List_C > .items .tns-slider > div:nth-child(2),
article.cms-list.Cms_List_C > .items .tns-slider > div:nth-child(4) {
	width: 3.125rem;
}

article.cms-list.Cms_List_C > .items article.cms-list-item {
	border-radius: 4px;
}
/*
article.cms-list.Cms_List_C > .items article.cms-list-item > .picture {

}
*/
article.cms-list.Cms_List_C > .items article.cms-list-item > .info {
	display: block;
}

article.cms-list.Cms_List_C > .items article.cms-list-item > .info > .icon {
	display: none;
}

article.cms-list.Cms_List_C > .items article.cms-list-item > .info > .text {
	padding: 0px 0 0 0;
}

article.cms-list.Cms_List_C > .items article.cms-list-item > .info > .text > .title {
	display: none;
}

article.cms-list.Cms_List_C > .items article.cms-list-item > .info > .text > .description {
	padding-top: 0px;
	text-align: center;
	font-size: 0.96rem;
	line-height: 1.2rem;
	color: var(--theme-color-dark);
}


/**** Cms List GroupsManufactors ****/
/**
  * article.cms-list-item
  *  + section.picture
  *  | + a
  *  |   - img
  *  + div.info
  *  | + div.icon
  *  | | + a
  *  | |   - img
  *  | + div.text
  *  |   + section.title
  *  |   + section.description
  * --------------------------
  */
/**** Cms List GroupsManufactors ****/
.ym-wrapper.wide.slider-groups-manufactors {
	background: var(--theme-color-white);
}
.ym-wrapper.wide.slider-groups-manufactors .tns-slider > .tns-item {
	padding-left: 2%;
	padding-right: 0%;
}
article.cms-list.slider-groups-manufactors {
	--list-items-height: 170px;
	margin: 0 auto;
    padding: 40px 0 5px 0;
	/*display: table;*/
	/*max-width: var(--wrapper-max-width);*/
	/*max-width: 800px*/
}
:root[data-font-size="big"] article.cms-list.slider-groups-manufactors {
	--list-items-height: 200px;
}
article.cms-list.slider-groups-manufactors > .title {
	font-size: 1.625rem;
	font-weight: 600;
	padding: 0px 0 30px 0px;
}

article.cms-list.slider-groups-manufactors > .description {
	font-size: 14px;
	padding: 10px 0;
}
/*
article.cms-list.slider-groups-manufactors > .items {

}
*/
article.cms-list.slider-groups-manufactors > .items article.cms-list-item {
	/* dimensions */
	--list-item-width: 6.25rem;
	max-width: var(--list-item-width);
	--picture-height: var(--list-item-width);
	--icon-height: 0px;
	--title-height: 0px;

	/*--text-height: calc(var(--info-height) - var(--icon-height) - 40px);*/
	--text-height: auto;

	/* paddings */
	--info-padding: 8px 0 0 0;

	/* colors */
	--info-background-color: var(--theme-color-dark-b1);
	--list-item-border: 0px solid var(--info-background-color);
	--info-foreground-color: var(--theme-color-white-opposite);

	/* fonts */
	--title-font-size: 0.75rem;
	--title-font-weight: 400;
	--description-font-size: 0.8125rem;
	--description-font-weight: 400;
}
:root[data-font-size="big"] article.cms-list.slider-groups-manufactors > .items article.cms-list-item {
	--list-item-width: 5.25rem;
}

article.cms-list.slider-groups-manufactors .tns-outer.has-container-center {
	--tns-controls-height: 100px; /* redefined: = --picture-height */
}

article.cms-list.slider-groups-manufactors > .items {
	margin: 0px 0px 0 0px;
}
/*
article.cms-list.slider-groups-manufactors > .items .tns-slider > div:nth-child(2),
article.cms-list.slider-groups-manufactors > .items .tns-slider > div:nth-child(4) {

}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item {

}
*/
article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .picture {
	background: var(--theme-color-white);
    border-radius: calc(var(--list-item-width) / 2);
}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .picture .container-center > img {
	max-width: 75.7% !important; /* square in circle is 70.7% */
	max-height: 75.7% !important; /* square in circle is 70.7% */
}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .info {
	display: block;
}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .info > .icon {
	display: none;
}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .info > .text {
	padding: 0px 0 0 0;
}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .info > .text > .title {
	text-align: center;
	/*
	font-size: 1.1em;
	line-height: 1.3em;
	color: var(--theme-color-dark);*/
}

article.cms-list.slider-groups-manufactors > .items article.cms-list-item > .info > .text > .description {
	display: none;
}


/**** Cms List GroupsArticles ****/
/**
  * article.cms-list-item
  *  + section.picture
  *  | + a
  *  |   - img
  *  + div.info
  *  | + div.icon
  *  | | + a
  *  | |   - img
  *  | + div.text
  *  |   + section.title
  *  |   + section.description
  * --------------------------
  */
/**** Cms List GroupsArticles ****/
.ym-wrapper.wide.slider-groups-articles {
	background: var(--theme-color-white);
}

.ym-wrapper.wide.slider-groups-articles .tns-slider > .tns-item {
	padding-left: 2%;
	padding-right: 0%;
}
article.cms-list.slider-groups-articles {
	--list-items-height: clamp(170px, 10.625rem, 190px);
    padding: 40px 0 5px 0;
}

article.cms-list.slider-groups-articles .tns-ovh {
	padding-left: 15px; /* 30.09.2022 CSS work around */
}
article.cms-list.slider-groups-articles > .title {
	font-size: 1.625rem;
	font-weight: 600;
	padding: 0px 0 30px 0px;
}

article.cms-list.slider-groups-articles > .description {
	font-size: 14px;
	padding: 10px 0;
}
/*
article.cms-list.slider-groups-articles > .items {

}
*/
article.cms-list.slider-groups-articles > .items article.cms-list-item {
	/* dimensions */
	--list-item-width: clamp(100px, 6.25rem, 125px);
	max-width: var(--list-item-width);
	--picture-height: var(--list-item-width);
	--icon-height: 0px;
	--title-height: 0px;

	/*--text-height: calc(var(--info-height) - var(--icon-height) - 40px);*/
	--text-height: auto;

	/* paddings */
	--info-padding: 8px 0 0 0;

	/* colors */
	--info-background-color: var(--theme-color-white);
	--list-item-border: 0px solid var(--info-background-color);
	--info-foreground-color: var(--theme-color-white-opposite);

	/* fonts */
	--title-font-size: 0.75rem;
	--title-font-weight: 400;
	--description-font-size: 13px;
	--description-font-weight: 400;
}

article.cms-list.slider-groups-articles .tns-outer.has-container-center {
	--tns-controls-height: 6.25rem; /* redefined: = --picture-height */
}

article.cms-list.slider-groups-articles > .items {
	margin: 0px 0px 0 0px;
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .picture {
	background: var(--theme-color-dark-b1);
    border-radius: calc(var(--list-item-width) / 2);
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .picture .container-center > img {
	max-width: 75.7% !important; /* square in circle is 70.7% */
	max-height: 75.7% !important; /* square in circle is 70.7% */
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .info {
	display: block;
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .info > .icon {
	display: none;
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .info > .text {
	padding: 0px 0 0 0;
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .info > .text > .title {
	text-align: center;
	/*
	font-size: 1.1em;
	line-height: 1.3em;
	color: var(--theme-color-dark);*/
}

article.cms-list.slider-groups-articles > .items article.cms-list-item > .info > .text > .description {
	display: none;
}


/**** Cms List Action ****/

article.cms-list.slider-action-articles {
	--list-items-height: auto;
	height: var(--list-items-height);
	padding: 40px 0 40px 0;
}

article.cms-list.slider-action-articles > .title {
	color: var(--theme-color-white);
	font-size: 1.625rem;
	font-weight: 600;
	padding: 0px 0 0px 0px;
}

article.cms-list.slider-action-articles > .description,
article.cms-list.slider-action-articles > .description a {
	color: var(--theme-color-white);
}
article.cms-list.slider-action-articles > .description a::AFTER {
	content: '';
}
article.cms-list.slider-action-articles > .description a.dotted:hover {
	border-bottom: 1px solid var(--theme-color-white);
}

article.cms-list.slider-action-articles > .items {
	margin-top: 20px;
}



article.cms-list.slider-action-articles .tns-outer.has-container-center {
	--tns-controls-height: 410px;
}
article.cms-list.slider-action-articles .tns-outer > .tns-controls [aria-controls] {
	color: var(--theme-color-dark-opposite);
}
article.cms-list.slider-action-articles .tns-outer > .tns-controls [disabled] {
	color: var(--theme-color-dark);
}

/* 'autoWidth: true' */
article.cms-list.slider-action-articles .tns-autowidth {
	/* display: inline-block; */ /* default value for .tns-autowidth */
	display: block; /* 10.10.2022 bugfix (cutted lower part of slider) */
}

/**** Cms List Action: ul-li rendering strategy ****/
article.cms-list.slider-action-articles ul.articles-bundle-list.mode-cells {
	margin: 0;
	width: 100%;
}

.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item {
	--item-width: 100%;
	--item-padding: 0 2%;
}

article.cms-list.slider-action-articles .tns-autowidth ul.articles-bundle-list.mode-cells {
	width: auto;
}

.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item {
	--item-width: 100%;
	--item-padding: 0 2%;
	min-width: 250px;
}

/* type-extra, type-hero: not allowed by 'autoWidth: false' */
.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-extra,
.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-hero {
	--item-width: 100%; /* 10.10.2022 TODO */
}
.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-extra > article > section.picture,
.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-hero > article > section.picture {
	 height: var(--section-picture-height);
	/* padding: 0; */
	/* overflow: hidden; */
}

.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-extra article div.after-picture,
.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-hero article div.after-picture {
	width: 100%;
	height: var(--section-after-picture-height);
	position: absolute;
	background: var(--theme-color-white);
	opacity: 1;
	bottom: 0;
	top: auto;
}

.ym-wrapper.wide article.cms-list ul.articles-bundle-list.mode-cells li.item.type-extra article div.after-picture {
	border: 0px solid var(--theme-color-white);
	bottom: 0;
	right: 0;
}

/* type-extra, type-hero: allowed by 'autoWidth: true' */
.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-extra,
.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-hero {
	--item-width: 100%;
	--item-padding: 0 1%;
}

.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-extra > article > section.picture,
.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-hero > article > section.picture {
	 height: var(--article-height);
	/* padding: 0; */
	/* overflow: hidden; */
}

.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-extra article div.after-picture,
.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-hero article div.after-picture {
	width: 50%;
	height: 150px;
	position: absolute;
	background: var(--theme-color-white);
	opacity: 0.9;
}

.ym-wrapper.wide article.cms-list .tns-autowidth ul.articles-bundle-list.mode-cells li.item.type-extra article div.after-picture {
	border: 1px solid var(--theme-color-white);
	bottom: 2%;
	right: 2%;
}


/**** Cms List Action: section-div rendering strategy ****/
.ym-wrapper.wide article.cms-list section.articles-bundle-list.mode-cells {
	grid-template-columns: 1fr;
}
.ym-wrapper.wide article.cms-list section.articles-bundle-list.mode-cells > div.item {
	padding: 0 0.25rem;
}

/**** Cms List Block ****/
.ym-wrapper.wide.Block article.cms-list.Block {
	padding-top: 20px;
}

article.cms-list.Block {
	--list-items-height: auto;

}

article.cms-list.Block > .title {
	font-size: 1.5em;
	font-weight: 600;
}

article.cms-list.Block > .description {
	padding-top: 15px;
	line-height: 1.5em;
}
/*
article.cms-list.Block > .items {

}
*/
article.cms-list.Block > .items > .cms-list-item {
	--list-item-border: none;
	--picture-height: auto;
	--info-height: auto;
	--info-foreground-color: var(--theme-color-dark);
	--info-background: none;
	--info-padding: 0;
	--description-font-size: 1em;

	--picture-width: 31%;
	--info-width: 59%;
	--picture-info-gap: calc(100% - var(--picture-width) - var(--info-width));

	display: grid;
	grid-template-areas: "picture info";
	grid-template-columns: var(--picture-width) var(--info-width);
	grid-gap: var(--picture-info-gap);
	align-items: start;

	padding-top: 80px;
	padding-bottom: 0px;
}

article.cms-list.Block > .items > .cms-list-item:nth-child(even) {
	grid-template-areas: "info picture";
	grid-template-columns:  var(--info-width) var(--picture-width);
}

@media screen and (max-width: 700px) {
	article.cms-list.Block > .items > .cms-list-item,
	article.cms-list.Block > .items > .cms-list-item:nth-child(even) {
		grid-template-areas:
		"picture"
		"info";
		grid-template-columns: 100%;

		padding-top: 2em;
		--picture-info-gap: 1em;
	}

	article.cms-list.Block > .items > .cms-list-item > .picture > a > img {
		max-height: 25vh !important;
	}
}

article.cms-list.Block > .items > .cms-list-item > .picture {
	grid-area: picture;
	/*border: 1px solid red;*/
}

article.cms-list.Block > .items > .cms-list-item > .info {
	grid-area: info;
	/*border: 1px solid green;*/
}

article.cms-list.Block > .items > .cms-list-item > .info > .text > .description {
	line-height: 1.5em;
}