[EDIT] - moved mockup

Author: KoberSascha

herkunftcheck/herkunftcheck2/index.html

@@ -222,13 +222,6 @@ img {
 	font-size: 14px;
 }
 
-.product-image-container{
-height:100%;
-width:100%;
-}
-
-
-
 @media (max-width: 768px) {
 
 

herkunftcheck/script/map_1.1.2.js …check/herkunftcheck2/script/map_1.1.2.jsherkunftcheck/script/map_1.1.2.js renamed to herkunftcheck/herkunftcheck2/script/map_1.1.2.js herkunftcheck/script/map_1.1.2.js renamed to herkunftcheck/herkunftcheck2/script/map_1.1.2.js

@@ -1,10 +1,8 @@
 #map {
     height: 100vh;
     width: 100%;
-    border-radius: 0px;
+    border-radius: 10px;
     z-index: 110;
-    top:0;
-    position: fixed !important;
 }
 
   /* Custom popup styling */
@@ -96,17 +94,4 @@
     text-align: center;
     border-radius: 50% !important;
     font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
-}
-
-
-@media only screen and (max-width: 700px) {
-    #map {
-        height: 80vh;
-    }
-
-
-    .leaflet-bottom {
-        bottom: 7vh !important;
-      }
-
 }

herkunftcheck/herkunftcheck2/style/card_v2.1.1.css

@@ -349,133 +349,78 @@ transition: 0.35s 0.35s transform cubic-bezier(.1,.72,.4,.97);
 */
 
 
-:root {
-  --background-gray: #f2f2f7;
-  --card-white: #ffffff;
-  --text-dark: #1c1c1e;
-  --text-gray: #8e8e93;
-  --accent: #007aff;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  background: var(--background-gray);
-  height: 100vh;
-  overflow: hidden;
-}
 
-button {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  z-index: 2;
-  padding: 10px 18px;
-  border: none;
-  background: var(--accent);
-  color: white;
-  border-radius: 12px;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.bottom-sheet {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 92%;
-  background: var(--background-gray);
-  border-top-left-radius: 28px;
-  border-top-right-radius: 28px;
-  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
-  transform: translateY(65%);
-  transition: transform 0.3s ease;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
-.bottom-sheet.open {
-  transform: translateY(0%);
-}
-
-.drag-handle {
-  width: 44px;
-  height: 5px;
-  background: #ccc;
-  border-radius: 3px;
-  margin: 12px auto;
-}
-
-.sheet-content {
-  padding: 0 20px 24px;
-}
-
-.product-header {
-  text-align: center;
-  padding: 8px 0;
+html,
+.root {
+padding: 0;
+margin: 0;
+font-size: 18px;
 }
 
-.product-header img {
-  width: 100%;
-  max-height: 220px;
-  object-fit: cover;
-  border-radius: 16px;
-  margin-bottom: 10px;
+body {
+font: menu;
+font-size: 1rem;
+line-height: 1.4;
+padding: 0;
+margin: 0;
 }
-
-.product-name {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-  color: var(--text-dark);
+section {
+padding-top: 0rem;
+width: 100%;
+margin: auto;
 }
-
-.product-info {
-  display: grid;
-  gap: 8px;
-  margin-top: 16px;
+h1 {
+font-size: 2rem;
+font-weight: 500;
 }
-
-.info-card {
-  background: var(--card-white);
-  border-radius: 16px;
-  padding: 16px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+details[open] summary ~ * {
+animation: open 0.3s ease-in-out;
 }
 
-.info-card h3 {
-  margin: 0 0 10px;
-  font-size: 18px;
-  color: var(--text-dark);
+@keyframes open {
+0% {
+  opacity: 0;
 }
-
-.info-card p {
-  margin: 4px 0;
-  color: var(--text-gray);
-  font-size: 15px;
+100% {
+  opacity: 1;
 }
-
-.steps-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
 }
-
-.steps-list li {
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-  color: var(--text-dark);
+details summary::-webkit-details-marker {
+display: none;
 }
 
-.certificate-images {
-  margin-top: 10px;
-  display: flex;
-  gap: 8px;
+details summary {
+width: 100%;
+padding: 0.5rem 0;
+border-top: 1px solid black;
+position: relative;
+cursor: pointer;
+font-size: 1.25rem;
+font-weight: 300;
+list-style: none;
 }
 
-.certificate-images img {
-  height: 32px;
-  border-radius: 4px;
+details summary:after {
+content: "+";
+color: black;
+position: absolute;
+font-size: 1.75rem;
+line-height: 0;
+margin-top: 0.75rem;
+right: 0;
+font-weight: 200;
+transform-origin: center;
+transition: 200ms linear;
+}
+details[open] summary:after {
+transform: rotate(45deg);
+font-size: 2rem;
+}
+details summary {
+outline: 0;
+}
+details p {
+font-size: 0.95rem;
+margin: 0 0 1rem;
+padding-top: 1rem;
 }