File: /home/kiwerkzeuge.de/public_html/tiefenkarte.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tiefenkarte online erstellen | Depth Studio | kiwerkzeuge.de</title>
<meta name="description" content="Erstelle online in Sekunden eine Tiefenkarte (PNG), einen Porträt-Effekt und optional einen kurzen 3D-Zoom-Clip aus deinem Foto." />
<link rel="canonical" href="https://kiwerkzeuge.de/tiefenkarte.html" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="de_DE" />
<meta property="og:site_name" content="kiwerkzeuge.de" />
<meta property="og:title" content="Tiefenkarte online erstellen | Depth Studio" />
<meta property="og:description" content="Tiefenkarte, Porträt-Effekt und 3D-Zoom-Clip direkt im Browser erstellen." />
<meta property="og:url" content="https://kiwerkzeuge.de/tiefenkarte.html" />
<meta property="og:image" content="https://kiwerkzeuge.de/assets/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Tiefenkarte online erstellen | Depth Studio" />
<meta name="twitter:description" content="Erstelle Tiefenkarten aus Fotos direkt im Browser." />
<link rel="stylesheet" href="/assets/fonts/inter.css" />
<script src="/assets/theme.js"></script>
<link rel="stylesheet" href="/assets/styles.css" />
<script defer src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script defer src="/assets/app.js?v=20260212-0915"></script>
</head>
<body>
<div class="page">
<header class="site-header">
<div class="brand">
<div class="logo">DA</div>
<div>
<h1>Depth Studio</h1>
<p>Tiefenkarte & Porträt-Effekt aus deinem Foto – in Sekunden.</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>Status wird geprüft…</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 active" aria-current="page">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">Video Studio</a>
<a href="/ki-tools.html" class="nav-tab">Business-Werkzeuge</a>
<a href="/preise.html" class="nav-tab">Preise</a>
</nav>
<main class="main">
<section class="hero">
<div class="hero-grid">
<div class="hero-copy">
<div class="badges">
<span class="badge">Sofort-Download</span>
<span class="badge">Ohne Anmeldung</span>
<span class="badge">PNG/JPG/WebM</span>
</div>
<h2 class="hero-title">Mach aus deinem Foto eine Tiefenkarte – plus Porträt-Effekt.</h2>
<p class="hero-subtitle">
Lade ein Foto hoch und erhalte in Sekunden die Tiefenkarte (PNG). Optional bekommst du einen Porträt-Effekt und einen kurzen 3D-Zoom-Clip.
</p>
<div class="hero-actions">
<button class="primary" id="heroPickBtn" type="button">
<span>Foto auswählen</span>
</button>
<a class="secondary" href="#start">Direkt starten</a>
</div>
<p class="hero-note muted">Tipp: Für Porträts funktioniert ein klarer Vordergrund besonders gut.</p>
</div>
<div class="hero-features">
<div class="feature-grid">
<article class="feature-card">
<h3>Tiefenkarte (PNG)</h3>
<p>Perfekt für 3D/Compositing, Masken und Tiefen-basierte Effekte.</p>
</article>
<article class="feature-card">
<h3>Porträt-Effekt</h3>
<p>Unscharfer Hintergrund mit Reglern für Schärfe und Intensität.</p>
</article>
<article class="feature-card">
<h3>3D-Zoom-Clip</h3>
<p>Ein kurzer Clip mit Parallax-Effekt – direkt im Browser.</p>
</article>
<article class="feature-card">
<h3>Einfach & schnell</h3>
<p>Keine Installation – du lädst hoch und lädst Ergebnisse runter.</p>
</article>
</div>
</div>
</div>
</section>
<div class="layout">
<section class="panel upload" id="start">
<div>
<h2>1. Foto auswählen</h2>
<p>Lade ein Foto hoch (JPG/PNG, bis zu 15 MB). Danach kannst du Tiefenkarte und Effekte herunterladen.</p>
</div>
<label class="dropzone" id="dropzone">
<input type="file" accept="image/*" id="imageInput" hidden />
<div class="dropzone__content">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5v14" />
<path d="M5 12h14" />
</svg>
<p>Bild hier ablegen oder <span>Datei auswählen</span></p>
<small id="fileInfo">Noch keine Datei ausgewählt.</small>
</div>
</label>
<div class="toggles">
<label>
<input type="checkbox" id="optionDepth" checked />
<span>Tiefenkarte (PNG)</span>
</label>
<label>
<input type="checkbox" id="optionPortrait" checked />
<span>Porträt-Effekt (unscharfer Hintergrund)</span>
</label>
<label>
<input type="checkbox" id="optionVideo" />
<span>3D-Zoom (kurzer Clip)</span>
</label>
</div>
<button id="processBtn" class="primary" disabled>
<span>Jetzt berechnen</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
<div class="progress" id="progress" hidden>
<div class="spinner"></div>
<div>
<p id="progressTitle">Wird vorbereitet…</p>
<small id="progressSub">Das dauert meistens nur ein paar Sekunden.</small>
</div>
</div>
</section>
<section class="panel results">
<h2>2. Ergebnisse herunterladen</h2>
<div class="results-grid">
<article class="result-card" id="depthCard">
<header>
<h3>Tiefenkarte</h3>
<button class="ghost" id="downloadDepth" disabled>PNG herunterladen</button>
</header>
<div class="result-preview" id="depthPreview">
<p class="placeholder">Die generierte Tiefenkarte wird hier angezeigt.</p>
</div>
</article>
<article class="result-card" id="portraitCard">
<header>
<div>
<h3>Porträt-Effekt</h3>
<small>Schärfe & Unschärfe anpassen</small>
</div>
<button class="ghost" id="downloadPortrait" disabled>JPG herunterladen</button>
</header>
<div class="controls" id="portraitControls" hidden>
<label>
Schärfe-Ebene
<input type="range" id="focusSlider" min="5" max="95" value="45" />
</label>
<label>
Unschärfe
<input type="range" id="bokehSlider" min="4" max="30" value="14" />
</label>
</div>
<div class="result-preview" id="portraitPreview">
<p class="placeholder">Aktiviere „Porträt-Effekt“, um automatisch eine Version mit unscharfem Hintergrund zu erhalten.</p>
</div>
</article>
<article class="result-card" id="videoCard">
<header>
<div>
<h3>3D-Zoom-Clip</h3>
<small>Kurzer Clip mit 3D-Effekt</small>
</div>
<button class="ghost" id="renderVideo" disabled>4s WebM rendern</button>
</header>
<div class="result-preview" id="videoPreview">
<p class="placeholder">Aktiviere „3D-Zoom“ und erstelle den Clip, sobald die Tiefenkarte fertig ist.</p>
</div>
</article>
</div>
</section>
</div>
<section class="panel info" id="faq">
<h2>FAQ</h2>
<details class="details" open>
<summary>Was bekomme ich genau?</summary>
<p class="muted">
Eine <strong>Tiefenkarte (PNG)</strong>. Optional zusätzlich einen <strong>Porträt-Effekt (JPG)</strong> und einen <strong>3D-Zoom-Clip (WebM)</strong>.
</p>
</details>
<details class="details">
<summary>Welche Fotos funktionieren am besten?</summary>
<p class="muted">
Gute Ergebnisse gibt’s meist bei klaren Motiven mit erkennbarem Vordergrund (Porträt, Produktfoto, Objekt vor Hintergrund).
</p>
</details>
<details class="details">
<summary>Technische Details (optional)</summary>
<p class="muted">
API-Zugriff: <code>/service/depth-proxy.php</code> (Konfiguration: <code>config/depth-client.php</code>).
</p>
</details>
</section>
</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>