/* KNM - css aus custom.css von en.test... [RS] */

.debug {
    /* border: 1px solid red; */
	border: 0 !important;
}

#karton-nach-mass-header {
    height: fit-content !important;
}



/* Customer-Support-Button [RS] */

/* Sticky wrapper that anchors the support button AND its fly-out panel. Because the
   panel is positioned relative to this wrapper it always "drops out" to the RIGHT of
   the button — consistently on desktop, tablet and mobile (previously the panel was a
   separate sticky sibling and dropped BELOW the button on mobile). */
.cs-widget {
    z-index: 99;
    position: sticky;
    bottom: 1rem;
    left: 1rem;
    align-self: flex-start;
    margin-top: -40px;
    width: fit-content;
}

.cstoplayer {
    width: fit-content;
}

.cstoplayer button {
  background: var(--brand);
  border: none;
  padding: .55rem 1rem;
  height: 40px;
  color: #FFF;
  font-size: .9rem;
  text-align: center;  
  line-height: 1.2;
  font-weight: 600;
  border-radius: .5rem;
  outline: none;
  transition: .3s ease;
  cursor: pointer;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}

.cstoplayer button:hover {
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5);
}

.cslayer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  position: absolute;
  top: 0;
  left: calc(100% + .5rem);   /* drop out to the RIGHT of the button */
  padding: 0 2.25rem 0 1rem;  /* extra room on the right for the close (X) */
  height: 40px;
  min-height: 40px;
  width: max-content;
  max-width: calc(100vw - 5rem); /* never wider than the viewport */
  background: var(--brand);
  border-radius: .5rem;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
  font-size: 1rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;           /* non-interactive while hidden */
  transform: translateX(-8px);
  transition: opacity .35s ease, transform .35s ease;
  cursor: pointer;

  > * {
    margin: 3px;
  }
}

.cslayer i {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-style: normal;
  cursor: pointer;
}

.cslayer i .img-ct svg {
  display: block;
  width: .9rem;
  height: .9rem;
}

.cslayer p {
  color: #FFF;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  opacity: 0;
  transition: all 1s ease;
}

.cslayer .customer-support-text-small {
    font-size: .7rem;
    color: #fff;
}

.cslayer .img-ct svg {
    fill: #fff !important;
}

/*
a {
  opacity: 0;
  font-size: 13px;
  color: #ff3466;
  letter-spacing: 1px;
  text-decoration: none;
}
*/

.clicked {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 98;
  p, a {
    opacity: 1;
  }
}

/* Tablet + mobile: the button is icon-only, so let the fly-out panel fill the space
   to the right edge (same ~1rem gutter as the button on the left) and keep the phone +
   e-mail on ONE row when they fit — instead of the previous slim box that wrapped to
   two rows. Wrapping is still allowed only as a last resort on very narrow screens. */
@media screen and (max-width: 991px) {
  .cslayer {
    width: calc(100vw - 5.75rem);
    max-width: none;
    height: auto;
    min-height: 40px;
    white-space: normal;
  }
}





.runder-mongo {
    /* border-radius: 100%; */
    border: 3px solid #eee !important;
    width: 3rem !important;
    height: 3rem !important;
	color: #eee;
    margin-bottom: .5rem;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 900;
	z-index: 2 !important;
    background-color: #fff !important;
}

.runder-mongo:hover {
	cursor: pointer;
	border: 3px solid #d6d6d6 !important;
}

.runder-mongo:hover > span {
	color: #d6d6d6;
}


.runder-mongo.karton-nach-mass-header--active, .runder-mongo.karton-nach-mass-header--active:hover {
    background-color: #fff !important;
	transition: border .5s !important;
	border: 3px solid var(--primary-yellow) !important;
	/* border: 3px solid var(--primary-green) !important; */
}

.runder-mongo.karton-nach-mass-header--active > span {
	transition: color .5s !important;
	color: var(--primary-yellow) !important;
	/* color: var(--primary-green) !important; */
}

.runder-mongo-success {
    border-radius: 100%;
    border: 3px solid var(--primary-green) !important;
    width: 3rem !important;
    height: 3rem !important;
	color: #eee;
    margin-bottom: .5rem;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 900;
	z-index: 2 !important;
    background-color: #fff !important;
	transition: .5s !important;
}

.runder-mongo-success:hover {
	cursor: pointer;
	transition: color .5s !important;
	border: 3px solid var(--primary-green) !important;
}

.runder-mongo-success > span {
	color: var(--primary-green) !important;
	transition: color .5s !important;
}

.runder-mongo-success.karton-nach-mass-header--active, .runder-mongo-success.karton-nach-mass-header--active:hover {
    background-color: #fff !important;
	transition: border .5s !important;
	border: 3px solid var(--primary-green) !important;
	/* border: 3px solid var(--primary-green) !important; */
}

.runder-mongo-success.karton-nach-mass-header--active > span {
	transition: color .5s !important;
	color: var(--primary-green) !important;
	/* color: var(--primary-green) !important; */
}



@media screen and (max-width: 991px) {
	.karton-nach-mass-header-step-title {
		font-size: 1rem;
		border-bottom: 2px solid transparent;
	}
}
@media screen and (min-width: 992px) {
	.karton-nach-mass-header-step-title {
		font-size: 1.1rem;
		line-height: 1.6;
		border-bottom: 3px solid transparent;
	}
}


.karton-nach-mass-header-step-title:hover {
	cursor: pointer !important;
}

.karton-nach-mass-header-step-title-active {
	border-bottom: 3px solid rgb(238, 238, 238);
}


#karton-nach-mass-content {
    margin-top: 2rem;
	width: 100%;
}

@media screen and (min-width: 1800px) {
	#karton-nach-mass-content #step-1 {
		max-width: 1600px;
		margin-left: auto;
        margin-right: auto;
	}
	#karton-nach-mass-content {
		min-height: 50vh;
	}
}

.auswahl-mongo {
	width: 12.35rem !important;
    height: 14.25rem !important;
    padding: 0 !important;
    margin: 0 .5rem 1rem .5rem;
}

