@charset "UTF-8";
	* {
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
	}
	html, body {
		margin: 0;
		padding: 0;
		min-height: 100%;
		background-color: #f5edd4;
		/*background-color: #FFF;*/
		font-family: FFSignaWebPro, Arial, Helvetica, sans-serif;
		color: #2d2926;
		background-image: url("../img/bg-haeuser.jpg");
		background-repeat: repeat-x;
		background-size:contain;
		background-position:center -20vh ;
	}
	body {
		/*display: flex;
		justify-content: center;*/
		display: block;
	}

	@font-face {
		font-family: 'FFSignaWebPro';
		src: url('../fonts/36940A_0_0.eot');
		src: url('../fonts/36940A_0_0.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/36940A_0_0.woff2') format('woff2'),
				 url('../fonts/36940A_0_0.woff') format('woff'),
				 url('../fonts/36940A_0_0.ttf') format('truetype');
		font-weight: light;
		font-style: light;
	}
	@font-face {
		font-family: 'FFSignaWebPro';
		src: url('../fonts/36940A_1_0.eot');
		src: url('../fonts/36940A_1_0.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/36940A_1_0.woff2') format('woff2'),
				 url('../fonts/36940A_1_0.woff') format('woff'),
				 url('../fonts/36940A_1_0.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'FFSignaWebPro';
		src: url('../fonts/36940A_2_0.eot');
		src: url('../fonts/36940A_2_0.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/36940A_2_0.woff2') format('woff2'),
				 url('../fonts/36940A_2_0.woff') format('woff'),
				 url('../fonts/36940A_2_0.ttf') format('truetype');
		font-weight: bold;
		font-style: bold;
	}

	.app {
		width: 100%;
		max-width: 1100px;
		min-height: 100vh;
		margin: 0 auto;
		/*padding: 16px 16px 28px;*/
		padding: 0;
		overflow-x: hidden;
		/*background-color:transparent;*/
		
		background-image: url("../img/bg.jpg");
		background-repeat: repeat-x;
		background-size: contain;
		-webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.57); 
		box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.57);
		/*
		-webkit-box-shadow: inset 0px 0px 14px 3px rgba(0,0,0,0.57); 
		box-shadow: inset 0px 0px 14px 3px rgba(0,0,0,0.57);
		*/

}

	.screen {
		display: none;
		/*min-height: calc(100vh - 32px);*/
		min-height: calc(100vh - 50px)
	}
	#screen-game {
		/*padding-top: 1rem;*/
	}

	.screen.active,
	.screen.keep-visible {
		display: flex;
		flex-direction: column;
	}

	.game-shell {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		/*padding:16px 16px 0;*/
		overflow: visible;
	}

	.header {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		width: 100%;
		padding:1rem 16px 18px;
		gap: 10px;
	}

	.brand {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 1.8px;
		color: #f2db9a;
		margin-bottom: 4px;
		text-align: center;
	}

	.brand img {
		width: max(200px, 15vw);
	}

	.title {
		margin: 0;
		font-size: clamp(28px, 6vw, 44px);
		line-height: 1;
		color: #ffffff;
		font-weight: 700;
		text-align: center;
		text-shadow: 0 2px 10px rgba(0,0,0,0.25);
	}

	.statusbar {
		display: contents;
	}

	.status-item {
		font-size:1rem;
		color: #ffffff;
		text-shadow: 0 2px 8px rgba(0,0,0,0.25);
		line-height: 1.2;
	}

	.status-item.left {
		text-align: left;
		justify-self: start;
		align-self: start;
	}

	.status-item.right {
		text-align: right;
		justify-self: end;
		align-self: start;
		display: flex;
		justify-content: flex-end;
	}

	.info-btn {
		width: 26px; height: 26px;
		border:none;
		border-radius: 50%;
		background:#8f5d13;
		color: #ffffff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0,0,0,0.18);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}

	.info-btn:active {
		transform: scale(0.96);
	}

	.status-pill {
		color: #ffffff;
		font-weight: 700;
	}

	.hint {
		text-align: center;
		font-size: 14px;
		color: #5f5953;
		margin: 0 0 18px;
		line-height: 1.45;
	}

	.game-layout {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		/*padding: 0 16px 28px;*/
		padding: 0 0 28px;
		margin-top: -1.5rem;
	}

	.panel {
		background: transparent;
		/*border-radius: 22px;*/
		box-shadow: none;
		/*padding: 16px;*/
		padding: 0;
		overflow: hidden;
	}

	.section-label {
		text-align: center;
		font-size: 12px;
		color: #8a6a46;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		margin-bottom: 12px;
	}

	.product-stage {
		display: flex;
		align-items: center;
		justify-content: center;
		/*min-height: 290px;*/
		min-height: 210px;
		position: relative;
		touch-action: none;
	}

	.product-card {
		gap: 12px;
		width: min(80%, 360px);
		min-height: 250px;
		/*border-radius: 22px;*/
		background: linear-gradient(180deg, #fffdf9 0%, #f4e8da 100%);
		/*border: 2px dashed #d8c2a8;*/
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 18px;
		cursor: grab;
		user-select: none;
		-webkit-user-select: none;
		touch-action: none;
	}

	.product-card.dragging {
		/*opacity: 1;*/
		/*transform: scale(1.04);*/
		position: relative;
		z-index: 2101;
		box-shadow: none;
	}

	.packaging-slide.drag-target-active {
		z-index: 2101 !important;
	}

	.packaging-slide.drag-target-active .packaging-card {
		border-color: #ffffff;
		transform: scale(1.04);
	}

	.drag-focus-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		opacity: 0;
		pointer-events: none;
		z-index: 2100;
	}

	.touch-drag-clone {
		isolation: isolate;
		opacity: 1 !important;
		position: fixed;
		left: 0;
		top: 0;
		/*width: min(72vw, 260px);*/
		/*min-height: 140px;*/
		/*border-radius: 20px;*/
		/*background: linear-gradient(180deg, #fffdf9 0%, #f4e8da 100%);*/
		/*border: 2px dashed #d8c2a8;*/
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 16px;
		pointer-events: none;
		z-index: 9999;
		transform: translate(-50%, -50%);
	}

	.touch-drag-clone .product-visual {
		opacity: 1 !important;
		visibility: visible !important;
	}

	.touch-drag-clone img {
		opacity: 1 !important;
		visibility: visible !important;
		display: block;
	}

	.product-visual {
		width: 100%;
		max-width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: clamp(110px, 34vw, 170px);
		padding: 8px 0;
		overflow: hidden;
	}

	.product-visual img {
		display: block;
		width: 100%;
		max-width: min(100%, 320px);
		height: auto;
		max-height: min(170px, 42vw);
		object-fit: contain;
		filter: drop-shadow(0 10px 16px rgba(0,0,0,0.12));
		pointer-events: none;
		user-select: none;
	}

	.product-name {
		font-size: clamp(24px, 5vw, 34px);
		line-height: 1.12;
		font-weight: 700;
		margin-bottom: 8px;
	}

	.product-sub {
		font-size: 14px;
		color: #67615a;
		max-width: 240px;
	}

	.product-panel, .carousel-panel {
		margin-top:2rem;
	}

	.carousel-panel {
		position: relative;
		min-height: 400px;
		touch-action: pan-y;
		overflow: hidden;
		padding-left: 18px;
		padding-right: 18px;
		margin-top:-2rem;
	}

	.carousel-stage {
		position: relative;
		width: 100%;
		max-width: 100%;
		height: 330px;
		margin: 0 auto;
		overflow: visible;
		/*margin-top:2rem;*/
	}

	.packaging-slide {
		position: absolute;
		top: 50%;
		left: 50%;
		width: clamp(150px, 30vw, 250px);
		height: 250px;
		cursor: grab;
		will-change: transform, opacity;
		transform-origin: 50% 50%;
	}

	.packaging-card {
		width: 100%;
		height: 100%;
		border-radius: 20px;
		background: linear-gradient(180deg, #fffdfa 0%, #f6eee5 100%);
		border: 2px solid #e0d5c6;
		/*box-shadow: 0 18px 28px rgba(0,0,0,0.12);*/
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		padding: 14px 14px 16px;
		transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	}

	.packaging-card.over {
		border-color: #7a1f1f;
		background:#FFEF9F;
		/*box-shadow: 0 22px 34px rgba(122,31,31,0.18);*/
	}
	.packaging-card.over .packaging-name {
		color:#000;
	}

	.packaging-card.correct {
		border-color: #227344;
		background: #e9f7ee;
	}

	.packaging-card.wrong {
		border-color: #9a2a2a;
		background: #fdecec;
	}

	.packaging-badge {
		font-size: 10px;
		color: #8a6a46;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 6px;
	}

	.packaging-visual {
		flex: 1;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4px 0;
	}

	.packaging-visual img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 150px;
		object-fit: contain;
		filter: drop-shadow(0 10px 16px rgba(0,0,0,0.12));
		pointer-events: none;
		user-select: none;
	}

	.packaging-name {
		font-size: 16px;
		line-height: 1.18;
		font-weight: 700;
		/*margin-top: 8px;*/
		margin-top: -50px;
		opacity: 0; /* v28 */
		transition: opacity 0.3s ease; /* v28 */
	}
	.packaging-slide.active-slide .packaging-name {
		opacity: 1; /* v28 */
	}
	.packaging-sub {
		font-size: 12px;
		color: #67615a;
		margin-top: 4px;
	}

	.carousel-controls {
		position: relative;
		display: grid;
		grid-template-columns: 56px 1fr 56px;
		align-items: center;
		justify-content: center;
		column-gap: 64px;
		/*margin-top: 96px;*/
		/*margin-top:100px;*/
		margin-top:80px;
		min-height: 56px;
		width: min(100%, 420px);
		margin-left: auto;
		margin-right: auto;
		z-index: 99;
		padding:0 16px;
	}

	.nav-btn {
		width: 56px;
		height: 56px;
		border: none;
		border-radius: 50%;
		/*background: #8f5d13;*/
		background-color:#973200;
		color: #fff;
		font-size: 36px;
		line-height: 1;
		cursor: pointer;
		/*box-shadow: 0 10px 10px rgba(0,0,0,0.22);*/
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-btn:active {
		transform: scale(0.96);
	}

	.carousel-indicator {
		min-width: 0;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.feedback-inline {
		min-height: 24px;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		color: #7a1f1f;
		margin-top: 12px;
	}

	.result-card {
		max-width: 540px;
		width: 100%;
		background: #fff;
		border-radius: 22px;
/*      padding: 24px 20px;*/
/*		padding: 24px 0;*/
		padding: 0;
		box-shadow: 0 16px 34px rgba(0,0,0,0.08);
		text-align: center;
		margin: 0;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*.result-card .screen-scrollarea {
		margin:20px auto;
	}*/

	.screen-scrollarea {
		max-height: min(98vh, 830px);
		overflow: auto;
		padding: 18px 20px;
		scrollbar-gutter: stable;
		overscroll-behavior: contain;
	}

	#screen-landing {
		background-image:url("../img/bg.jpg");
		background-repeat:repeat-x;
		background-size:contain;
	}




	.overlay {
		position: fixed;
		inset: 0;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: rgba(0,0,0,0.55);
		z-index: 2000;
		opacity: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.overlay.active {
		display: flex;
	}

	.overlay .screen {
		width: 100%;
		min-height: 100%;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 12px 0;
	}

	.overlay .screen.active {
		display: flex;
	}

	.overlay .result-card {
		transform: translateY(18px) scale(0.96);
		opacity: 0;
		position: relative;
		/*overflow: auto;*/
		overflow: hidden;
	}


	.result-card h2 {
		margin: 0 0 12px;
		color: #7a1f1f;
		font-size: 32px;
	}

	form {
		display: grid;
		gap: 12px;
		margin-top: 18px;
		text-align: left;
	}
	input[type="radio"], .checkbox {
		margin-top: 0;
	}
	input[type="text"],
	input[type="email"] {
		width: 100%;
		/*border: 1px solid #ccc;*/
		border:none;
		border-radius:2px;
		padding: 12px 14px;
		font-size: 15px;
		background: #f5edd4;
		font-family: FFSignaWebPro, Arial, Helvetica, sans-serif;
	}

	.street-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	@media (min-width: 480px) {
		.street-row {
			flex-direction: row;
			gap: 2%;
		}
		.street-row input[name="Strasse"] {
			width: 70%;
		}
		.street-row input[name="Nr"] {
			width: 28%;
		}
	}

	.checkbox {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		/*font-size: 13px;*/
		color: #4f4a45;
		line-height: 1.35;
	}

	.btn {
		border: none;
		border-radius: 12px;
		padding: 14px 18px;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
		background: #8f5d13;
		color: #fff;
		/*width: 100%;*/
		width: auto;
		margin-top: 10px;
		font-family: FFSignaWebPro, Arial, Helvetica, sans-serif;
	}
	#prevBtn {
		background-image:url("../img/arrow-left.png");
	}
	#nextBtn {
		background-image:url("../img/arrow-right.png");
	}
	#prevBtn, #nextBtn {
		background-repeat:no-repeat;
		background-size: 33%;
		background-position:center;
	}
	.small {
		font-size: 13px;
		color: #6c655e;
		line-height: 1.45;
	}

	.intro-screen {
		width: 100%;
		/*max-width: 760px;*/
		margin: 0 auto;
		padding-bottom:3rem;
		min-height:80vh;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/*justify-content: center;*/
		padding: 0;
		background: #f5edd4;
	}

	.intro-card {
		width: 100%;
		/*max-width: 760px;*/
		/*min-height: 100vh;*/
		background: #f5edd4;
		border-radius: 0;
		overflow: hidden;
		/*box-shadow: 0 20px 40px rgba(0,0,0,0.12);*/
		text-align: center;
	}

	.landing-header {
		width: 100%;
		/*height: min(500px, 38vw);*/
		height:auto;
		/*min-height: 180px;*/
		max-height: 500px;
		overflow: hidden;
		background-color: #f5edd4;
	}

	.landing-header img {
		display: block;
		width: 100%;
		height: 100%;
		margin:0 auto;
		object-fit: contain;
	}

	.game-page {
		/*background-image:url("../img/bg.jpg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;*/
		min-height: 100vh;
	}

	.intro-body {
		padding: 28px 22px 60px;
		display: flex;
		flex-direction: column;
		gap: 18px;
		align-items: center;
		/*background: #fff8cc;*/
	}

	.intro-body h1 {
		margin: 0;
		margin-top:0.75rem;
		font-size: clamp(30px, 6vw, 44px);
		line-height: 1.05;
		color: #8f5d13;
	}

	.intro-prize-visual {
		width: min(100%, 520px);
		min-height: 120px;
		border-radius: 0;
		background: transparent;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		color: #8a6a46;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.35;
	}

	.intro-prize-visual img {
		display: block;
		width: 100%;
		max-width:420px;
		height: auto;
	}

	.intro-body h3 {
		margin: 0;
		font-size: clamp(20px, 4vw, 28px);
		line-height: 1.2;
		color: #8f5d13;
	}

	.intro-copy {
		margin: 0;
		font-size: 18px;
		line-height: 1.5;
		color: #4f4a45;
		max-width: 480px;
	}

	.intro-start-btn {
		width: min(100%, 320px);
		margin-top: 4px;
	}

	.intro-checkbox {
		width: 100%;
		max-width: 480px;
		justify-content: center;
		text-align: left;
		color: #4f4a45;
	}

	.terms-link {
		border: none;
		background: transparent;
		padding: 0;
		margin: 0;
		color: inherit;
		font: inherit;
		text-decoration: underline;
		cursor: pointer;
	}

	@media (min-width: 760px) {

		.carousel-controls {
			grid-template-columns: 64px 1fr 64px;
			column-gap: 120px;
			/*margin-top: 118px;*/
			margin-top: 63px;
			min-height: 64px;
			width: min(100%, 560px);
		}

		.panel {
			padding: 18px;
		}

		.carousel-panel {
			min-height: 500px;
			padding-left: 24px;
			padding-right: 24px;
			margin-top:-6rem;
		}

		.carousel-stage {
			/*height: 410px;*/
			height: 463px;
		}

		.packaging-slide {
			width: clamp(180px, 24vw, 260px);
			/*height:240px;*/
			height: 312px;
		}

		.packaging-visual img {
			max-height: 190px;
		}

		.nav-btn {
			width: 64px;
			height: 64px;
			font-size: 42px;
		}

		.carousel-controls {
			margin-top:36px;
		}


	}

	#plate {
		position: absolute;
		z-index: 0;
	}

	#plate img {
		display: block;
		width:100%;
		margin: 0 auto;
		max-width: min(100%, 510px);
		height:auto;
		max-height: min(210px, 42vw);
	}
	.product-card {
		margin-top: -70px;
	}


	@media (max-width: 744px) {			

	.intro-body {
		padding-top:18px;
	}

	.landing-header {
		/*height: min(300px, 38vw);*/
		height:auto;
	}
	.intro-body h1 {
		margin-top:0.5rem;
		font-size:26px;
	}
	.intro-prize-visual img {
		max-width: 200px;
	}			



	.intro-body h3 {
		font-size: clamp(1rem, 4vw, 28px);
	}

	.intro-copy {
		font-size: 16px;
	}
	.result-card h2 {
		font-size: 21px;
	}

	.product-panel {
		margin-top:0;
		max-width: 80vw;
    margin: 0 auto;
	}
	.carousel-panel {
		margin-top:-6rem;
	}
	@media (max-width: 744px) {
		.carousel-panel {
			margin-top:-4rem;
		}
	}	
		
		

	.carousel-stage {
		height:204px;
	}
	/*.carousel-controls
		margin-top: 100px;
	}*/
	.product-card {
		margin-top:-44px;
		min-height:auto;
	}
	.product-visual {
		width: 76%;
	}

	.status-item, .status-item .btn {
		font-size:12px;
	}
		
		

}
		
		
.packaging-card, .product-card {
	border:none;
	box-shadow: none;
	background:none;
}


