File: /home/kiwerkzeuge.de/public_html/video-studio.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Video Studio | Lange Videos in Szenen planen</title>
<meta
name="description"
content="Plane lange Videos als Shot-Workflow: Script → Shotlist, Charakter-Anker, Shot-Generierung, Kontinuität und Export als JSON." />
<link rel="canonical" href="https://kiwerkzeuge.de/video-studio.html" />
<link rel="stylesheet" href="/assets/fonts/inter.css" />
<script src="/assets/theme.js"></script>
<link rel="stylesheet" href="/assets/styles.css?v=20260227-10" />
<script defer src="/assets/video-app.js?v=20260716"></script>
</head>
<body>
<div class="page video-page">
<header class="site-header">
<div class="brand">
<div class="logo">VS</div>
<div>
<h1>Video Studio</h1>
<p>Langvideos entstehen Shot für Shot – so bleibt alles konsistent.</p>
</div>
</div>
<div class="header-actions">
<button class="icon-button" id="themeToggle" type="button" aria-label="Design umschalten" title="Design umschalten">
<svg class="icon icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
<svg class="icon icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 3a7 7 0 0 0 9 9 9 9 0 1 1-9-9z"></path>
</svg>
</button>
<div class="status-pill" id="serviceStatus">
<span class="dot"></span>
<span>Planer wird geladen...</span>
</div>
</div>
</header>
<nav class="nav-tabs" aria-label="Hauptnavigation">
<a href="/" class="nav-tab">Start</a>
<a href="/tiefenkarte.html" class="nav-tab">Tiefenkarte</a>
<a href="/stable-diffusion.html" class="nav-tab">Bildgenerator</a>
<a href="/music.html" class="nav-tab">Musik</a>
<a href="/video-studio.html" class="nav-tab active" aria-current="page">Video Studio</a>
<a href="/ki-tools.html" class="nav-tab">Business-Werkzeuge</a>
<a href="/preise.html" class="nav-tab">Preise</a>
</nav>
<nav class="stepper" aria-label="Ablauf">
<button class="stepper__item" type="button" data-step="1">1 Script</button>
<button class="stepper__item" type="button" data-step="2">2 Charaktere</button>
<button class="stepper__item" type="button" data-step="3">3 Storyboard</button>
<button class="stepper__item" type="button" data-step="4">4 Shots</button>
<button class="stepper__item" type="button" data-step="5">5 Pipeline</button>
</nav>
<main class="main">
<div class="wizard" id="wizard">
<section class="panel wizard-step is-active" data-step="1" id="script">
<div class="panel-header">
<div>
<h2>1. Script</h2>
<p>Nur die Essentials. Danach erzeugen wir automatisch Drama-Struktur, Charaktervorschläge und Shots.</p>
</div>
<div class="pill-row">
<span class="pill">Kurz</span>
<span class="pill">Klar</span>
<span class="pill">Wiederholbar</span>
</div>
</div>
<div class="wizard-step__body">
<div class="form-row">
<div class="form-group">
<label for="projectName">Projektname</label>
<input id="projectName" type="text" placeholder="z.B. kiwerkzeuge-spot" />
</div>
<div class="form-group">
<label for="targetMinutes">Ziel-Länge (Minuten)</label>
<input id="targetMinutes" type="number" min="0.5" step="0.5" value="1" />
</div>
<div class="form-group">
<label for="avgShotLength">Durchschnitt pro Shot (Sek., max 20)</label>
<input id="avgShotLength" type="number" min="1" max="20" step="0.5" value="2" title="Max 20 Sekunden" />
</div>
</div>
<div class="form-group">
<label for="scriptInput">Dein Script (eine Szene pro Zeile)</label>
<textarea id="scriptInput" rows="4" placeholder="Szene 1: Charakter A spricht im Studio... Szene 2: Close-up, emotionaler Shift... Szene 3: Totale, zwei Personen laufen..."></textarea>
<p class="hint">Eine Zeile = ein Shot. Technisches Limit: 20 Sekunden pro Shot (empfohlen 2-8s).</p>
</div>
<div class="button-row">
<button class="primary" id="generateShotListBtn" type="button">Drama-Struktur erzeugen</button>
</div>
</div>
<div class="wizard-actions wizard-actions--end">
<button class="primary" type="button" data-action="next" disabled>Weiter</button>
</div>
</section>
<section class="panel wizard-step" data-step="4" id="shotlist">
<div class="panel-header">
<div>
<h2>4. Shots & Timing</h2>
<p>Überprüfe Dauer und Aktion. Startbilder werden aus dem Storyboard übernommen oder fehlend nachgeladen.</p>
</div>
<div class="button-row">
<button class="ghost" id="addShotBtn" type="button">Shot hinzufügen</button>
<button class="secondary" id="generateMissingStartFramesBtn" type="button">Fehlende Startbilder generieren</button>
</div>
</div>
<div class="wizard-step__body">
<div class="wizard-status is-hidden" id="shotStartFrameStatus" aria-live="polite"></div>
<div class="shot-toolbar">
<div class="form-group shot-search">
<label for="shotSearch">Shot suchen</label>
<input id="shotSearch" type="search" placeholder="Titel, Aktion, Charakter" />
</div>
<label class="toggle-chip">
<input type="checkbox" id="compactView" />
<span>Kompaktansicht</span>
</label>
<div class="shot-filter-status" id="shotFilterStatus">Alle Shots</div>
</div>
<div class="shot-list" id="shotList" aria-live="polite"></div>
<div class="empty-state" id="shotEmpty">Noch keine Shots. Erstelle zuerst eine Shotlist.</div>
<div class="stat-grid">
<div class="stat">
<h4>Shots</h4>
<p id="shotCount">0</p>
</div>
<div class="stat">
<h4>Gesamtzeit</h4>
<p id="shotDuration">0 min</p>
</div>
<div class="stat">
<h4>Frames gesamt</h4>
<p id="shotFrames">0</p>
</div>
</div>
</div>
<div class="wizard-actions">
<button class="ghost" type="button" data-action="prev">Zurück</button>
<button class="primary" type="button" data-action="next" disabled>Weiter</button>
</div>
</section>
<section class="panel wizard-step" data-step="2" id="characters">
<div class="panel-header">
<div>
<h2>2. Charaktere</h2>
<p>Referenzbilder sind der wichtigste Anker für konsistente Gesichter.</p>
</div>
<div class="button-row">
<button class="secondary" id="addCharacterBtn" type="button">Charakter hinzufügen</button>
<button class="ghost" id="generateCharacterPackBtn" type="button">Charakter-Paket generieren</button>
</div>
</div>
<div class="wizard-step__body">
<div class="essentials-panel">
<div class="checkbox-row">
<input type="checkbox" id="useReferenceImages" checked />
<label for="useReferenceImages">Referenzbilder verpflichtend nutzen (empfohlen)</label>
</div>
<p class="hint">Wenn deaktiviert, kannst du ohne Upload fortfahren - die Identität wird aber instabiler.</p>
</div>
<div class="wizard-status is-hidden" id="characterStatus" aria-live="polite"></div>
<div class="character-grid" id="characterList"></div>
<div class="empty-state" id="characterEmpty">Noch keine Charaktere. Lege mindestens einen an.</div>
<details class="details details--compact">
<summary>Weitere Identitätsanker anzeigen</summary>
<div class="checkbox-row">
<input type="checkbox" id="useSeedDiscipline" checked />
<label for="useSeedDiscipline">Seed pro Charakter fixieren (nur kleine Deltas)</label>
</div>
</details>
</div>
<div class="wizard-actions">
<button class="ghost" type="button" data-action="prev">Zurück</button>
<button class="primary" type="button" data-action="next" disabled>Weiter</button>
</div>
</section>
<section class="panel wizard-step" data-step="3" id="storyboard">
<div class="panel-header">
<div>
<h2>3. Storyboard</h2>
<p>Pro Shot erzeugen wir Keyframes als visuelle Referenz für die Pipeline.</p>
</div>
<div class="button-row">
<button class="primary" id="generateStoryboardBtn" type="button">Storyboard generieren</button>
<button class="ghost ghost--icon" id="storyboardFullscreenBtn" type="button" aria-label="Storyboard Vollbild" title="Storyboard Vollbild">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<polyline points="15 3 21 3 21 9"></polyline>
<polyline points="9 21 3 21 3 15"></polyline>
<line x1="21" y1="3" x2="14" y2="10"></line>
<line x1="3" y1="21" x2="10" y2="14"></line>
</svg>
</button>
</div>
</div>
<div class="wizard-step__body">
<div class="wizard-status is-hidden" id="storyboardStatus" aria-live="polite"></div>
<div class="shot-list" id="storyboardList" aria-live="polite"></div>
<div class="empty-state" id="storyboardEmpty">Noch kein Storyboard vorhanden. Starte die Storyboard-Generierung.</div>
<div class="stat-grid">
<div class="stat">
<h4>Storyboard-Frames</h4>
<p id="storyboardCount">0</p>
</div>
<div class="stat">
<h4>Mit Bild</h4>
<p id="storyboardWithImage">0</p>
</div>
<div class="stat">
<h4>Ohne Bild</h4>
<p id="storyboardWithoutImage">0</p>
</div>
</div>
</div>
<div class="wizard-actions">
<button class="ghost" type="button" data-action="prev">Zurück</button>
<button class="primary" type="button" data-action="next" disabled>Weiter</button>
</div>
</section>
<section class="panel wizard-step" data-step="5" id="export">
<div class="panel-header">
<div>
<h2>5. Pipeline</h2>
<p>Startet Planung und Rendering als End-to-End-Flow.</p>
</div>
<div class="export-actions">
<button class="primary" id="copyJsonBtn" type="button">JSON kopieren</button>
<button class="ghost" id="downloadJsonBtn" type="button">JSON herunterladen</button>
<button class="secondary" id="runPipelineBtn" type="button">Pipeline starten</button>
</div>
</div>
<div class="wizard-step__body">
<div class="form-row">
<div class="form-group">
<label for="qualitySelect">Preset</label>
<select id="qualitySelect">
<option value="balanced" selected>Balanced</option>
<option value="fast">Schnell</option>
<option value="quality">Detailreich</option>
</select>
</div>
<div class="form-group">
<label for="resolutionSelect">Auflösung</label>
<select id="resolutionSelect">
<option value="768x432" selected>768 x 432 (16:9)</option>
<option value="1024x576">1024 x 576</option>
<option value="1280x720">1280 x 720</option>
</select>
</div>
<div class="form-group">
<label for="fpsInput">FPS pro Shot</label>
<input id="fpsInput" type="number" min="2" max="12" step="0.5" value="5" />
</div>
</div>
<div class="stat-grid">
<div class="stat">
<h4>Shots</h4>
<p id="exportShots">0</p>
</div>
<div class="stat">
<h4>Charaktere</h4>
<p id="exportCharacters">0</p>
</div>
<div class="stat">
<h4>Gesamtzeit</h4>
<p id="exportDuration">0 min</p>
</div>
<div class="stat">
<h4>Frames</h4>
<p id="exportFrames">0</p>
</div>
</div>
<div class="wizard-status is-hidden" id="pipelineStatus" aria-live="polite"></div>
<details class="details details--compact">
<summary>Pipeline-Log</summary>
<pre class="code-block" id="pipelineLog">Noch keine Pipeline-Läufe.</pre>
</details>
<div class="form-group">
<label>Finales Video</label>
<div class="result-preview" id="finalVideoPreview">
<p class="placeholder">Nach erfolgreichem Rendern erscheint hier die Vorschau.</p>
</div>
</div>
<details class="details details--compact">
<summary>Erweiterte Einstellungen</summary>
<div class="form-row">
<div class="form-group">
<label for="modelSelect">Modell</label>
<select id="modelSelect">
<option value="Wan 2.2 I2V A14B" selected>Wan 2.2 I2V A14B (Empfehlung, Startbild-Animation)</option>
<option value="LTX-2 GGUF Q4_K">LTX-2 GGUF Q4_K (Fallback)</option>
</select>
</div>
<div class="form-group">
<label for="motionInput">Motion-Strength</label>
<input id="motionInput" type="number" min="0" max="1" step="0.05" value="0.2" />
</div>
<div class="form-group">
<label for="seedStrategy">Seed-Strategie</label>
<select id="seedStrategy">
<option value="per-character" selected>Fix pro Charakter</option>
<option value="per-shot">Variieren pro Shot</option>
</select>
</div>
</div>
<div class="checkbox-row">
<input type="checkbox" id="fixedSchedule" checked />
<label for="fixedSchedule">Noise-Schedule fixieren (mehr Stabilität)</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="lockPrompt" checked />
<label for="lockPrompt">Prompt-Kern innerhalb eines Shots nicht ändern</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="opticalFlow" checked />
<label for="opticalFlow">Optical-Flow-Step nutzen (falls verfügbar)</label>
</div>
<h3 class="panel-subtitle">Kontinuität</h3>
<div class="checkbox-row">
<input type="checkbox" id="useLastFrame" checked />
<label for="useLastFrame">Letztes Frame als Referenz für den nächsten Shot</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="softReference" checked />
<label for="softReference">Weiche Referenz (kein hartes Init-Bild)</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="noHardInit" checked />
<label for="noHardInit">Hard-Init vermeiden (verhindert eingefrorene Bewegung)</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="costumeLock" checked />
<label for="costumeLock">Kleidung und Farbpalette locken</label>
</div>
<div class="form-row">
<div class="form-group">
<label for="interpolationEnabled">Interpolation nach dem Schnitt</label>
<select id="interpolationEnabled">
<option value="true" selected>Aktiv</option>
<option value="false">Aus</option>
</select>
</div>
<div class="form-group">
<label for="targetFps">Ziel-FPS</label>
<input id="targetFps" type="number" min="12" max="60" step="1" value="24" />
</div>
<div class="form-group">
<label for="interpMethod">Methode</label>
<select id="interpMethod">
<option value="optical-flow" selected>Optical Flow</option>
<option value="rife">RIFE</option>
<option value="film">FILM</option>
</select>
</div>
</div>
</details>
<details class="details details--compact">
<summary>Technischen Export anzeigen</summary>
<div class="form-group">
<label for="jsonOutput">Shotlist JSON</label>
<textarea id="jsonOutput" class="code-output" readonly></textarea>
</div>
<div class="form-group">
<label>Empfohlene Ordnerstruktur</label>
<pre class="code-block" id="folderStructure"></pre>
</div>
</details>
</div>
<div class="wizard-actions">
<button class="ghost" type="button" data-action="prev">Zurück</button>
</div>
</section>
</div>
</main>
<footer class="site-footer">
<p>© 2026 Panomity GmbH</p>
<nav aria-label="Footer">
<a href="/preise.html">Preise</a>
<a href="/impressum.html">Impressum</a>
<a href="/datenschutz.html">Datenschutz</a>
</nav>
</footer>
</div>
<!-- Matomo Analytics -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://statsdeluxe.com/statistics/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '149']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://statsdeluxe.com/statistics/matomo.php?idsite=149&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
</body>
</html>