.auswahl-mongo:hover {
	cursor: pointer;
}

.auswahl-mongo > div {
    border: 1px solid #eee !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
	border-radius: .5rem;
    padding: 1rem 1rem .5rem 1rem !important;
}

.auswahl-mongo > div:hover {
	cursor: pointer;
    border: 1px solid #999 !important;
}

.auswahl-mongo:focus {
	border: 1px solid var(--primary-green) !important;
}

.auswahl-mongo-selected > div {
    border: 1px solid var(--primary-green) !important;
}

.fefco-selector {
    border-radius: 100% !important;
    border: 1px solid #eee !important;
    width: 2rem !important;
    height: 2rem !important;
    position: absolute;
	top: .75rem !important;
    right: .75rem !important;
	padding: 0 !important;
	background-color: #fff;
}

.fefco-selector:hover ~ div.auswahl-mongo {
	cursor: pointer;
    border: 1px solid #999 !important;
}

.fefco-info-mongo {
    border: none !important;
	/* border: 1px solid #d6d6d6 !important; */
    /* width: fit-content !important; */
	border-radius: .5rem;
    padding: 0 0 0 3rem;
    background-color: #f2f2f2;
    margin-top: 5rem;
    margin-left: auto;
    margin-right: auto;
    font-size: .9rem;
    line-height: 1.5;
	white-space: normal !important;
}

.fefco-info-mongo-icon > img {
    width: 3rem;
	opacity: .1;
}

.fefco-info-mongo-icon {

}

.fefco-info-mongo-text {
	
}


.bauart-bild {
    /* width: 100%; */
    height: 70% !important;
}

.bauart-bild img {
    width: 80%; 
}

.bauart-text {
    /* width: 100%; */
    height: 30% !important;
}

.bauart-text-title {
    font-size: 1.1rem !important;
    line-height: 1.6rem !important;
	font-weight: 400;
}

.bauart-text-info {
    font-size: 0.8rem !important;
    line-height: 1.2rem !important;
	color: #adadad;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
	text-wrap: balance;
}

.bauart-text > div:nth-child(1) {
    width: 100%;
    height: 50% !important;
}

.bauart-text > div:nth-child(2) {
    width: 100%;
    height: 50% !important;
    justify-content: flex-start;
}


.tooltip-cmc {
  position: relative;
  display: inline-block;
}

.quality-max-weight .tooltip-cmc {
	/* margin-left: .5rem; */
}

.tooltip-cmc img {
	width: 1.4rem !important;
	opacity: .25 !important;
}

.tooltip-cmc .tooltiptext-cmc {
  visibility: hidden;
  width: fit-content;
  min-width: 10rem;
  background-color: #999;
  color: #fff;
  text-align: left;
  border-radius: .5rem;
  padding: .3rem .5rem;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
  text-transform: none;
  opacity: 0;
  transition: .25s all ease;
  transition-delay: .25s;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
    left: -4rem;
}

.tooltip-cmc:hover .tooltiptext-cmc {
  visibility: visible;
	opacity: 1;
      transition: .25s all ease;
      transition-delay: 0s;
}

/* Mobile/Click support for tooltips */
.tooltip-cmc.tooltip-active .tooltiptext-cmc,
.tooltip-cmc .tooltiptext-cmc.tooltip-visible {
  visibility: visible;
  opacity: 1;
  transition: .25s all ease;
  transition-delay: 0s;
}

/* Make tooltip icons more prominent on mobile */
@media (max-width: 768px) {
  .cstoplayer {
    z-index: 1;
  }

  .tooltip-cmc img {
    opacity: .6 !important;
    cursor: pointer;
  }
  
  .tooltip-cmc:active img {
    opacity: .8 !important;
  }
  
  .tooltip-cmc .tooltiptext-cmc {
    left: -2rem;
    min-width: 12rem;
    max-width: 15rem;
    z-index: 1000;
  }
}



.tooltip-cmc-image {
	position: relative;
	display: inline-block;
}

#step-2 .tooltip-cmc-image {
	max-width: 10rem;
}

.tooltip-cmc-image img {
	width: 20rem;
}


.tooltip-cmc-image .tooltip-cmc-image-onhover {
	visibility: hidden;
	width: fit-content;
	min-width: 20rem;
	background-color: #fff;
	border: .5rem solid #f2f2f2;
	color: #fff;
	text-align: center;
	border-radius: .5rem;
	padding: 0 .5rem;
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
	opacity: 0;
	transition: .25s all ease;
	/* transition-delay: .25s; */
	box-shadow: 0 .25rem .5625rem -.0625rem rgba(0, 0, 0, .03), 0 .275rem 1.25rem -.0625rem rgba(0, 0, 0, .05);
  
  /* Position the tooltip above the image */
	position: absolute;
	z-index: 1;
	left: 60%;
	transform: translate(-60%, 60%);
}

.tooltip-cmc-image:hover .tooltip-cmc-image-onhover {
	visibility: visible;
	opacity: 1;
	transition: .25s all ease;
	transition-delay: 0s;
}

/* Mobile/Click support for image tooltips */
.tooltip-cmc-image.tooltip-active .tooltip-cmc-image-onhover,
.tooltip-cmc-image .tooltip-cmc-image-onhover.tooltip-visible {
	visibility: visible;
	opacity: 1;
	transition: .25s all ease;
	transition-delay: 0s;
}

/* Mobile styles for image tooltips */
@media (max-width: 768px) {
  .tooltip-cmc-image {
    cursor: pointer;
  }
  
  .tooltip-cmc-image .tooltip-cmc-image-onhover {
    left: 50%;
    transform: translateX(-50%);
    top: -8rem;
    z-index: 1000;
    min-width: 15rem;
    max-width: 18rem;
  }
  
  .tooltip-cmc-image:active {
    opacity: 0.8;
  }
  
  /* Focus styles for accessibility */
  .tooltip-cmc:focus,
  .tooltip-cmc-image:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
}


#info-head {
    height: 12rem !important;
}


.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.welleninfo-icon img {
	width: 1.6rem;
}


