update

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import MovieCard from './components/MovieCard.vue'
 import FilterSidebar from './components/FilterSidebar.vue'
 import AehnlichTab from './components/AehnlichTab.vue'
@@ -88,12 +88,23 @@ const tabs = computed(() => [
 ])
 
 // Auf dem Handy passt die Filterleiste nicht neben die Karten — dort
-// klappt sie über einen Knopf auf
+// legt sie sich über einen Knopf über die Seite
 const filterOffen = ref(false)
 const mitFilter = computed(() =>
   ['netflix', 'canon', 'search', 'aehnlich'].includes(activeTab.value)
 )
 
+// Passen die Reiter nicht in eine Zeile, soll der offene sichtbar sein
+const reiter = ref(null)
+
+watch(activeTab, async () => {
+  filterOffen.value = false
+  await nextTick()
+  const leiste = reiter.value
+  if (!leiste || leiste.scrollWidth <= leiste.clientWidth) return
+  leiste.querySelector('.active')?.scrollIntoView({ inline: 'center', block: 'nearest' })
+})
+
 const selected = ref(null)
 
 // Der Katalog liefert nur sechs Bildpfade je Film. Beim Öffnen holen wir
@@ -154,29 +165,33 @@ onMounted(load)
 
 <template>
   <div class="page" :class="{ breit: !mitFilter }">
-    <nav class="tabs">
+    <header class="kopf">
-      <button
+      <nav ref="reiter" class="tabs">
-        v-for="tab in tabs"
+        <button
-        :key="tab.id"
+          v-for="tab in tabs"
-        type="button"
+          :key="tab.id"
-        :class="{ active: tab.id === activeTab }"
+          type="button"
-        @click="activeTab = tab.id"
+          :class="{ active: tab.id === activeTab }"
-      >
+          @click="activeTab = tab.id"
-        {{ tab.label }}
+        >
-        <span v-if="tab.count !== null" class="count">{{ tab.count }}</span>
+          {{ tab.label }}
-      </button>
+          <span v-if="tab.count !== null" class="count">{{ tab.count }}</span>
-      <button
+        </button>
-        v-if="mitFilter"
+      </nav>
-        type="button"
+      <div class="rechts">
-        class="filter-knopf"
+        <button
-        :class="{ an: filterOffen }"
+          v-if="mitFilter"
-        @click="filterOffen = !filterOffen"
+          type="button"
-      >
+          class="filter-knopf"
-        Filter
+          :class="{ an: filterOffen }"
-      </button>
+          @click="filterOffen = !filterOffen"
-      <NamensWahl v-if="!host" :items="runde" :mine="ich" @waehlen="michSetzen" />
+        >
-      <span v-else class="host">Host</span>
+          Filter
-    </nav>
+        </button>
+        <NamensWahl v-if="!host" :items="runde" :mine="ich" @waehlen="michSetzen" />
+        <span v-else class="host">Host</span>
+      </div>
+    </header>
 
     <div v-if="activeTab === 'search' || activeTab === 'aehnlich'" class="layout">
       <SearchTab
@@ -317,6 +332,15 @@ onMounted(load)
       ↑
     </button>
 
+    <button
+      v-if="filterOffen && mitFilter"
+      type="button"
+      class="filter-fertig"
+      @click="filterOffen = false"
+    >
+      Fertig
+    </button>
+
     <MovieDetail
       v-if="selected"
       :movie="selected"
@@ -347,12 +371,11 @@ onMounted(load)
   padding-right: 1.25rem;
 }
 