body {
	/*background-image:url("../img/bg.jpg");
	background-repeat:repeat-x;
	background-size:contain;*/
}
.packaging-name {
	color:#FFF;
}

a.btn { margin-top: 10px; }
a.btn:link { text-decoration:none; }
a.btn:visited { text-decoration:none; }
a.btn:focus { text-decoration:none; }
a.btn:hover { text-decoration:none; }
a.btn:active { text-decoration:none; }		

#infoBtn {
  border-radius:0;
  padding:0;
  /*font-size:12px;*/
  font-weight:600;
  background-color:transparent;
	margin-top:0;
}

.legende {
  margin-top:0.5rem;
  border-top:1px solid #CCC;
  padding-top:1rem;
	font-size:smaller;
	text-align:right;
}



#form1 label.error {
	margin-top:15px;
  color:#F00;
}	
#box_TB, #box_DB, #box_NL {
	align-items: flex-start;
}
#box_TB label.error, #box_DB label.error, #box_NL label.error {
	margin-top:0;
}
#box-errors { 
  margin-top:1rem; margin-bottom:1rem;
  padding:1rem 0;
  /*background-color:#F00; color:#FFF;*/
}
#box-errors label.error {
  display:block; width:100%; float:none; 
  color:#F00;
}
.inp.error {
  background-color:#FFCDCD;
}
.parent-error label:first-child {
  color:#F00;
}