.disabled-opacity-025 {
    cursor: not-allowed !important;
	opacity: .25 !important;
}

.disabled {
    cursor: not-allowed !important;
}

.opacity-025 {
    opacity: .25 !important;
}



.box_quality_ueberschrift_nav {
	display: flex;
	flex-direction: row;
    justify-content: space-around;
    align-items: center;
	/* margin-bottom: 1rem; */
}

.quality_ueberschrift {
	font-weight: 800 !important;
}


.list-group {
    margin-top: .5rem;
}

.list-header {
	margin-top: .5rem;
}

.list-header-title {
	font-size: .9rem !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    text-decoration: underline;
	margin-bottom: .5rem;
}

.quality-box {
    padding-left: 4rem;
    padding-right: 2rem;
}

.form-check-label {
    line-height: 1.2;
}

#karton_nach_mass_document {
    padding-bottom: 3rem;
}

#karton-nach-mass-content .form-check-input {
    position: relative !important;
    margin: 0 !important;
}


input[type=checkbox], input[type=radio] {
    padding: 0;
    margin: 0;
}




@media screen and (max-width: 1599px) {
    #step-1 .modal-body,
    #knmInfoModal .modal-body {
        max-height: 75vh !important;
    }
}


.custom-hover-box {
	border-color: #eee !important; 
	transition: border-color 0.2s ease-in-out;
}

.custom-hover-box:hover {
	border-color: #d6d6d6 !important;
}

.custom-hover-box img {
	box-shadow: .25rem .25rem 1rem #d6d6d6;
}





#step-2 .list-group-item {
    border: none !important;
	margin-left: .25rem;
	margin-right: .25rem;
}

#step-2 li:nth-child(odd) {
    background-color: #f8f8f8;
}

#step-2 .list-group-item:hover {
    background-color: #fcf3df !important;
}

#step-2 .card-container {
	padding: 1rem 0 2rem 0 !important;
}

#step-2 .card-content {
    padding: .5rem;
	font-size: 1rem !important;
	line-height: 1.7 !important;
}

#step-2 .form-check-input {
	cursor: pointer;
    margin: 0 !important;
	width: 1rem;
}

#step-2 .quality-max-weight {
	font-size: .9rem;
	line-height: 1.7;
	font-weight: 400 !important;
	text-align: center;
}

#step-2 span.quality-waves-img {
	margin-left: 1rem;
}

#step-2 span.quality-waves-img img {
	width: 12rem;
}


#step-2 .dimension-text {
    min-width: 12.5rem !important;
}

#step-2 .flex-grow {
	flex-grow: 2;
}

#step-2 .form-check-label {
    padding-left: .25rem;
    padding-top: .075rem;
}






#step-3 .font-lg-bold {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2;
    color: #111;
    margin-bottom: .5rem;
}

#step-3 .font-md-italic {
    font-weight: 400;
    font-size: .8rem;
    line-height: 1.2;
    color: #111;
    font-style: italic;
    margin-bottom: .5rem;
}

#step-3 .dimensions-box {
	padding-top: 2rem;	
}

#step-3 .dimension-error {
	padding-top: 1rem;
	padding-left: 3rem;		
	padding-right: 3rem;		
	font-weight: 600;
    font-size: 1rem;
    line-height: 1.6;
}

#step-3 .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    overflow-y: inherit !important;
    /* max-height: 500px; */
}

#step-3 .p-c .article-box {
    padding-top: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 0 !important;
	flex-direction: column !important;
	height: auto;
}

#step-3 .item-box-link-to-article {
	margin: 0;
    padding: 0;
    text-align: center;
}

#step-3 .item-box-link-to-article .article-box {
    display: none !important;
}

#step-3 article {
    min-width: 12rem !important;
}

#step-3 .p-c .title, #step-3 .p-c .title a {
    font-size: 1rem !important;
    line-height: 1.1;
}

#step-3 .p-c .price, #step-3 .p-c .price a {
    font-size: 1rem !important;
    line-height: 1.1;
	align-items: baseline;
}

#step-3 .p-c .delivery-status {
    margin-top: .1rem;
    margin-bottom: .5rem;
}

#step-3 .item-box-link-to-article .btn-itembox {
    padding: .5rem 1rem !important;
	margin-bottom: 1rem;
	font-size: 1rem !important;
    line-height: 1.1;
}

#step-4 .form-check-label {
    padding-left: .25rem;
    padding-top: .075rem;
}

#step-4 .continue-without-print {
	margin-bottom: .5rem;
	padding-right: 5rem;
	font-weight: 800 !important;
	cursor: pointer !important;
}

#step-4 .continue-without-print input {
	cursor: pointer !important;
}

#step-4 .continue-without-print-img {
	margin-left: 1rem;
}

#step-4 .continue-without-print img {
	width: 5rem;
}

#step-4 .continue-with-print {
	margin-bottom: .5rem;
	padding-left: 5rem;
	font-weight: 800 !important;
	cursor: pointer !important;
}

#step-4 .continue-with-print input {
	cursor: pointer !important;
}

#step-4 .continue-with-print-img {
	margin-left: 1rem;
}

#step-4 .continue-with-print img {
	width: 5rem;
}


#step-4 .with-print-img img {
	width: 5rem;
}

#step-4 .list-group-item {
    border: none !important;
	padding: 0 !important;
}

#step-4 li:nth-child(odd) {
    background-color: #f8f8f8;
}

#step-4 .list-group-item:hover {
    background-color: #fcf3df !important;
}

#step-4 .form-check-input {
	cursor: pointer;
    margin: 0 !important;
}

#step-4 .druckposition .form-check-input {
    cursor: pointer;
    margin: 0 !important;
}

.druckposition {
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
	min-height: 5rem;
}

.druckposition:hover {
    background-color: #fcf3df !important;
}

.druckposition:nth-child(odd) {
    background-color: #f8f8f8;
}

#step-4 .printing-info {
    font-size: .9rem;
    line-height: 1.7;
    font-weight: 400 !important;
    text-align: center;
}





