From b1a5293d82f837e7b8cda39b352063bbc24ea634 Mon Sep 17 00:00:00 2001 From: Claude Code Date: Mon, 6 Apr 2026 18:54:01 +0200 Subject: [PATCH] fix: Karussell-Hoehe passt sich dynamisch an Inhalt an - Active Card position:relative (bestimmt Track-Hoehe) - Side Cards position:absolute (schweben ueber Active) - Viewport nur horizontal geclippt, vertikal frei - min-height entfernt, Card-Inhalt bestimmt die Hoehe Co-Authored-By: Claude Opus 4.6 (1M context) --- vorschau/css/style.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/vorschau/css/style.css b/vorschau/css/style.css index 07c3cca..76c089d 100644 --- a/vorschau/css/style.css +++ b/vorschau/css/style.css @@ -142,13 +142,13 @@ a { color:inherit; text-decoration:none; } .live-stat-label { display:block; font-size:0.8rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; } /* ==================== 3D CAROUSEL ==================== */ -.carousel-viewport { overflow:hidden; padding:20px 0; position:relative; } -.carousel-track { display:flex; justify-content:center; align-items:center; position:relative; min-height:440px; } +.carousel-viewport { overflow-x:clip; overflow-y:visible; padding:20px 0; position:relative; } +.carousel-track { display:flex; justify-content:center; position:relative; } .carousel-card { width:860px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:absolute; display:flex; flex-direction:column; transition:all 0.6s cubic-bezier(0.4,0,0.2,1); cursor:pointer; transform-style:preserve-3d; } -.carousel-card.active { transform:scale(1) translateX(0) rotateY(0); z-index:3; opacity:1; pointer-events:all; } -.carousel-card.left { transform:scale(0.78) translateX(-110%) rotateY(12deg); z-index:1; opacity:0.5; pointer-events:all; } -.carousel-card.right { transform:scale(0.78) translateX(110%) rotateY(-12deg); z-index:1; opacity:0.5; pointer-events:all; } -.carousel-card.hidden { transform:scale(0.6) translateX(0); z-index:0; opacity:0; pointer-events:none; } +.carousel-card.active { position:relative; transform:none; z-index:3; opacity:1; } +.carousel-card.left { position:absolute; left:0; top:0; transform:scale(0.75) translateX(-70%); z-index:1; opacity:0.45; } +.carousel-card.right { position:absolute; right:0; top:0; transform:scale(0.75) translateX(70%); z-index:1; opacity:0.45; } +.carousel-card.hidden { position:absolute; transform:scale(0.5); z-index:0; opacity:0; pointer-events:none; } /* Carousel arrows */ .carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; border:2px solid var(--gray-200); background:var(--white); color:var(--navy); font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:var(--shadow); line-height:1; }