-.tabs {
+.kopf {
   position: sticky;
   top: 0;
   z-index: 10;
   display: flex;
-  gap: 0.35rem;
   align-items: stretch;
   /* Der negative Rand deckt das Polster der Seite ab, sonst scrollen
      Karten oberhalb der Leiste durchs Bild */
@@ -362,6 +385,24 @@ onMounted(load)
   border-bottom: 1px solid var(--line);
 }
 
+.tabs {
+  display: flex;
+  gap: 0.35rem;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.rechts {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  margin-left: auto;
+}
+
+.filter-fertig {
+  display: none;
+}
+
 .nach-oben {
   position: fixed;
   right: calc(var(--sidebar) + 1.25rem);
@@ -402,15 +443,22 @@ onMounted(load)
   border-bottom-color: var(--accent);
 }
 
-/* Den Filterknopf gibt es nur auf schmalen Schirmen — mit .tabs davor,
+/* Den Filterknopf gibt es nur auf schmalen Schirmen */
-   sonst gewinnt die Regel für alle Reiterknöpfe */
+.filter-knopf {
-.tabs .filter-knopf {
   display: none;
+  padding: 0.35rem 0.8rem;
+  color: var(--text);
+  font-size: 0.85rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.filter-knopf.an {
+  color: var(--accent);
+  border-color: var(--accent);
 }
 
 .host {
-  align-self: center;
-  margin-left: 0.4rem;
   padding: 0.15rem 0.5rem;
   color: var(--accent);
   font-size: 0.7rem;
@@ -491,53 +539,83 @@ onMounted(load)
     bottom: 1rem;
   }
 
-  /* Zu schmal für eine feste Leiste — die Filter klappen über den Karten auf */
   .layout {
     display: flex;
     flex-direction: column;
   }
 
+  /* Zu schmal für eine feste Leiste — die Filter legen sich als ganze
+     Seite darüber, ein Balken unten schließt sie wieder */
   .layout > :last-child {
     display: none;
-    position: static;
-    order: -1;
-    width: auto;
-    margin-bottom: 1.25rem;
-    border: 1px solid var(--line);
-    border-radius: 12px;
   }
 
   .layout > :last-child.offen {
+    position: fixed;
+    inset: 0;
+    z-index: 20;
     display: flex;
+    width: auto;
+    padding-bottom: 5rem;
+    overflow-y: auto;
+    border: 0;
   }
 
-  .tabs .filter-knopf {
+  .filter-fertig {
-    display: flex;
+    position: fixed;
-    margin-left: auto;
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 21;
+    display: block;
+    padding: 0.9rem;
+    color: #fff;
+    font-size: 1rem;
+    font-weight: 600;
+    background: var(--accent);
+    border-radius: 10px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
   }
 
-  .tabs .filter-knopf.an {
+  .filter-knopf {
-    color: var(--accent);
+    display: block;
-  }
-
-  /* Die Namenswahl rückt neben den Filterknopf */
-  .filter-knopf + * {
-    margin-left: 0;
   }
 }
 
 @media (max-width: 640px) {
   .page {
-    padding: 1rem 0.75rem 2.5rem;
+    padding: 0.75rem 0.75rem 2.5rem;
+  }
+
+  /* Zwei Zeilen: oben rechts Filter und Name, darunter die Reiter, die
+     seitlich scrollen. Der Verlauf rechts zeigt, dass da noch mehr kommt. */
+  .kopf {
+    flex-wrap: wrap;
+    margin: -0.75rem -0.75rem 0.9rem;
+    padding: 0 0.75rem;
+  }
+
+  .rechts {
+    order: -1;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 0.55rem 0 0.25rem;
+  }
+
+  /* Die Namenswahl schiebt sich sonst allein nach rechts und lässt den
+     Filterknopf links stehen */
+  .rechts > .wahl {
+    margin-left: 0;
   }
 
-  /* Die Reiter passen nicht in eine Zeile — sie scrollen seitlich */
   .tabs {
     gap: 0;
-    margin: -1rem -0.75rem 1rem;
+    width: 100%;
+    margin: 0 -0.75rem;
     padding: 0 0.75rem;
     overflow-x: auto;
     scrollbar-width: none;
+    mask-image: linear-gradient(to right, #000 88%, transparent);
   }
 
   .tabs::-webkit-scrollbar {
@@ -545,13 +623,15 @@ onMounted(load)
   }
 
   .tabs button {
-    padding: 0.7rem 0.6rem 0.5rem;
+    padding: 0.6rem 0.65rem 0.55rem;
-    font-size: 0.88rem;
+    font-size: 0.9rem;
   }
 
+  /* Drei Poster nebeneinander, ohne Teaser — mehr Übersicht als zwei
+     riesige Karten */
   .grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
-    gap: 0.7rem;
+    gap: 0.6rem;
   }
 
   .grid.details {

frontend/src/components/AehnlichTab.vue

@@ -287,6 +287,18 @@ async function oeffnen(movie) {
   );
 }
 
+/* Auf dem Handy wie im Katalog: drei Poster nebeneinander */
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
+    gap: 0.6rem;
+  }
+
+  .grid.details {
+    grid-template-columns: 1fr;
+  }
+}
+
 .aehnlich-tab > .note {
   display: block;
   padding: 2rem 0;

frontend/src/components/FilterSidebar.vue

@@ -315,4 +315,47 @@ h4 {
   font-weight: 600;
   border-color: var(--accent);
 }
+
+/* Finger statt Maus: alles etwas größer. 16 px in den Feldern, sonst
+   zoomt iOS beim Tippen in die Seite. */
+@media (max-width: 640px), (pointer: coarse) {
+  .sidebar {
+    gap: 1.4rem;
+    padding: 1rem;
+  }
+
+  .controls input,
+  .controls select {
+    padding: 0.7rem 0.85rem;
+    font-size: 16px;
+  }
+
+  .controls .gesehen-schalter {
+    font-size: 0.95rem;
+  }
+
+  .controls .gesehen-schalter input {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .ansicht button {
+    padding: 0.65rem 0.5rem;
+    font-size: 0.9rem;
+  }
+
+  .badge {
+    padding: 0.5rem 0.85rem;
+    font-size: 0.9rem;
+  }
+
+  .badges {
+    gap: 0.45rem;
+  }
+
+  .reset {
+    padding: 0.4rem 0;
+    font-size: 0.85rem;
+  }
+}
 </style>

frontend/src/components/MovieCard.vue

@@ -259,6 +259,34 @@ h2 {
   overflow: hidden;
 }
 
+/* Schmal und kompakt: nur Poster, Titel und Jahr */
+@media (max-width: 640px) {
+  .card.kompakt .body {
+    gap: 0.2rem;
+    padding: 0.5rem;
+  }
+
+  .card.kompakt h2 {
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    min-height: calc(2 * 1.25em);
+    font-size: 0.82rem;
+    line-height: 1.25;
+  }
+
+  .card.kompakt .meta {
+    font-size: 0.72rem;
+  }
+
+  .card.kompakt .teaser {
+    display: none;
+  }
+
+  .rating {
+    font-size: 0.72rem;
+  }
+}
+
 /* Schmal: Cover und Text nebeneinander, die Bilder in einer Reihe darunter */
 @media (max-width: 700px) {
   .card.details {

frontend/src/components/MovieDetail.vue

@@ -400,7 +400,13 @@ onUnmounted(() => {
 
 @media (max-width: 1100px) {
   .sheet {
-    grid-template-columns: 1fr;
+    /* minmax(0, …): sonst hält die Spalte die Breite ihres breitesten
+       Kindes und die ganze Ansicht läuft seitlich aus dem Schirm */
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sheet > * {
+    min-width: 0;
   }
 
   .sheet > header,
@@ -712,6 +718,34 @@ h3 {
     border-radius: 0;
   }
 
+  /* Der Schließen-Knopf bleibt beim Scrollen im Bild */
+  .close {
+    position: fixed;
+    top: 0.6rem;
+    right: 0.6rem;
+    z-index: 2;
+    display: grid;
+    place-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: 50%;
+  }
+
+  h2 {
+    padding-right: 2.5rem;
+    font-size: 1.35rem;
+  }
+
+  .vorschlag button,
+  .gesehen button,
+  .merken,
+  .netflix,
+  .imdb {
+    padding: 0.65rem 1rem;
+  }
+
   header {
     flex-direction: column;
   }

frontend/src/components/NamensWahl.vue

@@ -113,4 +113,16 @@ onUnmounted(() => {
   color: var(--accent);
   font-weight: 600;
 }
+
+@media (max-width: 640px), (pointer: coarse) {
+  .knopf {
+    padding: 0.45rem 0.85rem;
+    font-size: 0.9rem;
+  }
+
+  .menue button {
+    padding: 0.65rem 0.8rem;
+    font-size: 0.95rem;
+  }
+}
 </style>

frontend/src/components/RangeFilter.vue

@@ -156,4 +156,30 @@ const aktiv = computed(
 .aktiv .regler input::-moz-range-thumb {
   background: var(--accent);
 }
+
+@media (max-width: 640px), (pointer: coarse) {
+  .kopf {
+    font-size: 0.88rem;
+  }
+
+  .regler,
+  .regler input {
+    height: 1.8rem;
+  }
+
+  .regler input::-webkit-slider-runnable-track {
+    margin-top: 0.75rem;
+  }
+
+  .regler input::-webkit-slider-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: -0.65rem;
+  }
+
+  .regler input::-moz-range-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
 </style>

frontend/src/components/SearchTab.vue

@@ -175,6 +175,8 @@ async function open(movie) {
 .neu {
   flex-shrink: 0;
   padding: 0 1.4rem;
+  /* Der Leeren-Knopf im Feld richtet sich nach dieser Breite */
+  width: 7.2rem;
   font-size: 0.95rem;
   font-weight: 600;
   background: var(--bg-soft);
@@ -199,6 +201,18 @@ async function open(movie) {
   );
 }
 
+/* Auf dem Handy wie im Katalog: drei Poster nebeneinander */
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
+    gap: 0.6rem;
+  }
+
+  .grid.details {
+    grid-template-columns: 1fr;
+  }
+}
+
 .note {
   padding: 2.5rem 0;
   color: var(--muted);

frontend/src/components/SeriesCard.vue

@@ -361,6 +361,34 @@ h2:hover {
   overflow: hidden;
 }
 
+/* Schmal und kompakt: nur Poster, Titel und Jahr */
+@media (max-width: 640px) {
+  .card.kompakt .body {
+    gap: 0.2rem;
+    padding: 0.5rem;
+  }
+
+  .card.kompakt h2 {
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    min-height: calc(2 * 1.25em);
+    font-size: 0.82rem;
+    line-height: 1.25;
+  }
+
+  .card.kompakt .meta {
+    font-size: 0.72rem;
+  }
+
+  .card.kompakt .teaser {
+    display: none;
+  }
+
+  .rating {
+    font-size: 0.72rem;
+  }
+}
+
 /* Schmal: Cover und Text nebeneinander, die Bilder in einer Reihe darunter */
 @media (max-width: 700px) {
   .card.details {

frontend/src/components/StreamTab.vue

@@ -299,6 +299,12 @@ onUnmounted(() => {
   opacity: 1;
 }
 
+@media (hover: none) {
+  .leiste {
+    opacity: 1;
+  }
+}
+
 .knopf {
   padding: 0.1rem 0.3rem;
   font-size: 1.05rem;

frontend/src/components/WatchedTab.vue

@@ -717,6 +717,22 @@ h3:hover {
   cursor: default;
 }
 
+@media (max-width: 640px), (pointer: coarse) {
+  .stern {
+    padding: 0.1rem 0.2rem;
+    font-size: 1.7rem;
+  }
+
+  .link,
+  .mehr {
+    padding: 0.3rem 0;
+  }
+
+  .rezension textarea {
+    font-size: 16px;
+  }
+}
+
 @media (max-width: 640px) {
   .rezension-hintergrund {
     padding: 0.5rem;

frontend/src/components/WuenscheTab.vue

@@ -510,6 +510,25 @@ h3 {
   }
 }
 
+@media (max-width: 640px), (pointer: coarse) {
+  .stimme {
+    padding: 0.4rem 0.7rem;
+    font-size: 0.9rem;
+  }
+
+  .neu textarea,
+  .notiz-neu input,
+  .inhalt textarea {
+    font-size: 16px;
+  }
+
+  .link,
+  .weg,
+  .klein {
+    padding: 0.3rem 0.4rem;
+  }
+}
+
 .weg {
   padding: 0 0.25rem;
   color: var(--muted);

frontend/src/style.css

@@ -28,6 +28,9 @@ button {
   cursor: pointer;
   background: none;
   border: none;
+  /* Kein Doppeltipp-Zoom, kein blauer Blitz beim Tippen */
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
 input,
@@ -49,3 +52,12 @@ select:focus {
 a {
   color: inherit;
 }
+
+/* Unter 16 px zoomt iOS beim Tippen in jedes Feld */
+@media (pointer: coarse) {
+  input,
+  select,
+  textarea {
+    font-size: 16px;
+  }
+}