#step-5 {
    margin-top: 2rem;
}

.cmc-filter-hoehenriller .dropdown .btn.btn-info {
    background-color: #fff;
    border: 1px solid var(--inp-r) !important;
    color: var(--bod-s) !important;
	border-radius: 0 !important;
	width: 100% !important;
	font-weight: 400 !important;
	justify-content: space-between !important;
	height: 50px;
	box-shadow: none !important;
}

.cmc-filter-hoehenriller input[type=number] {
	text-align: center;
}


.hoehenriller:hover {
	cursor: pointer;
}

#step-5 .with-features-img img {
	width: 5rem;
}

#step-5 .list-group-item {
    border: none !important;
	padding: 0 !important;
}

#step-5 li:nth-child(odd) {
    background-color: #f8f8f8;
}

#step-5 .list-group-item:hover {
    background-color: #fcf3df !important;
}

#step-5 .form-check-input {
	cursor: pointer;
    margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#step-5 .form-check-label {
    padding-left: .25rem;
    padding-top: .075rem;
	line-height: 1.4 !important;
}

#step-5 .groove-row, #step-5 .grip-row {
    padding: 0 2.5rem !important;
}






.step-6-first-row {
    padding-left: 5rem;
    padding-right: 5rem;
}

#step-6 .list-group {
	margin-bottom: 2rem !important;
}

#step-6 .list-group-item {
    border: none !important;
	padding: 0.25rem 1rem !important;
}

#step-6 .zusammenfassung-img img {
	width: 15rem;
}

#step-6 .delivery-country-tax-zone-icon-flag {
	/* margin-left: .5rem; */
}

#step-6 .delivery-country-tax-zone-icon-flag img {
    padding-bottom: .2rem;
}

#step-6 .gesamtkosten-excl-VAT {
    font-size: 1.4rem;
	font-weight: 600;
	color: var(--bod-t) !important;
}

#step-6 .gesamtkosten-incl-VAT, 
#step-6 .tax-info {
    font-size: .8rem;
	font-weight: 400;
    color: var(--bod-t) !important;
}

#step-6 .quantity-warning-message {
    text-align: center;
    font-weight: bold;
}

#step-6 .cmc_shipping-costs-section .tax-info,
#step-6 .cmc_summary-estimated-total-costs-incl-vat .tax-info {
	font-size: .7rem !important;
	font-weight: 400;
    color: var(--bod-t) !important;
}


#step-6 .cmc_delivery-country-tax-zone {
    margin-top: 1rem;
}

#step-6 .cmc_summary-estimated-total-costs {
	background: var(--btn-df-b);
	padding: 1.5rem;
	border-radius: .5rem;
}

#step-6 .modal-content {
    max-width: 90% !important;
}


.cmc_summary-estimated-total-costs-excl-vat, .cmc_summary-estimated-total-costs-incl-vat, .cmc_shipping-costs-section {
	line-height: 1.3 !important;
}

.cmc_shipping-costs-section {
	margin-top: 1rem;
}

#cmc_summary-estimated-total-costs-excl-vat .tax-info {
    color: var(--bod-t) !important;
}




.cmc_summary-estimated-total-costs-excl-vat {
	margin-top: .5rem;
	text-align: center;
	color: var(--bod-t) !important;
}


.dpflex-a-baseline {
	align-items: baseline;
}

/*
#step-6 {
    padding-left: 5rem;
    padding-right: 5rem;
}
*/


#step-6 input[type=text] {
    margin-bottom: 0 !important;
	border-radius: .5rem !important;
}


#step-6 select {
    margin-bottom: 0 !important;
	padding: 1rem !important;
	text-align: center;
    border-radius: .5rem !important;
}

#step-6 .modal select {
	text-align: left;
}

#step-6 label {
    font-size: 1rem !important;
}

#step-6 .input-group.formFile .form-control {
    display: block;
    width: 100%;
    padding: .45rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--inp-t);
    background-color: var(--brd-b);
    background-clip: padding-box;
    border: 1px solid var(--inp-r);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#step-6 .input-group.formFile .form-control:hover {
	cursor: pointer !important;
}

#step-6 .input-group.formFile input[type=file]::file-selector-button {
  border: 1px solid var(--inp-r);
  padding: .25em .5em;
  border-radius: .25em;
  background-color: var(--brd-b);
  cursor: pointer !important;
  margin-right: 1rem;
  color: var(--inp-t);
}


#step-6 .qty-btns .btn svg {
    fill: var(--btn-df-t);
    width: 1rem;
}

#step-6 .btn-group {
    height: 4rem !important;
}

#step-6 .mengen_input {
    text-align: center;
	margin-bottom: .5rem;
}

#step-6 #quantity-grp .btn-group .btn:first-child {
    border-top-left-radius: .5rem !important;
    border-bottom-left-radius: .5rem !important;
}

#step-6 #quantity-grp .btn-group .btn:last-child {
    border-top-right-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

#step-6 #quantity-grp .btn-group .btn.disabled:first-child, 
#step-6 #quantity-grp .btn-group .btn:disabled:first-child, 
#step-6 #quantity-grp .btn-group .btn.disabled:last-child, 
#step-6 #quantity-grp .btn-group .btn:disabled:last-child {
	cursor: not-allowed !important;
	border: 1px solid #333 !important;
}






/* 
#step-6 #quantity-grp select option {
    ackground: rgba(229,229,229, 0.5) !important; 
}
*/

#step-6 .mindestbestellmenge {
    background: 0 0 !important;
    border: none !important;
    color: #ccc !important;
    padding: .5rem 0 .25rem !important;
    font-size: .75rem !important;
}


#step-6 .modal .btn-close {
	border: 0 !important;
}

#step-6 .modal .btn-close svg {
	border: 0 !important;
    width: 1.25rem;
    height: 1.25rem;
}

#step-6 .cmc_add-to-cart-btn {
    margin-top: 0 !important;
}

#step-6 .btn-download {
    margin-top: .5rem;
}

#step-6 .modal .btn-download {
    margin-top: 1.5rem !important;
}


