@import '../../../skins/mobile/css/styles.css';

/**
 * @version 2026-07-14
 *
 * Skin "mobile"
 *
 * QUALITYTOOLS_3
 */

:root {
  --font-family: Roboto, Tahoma, "Trebuchet MS";
  /* Primary font family. [may be imported font] */
  /*--font-family: Arial, Verdana; */
  /* Primary font family. [may be imported font] */
  --font-size: 16px; /* 16.05.2025 --font-size is it good? */
  /* default font size for certainly areas */

  /* Scale factor for <img/> (not global) */
  --img-scale: 1;

  /* Layout settings */
  --wrapper-width: 1140px;
  --wrapper-paddings-left-right: 1rem;
  --wrapper-max-width: calc(var(--wrapper-width) + var(--wrapper-paddings-left-right) * 2);
  --layout-column-1-width: 15.625rem; /* before 16.05.2025: 250px; */
  --layout-columns-gap: var(--wrapper-paddings-left-right);
  --layout-column-3-margin: calc(
    var(--layout-column-1-width) + var(--layout-columns-gap)
  );



  /** Colors **/
  /* QUALITYTOOLS */
  --qualitytools-blue: #014495;
  --qualitytools-blue-opposite: #fff;

  --qualitytools-yellow-light: #ffec0a;
  --qualitytools-yellow-dark: #ffcd00;
  --qualitytools-yellow-opposite: #000;

  --qualitytools-red: #d70015;
  --qualitytools-red-opposite: #fff;

  --qualitytools-gray-light: #e2e3e4;
  --qualitytools-gray-dark: #57585a;

  --qualitytools-radius-1x: 1em;
  --qualitytools-radius-05x: 0.5em;

  /** Border radius settings **/
  --theme-border-radius: var(--qualitytools-radius-05x);

  /* compliance colors are marked with suffixes: b1, b2, ... - brighter; d1, d2, ... - darker */

  --theme-color-black: #000;
  --theme-color-black-1: #333;
  --theme-color-white-1: #aaa;
  --theme-color-white: #fff;
  --theme-color-black-opposite: var(--theme-color-white);
  --theme-color-black-1-opposite: #eee;
  --theme-color-white-opposite: var(--theme-color-black);
  --theme-color-white-1-opposite: var(--theme-color-black-1);

  /* PARITY grey: #333333*/
  --theme-color-dark: var(--theme-color-black-1);
  /* PARITY grey: #333333*/
  --theme-color-dark-b1: #ededed;
  --theme-color-dark-b2: #d0d0d0;
  --theme-color-dark-b3: #f9f9f9;

  --theme-color-middle: var(--qualitytools-blue);
  --theme-color-middle-opposite: var(--qualitytools-blue-opposite);
  /*PARITY yellow: #ffcd00 */

  --theme-color-bright: var(--qualitytools-blue);
  --theme-color-bright-opposite: var(--theme-color-white);

  /*PARITY yellow: #ffcd00 */
  --theme-color-bright-d1: var(--qualitytools-blue);
  /*PARITY yellow: #ffcd00 */

  /* article voting colors */
  --theme-color-vote-star: var(--theme-color-bright);
  --theme-color-vote-star-opposite: var(--theme-color-dark);

  /* opposite colors */
  --theme-color-dark-opposite: var(--theme-color-white);
  --theme-color-dark-b1-opposite: var(--theme-color-dark);
  --theme-color-dark-b2-opposite: var(--theme-color-dark);


  /* messages colors */
  --message-color-default-icon: var(--theme-color-dark);
  --message-color-default: var(--theme-color-dark);
  --message-color-default-opposite: var(--theme-color-dark-opposite);

  --message-color-info-icon: var(--qualitytools-blue);
  --message-color-info: var(--theme-color-dark);
  --message-color-info-opposite: var(--theme-color-dark-b1);

  --message-color-error-icon: var(--qualitytools-red-opposite);
  --message-color-error: var(--qualitytools-red-opposite);
  --message-color-error-opposite: var(--qualitytools-red);

  --message-color-error-strong: #cc1a2a;
  --message-color-error-strong-opposite: #fff;

  --message-color-running-icon: var(var(--theme-color-white-1));
  --message-color-running: var(--theme-color-dark);
  --message-color-running-opposite: var(--theme-color-dark-b1);

  --message-color-success-icon: var(--theme-color-dark);
  --message-color-success: var(--theme-color-dark);
  --message-color-success-opposite: var(--theme-color-dark-b1);

  --message-color-warning-icon: var(--theme-color-middle);
  --message-color-warning: var(--theme-color-middle);
  --message-color-warning-opposite: var(--theme-color-middle-opposite);

  /* Buttons */
  --button-normal-height: 2.438rem;
  /* 39 for better vertical centering of the caption */
  --button-small-height: 1.875rem;

  --button-final-color: #019901;
  --button-final-color-opposite: #fff;

  /* Errors by form fields */
  --theme-color-input-invalid: var(--theme-color-bright);

  /** prices **/
  /* default */
  --theme-color-price-with-unit: var(--theme-color-dark);
  --theme-color-price-value: var(--theme-color-bright);
  /* action */
  --theme-color-action-price: var(--qualitytools-red);
  --theme-color-action-price-opposite: #fff;
  --theme-color-action-price-with-unit: var(--theme-color-action-price);
  --theme-color-action-price-value: var(--theme-color-action-price-with-unit);

  /* focus */
  --theme-color-focus: #a00;
  --theme-color-focus-opposite: #fff;
}


