@charset "UTF-8";
/* ------------------------------------------------------------------
   Packstory - "Was passt alles in eine Umzugskiste?"
   Eigener Namespace duk-ps-*, kollidiert nicht mit bestehenden Klassen.
   Mobile first, Breakpoints wie im restlichen Projekt (768 / 1024 / 1200).
------------------------------------------------------------------- */

/* die randlos volle Buehne (100vw) darf keinen horizontalen Scrollbalken
   ausloesen -> nur diese Sektion clippen, nicht global */
.duk-ps-section{ overflow-x:hidden; }

.duk-ps{
	--duk-ps-accent:#98F0D7;
	--duk-ps-ink:#101010;
	--duk-ps-muted:#777777;
	width:100%;
	max-width:1180px;
	margin:0 auto;
	padding:0 14px;
	box-sizing:border-box;
}

.duk-ps *,
.duk-ps *:before,
.duk-ps *:after{ box-sizing:border-box; }


/* ---------- Kopfbereich ---------- */

.duk-ps__head{
	text-align:center;
	margin-bottom:22px;
}

.duk-ps__eyebrow{
	display:inline-block;
	margin:0 0 10px 0;
	padding:5px 14px;
	border-radius:999px;
	background:var(--duk-ps-accent);
	color:#0B3B2E;
	font-family:'Mainfont-Bold';
	font-size:13px;
	letter-spacing:0.04em;
	text-transform:uppercase;
}

/* Typografie kommt aus den Standard-Klassen (.font-heading5 / .font-normal1),
   hier nur noch Layout/Abstand/Farbe der Kopfzeile */
.duk-ps__title{
	margin:0 0 10px 0;
	color:var(--duk-ps-ink);
}

.duk-ps__lead{
	margin:0 auto;
	max-width:640px;
	color:#404040;
}


/* ---------- Buehne ---------- */

.duk-ps__stage{
	position:relative;
	/* Boden randlos ueber die gesamte Bildschirmbreite */
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	/* Hoehe kommt von der zentrierten Szene -> nicht mehr die volle Bildschirmhoehe */
	border-radius:0;
	overflow:hidden;
	background:#C7A87E;
	box-shadow:0 18px 40px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
}

/* Boden fuellt die ganze Buehnenbreite, die Szene mit Kiste/Gegenstaenden
   bleibt zentriert und gedeckelt -> Hoehe bleibt im Rahmen */
.duk-ps__scene{
	position:relative;
	width:100%;
	max-width:1180px;
	margin:0 auto;
	aspect-ratio:1920 / 1436;   /* bewahrt die exakten Positionen exakt */
}

.duk-ps__floor{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}

/* leichte Raumtiefe: Abdunklung zu den Raendern */
.duk-ps__shade{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	background:
		radial-gradient(120% 95% at 50% 38%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 45%),
		radial-gradient(115% 100% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.22) 100%);
	pointer-events:none;
}


/* ---------- Kiste ---------- */

.duk-ps__box{
	position:absolute;
	left:29.9479%;
	top:30.7799%;
	width:38.9062%;
	aspect-ratio:747 / 546;   /* echte Hoehe -> sonst box.height=0 (Frames sind absolut) */
	transform-origin:50% 55%;
	filter:drop-shadow(0 14px 18px rgba(0,0,0,0.34));
	transition:transform 260ms cubic-bezier(.34,1.56,.64,1);
}

.duk-ps__box.is-bump{ transform:scale(1.022); }

.duk-ps__box picture{ display:block; }

.duk-ps__frame{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:auto;
	opacity:0;
	transition:opacity 160ms ease;   /* schneller Crossfade -> keine Luecke beim Einlegen */
}

.duk-ps__frame:first-child{ position:relative; }
.duk-ps__frame.is-active{ opacity:1; }


/* ---------- Gegenstaende ---------- */

.duk-ps__item{
	position:absolute;
	transform-origin:50% 50%;
	filter:drop-shadow(0 8px 10px rgba(0,0,0,0.30));
	transition:opacity 220ms ease;
}

.duk-ps__item img{
	display:block;
	width:100%;
	height:auto;
	pointer-events:none;
	-webkit-user-drag:none;
}

.duk-ps__item.is-flying{ z-index:5; will-change:transform, opacity; }
.duk-ps__item.is-packed{ opacity:0; visibility:hidden; }