#step-6 .product-summary-content p {
	font-size: .9rem !important;
    line-height: 1.2 !important;
	margin-top: .25rem !important;
}


#step-6 .product-summary-content .print-modal-info {
    margin-top: 1rem !important;
    font-weight: 600 !important;
    color: var(--brand) !important;
}





#step-6 .karton-nach-mass-form .col-md-2, 
#step-6 .karton-nach-mass-form .col-md-3, 
#step-6 .karton-nach-mass-form .col-md-4, 
#step-6 .karton-nach-mass-form .col-md-6, 
#step-6 .karton-nach-mass-form .col-md-9 {
	padding-top: 1rem !important;
}

#step-6 #knm-versandkosteninput select option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;

  border: 2px solid #eee;
  background: #eee;
  padding: 10px;
  transition: 0.4s;
}
#step-6 #knm-versandkosteninput select option:first-of-type {
  border-radius: 8px 8px 0 0 !important;
}

#step-6 #knm-versandkosteninput select option:last-of-type {
  border-radius: 0 0 8px 8px !important;
}





#karton-nach-mass-header .progress {
    display: -ms-flexbox;
    display: flex;
    height: .3rem !important;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0 !important;
	width: 55% !important; /* 62.5% with 6 Steps */
	position: absolute;	
	margin-top: 1.3rem;
}


#karton-nach-mass-header .progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #eee !important;
    transition: width 0.6s ease;
}

#karton-nach-mass-header .bg-success {
    background-color: var(--primary-green) !important;
	height: 100% !important;
}

.cmc_info-support {
	/* width: 40%; */
	background-color: var(--brand);
	padding: 1rem 5rem;
	margin-left: 1rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	color: #88030d;
	/* transition: 0.15s ease-in-out; */
}

.cmc_info-support p {
	margin: 0 !important;
}

.cmc_info-support .customer-support-text {
	color: #88030d;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.6;
}

.cmc_info-support .customer-support-text-small {
    font-size: .9rem;
    color: #9e0310;
}

.cmc_info-support .img-ct svg {
    fill: #88030d;
}

.cmc_info-support a {
    color: #88030d !important;
}

.cmc_info-support a:hover {
    color: #9e0310 !important;
}

#step-6 textarea.form-control {
    /* height: auto; */
    border-radius: 0.3rem;
}


.cmc_add-to-cart-btn {
    margin-top: .5rem;
    height: 3.1rem;
}

.cmc_request-offer-btn {
    height: 3.1rem;
}

.cmc_request-offer-btn-offer {
    margin-top: 1.5rem;
    height: 3.1rem;
}

.cmc_download-offer-btn {
    margin-top: 1.5rem;
    height: 3.1rem;
}

.form-control-input-error {
    border: 1px solid var(--primary-red) !important;
}

.form-control-input-error::-moz-placeholder {
  color: var(--primary-red) !important;
  opacity: 1;
}
.form-control-input-error::placeholder {
  color: var(--primary-red) !important;
  opacity: 1;
}


.box-colors {
    border: 3px solid transparent !important;
    padding: 1.5rem 1rem 1rem 1rem;
}

.box-colors-error {
    border: 3px solid var(--primary-red) !important;
    border-radius: 1rem;
    padding: 1.5rem 1rem 1rem 1rem;
}

.box-pages-to-print {
    border: 3px solid transparent !important;
    padding: 1.5rem 1rem 1rem 1rem;
}

.box-pages-to-print-error {
    border: 3px solid var(--primary-red) !important;
    border-radius: 1rem;
    padding: 1.5rem 1rem 1rem 1rem;
}


.box-print-area-positioning {
    border: 3px solid transparent !important;
    padding: 1.5rem 1rem 1rem 1rem;
}

.box-print-area-positioning-error {
    border: 3px solid var(--primary-red) !important;
    border-radius: 1rem;
    padding: 1.5rem 1rem 1rem 1rem;
}

.box-print-area-positioning .col-12, .box-print-area-positioning-error .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.fefco-selector.active {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23FFFFFF'%3E%3Cpolyline points='4 11 8 15 16 5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E") no-repeat scroll 50% 50% var(--primary-green) !important;
}







/* KNM - css aus karton_nach_mass.css vom Plugin "karton_eu_kartonnachmass" für en.test... [RS] */


.debug {
    border: 1px solid red;
}

/* Font settings*/
.font-lg,
.font-lg-bold {
    font-family: Arial, sans-serif;
    font-size: 1.225rem; /* 7 pt */
    line-height: 1.6rem;
}

.font-lg-bold {
    font-weight: bold;
}

.font-md,
.font-md-bold,
.font-md-italic  {
    font-family: Arial, sans-serif;
    font-size: 1rem 
}

.font-md-bold  {
    font-weight: bold;
}

.font-md-italic  {
    font-style: italic;
}

.font-sm,
.font-sm-italic {
    font-family: Arial, sans-serif;
    font-size: 0.825rem; /* 4 pt */
    line-height: 1.25rem;
}

.font-sm-italic {
    font-style: italic;
}

.font-xs {
    font-size: 0.75rem; /* 4 pt */
    line-height: 1rem;
}

/*  Template 1 */
.runder-mongo {
    border-radius: 100%;
    border: 1px solid black;
    width: 4rem;
    height: 4rem;
}

.auswahl-mongo {
    width: 10rem;
    height: 25rem;
    padding-bottom: 1%;
}

.auswahl-mongo > div{
    border: 1px solid black;
    width: 100%;
    height: 100%;
    margin: 1%;
}

.bauart-bild{
    width: 100%;
    height: 50%;
}

.bauart-text{
    width: 100%;
    height: 50%;
}

.bauart-text > div:nth-child(1){
    width: 100%;
    height: 25%;
}

.bauart-text > div:nth-child(2){
    width: 100%;
    height: 75%;
    /* font-size: 0.825rem; */
}

.fefco-selector{
    border-radius: 100%;
    border: 1px solid black;
    width: 2rem !important;
    height: 2rem !important;
    position: absolute;
    top: 0;
    right: 1rem;
}

