/**
 * @version 26.06.2025
 *
 * styles.r.2-tablet.css
 *
 * Skin "mobile"
 */

/*
div {
    border: 1px solid yellow;
}
*/

html.touch-screen-mode div.icon-development,
html.touch-screen-mode div.icon-debug {
	color: green;
}
html.touch-screen-mode div.icon-development {
	display: none;
}
/* 25.06.2025 OFF:
input[type="date"],
input[type="number"],
input[type="text"],
input[type="password"],
textarea,
select:focus {
	font-size: 16px;
}
 */
@media screen and ( max-width: 540px ) {
	.ui-dialog.app-dialog-confirm {
		/*min-width: 200px;*/
		min-width: auto;
		width: 100% !important;
		left: auto !important;
		/*top: 105% !important;*/
	}
}

ul.menuPrimaryTouchScreen > li.home-logo {
	max-width: 160px;
	left: calc(46% - 80px);
}

section.layout-message {
	padding: 0.5em;
}
section.layout-message ul.table-2-cols > li.label {
	padding-right: 0.5em;
}

/* 28.05.2025 EXPERIMENTAL OFF
#intro {
    padding: 12px 6px;
}
 */


ul.ui-autocomplete.menu-touch div.autocomplete-row {
	font-size: 1.4em;
	line-height: 1.4em;
}


/** ui-accordion, cross-articles **/
html.touch-screen-mode #accordionCrossArticles.ui-accordion .ui-accordion-header > div.ym-grid > div.col-1 {
	width: 100%;
}

html.touch-screen-mode #accordionCrossArticles.ui-accordion .ui-accordion-header > div.ym-grid > div.col-2 {
	display: none;
}

.ym-wrapper.wide section.alternate.simple > .scroll-x {
	padding: 10px 1em 15px 1em;
	margin: 0 0em 0 -1em;
}

.ym-wrapper.wide.slider-action-articles section.alternate.simple > .scroll-x {
	margin: 0 0em 0 0em;
}

/*** .parallax.route-start-page ***/
.parallax {
	/* 06.02.2023 Not really supported by mobile browsers
	   https://caniuse.com/background-attachment
	*/
	/*display: none;*/
	background-attachment: scroll;
}
html.firefox .parallax,
html.chrome .parallax {
	/* except firefox */
	/*display: block;*/
	background-attachment: fixed;
}
.parallax.route-start-page {
	/*border: 1px solid red;*/
	/*margin-top: -22px;*/
	/*min-height: 250px;*/
	/*min-height: 50vw;
	background-size: 200%;
	border: 1px solid red; */
	background-size: 200%;
}
.parallax.layout-footer-prefix {
	background-size: 170%;
}

/* 28.05.2025 EXPERIMENTAL OFF
nav.primary ul.menuPrimary > li {
    width: 50%;
    margin-right: 0em;
}
 */

.ym-column.type-1-3,
main .ym-column.type-1-3 {
	margin: 0;
	padding: 0;
}


header ul.layout-header > li.col-1 a.company-logo img.logo {
    display: none;
}
header ul.layout-header > li.col-1 a.company-logo img.logo-only {
    display: block !important;
    position: relative;
    top: 1px;
}

header ul.layout-header > li.col-1 {
  padding-left: 0.8em;
  padding-right: 0;
  width: 8%;
  min-width: 36px;
}
header ul.layout-header > li.col-2 {
  padding-left: 1em;
  width: 87%;
}

