hint

backend/static/assets/location-map-preview.svg

@@ -1,42 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 700" role="img" aria-label="Kartenvorschau">
-  <defs>
-    <linearGradient id="land" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#d8e6de" />
-      <stop offset="1" stop-color="#cadcd2" />
-    </linearGradient>
-    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#1f2a24" flood-opacity="0.16"/>
-    </filter>
-  </defs>
-
-  <rect width="1600" height="700" fill="url(#land)"/>
-
-  <path d="M0 420 C120 380, 200 420, 300 390 C420 360, 530 440, 670 410 C770 390, 860 350, 980 380 C1110 420, 1210 370, 1330 410 C1430 440, 1500 410, 1600 430 L1600 700 L0 700 Z" fill="#b8d2c2" opacity="0.8"/>
-
-  <path d="M40 80 L520 560" stroke="#f5f5f2" stroke-width="28" stroke-linecap="round"/>
-  <path d="M580 50 L980 650" stroke="#f7f7f4" stroke-width="26" stroke-linecap="round"/>
-  <path d="M1050 70 L1540 520" stroke="#f4f5f2" stroke-width="24" stroke-linecap="round"/>
-  <path d="M160 640 L620 170" stroke="#f2f4ef" stroke-width="20" stroke-linecap="round"/>
-
-  <path d="M30 120 L500 590" stroke="#9eb8aa" stroke-width="5" stroke-dasharray="12 14"/>
-  <path d="M600 90 L1000 670" stroke="#9fb9ab" stroke-width="5" stroke-dasharray="12 14"/>
-  <path d="M1070 100 L1555 540" stroke="#9db6a8" stroke-width="5" stroke-dasharray="12 14"/>
-  <path d="M180 655 L640 185" stroke="#9db7a9" stroke-width="5" stroke-dasharray="12 14"/>
-
-  <circle cx="1080" cy="240" r="55" fill="#b0cbba" opacity="0.9"/>
-  <circle cx="1200" cy="500" r="48" fill="#abc6b5" opacity="0.85"/>
-  <circle cx="860" cy="540" r="45" fill="#aec8b8" opacity="0.88"/>
-
-  <g filter="url(#shadow)">
-    <rect x="105" y="78" width="560" height="168" rx="16" fill="#ffffff" opacity="0.96"/>
-    <text x="135" y="125" font-size="34" font-family="Arial, Helvetica, sans-serif" fill="#20372d" font-weight="700">Klostermühle Kiedrich</text>
-    <text x="135" y="168" font-size="30" font-family="Arial, Helvetica, sans-serif" fill="#385246">An d. Klostermühle 3, 65399 Kiedrich</text>
-    <text x="135" y="210" font-size="28" font-family="Arial, Helvetica, sans-serif" fill="#4f6a5d">Kartenvorschau</text>
-  </g>
-
-  <g transform="translate(980 320)">
-    <circle cx="0" cy="0" r="34" fill="#c83c38"/>
-    <circle cx="0" cy="0" r="14" fill="#f8d9d7"/>
-    <path d="M0 34 L-17 98 L17 98 Z" fill="#c83c38"/>
-  </g>
-</svg>

backend/static/styles.css

@@ -1395,9 +1395,94 @@ body.has-route-modal {
   }
 }
 
+.location-video-card {
+  width: min(100%, 920px);
+  margin: 0 auto 1.1rem;
+  overflow: hidden;
+  border: 1px solid rgba(178, 137, 70, 0.24);
+  border-radius: 16px;
+  background: #1f3a2f;
+  box-shadow:
+    0 14px 30px rgba(31, 58, 47, 0.16),
+    0 1px 0 rgba(255, 255, 255, 0.22) inset;
+}
+
+.location-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #1f3a2f;
+  object-fit: cover;
+}
+
+.location-slideshow {
+  position: relative;
+  isolation: isolate;
+  width: min(100%, 920px);
+  aspect-ratio: 16 / 9;
+  margin: 1rem auto 1.1rem;
+  overflow: hidden;
+  border: 1px solid rgba(178, 137, 70, 0.24);
+  border-radius: 16px;
+  background: #eadfce;
+  box-shadow:
+    0 14px 30px rgba(31, 58, 47, 0.14),
+    0 1px 0 rgba(255, 255, 255, 0.64) inset;
+}
+
+.location-slideshow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(22, 34, 28, 0.06), transparent 44%),
+    linear-gradient(0deg, rgba(22, 34, 28, 0.12), transparent 34%);
+}
+
+.location-slide {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transform: scale(1.03);
+  animation: location-slide-fade 36s ease-in-out infinite;
+  animation-delay: calc(var(--slide-index) * 6s);
+}
+
+@keyframes location-slide-fade {
+  0% {
+    opacity: 0;
+    transform: scale(1.03);
+  }
+  4%,
+  16% {
+    opacity: 1;
+  }
+  22%,
+  100% {
+    opacity: 0;
+    transform: scale(1.08);
+  }
+}
+
+.location-map-intro {
+  max-width: 58ch;
+  margin: 1rem auto 0.75rem;
+  color: rgba(31, 26, 23, 0.82);
+  line-height: 1.5;
+  text-align: center;
+}
+
 .map-consent {
   display: grid;
   gap: 0.7rem;
+  width: min(100%, 920px);
+  margin: 0 auto;
   padding: 0.9rem;
   border: 1px solid rgba(31, 58, 47, 0.12);
   border-radius: 12px;
@@ -1413,17 +1498,18 @@ body.has-route-modal {
 
 .map-preview {
   width: 100%;
-  aspect-ratio: 16 / 7;
+  aspect-ratio: 4 / 3;
   min-height: 0;
+  overflow: hidden;
   border: 1px solid rgba(39, 66, 53, 0.16);
   border-radius: 12px;
   cursor: pointer;
   background-color: rgba(221, 230, 225, 0.95);
   background-image:
-    linear-gradient(180deg, rgba(28, 45, 37, 0.22), rgba(28, 45, 37, 0.22)),
+    linear-gradient(180deg, rgba(22, 34, 28, 0.12), rgba(22, 34, 28, 0.2)),
     var(--map-preview-image);
-  background-size: contain;
-  background-position: top left;
+  background-size: cover;
+  background-position: center;
   background-repeat: no-repeat;
   display: grid;
   place-items: center;
@@ -1440,9 +1526,11 @@ body.has-route-modal {
 .map-preview-overlay {
   font-weight: 700;
   color: #fff;
-  background: rgba(39, 66, 53, 0.9);
+  background: rgba(31, 58, 47, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.26);
   border-radius: 999px;
-  padding: 0.48rem 0.82rem;
+  box-shadow: 0 8px 18px rgba(18, 31, 24, 0.2);
+  padding: 0.58rem 0.95rem;
 }
 
 .map-embed-target:not(:empty) {
@@ -1497,6 +1585,11 @@ body.has-route-modal {
     justify-content: center;
   }
 
+  .location-slideshow {
+    aspect-ratio: 4 / 3;
+    border-radius: 13px;
+  }
+
   .dashboard-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1555,6 +1648,15 @@ body.has-route-modal {
     animation: none;
     opacity: 0;
   }
+
+  .location-slide {
+    animation: none;
+  }
+
+  .location-slide:first-child {
+    opacity: 1;
+    transform: none;
+  }
 }
 
 @media (max-width: 380px) {