Updated multiple things on wedding-page

layouts/_default/wedding.html

@@ -1,14 +1,23 @@
 {{ define "content" }}
 
 <style>
-  .wedding-container {
-    max-width: 800px;
+body {
+    background-color: #fff; /* light bg */
+    color: #222;            /* dark text */
+    /* NEW: background image */
+    background-image: url('/images/hochzeit-bg.jpg'); /* path to your image */
+    background-size: cover;       /* cover whole container */
+    background-position: center;  /* center the image */
+    background-repeat: repeat; /* don't tile */
+    border-radius: 8px;           /* optional: match your hero border-radius */
+}
+.wedding-container {
+    max-width: 1600px;
     margin: 0 auto;
     padding: 2rem;
     font-family: system-ui, sans-serif;
     line-height: 1.6;
-  }
-
+}
   .hero {
     text-align: center;
     margin-bottom: 3rem;
@@ -42,13 +51,15 @@
 
   .map iframe {
     width: 100%;
+    background-color: rgba(255, 255, 255, 0.5); /* subtle white overlay */
+    padding: 1rem;
     height: 400px;
     border: 0;
     border-radius: 8px;
   }
 
   .rsvp {
-    background: #f8f8f8;
+    background-color: rgba(255, 255, 255, 0.8); /* subtle white overlay */
     padding: 1rem;
     border-radius: 8px;
   }

layouts/partials/audio.html

@@ -2,7 +2,7 @@
 .music-fab {
   position: fixed;
   bottom: 20px;
-  left: 20px;   /* 👈 change here */
+  left: 20px;
   z-index: 9999;
 }
 
@@ -24,19 +24,28 @@
 </style>
 
 <div class="music-fab">
-  <button id="music-btn" class="fab-button">▶️</button>
+  <button id="music-btn" class="fab-button">⏸️</button>
 </div>
 
-<audio id="bg-music" loop>
+<audio id="bg-music" autoplay loop>
   <source src="/audio/canon-in-d.mp3" type="audio/mpeg">
 </audio>
+
 <script>
 const btn = document.getElementById("music-btn");
 const audio = document.getElementById("bg-music");
 
-audio.volume = 0.2;
+audio.volume = 0.3;
 
-let isPlaying = false;
+// Initial state: assume autoplay started
+let isPlaying = true;
+btn.textContent = "⏸️"; // pause icon
+
+// Handle autoplay blocked by some browsers
+audio.play().catch(() => {
+  isPlaying = false;
+  btn.textContent = "▶️"; // play icon
+});
 
 btn.addEventListener("click", async () => {
   if (!isPlaying) {
@@ -50,7 +59,7 @@ btn.addEventListener("click", async () => {
   } else {
     audio.pause();
     isPlaying = false;
-    btn.textContent = "▶️";
+    btn.textContent = "▶️"; // play icon
   }
 });
 </script>