[FIX] - mockup2-style

Author: KoberSascha

herkunftcheck/herkunftcheck2/index.html

@@ -6,6 +6,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>HerkunftCheck</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap-grid.min.css">
 
   <link rel="stylesheet" href="style/style_v1.css" />
   <link rel="stylesheet" href="style/map.css" />
@@ -59,19 +60,25 @@
 
   <div class="bottom-sheet" id="product-card">
     <div class="drag-handle" onclick="toggleSheet()"></div>
+
+
     <div class="sheet-content">
 
       <div class="product-header">
-        <h1 id="product-name" class="product-name">Apfel-Birnen-Saft</h1>
-        
-        <div class="info-card">
-        
-        <img id="product-image" src="https://source.unsplash.com/400x220/?juice,fruit" alt="Produktbild">
+        <h1 id="product-name" class="product-name text-left">Apfel-Birnen-Saft</h1>
       </div>
-      </div>
-
-      <div class="product-info">
 
+        <div class="row">
+          <div class="col-4">
+            <div class="info-card p-0">        
+              <img id="product-image" class="product-image" src="https://source.unsplash.com/400x220/?juice,fruit" alt="Produktbild">
+            </div>
+          </div>
+  
+          <div class="col-8">
+         
+              
+              
         <div class="info-card">
           <h3>Produktinformationen</h3>
           <p><strong>Hergestellt am:</strong> <span id="production-date">01.04.2025</span></p>
@@ -80,6 +87,18 @@ <h3>Produktinformationen</h3>
           <p><strong>Produzent:</strong> <span id="company-name">Obsthof Müller</span></p>
         </div>
 
+        
+          </div>
+        </div>
+       
+
+
+
+
+
+      <div class="product-info">
+
+
         <div class="info-card">
           <h3>Produktionsschritte</h3>
           <ul class="steps-list">

herkunftcheck/herkunftcheck2/style/style_v1.css

@@ -1,7 +1,8 @@
 :root {
     --background-gray: #f2f2f7;
     --background-gray: #f7f6f4;
-    --card-white: #ffffff;
+    --background-gray: #fff;
+    --card-white: #efefef;
     --text-dark: #1c1c1e;
     --text-gray: #8e8e93;
     --accent: #007aff;
@@ -105,7 +106,7 @@
     padding: 8px 0;
   }
 
-  .product-header img {
+  .product-header img,.product-image {
     width: 100%;
     max-height: 220px;
     object-fit: cover;
@@ -177,4 +178,12 @@
   .leaflet-control-zoom a {
     background-color: #fff;
     color: var(--text-dark);
+  }
+
+  .text-left{
+    text-align: left;
+  }
+
+  .p-0{
+    padding: 0 !important;
   }