feat: improve responsive project detail layout

src/components/ClaraPortfolio.tsx

@@ -405,7 +405,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
           />
 
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <div className="relative transform overflow-hidden rounded-2xl bg-stone-950 border border-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6 md:p-8 space-y-6">
+            <div className="relative transform overflow-hidden rounded-2xl bg-stone-950 border border-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
               
               <button 
                 onClick={() => setSelectedProject(null)}
@@ -443,6 +443,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
                   </div>
                 </div>
 
+                <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
                   <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
 
                   <div className="bg-[#4A5D50]/5 p-5 rounded-xl border border-[#4A5D50]/20 relative overflow-hidden">
@@ -459,6 +460,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
                   </div>
                   </div>
                 </div>
+              </div>
               
             </div>
           </div>

src/components/EroticaPortfolio.tsx

@@ -405,7 +405,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
           />
 
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <div className="relative transform overflow-hidden rounded-2xl bg-neutral-950 border border-neutral-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6 md:p-8 space-y-6">
+            <div className="relative transform overflow-hidden rounded-2xl bg-neutral-950 border border-neutral-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
               
               <button 
                 onClick={() => setSelectedProject(null)}
@@ -443,6 +443,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
                   </div>
                 </div>
 
+                <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
                   <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
 
                   <div className="bg-orange-950/10 p-5 rounded-xl border border-orange-950/20 relative overflow-hidden">
@@ -459,6 +460,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
                   </div>
                   </div>
                 </div>
+              </div>
               
             </div>
           </div>

src/components/ProjectDetailMedia.tsx

@@ -26,7 +26,7 @@ export default function ProjectDetailMedia({ project, accentColor }: ProjectDeta
           <img
             src={project.imageUrl}
             alt={`Motiv zum Projekt ${project.title}`}
-            className="w-full max-h-[28rem] object-cover"
+            className="block w-full h-auto"
             loading="lazy"
             referrerPolicy="no-referrer"
           />

src/components/ReneePortfolio.tsx

@@ -395,9 +395,10 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
 
       {/* Project Details Modal */}
       {selectedProject && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-fade-in">
+        <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-md animate-fade-in">
+          <div className="flex min-h-full items-center justify-center p-4">
           <div 
-            className="relative w-full max-w-lg border rounded-2xl p-6 md:p-8 space-y-6 shadow-2xl"
+            className="relative w-full max-w-5xl border rounded-2xl p-6 md:p-8 my-8 space-y-6 shadow-2xl"
             style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}40` }}
           >
             <button 
@@ -426,6 +427,7 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
                 />
               </div>
 
+              <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
                 <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
 
                 <div className="bg-slate-900/60 p-5 rounded-xl border border-slate-800 relative overflow-hidden">
@@ -459,6 +461,8 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
               </div>
             </div>
           </div>
+          </div>
+        </div>
       )}
 
       {/* Footer */}

src/components/SciFiPortfolio.tsx

@@ -429,7 +429,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
           />
 
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <div className="relative transform overflow-hidden rounded-2xl bg-slate-900 border border-slate-800 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6 md:p-8 space-y-6">
+            <div className="relative transform overflow-hidden rounded-2xl bg-slate-900 border border-slate-800 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
               
               {/* Close Button */}
               <button 
@@ -468,6 +468,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
                   </div>
                 </div>
 
+                <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
                   <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
 
                   <div className="bg-slate-950/60 p-5 rounded-xl border border-slate-800/60 relative overflow-hidden">
@@ -484,6 +485,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
                   </div>
                   </div>
                 </div>
+              </div>
               
             </div>
           </div>