/* dezenter Puls auf dem Gegenstand, der als naechstes dran ist */
.duk-ps__item.is-next:after{
	content:"";
	position:absolute;
	left:-7%; top:-7%; right:-7%; bottom:-7%;
	border-radius:14px;
	box-shadow:0 0 0 2px rgba(152,240,215,0.9);
	animation:dukPsPulse 1500ms ease-in-out infinite;
	pointer-events:none;
}

@keyframes dukPsPulse{
	0%,100%{ opacity:0.25; transform:scale(0.99); }
	50%    { opacity:0.85; transform:scale(1.02); }
}


/* ---------- HUD auf der Buehne ---------- */

.duk-ps__hud{
	position:absolute;
	left:10px; top:10px;
	display:flex;
	align-items:center;
	gap:8px;
	max-width:calc(100% - 20px);
	padding:7px 12px;
	border-radius:999px;
	background:rgba(255,255,255,0.90);
	box-shadow:0 4px 14px rgba(0,0,0,0.18);
	pointer-events:none;
}

.duk-ps__count{
	font-family:'Mainfont-ExtraBold';
	font-size:14px;
	line-height:1;
	color:var(--duk-ps-ink);
	white-space:nowrap;
}

/* der Zaehler selbst darf sich deutlich abheben: groesser und satter */
.duk-ps__count-value{
	display:inline-block;
	font-family:'Mainfont-ExtraBold';
	font-weight:800;
	font-size:1.55em;
	line-height:1;
	vertical-align:-0.08em;
	margin-right:1px;
	color:var(--duk-ps-ink);
}

.duk-ps__label{
	font-family:'Mainfont-Medium';
	font-size:13px;
	line-height:1.2;
	color:#404040;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	opacity:0;
	transition:opacity 200ms ease;
}

.duk-ps__label.is-on{ opacity:1; }

.duk-ps__label:before{
	content:"";
	display:inline-block;
	width:5px; height:5px;
	margin-right:7px;
	border-radius:50%;
	background:var(--duk-ps-accent);
	vertical-align:middle;
}

/* Abschluss-Overlay */
.duk-ps__done{
	position:absolute;
	left:50%; bottom:13%;
	transform:translate(-50%,14px) scale(0.96);
	padding:14px 20px;
	border-radius:14px;
	background:rgba(255,255,255,0.95);
	box-shadow:0 12px 34px rgba(0,0,0,0.26);
	text-align:center;
	opacity:0;
	visibility:hidden;
	transition:opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
	max-width:84%;
}

.duk-ps__done.is-on{
	opacity:1;
	visibility:visible;
	transform:translate(-50%,0) scale(1);
	transition:opacity 320ms ease, transform 380ms cubic-bezier(.34,1.4,.64,1), visibility 0s;
}

.duk-ps__done-title{
	font-family:'Mainfont-ExtraBold';
	font-size:21px;
	line-height:1.3em;
	color:var(--duk-ps-ink);
}

.duk-ps__done-text{
	margin-top:6px;
	color:#404040;   /* Schriftgroesse/-art kommt aus .font-normal1 */
}

/* grosser Replay-Button in der Mitte - erscheint mit dem Abschluss */
.duk-ps__replay{
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%,-50%) scale(0.85);
	width:80px; height:80px;
	padding:0;
	border:none;
	border-radius:50%;
	background:var(--duk-ps-accent);
	color:#0B3B2E;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 12px 34px rgba(0,0,0,0.32);
	opacity:0;
	visibility:hidden;
	transition:opacity 320ms ease, transform 380ms cubic-bezier(.34,1.4,.64,1), visibility 0s linear 320ms;
	z-index:6;
}

.duk-ps__replay.is-on{
	opacity:1;
	visibility:visible;
	transform:translate(-50%,-50%) scale(1);
	transition:opacity 320ms ease, transform 420ms cubic-bezier(.34,1.4,.64,1), visibility 0s;
}

