{"id":2,"date":"2026-07-13T07:44:13","date_gmt":"2026-07-13T07:44:13","guid":{"rendered":"https:\/\/ghostcut.io\/?page_id=2"},"modified":"2026-07-13T10:21:29","modified_gmt":"2026-07-13T10:21:29","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/ghostcut.io\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"\n<style>\n  #ghostcut-tool { --gc-bg: #0b0d12; --gc-panel: #14171f; --gc-panel-2: #1b1f2a; --gc-border: #262b38;\n    --gc-text: #e8eaf0; --gc-text-dim: #8b93a7; --gc-accent: #7c5cff; --gc-accent-2: #22d3ee;\n    --gc-error: #ff6b6b; --gc-success: #4ade80; --gc-radius: 16px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Inter, sans-serif;\n    background: radial-gradient(circle at 20% -10%, #1a1030 0%, var(--gc-bg) 45%),\n                radial-gradient(circle at 90% 10%, #0a1f2e 0%, var(--gc-bg) 40%);\n    color: var(--gc-text); padding: 40px 20px; border-radius: 20px; max-width: 1000px; margin: 0 auto;\n  }\n  #ghostcut-tool * { box-sizing: border-box; }\n  #ghostcut-tool header { text-align: center; margin-bottom: 32px; }\n  #ghostcut-tool header h1 { font-size: 32px; margin: 0 0 8px;\n    background: linear-gradient(90deg, var(--gc-accent), var(--gc-accent-2));\n    -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: -0.5px; }\n  #ghostcut-tool header p { color: var(--gc-text-dim); margin: 0; font-size: 14px; }\n  #ghostcut-tool .dropzone { border: 1.5px dashed var(--gc-border); border-radius: var(--gc-radius); padding: 28px;\n    text-align: center; background: var(--gc-panel); cursor: pointer; transition: border-color .2s, background .2s; margin-bottom: 20px; }\n  #ghostcut-tool .dropzone:hover, #ghostcut-tool .dropzone.drag { border-color: var(--gc-accent); background: var(--gc-panel-2); }\n  #ghostcut-tool .dropzone input { display: none; }\n  #ghostcut-tool .dropzone .hint { color: var(--gc-text-dim); font-size: 13px; margin-top: 4px; }\n  #ghostcut-tool .controls { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end;\n    background: var(--gc-panel); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); padding: 18px 20px; margin-bottom: 8px; }\n  #ghostcut-tool .field { display: flex; flex-direction: column; gap: 6px; }\n  #ghostcut-tool .field label { font-size: 12px; color: var(--gc-text-dim); font-weight: 600;\n    text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 5px; }\n  #ghostcut-tool .info-icon { width: 14px; height: 14px; border-radius: 50%; background: var(--gc-panel-2);\n    border: 1px solid var(--gc-border); color: var(--gc-text-dim); font-size: 10px;\n    display: inline-flex; align-items: center; justify-content: center; cursor: help; text-transform: none; font-weight: 700; }\n  #ghostcut-tool select { background: var(--gc-panel-2); color: var(--gc-text); border: 1px solid var(--gc-border);\n    border-radius: 8px; padding: 8px 10px; font-size: 14px; min-width: 180px; }\n  #ghostcut-tool #model-desc { font-size: 12px; color: var(--gc-text-dim); margin: 6px 0 16px; min-height: 16px; }\n  #ghostcut-tool .switch { position: relative; display: inline-block; width: 42px; height: 24px; }\n  #ghostcut-tool .switch input { display:none; }\n  #ghostcut-tool .slider-toggle { position: absolute; cursor: pointer; inset: 0; background: var(--gc-panel-2);\n    border: 1px solid var(--gc-border); border-radius: 24px; transition: .2s; }\n  #ghostcut-tool .slider-toggle::before { content: \"\"; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px;\n    background: var(--gc-text-dim); border-radius: 50%; transition: .2s; }\n  #ghostcut-tool .switch input:checked + .slider-toggle { background: var(--gc-accent); border-color: var(--gc-accent); }\n  #ghostcut-tool .switch input:checked + .slider-toggle::before { transform: translateX(18px); background: white; }\n  #ghostcut-tool input[type=range] { -webkit-appearance: none; width: 160px; height: 4px; background: var(--gc-panel-2);\n    border-radius: 4px; outline: none; }\n  #ghostcut-tool input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px;\n    border-radius: 50%; background: var(--gc-accent); cursor: pointer; box-shadow: 0 0 0 4px rgba(124,92,255,.15); }\n  #ghostcut-tool input[type=color] { width: 40px; height: 32px; border: 1px solid var(--gc-border); border-radius: 8px;\n    background: var(--gc-panel-2); padding: 2px; cursor: pointer; }\n  #ghostcut-tool #bg-status { font-size: 13px; min-height: 20px; display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; }\n  #ghostcut-tool #bg-status.error { color: var(--gc-error); }\n  #ghostcut-tool #bg-status.ok { color: var(--gc-success); }\n  #ghostcut-tool #bg-status.busy { color: var(--gc-text-dim); }\n  #ghostcut-tool .spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gc-border);\n    border-top-color: var(--gc-accent-2); animation: gc-spin .7s linear infinite; display: none; }\n  #ghostcut-tool .spinner.on { display: inline-block; }\n  @keyframes gc-spin { to { transform: rotate(360deg); } }\n  #ghostcut-tool .preview-row { display: flex; gap: 20px; flex-wrap: wrap; }\n  #ghostcut-tool .preview-box { flex: 1; min-width: 280px; background: var(--gc-panel); border: 1px solid var(--gc-border);\n    border-radius: var(--gc-radius); padding: 16px; }\n  #ghostcut-tool .box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n  #ghostcut-tool .preview-box h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gc-text-dim);\n    margin: 0; font-weight: 600; }\n  #ghostcut-tool .download-btn { background: linear-gradient(90deg, var(--gc-accent), var(--gc-accent-2)); color: white;\n    border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;\n    text-decoration: none; display: none; }\n  #ghostcut-tool .download-btn.show { display: inline-block; }\n  #ghostcut-tool .img-container { position: relative; border-radius: 10px; overflow: hidden;\n    background: repeating-conic-gradient(#2a2e3a 0% 25%, #1c1f28 0% 50%) 50% \/ 20px 20px; cursor: crosshair; line-height: 0; }\n  #ghostcut-tool .img-container img { width: 100%; display: block; }\n  #ghostcut-tool .img-container:not(.has-img) { display: none; }\n  #ghostcut-tool .loupe { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--gc-accent);\n    box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 4px rgba(124,92,255,.15); pointer-events: none;\n    background-repeat: no-repeat; display: none; z-index: 5; }\n  #ghostcut-tool details.faq { background: var(--gc-panel); border: 1px solid var(--gc-border); border-radius: var(--gc-radius);\n    padding: 16px 20px; margin-top: 24px; }\n  #ghostcut-tool details.faq summary { cursor: pointer; font-weight: 600; font-size: 14px; }\n  #ghostcut-tool details.faq .faq-item { margin-top: 16px; font-size: 13px; color: var(--gc-text-dim); line-height: 1.6; }\n  #ghostcut-tool details.faq .faq-item strong { color: var(--gc-text); display: block; margin-bottom: 4px; }\n  #ghostcut-tool footer { text-align: center; margin-top: 32px; color: var(--gc-text-dim); font-size: 13px; }\n  #ghostcut-tool footer a { color: var(--gc-text-dim); text-decoration: none; margin: 0 10px; }\n  #ghostcut-tool footer a:hover { color: var(--gc-accent-2); }\n  #ghostcut-tool footer .sep { color: var(--gc-border); }\n<\/style>\n\n<div id=\"ghostcut-tool\">\n  <header>\n    <h1>Ghostcut<\/h1>\n    <p>Hintergrund automatisch entfernen \u2014 kostenlos, ohne Speicherung<\/p>\n  <\/header>\n\n  <label class=\"dropzone\" id=\"gc-dropzone\">\n    <input type=\"file\" id=\"gc-file\" accept=\"image\/png,image\/jpeg,image\/webp\">\n    <div><strong>Bild hier ablegen<\/strong> oder klicken zum Ausw\u00e4hlen<\/div>\n    <div class=\"hint\">PNG, JPEG oder WEBP \u00b7 max. 8 MB<\/div>\n  <\/label>\n\n  <div class=\"controls\">\n    <div class=\"field\">\n      <label>Modell <span class=\"info-icon\" title=\"Bestimmt Qualit\u00e4t und Geschwindigkeit der Freistellung\">?<\/span><\/label>\n      <select id=\"gc-model\">\n        <option value=\"u2netp\">u2netp \u2014 schnell<\/option>\n        <option value=\"u2net\" selected>u2net \u2014 Standard<\/option>\n        <option value=\"isnet-general-use\">isnet-general-use \u2014 beste Qualit\u00e4t<\/option>\n        <option value=\"silueta\">silueta \u2014 leichtgewichtig<\/option>\n      <\/select>\n    <\/div>\n    <div class=\"field\">\n      <label>Kantengl\u00e4ttung <span class=\"info-icon\" title=\"Verfeinert unscharfe Kanten, z. B. bei Haaren oder Fell\">?<\/span><\/label>\n      <label class=\"switch\">\n        <input type=\"checkbox\" id=\"gc-alpha\">\n        <span class=\"slider-toggle\"><\/span>\n      <\/label>\n    <\/div>\n    <div class=\"field\">\n      <label>Kanten-Erosion \u2014 <span id=\"gc-erode-val\">10<\/span>px<\/label>\n      <input type=\"range\" id=\"gc-erode\" min=\"0\" max=\"40\" value=\"10\">\n    <\/div>\n    <div class=\"field\">\n      <label>Hintergrund<\/label>\n      <select id=\"gc-bgmode\">\n        <option value=\"transparent\" selected>Transparent<\/option>\n        <option value=\"white\">Wei\u00df<\/option>\n        <option value=\"custom\">Eigene Farbe<\/option>\n      <\/select>\n    <\/div>\n    <div class=\"field\" id=\"gc-colorpicker-field\" style=\"display:none;\">\n      <label>Farbe<\/label>\n      <input type=\"color\" id=\"gc-bgcolor\" value=\"#ffffff\">\n    <\/div>\n  <\/div>\n  <div id=\"model-desc\"><\/div>\n\n  <p id=\"bg-status\"><span class=\"spinner\" id=\"gc-spinner\"><\/span><span id=\"gc-status-text\"><\/span><\/p>\n\n  <div class=\"preview-row\">\n    <div class=\"preview-box\">\n      <div class=\"box-head\"><h3>Original<\/h3><\/div>\n      <div class=\"img-container\" id=\"gc-container-original\">\n        <img id=\"gc-preview-original\">\n        <div class=\"loupe\" id=\"gc-loupe-original\"><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"preview-box\">\n      <div class=\"box-head\">\n        <h3>Ergebnis<\/h3>\n        <a class=\"download-btn\" id=\"gc-download-btn\" download=\"ghostcut-ergebnis.png\">Herunterladen<\/a>\n      <\/div>\n      <div class=\"img-container\" id=\"gc-container-result\">\n        <img id=\"gc-preview-result\">\n        <div class=\"loupe\" id=\"gc-loupe-result\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <details class=\"faq\">\n    <summary>\u00dcber Ghostcut &#038; FAQ<\/summary>\n    <div class=\"faq-item\">\n      <strong>Was ist Ghostcut?<\/strong>\n      Ein kostenloses Tool, das Bildhintergr\u00fcnde automatisch entfernt \u2014 direkt im Browser, ohne Registrierung.\n    <\/div>\n    <div class=\"faq-item\">\n      <strong>Werden meine Bilder gespeichert?<\/strong>\n      Nein. Bilder werden nur zur Verarbeitung im Arbeitsspeicher gehalten und danach verworfen \u2014 siehe <a href=\"\/datenschutz\/\" style=\"color:var(--gc-accent-2)\">Datenschutzerkl\u00e4rung<\/a>.\n    <\/div>\n    <div class=\"faq-item\">\n      <strong>Welche Technik steckt dahinter?<\/strong>\n      Die Freistellung l\u00e4uft \u00fcber die Open-Source-Bibliothek <a href=\"https:\/\/github.com\/danielgatis\/rembg\" target=\"_blank\" rel=\"noopener\" style=\"color:var(--gc-accent-2)\">rembg<\/a> mit verschiedenen KI-Modellen (U\u00b2-Net, ISNet).\n    <\/div>\n    <div class=\"faq-item\">\n      <strong>Ist die Nutzung kostenlos?<\/strong>\n      Ja, aktuell vollst\u00e4ndig kostenlos. Es gilt ein Limit von 30 Anfragen pro Minute pro Nutzer zum Schutz vor Missbrauch.\n    <\/div>\n    <div class=\"faq-item\">\n      <strong>Welches Modell soll ich w\u00e4hlen?<\/strong>\n      u2net f\u00fcr die meisten F\u00e4lle, isnet-general-use bei feinen Details wie Haaren, silueta wenn es besonders schnell gehen soll.\n    <\/div>\n  <\/details>\n\n  <footer>\n    <a href=\"\/impressum\/\">Impressum<\/a><span class=\"sep\">\u00b7<\/span><a href=\"\/datenschutz\/\">Datenschutz<\/a>\n  <\/footer>\n<\/div>\n\n<script>\n(function() {\n  const fileInput = document.getElementById('gc-file');\n  const dropzone = document.getElementById('gc-dropzone');\n  const statusBox = document.getElementById('bg-status');\n  const statusText = document.getElementById('gc-status-text');\n  const spinner = document.getElementById('gc-spinner');\n  const previewOriginal = document.getElementById('gc-preview-original');\n  const previewResult = document.getElementById('gc-preview-result');\n  const modelSelect = document.getElementById('gc-model');\n  const modelDesc = document.getElementById('model-desc');\n  const alphaCheckbox = document.getElementById('gc-alpha');\n  const erodeSlider = document.getElementById('gc-erode');\n  const erodeVal = document.getElementById('gc-erode-val');\n  const bgModeSelect = document.getElementById('gc-bgmode');\n  const bgColorField = document.getElementById('gc-colorpicker-field');\n  const bgColorInput = document.getElementById('gc-bgcolor');\n  const downloadBtn = document.getElementById('gc-download-btn');\n\n  const MODEL_DESCRIPTIONS = {\n    'u2netp': 'Schnellstes Modell, gut f\u00fcr einfache Motive und Vorschauen.',\n    'u2net': 'Guter Allrounder f\u00fcr die meisten Bildtypen.',\n    'isnet-general-use': 'Beste Kantenqualit\u00e4t, ideal bei feinen Haaren oder Fell \u2014 etwas langsamer.',\n    'silueta': 'Sehr leichtgewichtig, spart Rechenzeit \u2014 f\u00fcr einfache Umrisse.'\n  };\n  const MAX_SIZE = 8 * 1024 * 1024;\n  const ALLOWED_TYPES = ['image\/png', 'image\/jpeg', 'image\/webp'];\n  const API_URL = 'https:\/\/api.ghostcut.io\/remove-bg';\n\n  let debounceTimer = null;\n\n  function updateModelDesc() { modelDesc.innerText = MODEL_DESCRIPTIONS[modelSelect.value] || ''; }\n  updateModelDesc();\n\n  function setStatus(msg, type) { statusText.innerText = msg; statusBox.className = type || ''; }\n\n  bgModeSelect.addEventListener('change', () => {\n    bgColorField.style.display = bgModeSelect.value === 'custom' ? 'flex' : 'none';\n    if (bgModeSelect.value === 'white') bgColorInput.value = '#ffffff';\n    processImage();\n  });\n  bgColorInput.addEventListener('input', () => {\n    clearTimeout(debounceTimer);\n    debounceTimer = setTimeout(processImage, 300);\n  });\n\n  fileInput.addEventListener('change', () => {\n    if (!fileInput.files.length) return;\n    const file = fileInput.files[0];\n    if (!ALLOWED_TYPES.includes(file.type)) {\n      setStatus('Nicht unterst\u00fctztes Dateiformat. Bitte PNG, JPEG oder WEBP verwenden.', 'error');\n      return;\n    }\n    if (file.size > MAX_SIZE) {\n      setStatus('Datei zu gro\u00df. Maximal 8 MB erlaubt.', 'error');\n      return;\n    }\n    previewOriginal.src = URL.createObjectURL(file);\n    document.getElementById('gc-container-original').classList.add('has-img');\n    processImage();\n  });\n\n  ['dragover', 'dragleave', 'drop'].forEach(evt => {\n    dropzone.addEventListener(evt, e => {\n      e.preventDefault();\n      dropzone.classList.toggle('drag', evt === 'dragover');\n      if (evt === 'drop' && e.dataTransfer.files.length) {\n        fileInput.files = e.dataTransfer.files;\n        fileInput.dispatchEvent(new Event('change'));\n      }\n    });\n  });\n\n  [modelSelect, alphaCheckbox, erodeSlider].forEach(el => {\n    el.addEventListener('input', () => {\n      if (el === modelSelect) updateModelDesc();\n      erodeVal.innerText = erodeSlider.value;\n      clearTimeout(debounceTimer);\n      debounceTimer = setTimeout(processImage, 400);\n    });\n  });\n\n  async function processImage() {\n    if (!fileInput.files.length) return;\n    const formData = new FormData();\n    formData.append(\"file\", fileInput.files[0]);\n    formData.append(\"model\", modelSelect.value);\n    formData.append(\"alpha_matting\", alphaCheckbox.checked);\n    formData.append(\"erode_size\", erodeSlider.value);\n    if (bgModeSelect.value === 'white') formData.append(\"bgcolor\", \"#ffffff\");\n    if (bgModeSelect.value === 'custom') formData.append(\"bgcolor\", bgColorInput.value);\n\n    spinner.classList.add('on');\n    setStatus('Verarbeite...', 'busy');\n    downloadBtn.classList.remove('show');\n\n    try {\n      const res = await fetch(API_URL, { method: \"POST\", body: formData });\n      if (!res.ok) {\n        let msg = 'Verarbeitung fehlgeschlagen.';\n        try { const err = await res.json(); msg = err.detail || msg; } catch(e) {}\n        setStatus(msg, 'error');\n        spinner.classList.remove('on');\n        return;\n      }\n      const blob = await res.blob();\n      const url = URL.createObjectURL(blob);\n      previewResult.src = url;\n      document.getElementById('gc-container-result').classList.add('has-img');\n      downloadBtn.href = url;\n      downloadBtn.classList.add('show');\n      setStatus('Fertig!', 'ok');\n    } catch (e) {\n      setStatus('Verbindungsfehler. Bitte erneut versuchen.', 'error');\n    }\n    spinner.classList.remove('on');\n  }\n\n  function setupLoupe(containerId, imgId, loupeId) {\n    const container = document.getElementById(containerId);\n    const img = document.getElementById(imgId);\n    const loupe = document.getElementById(loupeId);\n    const zoom = 2.5;\n    container.addEventListener('mousemove', e => {\n      if (!img.src) return;\n      const rect = img.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n      if (x < 0 || y < 0 || x > rect.width || y > rect.height) { loupe.style.display = 'none'; return; }\n      loupe.style.display = 'block';\n      loupe.style.left = (x - 75) + 'px';\n      loupe.style.top = (y - 75) + 'px';\n      loupe.style.backgroundImage = `url(${img.src})`;\n      loupe.style.backgroundSize = (rect.width * zoom) + 'px ' + (rect.height * zoom) + 'px';\n      loupe.style.backgroundPosition = `${-(x * zoom - 75)}px ${-(y * zoom - 75)}px`;\n    });\n    container.addEventListener('mouseleave', () => { loupe.style.display = 'none'; });\n  }\n  setupLoupe('gc-container-original', 'gc-preview-original', 'gc-loupe-original');\n  setupLoupe('gc-container-result', 'gc-preview-result', 'gc-loupe-result');\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Ghostcut Hintergrund automatisch entfernen \u2014 kostenlos, ohne Speicherung Bild hier ablegen oder klicken zum Ausw\u00e4hlen PNG, JPEG oder WEBP \u00b7 max. 8 MB Modell ? u2netp \u2014 schnellu2net \u2014 Standardisnet-general-use \u2014 beste Qualit\u00e4tsilueta \u2014 leichtgewichtig Kantengl\u00e4ttung ? Kanten-Erosion \u2014 10px Hintergrund TransparentWei\u00dfEigene Farbe Farbe Original Ergebnis Herunterladen \u00dcber Ghostcut &#038; FAQ Was ist Ghostcut? Ein [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ghostcut.io\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghostcut.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ghostcut.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ghostcut.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghostcut.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":1,"href":"https:\/\/ghostcut.io\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/ghostcut.io\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/ghostcut.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}