/*** pages bar (paginator) ***/
@media (max-width: 600px) {
	/* [<] Page 1 of 3 [>] navigation */
	/*div.pages-bar.bundle-bar {
		margin-top: calc(var(--button-small-height));
		margin-bottom: calc(var(--button-small-height) / 2);
	}*/

	/* pages at top */
	div.pages-bar.top > div.ym-gl {
		width: 100%;
	}
	/* items on a page switcher */
	div.pages-bar.top > div.ym-gr {
		display: none;
	}
	/* articles N of M in bundle bar */
	div.pages-bar.bundle-bar > div.ym-gl {
		display: none;
	}

	/** bundle-bar **/
	div.pages-bar.bundle-bar > div > ul.elements {
		margin-top: 0;
		/*margin-left: -0.8%;
		margin-right: -0.8%;
		width: 101.6%;*/ /* 2023-06-26 EXPERIMENTAL OFF */
		margin-left: -0%;  /* 2023-06-26 EXPERIMENTAL ON */
		margin-right: -0%; /* 2023-06-26 EXPERIMENTAL ON */
		width: 100%;       /* 2023-06-26 EXPERIMENTAL ON */
	}
	div.pages-bar.bundle-bar > div > ul.elements > li.element {
		width: 50%;
		padding: var(--item-padding);
		padding-top: 0;
		padding-bottom: 0;
	}
	div.pages-bar.bundle-bar > div > ul.elements > li.element > ul {
		width: 100%;
	}

	div.pages-bar.bundle-bar > div > ul.elements > li.element.prev-info-next {
		width: 100%;
		padding: 0;
	}

	div.pages-bar.bundle-bar > div > ul.elements > li.element > ul.prev-info-next {
		width: 100%;
		max-width: none;
		--li-button-width: var(--button-small-height);
		--li-label-width: calc(100% - 2 * var(--li-button-width));

		/*--li-button-width: 10%;
		--li-label-width: 80%;*/
	}

	div.pages-bar.bundle-bar > div > ul.elements > li.element > ul.prev-info-next > li.prev,
	div.pages-bar.bundle-bar > div > ul.elements > li.element > ul.prev-info-next > li.next {
		width: var(--li-button-width);
    }

	div.pages-bar.bundle-bar > div > ul.elements > li.element > ul.prev-info-next > li.label {
		width: var(--li-label-width);
		padding-left: 0;
		padding-right: 0;
    }

    div.pages-bar.bundle-bar > div > ul.elements > li.element > ul.prev-info-next > li a {
		padding-left: 0;
		padding-right: 0;
    }

	/* items ordering (?) */
	div.pages-bar.bundle-bar > div.ym-gr {
		width: 100%;
		float: left;
		margin: 0;
	}
}


/* sort order selector */
div.pages-bar.bundle-bar .sort-select-label > .ym-gl.selection {
	width: 100%;
	margin-left: 0.3em;
}
div.pages-bar.bundle-bar .sort-select-label.count-1 > .ym-gl.selection {
	margin: 0em;
	padding-left: 0;
	padding-right: 0;
}
div.pages-bar.bundle-bar .sort-select-label.count-2 > .ym-gl.selection {
	width: 50%;
	margin: 0;
	padding-left: .3em;
}
div.pages-bar.bundle-bar .sort-select-label.count-2 > .ym-gl.selection:FIRST-CHILD {
	padding-left: 0em;
}
/* pages at bottom*/
div.pages-bar.bottom > div.ym-gl {
	width: 100%;
}
/* articles N of M at bottom */
div.pages-bar.bottom > div.ym-gr {
	width: 100%;
	float: left;
	margin: 0;
}
div.pages-bar.bottom > div.ym-gr > ul {
	float: left;
}

/* ul.subgroups-inventory.mode-cells */

@media ( max-width: 860px ) {
	article.teaser,
	div.pages-bar.bundle-bar > div > ul.elements > li,
	ul.mode-cells > li.item {
		--item-width: 33.3333%;
	}
}

@media ( max-width: 650px ) {
	article.teaser,
	/*div.pages-bar.bundle-bar > div > ul.elements > li,*/
	ul.mode-cells > li.item {
	   --item-width: 50%;
	}
}

/* ul.articles-bundle-list.mode-cells */
section.alternate.simple ul.articles-bundle-list.mode-cells li.item {
	font-size: 1em;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}
section.alternate.simple ul.articles-bundle-list.mode-cells li.item:FIRST-CHILD {
	margin-left: 0px !important;
}
#sliderAction ul.articles-bundle-list.mode-cells li.item {
	font-size: 1em;
}

#sliderAction ul.articles-bundle-list.mode-cells li.item.res-availability.res-buttons article {
	min-height: 310px;
}
section.alternate.simple ul.articles-bundle-list.mode-cells > li.item .picture {
	height: 170px;
}

#sliderAction ul.articles-bundle-list.mode-cells > li.item .picture {
	height: 170px;
}
ul.articles-bundle-list.mode-cells > li.item .picture a,
ul.articles-bundle-list.mode-cells > li.item .picture img {
	max-height: 200px;
	max-width: 200px;
}
#sliderAction ul.articles-bundle-list.mode-cells > li.item .picture a,
#sliderAction ul.articles-bundle-list.mode-cells > li.item .picture img {
	max-height: 160px;
	max-width: 160px;
}

