styling, DateOfBirth corrected

frontend/src/lib/components/Modal.svelte

@@ -28,28 +28,6 @@
 
 <div class="modal-background">
 	<div transition:modal|global={{ duration: 1000 }} class="modal" role="dialog" aria-modal="true">
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<a
-			title={$t('cancel')}
-			class="modal-close"
-			on:click={closeModal}
-			role="button"
-			tabindex="0"
-			on:keydown={(e) => e.key == 'Enter' && closeModal()}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="20"
-				height="20"
-				viewBox="0 0 384 512"
-				aria-hidden="true"
-			>
-				<path
-					d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
-				/>
-			</svg>
-			<span class="sr-only">{$t('cancel')}</span>
-		</a>
 		<div class="container">
 			<slot />
 		</div>
@@ -64,7 +42,7 @@
 		top: 0;
 		right: 0;
 		bottom: 0;
-		background: rgba(30, 30, 46, 0.65); /* var(--base) with 0.75 opacity */
+		background: var(--modal-backdrop); /* var(--base) with 0.75 opacity */
 		backdrop-filter: blur(4px); /* Optional: adds a slight blur effect */
 		z-index: 9999;
 		display: flex;
@@ -149,7 +127,6 @@
 		.modal .container {
 			flex-direction: column;
 			left: 0;
-			width: 100%;
 		}
 	}
 </style>