.fefco-selector:active{
    background: green;
}

.fefco-info-mongo{
    border: 1px solid black;
    width: 100%;
}

/*
.fefco-info-mongo > div:nth-child(1){
    width: 5%;
    height: 100%;
}

.fefco-info-mongo > div:nth-child(2){
    width: 95%;
    height: 100%;
    white-space: pre-wrap;
}
*/

/* Page 2 Info header */
#info-head {
    height: 15rem;
}

#masseingabe {
    /* padding-top: 2rem; */
    /* height: 20rem; */
}

#masseingabe .karton-masse-selector {
    border: 1px solid black;
}

#masseingabe > div {
    /* height: 18rem; */
    width: 100%;
}

/* Step 3 */
.card-container {
    padding: 1rem 0rem;
}

.card-content {
    padding: 1rem;
}

/* Step 4 */
.container-no-print {
    padding: 1rem 0rem;
}

/* Step 5 */
.container-tabelle > div{
    padding: 0;
}

.container-info{
    padding: 1rem;
}

/* Step 6 */

#karton-nach-mass-header {
    height: 8rem;
}
#karton-nach-mass-header > div {
    width: 12.5%;
    height: 100%;
}

#infoButton {
    white-space: nowrap;
    text-align: center;
    justify-content: center;
}

#karton-nach-mass-header > div > div {
    width: 100%;
    height: 50%;
}

.karton-nach-mass-header--active {
    background: var(--primary-green);
}
.karton-nach-mass-header--active > span {
    color: white; /* RS_geändert !important raus */
}

.karton-nach-mass-content--hidden {
    display: none !important;
}

#delivery-time-section.boxcutter-delivery .tax-info,
#delivery-time-section.boxcutter-delivery .gesamtkosten-incl-VAT {
    color: var(--primary-green) !important;
    font-weight: 600 !important;
}

/* "Auf Anfrage" (quote) state in step 6 — render the order-on-request text
   prominently and keep the delivery estimate bold green, matching the
   calculated-price look. checkPriceContent() toggles .is-anfrage.
   For an Anfrage the large excl-VAT price line is hidden, so the text lands in
   the small incl-VAT element — re-emphasise it here. */
#step-6 .cmc_summary-estimated-total-costs.is-anfrage .cmc_summary-estimated-total-costs-incl-vat .gesamtkosten-incl-VAT {
    font-size: 1.2rem;
    font-weight: 700;
}
#step-6 .cmc_summary-estimated-total-costs.is-anfrage #delivery-time-text {
    color: var(--primary-green) !important;
    font-weight: 600 !important;
}




.zusammenfassung-daten > div {
    padding-left: 1rem;
}

.datei-hochladen {
    border: 1px dotted black;
}








/* BUTTONS STEP 3 */


.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 100%;
  height: 35px;
  margin: 0 auto 0 auto;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 0.5rem;
}

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #f4f4f4;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before {
	content: attr(data-internal);
    position: absolute;
    /* top: 4px; */
    /* left: 4px; */
    /* width: 20px; */
    /* height: 10px; */
    color: #fff;
    /* font-size: 10px; */
    font-weight: 700;
    text-align: center;
    line-height: 1;
    padding: 10px 0;
	background-image: linear-gradient(to right, #40a434 0%, #338329 51%, #40a434 100%) !important;
    /* border-radius: 50%; */
    transition: .3s cubic-bezier(.18,.89,.35,1.15) all;
	width: 50%;
	height: 40px;
}

#button-1 .knobs:after {
	content: attr(data-external);
    position: absolute;
	  right: 0px;
    /* top: 4px; */
    /* left: 4px; */
    /* width: 20px; */
    /* height: 10px; */
    color: #999;
    /* font-size: 10px; */
    font-weight: 700;
    text-align: center;
    line-height: 1;
    padding: 10px 0;
    /* border-radius: 50%; */
    transition: .3s cubic-bezier(.18,.89,.35,1.15) all;
	width: 50%;
	height: 40px;
}

#button-1 .checkbox:checked + .knobs:before {
	content: attr(data-external);
	right: 0px;
	background-image: linear-gradient(to left, #40a434 0%, #338329 51%, #40a434 100%) !important;
	height: 40px;
    padding: 10px 0;
}

#button-1 .checkbox:checked + .knobs:after {
	content: attr(data-internal);
	left: 0px;
    color: #999;
	height: 40px;
    padding: 10px 0;
}

#button-1 .checkbox:checked ~ .layer {
  background-color: #f4f4f4;
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
  transition: 0.3s ease all;
}

/* Testing */

.knm-force-hidden {
    display: none !important;
    visibility: hidden !important;
}

.knm-force-visible {
    display: block;
    visibility: visible !important;
}

/* Disabled toggle styling */
.toggle-disabled #button-1 {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

.toggle-disabled #button-1 .knobs:before,
.toggle-disabled #button-1 .knobs:after {
  opacity: 0.5;
}

.toggle-disabled #button-1 .layer {
  background-color: #e0e0e0 !important;
}



#karton_nach_mass_document .btn.disabled, #karton_nach_mass_document .btn:disabled {
	filter: opacity(25%) grayscale(100%) !important;
}



/* MOBILE */

@media screen and (max-width: 991px) {
	.mobile {
		display: unset;
		width: 100%;
	}
	/* IN CSS VOM TEMPLATE ÃœBERTRAGEN !!! */
	[class*=col-] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
	#shop-nav {
        margin-bottom: 0 !important;
    }
	#bc-w {
        margin-bottom: 0 !important;
    }
	#content-wrapper {
        padding-top: 1rem !important;
    }
	h1, .h1, h2, .h2 {
		margin-bottom: 1rem !important;
	}
	.newsletter-footer-subscribe {
		font-size: 1.4rem !important;
	}
	.box-subscribe-newsletter .btn {
		margin-left: 0 !important;
		width: 100% !important;
		margin-top: 1rem;
	}
	/* IN CSS VOM TEMPLATE ÃœBERTRAGEN !!! */
}


