/* Lageraum buchen */
.stepsTop
{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 50px;
}

.stepsTop .stepButton
{
	width: 33.3333333%;
	float: left;
	line-height: 30px;
	opacity: 0.4;
}

.stepsTop .stepButtonFinished::after
{
	content: url(../gfx/hook-finished.png);
	height: 40px;
	margin-left: 15px;
	position: absolute;
	top: -10px;
}

.stepsTop #stepButton1
{
	opacity: 1.0;
}

.stepsTop #stepButton2
{
	text-align: center;
}

.stepsTop #stepButton3
{
	text-align: right;
}

.stepsTop .stepButton .number
{
	color: #ffffff;
	background-color: #185494;
	border-radius: 15px;
	width: 30px;
	height: 30px;
	text-align: center;
	display: inline-block;
	margin-right: 3px;
}

.formOrderBox
{
	width: 100%;
}

.radioContainerSelection
{
	position: absolute;
	top: 10px;
	left: 10px; 
	visibility: hidden;
}

.wrapperContainerSelection
{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.content .left .wrapperContainerSelection .data
{

	border-radius: 0px;
	padding: 0px;
	background-color: transparent;
	border: none;
}

.wrapperContainerSelection .dataContainer
{
	cursor: pointer;
}

.boxContainerSelection {
    /*width: 31.6666666667%;*/
    width: 100%;
    float: left;
    padding: 5px; 
    text-align: center;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    border-radius: 10px;
    margin-right: 2.5%;
    border: 5px solid transparent;
}

/*.boxContainerSelection.switchPosition
{
	float: right;
	margin-right: 0px;
}*/

.boxContainerSelection:hover
{
	border-color: #185494;
}

.boxContainerSelectionActive,
.boxContainerSelectionActive:hover
{
	background-color: rgba(231,238,244,1.0);
	border-color: #faaf18;
}

.boxContainerSelection:nth-child(2)
{
	margin-right: 0px;
	float: right;
}

/*.boxContainerSelection.switchPosition:nth-child(2)
{
	float: left;
	margin-right: 2.5%;
}*/

main .left .boxContainerSelection th h3
{
	width: 100%;
}

main .left .boxContainerSelection th p
{
	position: absolute;
	width: 100%;
	top: 40px;
	font-size: 75%;
	color: rgba(0,0,0,0.75);
}

.nextStepButton
{
	/*display: none;*/
	opacity: 0.3;
    float: left;
    width: 100%;
    font-size: 150%;
    letter-spacing: 2px;
    text-align: center;
    color: #ffffff;
    background-color: #faaf18;
    padding: 10px;
    margin-top: 50px;
    border-radius: 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.nextStepButtonActive
{
	opacity: 1.0;
	cursor: pointer;
}

.nextStepButtonActive:hover
{
	background-color: #185494;
}

.step1, .step2, .step3
{
	float: left;
	width: 100%;
}

.step2, .step3, .step4
{
	display: none;
}

.step3 .data
{
	margin-bottom: 15px;
}

.dataContainer .price
{
	color: #185494;
	font-size: 200%;
	font-style: italic;
	padding: 10px 5px;
}

.dataContainer .price .noticePrice
{
	font-size: 0.75rem;
	display: block;
	font-style: normal;
	margin-top: 15px;
	max-width: 150px;
}

.dataContainer .noticeNotAvailable,
.box .noticeNotAvailable
{
	position: absolute;
	display: none;
	top: 10px;
	right: 2px;
	z-index: 9;
	background-color: #faaf18;
	color: #185494;
	padding: 5px; 
	border-radius: 3px;
	font-size: 80%;
	line-height: 100%;
	transform: rotate(15deg);
	margin-top:35px;
}

.box .noticeNotAvailable
{
	top: 30px;
	right: 10px;
}

.justForCalculating
{ 
	display: none;
}

.sum td
{
	border-top: 1px solid #000000;
}

#dataCalculationDiff
{
	width: 100%;
}

.boxOutOfStock
{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(24,84,148,0.9);
	color: #ffffff;
	padding: 30px;
	left: 0px;
	top: 0px;
	z-index: 9999;
	display: none;
	font-size: 200%;
	line-height: 150%;
}

.boxOutOfStock .cell
{
	display: table-cell;
	vertical-align: middle;
}

.boxOutOfStock .button
{
	width: 40%;
	margin: 20px 5%;
	display: inline-block;
	color: #ffffff;
	background-color: #faaf18;
	text-decoration: none;
	text-align: center;
	padding: 30px 20px;
	border-radius: 10px;
	cursor: pointer;
}

.boxOutOfStock .button:hover
{
	background-color: #ffffff;
	color: #faaf18;
}

.boxOutOfStockAbsolute
{
	position: absolute;
	top: 40%;
	height: auto;
	display: block;
	border-right: 30px solid #fff;
	padding: 0px 20px;
	font-size: 150%;
}

.dataVoucher
{
	margin-top: 25px;
}

.dataVoucher td
{
	width: 50%;
}

.inputVoucherCode
{
	width: 95%;
	font-size: 0.85em;
}

.data .labelError::after
{
	color: red;
	content: ' (bitte überprüfen)';
	right: 0px;
	bottom: -32px;
	/*position: absolute;*/
	font-size: 75%;
}
.mobileNumber.labelError::after
{
	color: red;
	content: ' (Bitte überprüfen Sie, ob die Telefonnummer eine Handynummer ist. Dieser Service ist für Handynummern außerhalb Deutschlands nicht verfügbar.)';
	right: 0px;
	bottom: -32px;
	/*position: absolute;*/
	font-size: 75%;
}

.content .left .data td p
{
	margin: 0px;
}

.content .left .step3 .data td
{
	padding: 0px;
	vertical-align: top;
}

.openBoxDetails:hover
{
	text-decoration: underline;
	cursor: pointer;
}

.boxDetails
{
	display: none;
	background-color: #185494;
	color: #ffffff;
	position: absolute;
	left: -30px;
	top: -30px;
	z-index: 999;
}

.dataPadlock .yes,
.dataPadlock .no
{
	display: none;
}

/* Fix costs */
#dataFixCosts
{
	display: none;
}

#dataFixCosts .sum
{
	display: none;
}

.content .left .payment img
{
	width: auto;
	display: inline-block;
	height: 40px;
	margin-top: 0px;
	margin-bottom: -13px;
	margin-right: 5px;
	margin-left: 5px;
}

.content .left .payment .labelMollie img
{
	width: auto;
	display: inline-block;
	height: 40px;
	margin-top: 0px;
	margin-bottom: 15px;
	float: left;
	margin-right: 5px;
	margin-left: 5px;
}

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

	.content .left .payment .labelMollie input[type=radio]
	{
		margin-left: 0;
		display: block;
		min-height: 100px;
		margin-right: 20px;
	}

	.content .left .payment tr:not(.noticeClientExistsIngenico):not(.noticeClientExists) {
		display: flex;
		flex-direction:  column;
	}
	

	.content .left .payment .labelSepa input[type=radio]
	{
		margin-left: 0;
		display: block;
		margin-right: 20px;
	}
	
}


.content .left .payment label
{
	margin-bottom: 15px;
	display: inline-block;
}

.content .left .payment input[type=radio]
{
	margin-left: 15px;
	display: inline-block;
	float:left;
	margin-top: 15px;
	line-height: 30px;
}

.paymentContainer,
.paymentContainer label.nobr,
.noticeClientExists,
.noticeClientExistsIngenico
{
	display: none;
}

.noticeClientExists
{
    font-size: 90%;
    line-height: 140%;
    padding-top: 25px;
}

.content .left .formOrderBox input.mobile-number
{
	padding-left: 30px;
}

.content .left .formOrderBox .prefix-mobile-number
{
	left: 4px;
	position: absolute;
	z-index: 9999;
	top: -0.2em;
	font-size: 0.85em;
	font-weight: bold;
}

.content .left .formOrderBox .prefix-mobile-number.firefox
{
	top: -0.29em;
}

/* Termination */
#formTermination input[type=text], #formTermination input[type=submit]
{
	width: 30%;
	border-radius: 10px;
	line-height: 200%;
	padding: 0 5px;
}

#formTermination input[type=submit]
{
	color: #ffffff;
	background-color: #faaf18;
	font-size: 125%;
	cursor: pointer;
}

td div.rowBookingCompany, td div.rowBookingPrivate
{
	display: inline;
}

.rowTotalFirstAmount
{
	border-top: 1px solid #000000;
}

/* Notice in step 2 */
.pleaseEnterAllData
{
	text-align: center;
	color: #ff0000;
	padding-top: 5px;
	float: left;
	width: 100%;
	font-size: 85%;
}

.pleaseEnterAllData.done
{
	display: none;
}

/* Termination */
.noticeForTermination
{
	font-size: 80%; 
	font-style: italic;
	line-height: 150%;
}

main .content .noticeForTermination p
{
	margin-top: 5px;
}

#dateTerminationEarliestPossible
{
	display: inline-block;
	font-size: 85%;
	margin-bottom: 10px;
}

/* direct debit mandate label */
#labelNoticeDirectDebitMandate
{
	display: none;
}

#rowDirectDebits
{
	display: none;
}

.content .left .data td.directDebitsFields
{
	padding-left: 10px;
}

.content .left .data td.directDebitsFields label
{
	width: 70%;
}

.content .left .data td.directDebitsFields input
{
	width: 100%;
}

.directDebitsFields .button
{
	text-align: center;
	display: inline-block;
	margin-top: 5px;
	color: #fff;
	background-color: #185494;
	cursor: pointer;
	width: 100%;
	border-radius: 5px;
}

.errorPayment
{
	color: red;
	padding-bottom: 20px;
	font-style: italic;
}

.pleaseIban
{
	color: red;
	font-size: 75%;
}

/* Temporäre Einstellung */
div#dataContainer_M .noticeNotAvailable
{
	display: none !important;
}

#messageBookingType
{
	display: none;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #ffffff;
	background-color: #144081;
	border: 1px solid #f6a015;
	z-index: 500;
	padding: 10px;
	border-radius: 10px;
	font-size: 85%;
	line-height: 175%;
}

#messageBookingType a
{
	display: block;
	background-color: #f6a015;
	color: #ffffff;
	text-decoration: none;
	margin-top: 10px;
	padding: 2px 5px;
	border-radius: 5px;
	text-align: center;
}

#messageBookingType a:hover
{
	color: #144081;
}

.inProgress
{
	font-style: italic;
	color: green;
	text-align: center;
}

.data input[type=text],
.data select,
.content .left .data.contact .boxRadio
{
	border: 1px solid #185494;
}

table.contact td
{
	width: 50% !important;
}

#dataContainer_S,
#dataContainer_L
{
	display: none;
}

/* Special note for container M*/
/*#dataContainer_Meee .inputImage::after,
#dataContainer_Meee-unten .inputImage::after*/
.dataContainer.nextMonthAvailable .inputImage::after
{
	content: 'Am 1. Wochentag des neuen Monats wird dieser Container wieder frei – schauen Sie gerne dann noch einmal vorbei!';
	position: absolute;
	z-index: 1000;
	background-color: #faaf18;
	color: #ffffff;
	padding: 5px;
	border-radius: 5px;
	bottom: 10px;
	left: 0px;
	font-size: 75%;
	line-height: 150%;
}

.dataContainer .orangeBox
{
	position: relative;
	z-index: 49;
	background-color: #faaf18;
	color: #ffffff;
	padding: 5px;
	border-radius: 5px;
	bottom: 10px;
	left: 0px;
	font-size: 75%;
	line-height: 150%;
}

.dataContainer .orangeBox a,
.dataContainer .orangeBox a:hover
{
	color: #ffffff;
}

/* Video M oben */
.info-video-opener
 {
 	position: relative;
 	/*bottom: 5px;*/
	top: 5px;
	margin-bottom: 1rem;
 	right: 0px;
 	z-index: 30;
 	padding-bottom: 10px;
 	cursor: pointer;
 	padding: 0px 5px;
 	border-radius: 10px;
 	line-height: 110%;
 	padding-bottom: 5px;
 	font-size: 85%;
 }
 
.info-video-opener:hover
{
	background-color: #185494;
	color: #ffffff;
}
 
.info-video-opener img
{
	width: 50px !important;
	height: auto;	
	margin-bottom: 3px !important;
}

.video-overlay 
{
	font-size: 150%;
}

.video-overlay video
{
	width: 75%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	border: 5px solid #fff;
	border-radius: 10px;
}

.video-overlay .button
{
	padding: 10px 20px;
}

/* Waitlist */
.form-waitlist
{
	width: 100%;
	max-width: 300px;
	margin: 0px;
	padding: 15px;
	border-radius: 5px;
	background-color: rgba(24,83,148,.1);
}

.form-waitlist input
{
	padding: 0px 5px;
	border: none;
	line-height: 30px;
	border-radius: 5px;
	display: block;
	width: 100%;
	text-align: center;
	margin: 0px 0px 15px 0px;
}

.form-waitlist input[type=submit]
{
	background-color: #fbb01b;
	color: #ffffff;
	margin-bottom: 0px;
	cursor: pointer;
}

.form-waitlist .error-message
{
	display: none;
	color: red;
	margin-top: 3px;
	text-align: center;
	font-size: 75%;
}

.form-waitlist .error-field
{
	border: 2px solid red;
}

span#linkSampleContract::after, span#linkSepaMandate::after {
  content:"";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M286.7 96.1C291.7 113 282.1 130.9 265.2 135.9C185.9 159.5 128.1 233 128.1 320C128.1 426 214.1 512 320.1 512C426.1 512 512.1 426 512.1 320C512.1 233.1 454.3 159.6 375 135.9C358.1 130.9 348.4 113 353.5 96.1C358.6 79.2 376.4 69.5 393.3 74.6C498.9 106.1 576 204 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 204 141.1 106.1 246.9 74.6C263.8 69.6 281.7 79.2 286.7 96.1z'/%3E%3C/svg%3E");
  background-size: contain;
  width: 16px;
  height: 16px;
  margin-left: 8px; /* spacing between text and spinner */
  animation: spin 1s linear infinite; /* spinning animation */
  display: inline-block;
}

