From 764da404474bef314df41fb4afc6d49eea531fa9 Mon Sep 17 00:00:00 2001
From: data <data@data-it-solution.de>
Date: Mon, 16 Mar 2026 11:26:41 +0100
Subject: [PATCH] fix(tv): Gesehen-Button per D-Pad fokussierbar, auf TV
 sichtbar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 video-konverter/app/static/tv/css/tv.css            | 11 ++++++++++-
 video-konverter/app/templates/tv/series_detail.html |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/video-konverter/app/static/tv/css/tv.css b/video-konverter/app/static/tv/css/tv.css
index 0b1042f..0b94c1c 100644
--- a/video-konverter/app/static/tv/css/tv.css
+++ b/video-konverter/app/static/tv/css/tv.css
@@ -1881,6 +1881,12 @@ textarea.input-editing {
     transition: opacity 0.2s, background 0.2s;
     z-index: 2;
 }
+/* TV-Geraete (kein Hover): Mark-Button immer leicht sichtbar */
+@media (hover: none) {
+    .tv-ep-tile-mark {
+        opacity: 0.5;
+    }
+}
 .tv-episode-tile:hover .tv-ep-tile-mark,
 .tv-episode-tile:focus-within .tv-ep-tile-mark,
 .tv-ep-tile-mark:focus {
@@ -1895,9 +1901,12 @@ textarea.input-editing {
 .tv-ep-tile-mark:hover, .tv-ep-tile-mark:focus {
     border-color: var(--accent);
     color: var(--accent);
-    outline: none;
     opacity: 1;
 }
+.tv-ep-tile-mark:focus {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
 
 /* Detail-Panel oben (zeigt Beschreibung der fokussierten Episode) */
 .tv-ep-detail-panel {
diff --git a/video-konverter/app/templates/tv/series_detail.html b/video-konverter/app/templates/tv/series_detail.html
index 7d5db67..a10711c 100644
--- a/video-konverter/app/templates/tv/series_detail.html
+++ b/video-konverter/app/templates/tv/series_detail.html
@@ -127,7 +127,7 @@
                     </div>
                 </a>
                 <button class="tv-ep-tile-mark {% if ep.progress_pct >= watched_threshold_pct|default(90) %}active{% endif %}"
-                        tabindex="-1"
+                        data-focusable
                         onclick="event.stopPropagation(); toggleWatched({{ ep.id }}, this)">
                     &#10003;
                 </button>