/* @package Accessibility */
:root[data-theme="contrast"] {
  --theme-color-bright: var(--qualitytools-blue);
  --theme-color-middle: var(--theme-color-bright);
}


/**** Font Awesome 6 Pro ****/
.fa-duotone {
  --fa-primary-color: var(--theme-color-bright);
  --fa-secondary-color: var(--theme-color-dark);
  --fa-secondary-opacity: 1;
}

.fa-duotone.fa-cart-plus {
	--fa-primary-color: var(--qualitytools-blue);
	--fa-secondary-color: var(--qualitytools-yellow-dark);
}
html.touch-mode-off a:hover .fa-duotone.fa-cart-plus {
	--fa-primary-color: var(--qualitytools-blue);
	--fa-secondary-color: var(--qualitytools-yellow-dark);
}

:root[data-theme="contrast"] .fa-duotone.fa-cart-plus {
	/* --fa-primary-color: var(--qualitytools-blue); */
  --fa-secondary-color: var(--qualitytools-yellow-light);
}

/*
:root[data-theme="contrast"] .fa-duotone.fa-cart-plus {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-bright);
} */

.fa-duotone.fa-toggle-off {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-dark);
}

.fa-duotone.fa-toggle-on {
  --fa-primary-color: var(--theme-color-bright);
  --fa-secondary-color: var(--theme-color-dark);
}

/** UI controls: border radius */
.ui-corner-all {
	border-top-left-radius: var(--theme-border-radius);
	border-top-right-radius: var(--theme-border-radius);
	border-bottom-left-radius: var(--theme-border-radius);
	border-bottom-right-radius: var(--theme-border-radius);
}

/** ui-accordion **/
.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-content {
	border-radius: 0;
}

/* ui-accordion: first header */
.ui-accordion .ui-accordion-header:nth-child(-n + 1) {
	border-top-left-radius: var(--theme-border-radius);
	border-top-right-radius: var(--theme-border-radius);
}
/* ui-accordion: last header */
.ui-accordion .ui-accordion-header-collapsed:nth-last-of-type(-n + 2),
.ui-accordion .ui-accordion-content:nth-last-of-type(-n + 2) {
	border-bottom-left-radius: var(--theme-border-radius);
	border-bottom-right-radius: var(--theme-border-radius);
}

/** UI Spinners are now "+/-" Spinners, and they have not the jQuery UI styling, but the styling of Shop 3 **/
 :where(
	.ui-spinner-button,
	.ui-dialog > .ui-dialog-titlebar
 ) > :where(
	.ui-button:focus .ui-icon,
	.ui-button:active .ui-icon,
	.ui-button:hover .ui-icon,
	.ui-button .ui-icon
)  { /* because of the customized arrow */
	background-image: url("../../../skins/mobile/css/images/ui-icons_000000_256x240.png") !important;
}

/**** hyperlinks ****/
article.view-details section.description a {
  font-weight: 600;
  color: var(--qualitytools-red);
}

html.touch-mode-off article.view-details section.description a:hover {
  text-decoration: underline;
  color: var(--qualitytools-red);
}


/**** buttons ****/
button.group-c:hover,
button.group-c:active {
	color: var(--qualitytools-yellow-light);
}

body {
  --li-customized-blocks-down-height: 130px;
  --header-height: calc(100px + var(--li-customized-blocks-down-height));
}

/**** navigation: burger menu  ****/
html.touch-mode-off nav.menuMobile {
	--top: calc(var(--intro-height) + var(--header-height) - var(--li-customized-blocks-down-height) - 10px);
}