.detail-measurements.detail-measurements-oberhausen {
	width: 300px;
}

@media screen and (max-width:500px) {
	.detail-measurements.detail-measurements-oberhausen {
	min-width: calc(100% - 100px);
}
}

.details:focus svg, .details:hover svg {
	fill: white;
}

@media only screen and (max-width: 1100px)
{
	.boxContainerSelection 
	{
    	width: 100%;
    	margin-right: 0px;
    	margin-left: 0px;
    }
    
    .boxContainerSelection:nth-child(2)
    {
    	float: left;
    	margin-top: 15px;
    }
    
    /*
    .boxContainerSelection:nth-child(3)
    {
    	margin-left: 25.5%;
    	float: left;
    	margin-top: 15px;
    }*/
    
    .boxContainerSelection .brDimensions
    {
    	display: none;
    }
    
	#formTermination input[type=text], #formTermination input[type=submit]
	{
		width: 50%;
	}
	
	.boxOutOfStockAbsolute
	{
		top: 30%;
	}
}




@media only screen and (max-width: 768px)
{
	.video-overlay video
	{
		width: 100%;
	}
}

@media only screen and (max-width: 620px)
{
	
	input[type='text'],
	input[type='number'],
	textarea 
	{
  		font-size: 16px;
	}
	
	.stepsTop .stepButton,
	.stepsTop #stepButton3
	{
		font-size: 75%;	
		text-align: center;
	}
	
	.stepsTop .stepButton .text
	{
		display: block;	
		font-size: 0.625rem;
		line-height: 1.5;
	}
	
	.content .left .data td.directDebitsFields label
	{
		width: 100%;
	}
	
	.content .left .payment label
	{
		width: 100%;
		margin-bottom: 0px;	
	}

	.content .left .data.contact tr td input[type="text"], .content .left .data.contact tr td select[name="country"] 
	{
    	font-size: 16px;
    	line-height: 30px;
    	height: 30px;
	}
}

@media only screen and (max-width: 480px)
{
	.boxContainerSelection 
	{
    	width: 100%;
    	margin-right: 0px;
    	margin-left: 0px;
    }
    
    .boxContainerSelection:nth-child(2)
    {
		float: left;
    	margin-top: 15px;
    }
    
    .boxContainerSelection:nth-child(3)
    {
    	margin-left: 0px;
    }
    	
	table.dateAndOptions td,
	table.contact td
	{
		width: 100% !important;
		float: left;	
	}
	
	#formTermination input[type=text], #formTermination input[type=submit]
	{
		width: 100%;
	}
	
	.boxOutOfStockAbsolute
	{
		top: 15%;
	}
	
	/*#dataContainer_Meee .inputImage::after,
	#dataContainer_Meee-unten .inputImage::after*/
	.dataContainer.nextMonthAvailable .inputImage::after,
	{
		font-size: 90%;	
	}
	
	.info-video-opener
	{
		right: -3px;	
	}

}