@media screen and (min-width: 992px) {
	.mobile {
		display: none !important;
	}
	.header-mobile {
		display: none !important;
	}
	.mobile-customersupport {
		display: none !important;
	}
}

@media screen and (max-width: 991px) {
	.desk {
		display: none !important;
	}
}
@media screen and (min-width: 992px) {
	.desk {
		display: unset;
		width: 100%;
	}
}



@media screen and (max-width: 1599px) {

	.desk-mobile .quality-container-wrapper, .desk-mobile .quality-container  {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	
	.desk-mobile .quality-container .col-4, .desk-mobile .quality-container .card-container {
		width: 100% !important;
	}
	
	.desk-mobile .quality-container .card-container .quality-header-karton-nach-mass {
		justify-content: center !important;	
	}

	.desk-mobile .dimensions-container-wrapper, .desk-mobile #masseingabe .dimensions-container {
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	
	.desk-mobile #masseingabe .dimensions-container {
		margin-bottom: 2rem;
	}

	.desk-mobile .dimensions-container-wrapper .config-col, .desk-mobile .dimensions-container-wrapper .col-6 {
		 width: 100% !important;
	}

	.step3-standard-products {
		width: 100% !important;
	}

	.desk-mobile .pre-scored-grooves, .desk-mobile .open-handles {
		width: 100% !important;
		justify-content: center !important;
		margin-bottom: 2rem;
	}

}


@media screen and (max-width: 991px) {

#karton-nach-mass-header-mobile .progress {
    width: 100% !important;
	height: .35rem !important;
}

/* When JS scrolls the configurator back to the top on a mobile step change
   (see knm.navigation.js changePage), leave room for the sticky site header
   (the mobile step header sticks at top: 109px) so the step start isn't hidden. */
#karton_nach_mass_document {
	scroll-margin-top: 120px;
}

.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.header-mobile {
	position: -webkit-sticky;
    position: sticky !important;
    top: 109px;
    z-index: 2 !important;
	width: 100%;
	padding-bottom: 2rem;
	}

#karton-nach-mass-content {
    margin-top: 1rem !important;
}

/* Make mobile step indicators non-interactive */
.mobile-step-indicator {
    cursor: default !important;
    pointer-events: none !important;
}

.mobile-step-indicator:hover {
    cursor: default !important;
    border: 3px solid #888 !important;
}

.mobile-step-indicator:hover > span {
    color: #888 !important;
}

.runder-mongo {
    /* border-radius: 100%; */
    border: 3px solid #eee !important;
    width: 4rem !important;
    height: 4rem !important;
	color: #eee;
    margin-bottom: .5rem;
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 900;
	z-index: 2 !important;
    background-color: #fff !important;
	position: absolute !important;
    left: 0 !important;
}

.runder-mongo:hover {
	cursor: pointer;
	border: 3px solid #d6d6d6 !important;
}

.runder-mongo:hover > span {
	color: #d6d6d6;
}	
	

#karton_nach_mass_document .btn.btn-primary {
    height: 2.75rem !important;
}	
	
.flex-grow {
	flex-grow: 2;
}

#karton-nach-mass-header > div {
    width: fit-content !important;
}
	
.auswahl-mongo {
    width: 9.5rem !important;
    height: 13rem !important;
    padding: 0 !important;
    margin: 0 .5rem 1rem .5rem;
}	
	
#karton-nach-mass-header .progress {
    display: -ms-flexbox;
    display: flex;
    height: .3rem !important;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0 !important;
    width: 62.5% !important;
    position: absolute;
    margin-top: 0;
    width: 100% !important;
    /* padding-bottom: .5rem; */
}	

.next-button {
	margin-left: .5rem !important;
}



.desk-mobile .card-container {
    width: 100% !important;	
}

#step-2 .desk-mobile .card-container {
    padding: 0rem 0px 2rem !important;
}

#step-2 .desk-mobile .dimension-text {
    min-width: 10rem !important;
	line-height: 1.2;
	text-wrap-style: balance;
}

#step-2 .desk-mobile .col-1 {
    width: .5rem !important;
}

#step-2 .desk-mobile .form-check-label {
    padding-left: .25rem !important;
    padding-top: 0 !important;
}

#step-2 .desk-mobile .quality-brown, #step-2 .desk-mobile .quality-white {
	width: fit-content !important;
}

#step-2 .desk-mobile .quality-brown {
    padding-right: .5rem !important;
}

.desk-mobile .tooltip-cmc-image-onhover {
    display: none !important;	
}

.desk-mobile .quality-box {
    padding: 0 !important;
	text-align: center;
}

.desk-mobile #masseingabe {
    padding-top: 0 !important;
    /* height: 20rem; */
}

.desk-mobile #masseingabe .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: .5rem !important;
}

.desk-mobile #masseingabe .knobs {
    font-size: .85rem !important;
    font-weight: 400;
}

.desk-mobile #info-head {
    height: 10rem !important;
}



.desk-mobile #masseingabe, .desk-mobile #masseingabe > div {
	height: fit-content !important;
}
	
.desk-mobile #masseingabe .dimensions-box {
    padding-top: .5rem !important;
}

.step3-standard-products {
    padding-top: 0;
}



#step-3 .product-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
	padding: 0 !important;
	min-height: 500px;
}

#step-3 .category-search-result {
    min-height: 400px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}


.desk-mobile .printing-container-wrapper {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.desk-mobile .printing-container-wrapper .continue-without-print-box {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.desk-mobile .box-colors, .desk-mobile .box-pages-to-print, .desk-mobile .box-print-area-positioning {
    width: 100% !important;	
}

.desk-mobile .continue-without-print, .desk-mobile .continue-with-print {
    width: 100% !important;
	justify-content: center !important;
}

.desk-mobile .step-5-first-row {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}



.desk-mobile .open-handles {
    margin-top: 2rem !important;
}


.desk-mobile .step-6-first-row {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
	padding-left: 0 !important;
    padding-right: 0 !important;
}

.desk-mobile .zusammenfassung-daten {
    width: 100% !important;
	/* justify-content: center !important; */
}

#step-6 .desk-mobile .list-group-item {
	padding: .2rem 1rem !important;
    line-height: 1.4;
}

#step-6 .desk-mobile .list-group {
    margin-bottom: .5rem !important;
}

