form.konfigurator .area > .title {
	background: var(--hellgrau);
	border-radius: 10px 10px 0 0;
	display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	font-size: 1.1em;
	padding: .8rem min(5%, 1.4rem);
}
form.konfigurator .area.fold > .title {
	padding: 0.8rem 2.8rem 0.4rem min(5%, 1.4rem);
	min-height: 3em;
}
form.konfigurator .area.fold > .title > * {
	flex-grow: 1;
	line-height: 1.2;
}
form.konfigurator .area.fold > .title > span {
	max-width: calc(100% - 1.3em);
}
form.konfigurator .area > .title strong {
	flex-grow: 1;
	font-weight: 500;
}
form.konfigurator .area > .title small {
	float: none;
	font-size: .6em;
	font-weight: 300;
	margin: 0;
	order: 2;
	text-align: left;
	width: 100%;
}
form.konfigurator .area input {
	max-width: 100%;
}

form.konfigurator .area.menge_groesse > .content {
	display: flex;
		align-items: center;
		flex-wrap: wrap;
	grid-gap: .6em 2em;
}
.area.menge_groesse label {
	display: inline-block;
	margin-right: .2em;
}
.area.menge_groesse input:not([type="checkbox"]) {
	line-height: 1;
	padding: .25em .2em .075em;
	width: 4rem;
}
#wrapSizeInput, #wrapSizeInput > * {
	display: inline-block;
}
#wrapSizeInput {
	display: flex;
		flex-wrap: wrap;
		gap: 0 1.75em;
	flex-grow: 1;
	position: relative;
}
#wrapSizeInput::before {
	content: '';
	background: #fff;
	position: absolute;
		top: 0;
		bottom: 0;
		left: -1.3rem;
		width: 1.3rem;
	z-index: 1;
}
#wrapSizeInput > div {
	position: relative;
}
#wrapSizeInput > div.hidden {
	display: none;
}
#wrapSizeInput > div:not(.anzahl, .hidden) + div::after {
	content: 'x';
	position: absolute;
		top: .15em;
		left: -1.1em;
}
.menge_groesse .datenblatt {
	flex-grow: 1;
	text-align: right;
}
.menge_groesse .datenblatt > * {
	text-align: left;
}

@media (max-width: 900px) {
	.area.menge_groesse #wrapSizeInput label {
		width: 3.3em;
	}
	.area.menge_groesse #wrapSizeInput input {
		margin-bottom: .5em;
		width: 6.5rem;
	}
}
@media (max-width: 500px) {
	#wrapSizeInput .breite {
		margin: 0;
	}
}

.area .content > .gruppe + .gruppe {
	margin-top: 1.5em;
}
.area .gruppe li {
	margin: 0;
	padding-block: .2em;
	position: relative;
	max-width: 100%;
}
form.konfigurator .options li > input[type="checkbox"],
form.konfigurator .options li > input[type="radio"] {
	display: none;
}
form.konfigurator .options li > input[type="checkbox"] + label,
form.konfigurator .options li > input[type="radio"] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 1.7em;
	vertical-align: top;
}
form.konfigurator .options > li > input[type="checkbox"] + label,
form.konfigurator .options > li > input[type="radio"] + label {
	/*max-width: calc(100% - 1.5em);*/
}
form.konfigurator .options li > input[type="checkbox"] + label .icon,
form.konfigurator .options li > input[type="radio"] + label .icon {
	position: absolute;
	top: -4px;
	left: 0;
}
form.konfigurator .options li > input[type="checkbox"] + label svg,
form.konfigurator .options li > input[type="radio"] + label svg {
	font-size: 1.5em;
}
form.konfigurator .options li > input[type="radio"] + label svg {
	stroke-width: 20;
}
form.konfigurator .options li .lblTitle {
	display: block;
	line-height: 1.2;
	margin-bottom: .3em;
}
form.konfigurator .options li input.spinner ~ label .lblTitle {
	display: inline;
}
form.konfigurator .options li .lblZusatz {
	display: block;
	font-size: .7em;
	opacity: .7;
}
form.konfigurator .options li small.info {
	display: block;
	margin-top: .2em;
	margin-bottom: .8em;
}
form.konfigurator ul.options .sub {
	margin-left: 1.5rem;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.3s, padding .4s;
}
form.konfigurator ul.options input:checked ~ .sub {
	max-height: 9999px;
	transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s, padding .4s;
	padding: 0.1em .2rem 0.4em;
}
form.konfigurator ul.options .sub li {
	flex-grow: 1;
}

form.konfigurator .area.material .options li > input[type="radio"] + label .icon {
	top: calc(50% - .7em);
}

form.konfigurator .area.preise .content {
	display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	gap: 1em;
}
form.konfigurator .area.preise .preis-wrap > span {
	display: inline-block;
}
form.konfigurator .area.preise .preis {
	font-size: 1.5em;
	/*font-weight: 700;*/
	font-weight: 500;
	line-height: 1.33;
}
/*form.konfigurator .area.preise .preis.small {
	font-size: 1.2em;
	font-weight: 500;
}*/
form.konfigurator .area.preise .buttons {
	display: flex;
		flex-wrap: wrap;
		gap: .5em;
		justify-content: end;
}
form.konfigurator .area.preise .buttons > * {
	display: inline-flex;
		justify-content: space-between;
	flex-grow: 1;
	vertical-align: top;
}
form.konfigurator .area.preise .buttons i::before {
	margin: -.1em 0 0 .5em;
}
@media (min-width: 680px) {
	form.konfigurator .area.preise .buttons > * {
		flex-grow: 0;
	}
}


.config-box .msg-notice,
.config-box .msg-info {
	background-color: #f90;
	display: none;
	margin-top: 1px;
	padding: 5px 10px;
	width: 100%;
}
.config-box .msg-info {
	background-color: #00C9C9;
}
.config-box .msg-info a {
	color: #4d4d4d;
}
.config-box .msg-notice .close,
.config-box .msg-info  .close {
	background: none transparent;
	border: 0 none;
	padding: 0;
	float: right;
	line-height: 18px;
	box-shadow: none;
}


#icon-bag-clone {
	background: var(--highlight-color);
	border-radius: 50%;
	box-shadow: 0 0 0 .3em var(--highlight-color);
	color: #fff;
	display: flex;
		align-items: center;
		justify-content: center;
	font-size: 1.6em;
	line-height: 1;
	margin: -.3em 0 0 -.1em;
	position: fixed;
	width: 1.2em;
	height: 1.2em;
	z-index: 22;
}