/***** Header ****/
header {
  /* background: url("img/background-header.jpg") no-repeat scroll center top var(--theme-color-white); */ /* 2026-07-02 TODO Later */
  background: var(--theme-color-white);
}

header ul.layout-header {
  --li-search-padding: 0px;

  flex-wrap: wrap;
}

/**** Header: company logo ***/
header ul.layout-header > li.logo a.container-center {
  justify-items: flex-start;
}

header ul.layout-header > li.logo img {
  position: relative;
  /* left: -25px; */
  width: auto;
}

header ul.layout-header > li.logo a.container-center {
	justify-items: end;
}

@media (width < 1260px) {
	header ul.layout-header > li.logo a.container-center {
		justify-items: center;
	}
}

nav#menuPrimaryTouchScreen ul > li.logo > div > a {
	height: auto;
}

/*** Header: customized-blocks-down ***/
header ul.layout-header > li.customized-blocks-down {
  font-size: 1rem;
  line-height: 1.2;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  width: 100%;
  height: var(--li-customized-blocks-down-height);

  padding-top: 0.25em;

  text-align: left;

  color: var(--qualitytools-blue);

  /* border: 1px solid #000; */
}

header ul.layout-header > li.customized-blocks-down > div {
  align-content: center;

  border: 0px solid red;
}

/**  Header: customized-blocks-down > questions-help **/
header ul.layout-header > li.customized-blocks-down > div.questions-help {
  display: flex;

  gap: 2.2em;

  /* border: 1px solid black; */
}
/* header ul.layout-header > li.customized-blocks-down > div.questions-help > div {
  border: 1px solid red;
} */
/**  Header: customized-blocks-down > questions-help > questions **/
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.questions,
header ul.layout-header > li.customized-blocks-down > div.homepage-questions > div.questions,
header ul.layout-header > li.customized-blocks-down > div.questions {
  font-size: 1.2em;
  line-height: 1;
  font-weight: 600;
  /* font-style: italic; */

  align-content: flex-start;

  text-align: left;
}

header ul.layout-header > li.customized-blocks-down > div.homepage-questions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
header ul.layout-header > li.customized-blocks-down > div.homepage-questions > div a {
  font-weight: 600;

  color: var(--qualitytools-red);
}
html.touch-mode-off header ul.layout-header > li.customized-blocks-down > div.homepage-questions > div a:hover {
  text-decoration: underline;
}

header ul.layout-header > li.customized-blocks-down > div.questions-help > div.questions > div,
header ul.layout-header > li.customized-blocks-down > div.questions > div {
  margin-bottom: 0.35em;
}
header ul.layout-header > li.customized-blocks-down > div.homepage-questions > div.questions > div {
  margin-top: 0.35em; /* because aligned to the lowest position */
}

/**  Header: customized-blocks-down > questions-help > we-will-help-you **/
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .title,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .title {
  margin-bottom: 0.25em;
}
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .phone,
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .fax,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .phone,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .fax {
  font-weight: 600;
}
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .e-mail > a,
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .pdf-catalog > a,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .e-mail > a,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .pdf-catalog > a {
  font-weight: 600;

  display: inline-block;

  margin-top: 0.2em;
  color: var(--qualitytools-red);
}
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .e-mail > a:hover,
header ul.layout-header > li.customized-blocks-down > div.questions-help > div.we-will-help-you > .pdf-catalog > a:hover,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .e-mail > a:hover,
header ul.layout-header > li.customized-blocks-down > div.we-will-help-you > .pdf-catalog > a:hover {
  text-decoration: underline;
}
/**  Header: customized-blocks-down > delivery **/
/* header ul.layout-header > li.customized-blocks-down > div.delivery > :where(div.img-gls, div.img-sepa), */
header ul.layout-header > li.customized-blocks-down > div.delivery > div {
  text-align: right;
}
header ul.layout-header > li.customized-blocks-down > div.delivery > div.title,
header ul.layout-header > li.customized-blocks-down > div.delivery > div.title-sepa {
  font-size: 0.9em;
  font-weight: 600;

  margin-bottom: 0.25em;
}
header ul.layout-header > li.customized-blocks-down > div.delivery > div.title-sepa {
  margin-top: 0.3em;
}
/**  Header: customized-blocks-down > tuv-sud **/
header ul.layout-header > li.customized-blocks-down > div.tuv-sud > .img-tuv > a > img {
  width: auto;
  height: 100%;
  max-height: calc(var(--li-customized-blocks-down-height) - 30px);
}
/**  Header: customized-blocks-down > shop-info **/
header ul.layout-header > li.customized-blocks-down > div.shop-info {
  --widget-widgth: 152px;
  --widget-height: 60px;
  min-width: var(--widget-widgth);
}
header ul.layout-header > li.customized-blocks-down > div.shop-info > div[data-retailer-id="quality-tools-messtechnik"] {
  width: var(--widget-widgth) !important;
  height: var(--widget-height) !important;

  position: relative !important;
}