/* for noted list, where the buttons label is "In den Warenkorb" */
ul.articles-bundle-list.mode-cells > li.item section.buttons > .add-to-shopcart button {
	font-size: 12px;
}



/*** footer ***/
footer ul.layout-footer > li {
	width: 49%;
}
footer ul.layout-footer > li.company-info {
	width: 49%;
}
footer ul.layout-footer > li.company-contact,
footer ul.layout-footer > li.site-links {
	width: 49%;
	border: 0px solid;
	padding-left: 5%;
}
/*footer ul.company-contact li, footer ul.company-opening-hours li {
} */
@media ( max-width: 650px ) {
	footer div.layout-footer.ym-grid  {
		grid-template-areas:
		"accordion"
		"contact";
		grid-template-columns: 1fr;
	}
}
footer ul.site-links {
	border: 0px solid red;
	width: auto;
	margin: 0 0 1em;
}
footer ul.site-links > li {
	float: none;
	width: auto;
	padding: 0 0em;
	border-left: 0px solid;
}

/*** footer prefix banner ***/
.ym-wrapper.wide.layout-footer-prefix {
	min-height: 300px;
}
.ym-wrapper.wide.layout-footer-prefix > .ym-wbox {
	bottom: 1em;
}
@media ( max-width: 650px ) {
	.ym-wrapper.wide.layout-footer-prefix > .ym-wbox {
		bottom: 20px;
	}
}
.ym-wrapper.wide.layout-footer-prefix div.content {
	padding-left: 1em;  /* because .ym-wrapper.wide > .ym-wbox 0em */
	padding-right: 1em; /* because .ym-wrapper.wide > .ym-wbox 0em */
}
/* title small */
.ym-wrapper.wide.layout-footer-prefix div.content div.title-small {
	margin-bottom: 1em;
	font-size: 2.5vw;
	padding: 5px 10px;
}


/** data protection label **/
.ym-form.ym-columnar .ym-fbox-check.dataprotection label {
	padding-left: 4px;
	width: 90%;
}

/*** footer.additional ***/
footer.additional .ym-wrapper > .ym-wbox {
	padding-top: 1em;
}
footer.additional div.layout-footer.additional {
	grid-template-areas:
	 "links"
	 "logo";
	grid-template-columns: 100%;
	padding-bottom: 1rem;
}

footer.additional .layout-footer.additional > div.site-links > ul {
	width: auto;
	position: relative;
	border: 0px solid;
	margin: 0 auto;
}
@media (max-width: 48.125rem) {
	footer.additional .layout-footer.additional > div.site-links > ul {
		margin: 0 auto 0 0;
    }
	footer.additional .layout-footer.additional > div.site-links > ul > li {
		width: 25%;
		font-size: 0.875rem;
		padding-bottom: 0.4375rem;
	}
	footer.additional .layout-footer.additional > div.site-links > ul > li::before {
		content: ' ';
	}
	footer.additional .layout-footer.additional > div.site-links > ul > li > a {
		padding-left: 0;
    }
}

@media (max-width: 34.375rem) {
	footer.additional .layout-footer.additional > div.site-links > ul > li {
		width: 33%;
	}
}
footer.additional .layout-footer.additional > div.company-logo {
	padding-top: 30px;
	min-height: 0;
	text-align: center;
}
footer.additional .layout-footer.additional > div.company-logo img {
	margin: 0 auto;
}

/** .cookies-info.detailed > .buttons **/
@media (max-width: 600px) {
	section.cookies-info.detailed > .buttons > .ym-grid {
		grid-template-areas:
		"selected"
		"all";
		grid-template-columns: 1fr;
	}
	section.cookies-info.detailed > .buttons > .ym-grid > div > button {
		width: 90%;
	}
	section.cookies-info.detailed > .buttons > .ym-grid > .accept-selected {
		text-align: center;
		padding: 1em 0 1em 0;
	}

	section.cookies-info.detailed > .buttons > .ym-grid > .accept-all {
		text-align: center;
		padding: 0;
	}
}

/*** Agent ***/
@media (max-width: 740px) {
	/** agent toolbar **/
	html.agent body {
		--agent-toolbar-height: 70px;
	}
	section.agent-toolbar div.ym-grid.content > div > div {
		white-space: normal;
	}
	html.agent section.agent-toolbar div.ym-grid.content > div {
		float: none;
		width: 100%;
		text-align: left;
		margin: 0;
	}
}