update

frontend/src/components/MovieCard.vue

@@ -12,6 +12,12 @@ const poster = computed(() => posterUrl(props.movie.poster_path, 'w342'))
 const rating = computed(() =>
   props.movie.vote_average ? props.movie.vote_average.toFixed(1) : null
 )
+
+const meta = computed(() =>
+  [props.movie.year || 'Jahr unbekannt', props.movie.runtime && `${props.movie.runtime} Min.`]
+    .filter(Boolean)
+    .join(' · ')
+)
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const rating = computed(() =>
     </div>
     <div class="body">
       <h2>{{ movie.title }}</h2>
-      <p class="meta">{{ movie.year || 'Jahr unbekannt' }}</p>
+      <p class="meta">{{ meta }}</p>
       <p class="teaser">{{ movie.teaser || movie.overview }}</p>
     </div>
   </button>
@@ -87,6 +93,14 @@ const rating = computed(() =>
 }
 
 h2 {
+  /* Feste Höhe für drei Zeilen: sonst rutschen die Kacheln einer Reihe
+     unterschiedlich weit nach unten */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  min-height: calc(3 * 1.3em);
   font-size: 1rem;
   line-height: 1.3;
 }
@@ -102,6 +116,7 @@ h2 {
   -webkit-line-clamp: 4;
   line-clamp: 4;
   overflow: hidden;
+  min-height: calc(4 * 1.45em);
   color: #b9b9c6;
   font-size: 0.85rem;
   line-height: 1.45;