/**  Header: customized-blocks-down > no-private-sells **/
header ul.layout-header > li.customized-blocks-down > div.no-private-sells {
  flex-basis: 100%;
  align-content: center;

  height: 1.5em;

  text-align: center;
  text-align: right;

  /* margin-top: 0.25em; */

  /* border: 1px solid var(--qualitytools-blue); */
  border-radius: var(--theme-border-radius);
}
header ul.layout-header > li.customized-blocks-down > div.no-private-sells > .title {
  /* font-weight: 600; */

  display: inline-block;

  padding-right: 0.5em;
}
header ul.layout-header > li.customized-blocks-down > div.no-private-sells > .info {
  font-weight: 600;
  display: inline-block;
}

/*** mmenu.js ***/
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent > a {
	color: var(--theme-color-middle-opposite);
  background: var(--theme-color-middle) !important;
}
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected > a {
	color: var(--theme-color-middle-opposite);
  background: var(--theme-color-middle) !important;
}

html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent .mm-btn_next::after,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected-parent .mm-btn_next::after,
html.touch-mode-off .mm-menu .mm-listitem_selected .mm-btn_next::after,
nav.menuMobileTouchScreen.mm-menu .mm-listitem_selected .mm-btn_next::after {
	border-color: var(--theme-color-middle-opposite);
}

/**** page-teaser slider and teaser****/
/*** 2026-07-03 the slider is deactivated ***/
/*** 2026-07-03 the slider is deactivated: the teaser has margin-top: ***/
main > div.ym-wrapper.page-teaser {
}
main > div.ym-wrapper.page-teaser > div > div.page-teaser {
  margin-top: 3em;
}

/**** main-line ****/
div.main-line h1.layout-title.default {
  border-radius: var(--theme-border-radius);
}

/**** mesages ****/
.box {
  border-radius: var(--theme-border-radius);
}

/**** required fields ****/
.ym-form label.required::after,
.ym-form div.read-only.required_legend::before {
	color: var(--qualitytools-red);
}

/**** articles-bundle-list ****/
/* section.articles-bundle-list.mode-cells > div.item article.ui-corner-all {
  padding-top: var(--theme-border-radius);
  padding-bottom: var(--theme-border-radius);
} */
section.articles-bundle-list.mode-cells > div.item .picture {
	background: none;
}
section.articles-bundle-list.mode-cells > div.item article > .after-picture {
  background: none;
}
/* section.articles-bundle-list.mode-cells > div.item article > .after-picture > div > section {
} */

section.articles-bundle-list.mode-cells > div.item article.ui-corner-all {
	/* --section-picture-height: calc(12.1875rem - 1 * var(--theme-border-radius)); */
	--section-after-picture-height: calc(var(--article-height) - var(--section-picture-height) - 2 * var(--theme-border-radius));
}

section.articles-bundle-list.mode-cells > div.item article.ui-corner-all > .after-picture {
	bottom:  calc(var(--theme-border-radius) / 2 - 0px);
}

/**** Footer ****/
.ym-wrapper.wide.layout-footer-prefix div.content div.title-small .highlight {
	color: var(--qualitytools-yellow-light);
}

.ym-wrapper.wide.layout-footer-prefix div.content div.title-small {
	font-size: 1rem;

	border-radius: var(--qualitytools-radius-1x);
	margin: 0;
	padding: 1em 2em;


	line-height: 2;

	opacity: 0.8;
}

.ym-wrapper.wide.layout-footer-prefix div.content div.title-small > .title {
	font-size: 2em;

	line-height: 1.5;
}

.ym-wrapper.wide.layout-footer-prefix div.content div.title-small ul {
	font-size: 1.25em;

    margin: 0.75em 0 0.25em 0;

    list-style: none;
}
.ym-wrapper.wide.layout-footer-prefix div.content div.title-small ul li {
	margin-left: 0.1em;
	padding-left: 1.2em;

	line-height: inherit;

	background: url(img/list-style.png) no-repeat center left;
}