.duk-ps__replay.is-on:hover{ transform:translate(-50%,-50%) scale(1.06); }
.duk-ps__replay:focus-visible{ outline:3px solid #0B3B2E; outline-offset:3px; }
.duk-ps__replay svg{ width:36px; height:36px; fill:currentColor; }


/* ---------- Steuerung ---------- */

.duk-ps__bar{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:14px;
}

.duk-ps__progress{
	position:relative;
	flex:1 1 auto;
	height:5px;
	border-radius:999px;
	background:#DCDCDC;
	overflow:hidden;
}

.duk-ps__progress span{
	position:absolute;
	left:0; top:0; bottom:0;
	width:0%;
	border-radius:999px;
	background:var(--duk-ps-ink);
	transition:width 420ms ease;
}

.duk-ps__btn{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:36px;
	padding:0 14px;
	border:1px solid #D2D2D2;
	border-radius:999px;
	background:#FFFFFF;
	color:var(--duk-ps-ink);
	font-family:'Mainfont-Medium';
	font-size:13px;
	cursor:pointer;
	transition:background 160ms ease, border-color 160ms ease;
}

.duk-ps__btn:hover{ background:#F1F1F1; border-color:#B5B5B5; }
.duk-ps__btn:focus-visible{ outline:2px solid var(--duk-ps-ink); outline-offset:2px; }
.duk-ps__btn svg{ width:11px; height:11px; fill:currentColor; }


/* ---------- Liste der Gegenstaende ---------- */

.duk-ps__list{
	display:flex;
	flex-wrap:nowrap;                 /* mobil: eine scrollbare Zeile statt 5 Reihen */
	justify-content:flex-start;
	gap:7px;
	margin:16px 0 0 0;
	padding:0 0 4px 0;
	list-style:none;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}

.duk-ps__list::-webkit-scrollbar{ display:none; }

.duk-ps__chip{
	flex:0 0 auto;
	white-space:nowrap;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:5px 11px;
	border:1px solid #E0E0E0;
	border-radius:999px;
	background:#FFFFFF;
	color:var(--duk-ps-muted);
	font-family:'Mainfont-Medium';
	font-size:12.5px;
	line-height:1.3;
	cursor:pointer;
	transition:color 220ms ease, border-color 220ms ease, background 220ms ease;
}

.duk-ps__chip:before{
	content:"";
	width:6px; height:6px;
	border-radius:50%;
	background:#DDDDDD;
	transition:background 220ms ease, transform 220ms ease;
}

.duk-ps__chip.is-packed{
	color:var(--duk-ps-ink);
	border-color:var(--duk-ps-ink);
	background:#FFFFFF;
}

.duk-ps__chip.is-packed:before{
	background:var(--duk-ps-accent);
	transform:scale(1.25);
}

.duk-ps__chip.is-current{
	color:var(--duk-ps-ink);
	border-color:var(--duk-ps-accent);
	background:var(--duk-ps-accent);
}


/* ---------- Bewegungsreduktion ---------- */

@media (prefers-reduced-motion: reduce){
	.duk-ps__item,
	.duk-ps__frame,
	.duk-ps__box,
	.duk-ps__progress span{ transition-duration:1ms !important; }
	.duk-ps__item.is-next:after{ animation:none; }
}


/* ---------- Tablet ---------- */

@media (min-width: 768px){
	.duk-ps{ padding:0 20px; }
	.duk-ps__stage{ border-radius:0; }
	.duk-ps__hud{ left:16px; top:16px; padding:9px 16px; gap:10px; }
	.duk-ps__count{ font-size:16px; }
	.duk-ps__label{ font-size:15px; }
	.duk-ps__done{ padding:22px 30px; }
	.duk-ps__done-title{ font-size:26px; }
	.duk-ps__chip{ font-size:13.5px; padding:6px 13px; }
	.duk-ps__btn{ min-height:40px; font-size:14px; padding:0 17px; }
	.duk-ps__list{ flex-wrap:wrap; justify-content:center; overflow:visible; padding-bottom:0; }
}


/* ---------- Desktop ---------- */

@media (min-width: 1024px){
	.duk-ps__stage{ border-radius:0; }
	.duk-ps__hud{ left:22px; top:22px; }
	.duk-ps__replay{ width:98px; height:98px; }
	.duk-ps__replay svg{ width:44px; height:44px; }
	.duk-ps__done-title{ font-size:32px; }
	.duk-ps__bar{ margin-top:18px; gap:16px; }
	.duk-ps__list{ margin-top:20px; gap:8px; }
}