#btn_adr {
	margin: 2rem auto 0;
  display: block;
}

.logo {
	width:300px;height:auto;
}
#logo_lh {
  display: block;
	width: 160px;
  margin:10px auto 16px;
}

@media (max-width: 744px) {	
	.logo {
		width:200px;height:auto;
	}
	#logo_lh {
		width: 120px;
	}
}


.glow {
	width: 100%;
	position: absolute;
	min-height: 700px;
	top: 0;
	height: 463px;
	background-image: url("../img/glow.png");
	background-repeat: no-repeat;
	/*background-size: contain;*/
	background-size:76%;
	background-position: center;
}
.sign {
	width: 100%;
  position: absolute;
  min-height: 700px;
  top: 0;
  height: 463px;
  background-image: url("../img/sign.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 3.5%;
  background-position: 48% 44%;
  z-index:10;
}



@media (max-width: 744px) {	
	.glow {
		background-size:100%;
		background-position:center 38px;
	}
	.sign {
		min-height: 700px;
		top: 0;
		height: 463px;
		background-size: 8.5%;
		background-position: 48% 20%;
	}
}


#closeTermsBtn {
	margin-bottom:50px;
}







/* Generische Formatierungen */

a img { border:none; }
table { border-collapse:collapse; }
td { 
  padding:0;
  vertical-align:top; 
}

.bd, .bd a, strong { font-weight:bold; }
.nm { font-weight:normal; }
.nom  { margin:0; }
.nomt { margin-top:0; }
.nomb { margin-bottom:0; }
.mmt  { margin-top:0.5em; }
.mmb  { margin-bottom:0.5em; }
.clr { clear:both; }
.thinsp { font-size:0.5em; }
.hide { display:none; }
.upc { text-transform:uppercase; }
.lwc { text-transform:lowercase; }
.ihc { text-transform:none; }
.fltlft { float:left;  }
.fltrt  { float:right; }