diff --git a/src/renderer.ts b/src/renderer.ts
index a99f27d..6b1bd5d 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -1288,13 +1288,11 @@ function updateClipDuration(): void {
     const duration = endSec - startSec;
     const durationDisplay = byId('clipDurationDisplay');
 
-    if (duration > 0) {
-        durationDisplay.textContent = formatSecondsToTime(duration);
-        durationDisplay.style.color = '#00c853';
-    } else {
-        durationDisplay.textContent = UI_TEXT.clips.invalidDuration;
-        durationDisplay.style.color = '#ff4444';
-    }
+    const isValid = duration > 0;
+    durationDisplay.classList.toggle('invalid', !isValid);
+    durationDisplay.textContent = isValid
+        ? formatSecondsToTime(duration)
+        : UI_TEXT.clips.invalidDuration;
 
     updateFilenameExamples();
 }
diff --git a/src/styles.css b/src/styles.css
index 1b2c2d2..153130c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -318,12 +318,18 @@ body {
 }
 
 .clip-modal-duration-value {
-    color: #00c853;
+    color: var(--success);
     font-weight: 600;
     font-family: 'Consolas', 'Segoe UI Mono', monospace;
     font-size: 14px;
 }
 
+/* updateClipDuration flips this class when end <= start so the value
+   reads as a clear "Ungueltig!" / error message in red. */
+.clip-modal-duration-value.invalid {
+    color: var(--error);
+}
+
 .clip-modal-hint {
     color: var(--text-secondary);
     font-size: 12px;