diff --git a/src/components/ClaraPortfolio.tsx b/src/components/ClaraPortfolio.tsx
index 480b483..b96d022 100644
--- a/src/components/ClaraPortfolio.tsx
+++ b/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,9 +443,10 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
                   </div>
                 </div>
 
-                <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
+                <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">
+                  <div className="bg-[#4A5D50]/5 p-5 rounded-xl border border-[#4A5D50]/20 relative overflow-hidden">
                   {data.projectExcerptBadge && (
                     <div className="absolute top-0 right-0 p-2 text-stone-700 text-[10px] font-mono select-none">
                       {data.projectExcerptBadge}
@@ -457,6 +458,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
                   <div className="text-stone-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
                     <Markdown>{selectedProject.description || "Für dieses Buchprojekt wurden noch keine lyrischen Gedanken freigegeben."}</Markdown>
                   </div>
+                  </div>
                 </div>
               </div>
               
diff --git a/src/components/EroticaPortfolio.tsx b/src/components/EroticaPortfolio.tsx
index efc462d..2f174db 100644
--- a/src/components/EroticaPortfolio.tsx
+++ b/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,9 +443,10 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
                   </div>
                 </div>
 
-                <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
+                <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">
+                  <div className="bg-orange-950/10 p-5 rounded-xl border border-orange-950/20 relative overflow-hidden">
                   {data.projectExcerptBadge && (
                     <div className="absolute top-0 right-0 p-2 text-neutral-700 text-[10px] font-mono select-none">
                       {data.projectExcerptBadge}
@@ -457,6 +458,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
                   <div className="text-neutral-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
                     <Markdown>{selectedProject.description || "Für dieses diskrete Werk wurde noch kein detaillierter Auszug freigegeben."}</Markdown>
                   </div>
+                  </div>
                 </div>
               </div>
               
diff --git a/src/components/ProjectDetailMedia.tsx b/src/components/ProjectDetailMedia.tsx
index db092a6..0fd92c0 100644
--- a/src/components/ProjectDetailMedia.tsx
+++ b/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"
           />
diff --git a/src/components/ReneePortfolio.tsx b/src/components/ReneePortfolio.tsx
index bd3ec82..5c76108 100644
--- a/src/components/ReneePortfolio.tsx
+++ b/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,9 +427,10 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
                 />
               </div>
 
-              <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
+              <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">
+                <div className="bg-slate-900/60 p-5 rounded-xl border border-slate-800 relative overflow-hidden">
                 {data.projectExcerptBadge && (
                   <div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none">
                     {data.projectExcerptBadge}
@@ -455,9 +457,11 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
                     {selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."}
                   </Markdown>
                 </div>
+                </div>
               </div>
             </div>
           </div>
+          </div>
         </div>
       )}
 
diff --git a/src/components/SciFiPortfolio.tsx b/src/components/SciFiPortfolio.tsx
index bcf2dd7..def4de2 100644
--- a/src/components/SciFiPortfolio.tsx
+++ b/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,9 +468,10 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
                   </div>
                 </div>
 
-                <ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
+                <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">
+                  <div className="bg-slate-950/60 p-5 rounded-xl border border-slate-800/60 relative overflow-hidden">
                   {data.projectExcerptBadge && (
                     <div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none">
                       {data.projectExcerptBadge}
@@ -482,6 +483,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
                   <div className="text-slate-300 text-sm leading-relaxed markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
                     <Markdown>{selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."}</Markdown>
                   </div>
+                  </div>
                 </div>
               </div>