frontend/src/lib/planner/DesktopDayTile.svelte

@@ -126,10 +126,11 @@
 		<div class="card" class:flipped={isFlipped}>
 
 			<!-- FRONT -->
-			<div
-				class="card-front"
-				style="background: {gradientBackground}; background-size: cover; background-position: center;"
-			>
+			<div class="card-front">
+				<div
+					class="card-front-inner"
+					style="background: {gradientBackground}; background-size: cover; background-position: center;"
+				>
 				<!-- Full-tile dual gradient overlay -->
 				<div class="tile-overlay"></div>
 
@@ -157,10 +158,12 @@
 						</div>
 					{/if}
 				</div>
+				</div> <!-- /.card-front-inner -->
 			</div>
 
 			<!-- BACK -->
 			<div class="card-back" aria-hidden={!isFlipped}>
+			<div class="card-back-inner">
 				<button
 					type="button"
 					aria-label="Schließen"
@@ -199,6 +202,7 @@
 						{/if}
 					{/if}
 				</div>
+			</div> <!-- /.card-back-inner -->
 			</div>
 
 		</div>
@@ -254,6 +258,7 @@
 		transform-style: preserve-3d;
 		transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 		border-radius: 10px;
+		will-change: transform;
 	}
 	.card.flipped {
 		transform: rotateY(180deg);
@@ -263,6 +268,13 @@
 		position: absolute;
 		inset: 0;
 		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		/* border-radius and overflow on inner wrappers, not here —
+		   overflow:hidden on preserve-3d children flattens the 3D context */
+	}
+	.card-front-inner {
+		position: absolute;
+		inset: 0;
 		border-radius: 10px;
 		overflow: hidden;
 	}
@@ -359,10 +371,15 @@
 	/* ── Back face ── */
 	.card-back {
 		transform: rotateY(180deg);
+	}
+	.card-back-inner {
+		position: absolute;
+		inset: 0;
+		border-radius: 10px;
+		overflow-y: auto;
 		background: var(--color-page);
 		border: 1px solid var(--color-border);
 		padding: 10px;
-		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 	}