.desk-mobile .step-6-first-row .summary-box-wrapper {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.desk-mobile .container-tabelle {
    width: 100% !important;
	/* justify-content: center !important; */
}

#step-6 .desk-mobile .cmc_summary-estimated-total-costs {
    margin-top: .5rem !important;
    margin-bottom: 1.5rem !important;
	text-align: center !important;
}


#step-6 .desk-mobile .cmc_shipping-costs-section span.gesamtkosten-incl-VAT,
#step-6 .desk-mobile .cmc_shipping-costs-section span.tax-info:not(#small-text-shipping-label),
#step-6 .desk-mobile .cmc_summary-estimated-total-costs-incl-vat span.gesamtkosten-incl-VAT, 
#step-6 .desk-mobile .cmc_summary-estimated-total-costs-incl-vat span.tax-info {
    display: inline !important;
}




.mobile-customersupport {
	display: flex;
	width: 1.25rem;
    min-width: 1.25rem;
    max-width: 1.25rem;
}


.mobile-customersupport-svg {
    fill: #fff !important;
}

.cslayer-mobile {
    /* Fill the space to the right of the icon button, ~1rem from the right edge. */
    padding: .4rem 1.85rem .4rem 1rem !important;
    height: auto !important;
    min-height: 40px;
    width: calc(100vw - 5.75rem);
    max-width: none;
    white-space: normal !important;
    margin-right: 0;
}

.cslayer-mobile p {
	width: 100%;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;             /* one row when it fits; wrap only if truly needed */
    justify-content: center;
    align-items: center;
    column-gap: .5rem;
	font-size: .8rem !important;
	margin: 0;
}

.modal-body {
    max-height: 75vh !important;
}


	
} /* / @media screen and (max-width: 767px) */

/* .product-summary-list {
  border: 1px solid #ced4da;  
  border-radius: 0.375rem;  
  padding: 0.75rem;           
} */

/*
.product-summary-list p {
  margin: 0 0 .25rem 0;
}

#karton-nach-mass-form > [class^="col-md"] {
  padding-top: 0.5rem;  
  padding-bottom: 0.5rem;
}
*/


#knm-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10000;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

#knm-loading-overlay .loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--brand, #3498db);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: knm-spin 1s linear infinite;
    margin-bottom: 1rem;
}

#knm-loading-overlay .loading-text {
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

@keyframes knm-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#knm-loading-overlay.hidden {
    display: none !important;
}

body.knm-loading {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
}

body.knm-loading #karton_nach_mass_document {
    pointer-events: none;
    user-select: none;
}

#karton_nach_mass_document {
    position: relative;
}

/* Ensure the content wrapper is relative for overlay positioning */
#karton-nach-mass-content {
    position: relative;
}

/* =============================================
   Step 3 Product Slider
   ============================================= */

#product-results {
    display: block !important;
    width: 100%;
}

.product-item {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.product-slider-viewport {
    display: block;
    overflow: hidden;
    width: 100%;
    /* max-height: 500px; */
}

.product-slider-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-slide {
    flex: 0 0 calc(100% / 3);
    padding: 1rem 1rem;
    height: fit-content;
    box-sizing: border-box;
}

.product-slide .p-c {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.product-slide .article-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.product-slide .img-w { margin-bottom: 0.5rem; }
.product-slide .caption { flex: 1; display: flex; flex-direction: column; padding: 0.5rem; }
.product-slide .art-name { margin-bottom: 0.5rem; }
.product-slide .item-box-link-to-article { margin-top: auto; padding: 0.5rem; }

.product-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.product-slider-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--brand, #007bff);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background 0.2s;
}

/* Darken Brand color on hover, as nothing defined anywhere */
.product-slider-nav button:hover:not(.inactive) { background: var(--brand-dark, color-mix(in srgb, var(--brand, #007bff), #000 20%)); }
.product-slider-nav button.inactive { opacity: 0.3; cursor: not-allowed; }

.slider-page-indicator { font-size: 14px; color: #666; min-width: 50px; text-align: center; }

.product-slider-nav .ar {
    width: 8px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
}
.product-slider-nav .ar-l { transform: rotate(135deg); margin-left: 2px; }
.product-slider-nav .ar-r { transform: rotate(-45deg); margin-right: 2px; }

@media (max-width: 768px) {
    .product-slide { flex: 0 0 50%; }

    #config-col.col-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    #suchergebnisse.col-md-6 { margin-top: 1.5rem; }
}

/* Restore Session Modal in Step 1.
   #knmInfoModal and #knmRestoreModal are included because both are relocated to
   <body> when opened (see knm.modal.js / knm.storage.js) — so a plain "#step-1 ..."
   selector would no longer match them. */
#step-1 .modal-content,
#knmInfoModal .modal-content,
#knmRestoreModal .modal-content {
    height: auto;
    width: auto !important;
    min-width: auto;
    max-width: 1920px !important;
}

/* Mobile: keep the info modal within the viewport and scrollable (matches the
   narrow-desktop behaviour). Combined with the relocation to <body>, this fixes the
   modal overflowing to the right / not scrolling on the mobile theme. */
@media screen and (max-width: 767px) {
    #knmInfoModal .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin: .5rem auto;
    }
    #knmInfoModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    #knmInfoModal .modal-body {
        max-height: calc(100vh - 3rem) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}



/* Hide newsletter box on Karton nach Maß page */
.box-newsletter,
.box-newsletter-footer,
.box-subscribe-newsletter {
    display: none !important;
}

/* Quality upgrade button (B1.2 → B1.3) */
#quality-upgrade-btn {
    background-color: #40a434;
    border-color: #40a434;
    color: #fff;
    white-space: nowrap;
}
#quality-upgrade-btn:hover {
    background-color: #368c2c;
    border-color: #368c2c;
}