Snyggare till stilmallen

css/style.css

@@ -1,25 +1,44 @@
 #hv-schema {
-    padding: 10px;
-    font-family: Arial;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin: 20px 0;
 }
+
 .hv-item {
-    border: 1px solid #ccc;
-    padding: 8px;
-    margin-bottom: 6px;
-    border-radius: 4px;
+    padding: 12px 16px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background: #fafafa;
+    transition:
+        background 0.2s,
+        box-shadow 0.2s;
 }
+
+.hv-item:hover {
+    background: #f5f5f5;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
 .hv-kurs {
     font-weight: bold;
-    color: #003366;
+    margin-bottom: 4px;
 }
+
 .hv-moment {
-    font-style: italic;
-}
-.hv-datum,
-.hv-tid {
-    color: #333;
+    margin-bottom: 6px;
 }
 .hv-lokal {
-    color: #660000;
-    font-weight: bold;
+    margin-top: 6px;
+    font-size: 0.95rem;
+}
+.hv-datetime {
+    display: flex;
+    font-size: 0.95rem;
+    gap: 10px;
+    align-items: center;
+    margin: 2px 0 4px 0;
+}
+.hv-item i {
+    color: hsl(0, 50%, 60%);
 }

src/frontend.js

@@ -9,9 +9,11 @@ document.addEventListener("DOMContentLoaded", () => {
      <div class='hv-item'>
        <div class='hv-kurs'>${ev.kurs}</div>
        <div class='hv-moment'>${ev.moment}</div>
-       <div class='hv-datum'>${ev.datum}</div>
-       <div class='hv-tid'>${ev.tid}</div>
-       <div class='hv-lokal'>${ev.lokal}</div>
+       <div class='hv-datetime'><i class="fa-solid fa-calendar-days"></i>
+            <span class="hv-datum">${ev.datum}</span>
+            <span class="hv-tid">${ev.tid}</span>
+        </div>
+       <div class='hv-lokal'><i class="fa-solid fa-location-dot"></i>${ev.lokal}</div>
      </div>`,
             )
             .join("");