Rahmen-Simulation \u00b7 Mohn<\/title>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Josefin+Sans:wght@100;200;300&display=swap');\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n:root{--bg:#0a0709;--surface:#161014;--border:#2a1e24;--text:#f5f0ee;--muted:#c8b8c4;--accent:#b84060}\r\nbody{background:var(--bg);color:var(--text);font-family:'Josefin Sans',sans-serif;font-weight:200;min-height:100vh;overflow-x:hidden}\r\n.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}\r\n\/* SIDEBAR *\/\r\n.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:28px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a1e24 transparent}\r\n.sidebar-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1.22rem;color:#f5f0ee;margin-bottom:2px;line-height:1.2}\r\n.sidebar-sub{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:#cfc0c8;margin-bottom:22px}\r\n.section-label{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:#ddd0d8;margin-bottom:9px;margin-top:18px;padding-bottom:5px;border-bottom:1px solid var(--border)}\r\n.frame-list{display:flex;flex-direction:column;gap:3px}\r\n.frame-btn{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:2px;background:transparent;cursor:pointer;transition:all .2s;text-align:left;width:100%}\r\n.frame-btn:hover{background:#1a1015;border-color:#3e2535}\r\n.frame-btn.active{background:#1e1218;border-color:#4a2535}\r\n.frame-swatch{width:22px;height:22px;border-radius:1px;flex-shrink:0;position:relative;overflow:hidden}\r\n.frame-swatch-inner{position:absolute;inset:4px;border-radius:1px}\r\n.frame-info{flex:1}\r\n.frame-name{font-size:.70rem;letter-spacing:.04em;color:#f2ecf0;line-height:1.2;margin-bottom:1px}\r\n.frame-hex{font-size:.55rem;letter-spacing:.1em;color:#d8ccd4}\r\n.rec-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}\r\n.wall-list{display:flex;flex-wrap:wrap;gap:6px}\r\n.wall-btn{width:26px;height:26px;border-radius:1px;border:2px solid transparent;cursor:pointer;transition:all .18s}\r\n.wall-btn:hover{transform:scale(1.12)}\r\n.wall-btn.active{border-color:#ede0e8}\r\n.custom-color-row{display:flex;gap:7px;align-items:center;margin-top:6px}\r\n.custom-color-row input[type=color]{width:34px;height:28px;border:1px solid var(--border);border-radius:2px;background:none;cursor:pointer;padding:1px}\r\n.custom-color-row input[type=text]{flex:1;background:#0e0a0d;border:1px solid var(--border);border-radius:2px;color:#f2ecf0;font-family:'Josefin Sans',sans-serif;font-size:.66rem;letter-spacing:.08em;padding:5px 7px;outline:none}\r\n.custom-color-row input[type=text]:focus{border-color:#4a2535}\r\n.custom-color-row button{background:#1e1218;border:1px solid #4a2535;border-radius:2px;color:#f0e4ea;font-family:'Josefin Sans',sans-serif;font-size:.58rem;letter-spacing:.1em;padding:5px 9px;cursor:pointer;white-space:nowrap;transition:all .2s}\r\n.custom-color-row button:hover{background:#2a1a22}\r\n.feedback{font-size:.56rem;letter-spacing:.1em;color:#d8ccd4;margin-top:3px;height:13px}\r\n.ctrl-item{display:flex;flex-direction:column;gap:3px;margin-bottom:7px}\r\n.ctrl-label{display:flex;justify-content:space-between;align-items:center}\r\n.ctrl-name{font-size:.56rem;letter-spacing:.1em;color:#e8dce4}\r\n.ctrl-val{font-size:.56rem;letter-spacing:.08em;color:#ede6ea;min-width:42px;text-align:right}\r\ninput[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:3px}\r\n.shabby-color-row{display:flex;gap:8px;align-items:center;margin-bottom:7px}\r\n.shabby-color-row label{font-size:.55rem;letter-spacing:.1em;color:#e8dce4;white-space:nowrap}\r\n.shabby-color-row input[type=color]{width:28px;height:22px;border:1px solid var(--border);border-radius:2px;background:none;cursor:pointer;padding:1px}\r\n.presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}\r\n.preset-dot{width:20px;height:20px;border-radius:1px;border:1px solid transparent;cursor:pointer;transition:all .15s;flex-shrink:0}\r\n.preset-dot:hover{transform:scale(1.15)}\r\n.preset-dot.active{border-color:#f0e4ea}\r\n.upload-zone{border:1px dashed var(--border);border-radius:2px;padding:11px;text-align:center;cursor:pointer;transition:all .22s;margin-top:4px;display:block}\r\n.upload-zone:hover{border-color:#5a3040;background:#14090e}\r\n.upload-zone input{display:none}\r\n.upload-icon{font-size:1.1rem;opacity:.35;margin-bottom:3px}\r\n.upload-text{font-size:.56rem;letter-spacing:.1em;color:#d8ccd4;line-height:1.5}\r\n\/* STAGE *\/\r\n.stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f5f0eb;transition:background .5s ease;overflow:visible}\r\n#wallCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}\r\n.artwork-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}\r\n#mainCanvas{display:block;filter:drop-shadow(4px 12px 18px rgba(0,0,0,.5)) drop-shadow(1px 4px 6px rgba(0,0,0,.3))}\r\n.stage-label{position:absolute;top:22px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:2}\r\n.stage-frame-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.98rem;color:rgba(245,240,238,.45);letter-spacing:.04em}\r\n.stage-frame-detail{font-size:.53rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(200,184,196,.5);margin-top:2px}\r\n.info-strip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;white-space:nowrap;z-index:2}\r\n.info-pill{font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(200,184,196,.45)}\r\n.info-sep{color:rgba(200,184,196,.2);font-size:.42rem}\r\n@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\r\n.artwork-wrap{animation:fadeUp .8s ease both}\r\n@media(max-width:768px){\r\n .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}\r\n .sidebar{position:static;height:auto;max-height:44vh;overflow-y:auto;border-right:none;border-bottom:1px solid var(--border);padding:16px 14px}\r\n .stage{min-height:54vh}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n <aside class=\"sidebar\">\r\n <div class=\"sidebar-title\">Rahmensimulation<\/div>\r\n <div class=\"sidebar-sub\">Ohne Passepartout<\/div>\r\n <div class=\"section-label\">Bild einf\u00fcgen<\/div>\r\n <label class=\"upload-zone\">\r\n <input type=\"file\" id=\"imgUpload\" accept=\"image\/*\">\r\n <div class=\"upload-icon\">\u2b06<\/div>\r\n <div class=\"upload-text\">Eigenes Bild hochladen<\/div>\r\n <\/label>\r\n <div class=\"section-label\">Rahmen w\u00e4hlen<\/div>\r\n <div class=\"frame-list\" id=\"frameList\"><\/div>\r\n <div class=\"section-label\">Freie Rahmenfarbe<\/div>\r\n <div class=\"custom-color-row\">\r\n <input type=\"color\" id=\"customPicker\" value=\"#8b4513\">\r\n <input type=\"text\" id=\"customHex\" placeholder=\"#8B4513 oder Name\" value=\"#8b4513\">\r\n <button id=\"customApply\">OK<\/button>\r\n <\/div>\r\n <div class=\"feedback\" id=\"customFeedback\"><\/div>\r\n <div class=\"section-label\">Wandfarbe<\/div>\r\n <div class=\"wall-list\" id=\"wallList\"><\/div>\r\n <div class=\"section-label\">Rahmen \u00b7 Breite & Farbe<\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Breite<\/span><span class=\"ctrl-val\" id=\"vWidth\">24 px<\/span><\/div>\r\n <input type=\"range\" id=\"sWidth\" min=\"2\" max=\"700\" value=\"24\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Rahmen Helligkeit<\/span><span class=\"ctrl-val\" id=\"vBright\">100%<\/span><\/div>\r\n <input type=\"range\" id=\"sBright\" min=\"20\" max=\"200\" value=\"100\" step=\"5\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Rahmen S\u00e4ttigung<\/span><span class=\"ctrl-val\" id=\"vSat\">100%<\/span><\/div>\r\n <input type=\"range\" id=\"sSat\" min=\"0\" max=\"200\" value=\"100\" step=\"5\">\r\n <\/div>\r\n <div class=\"section-label\">Innensteg<\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Steg anzeigen<\/span>\r\n <label style=\"display:flex;align-items:center;gap:6px;cursor:pointer\">\r\n <input type=\"checkbox\" id=\"stegVisible\" checked style=\"accent-color:var(--accent)\">\r\n <span class=\"ctrl-val\" id=\"stegVisLabel\">An<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <div id=\"stegControls\">\r\n <div class=\"shabby-color-row\">\r\n <label>Farbe<\/label>\r\n <input type=\"color\" id=\"stegPicker\" value=\"#c9a84c\">\r\n <\/div>\r\n <div class=\"presets\" id=\"stegPresets\"><\/div>\r\n <div class=\"custom-color-row\">\r\n <input type=\"text\" id=\"stegHexInput\" placeholder=\"#C9A84C oder Name\" value=\"#c9a84c\">\r\n <button id=\"stegApply\">OK<\/button>\r\n <\/div>\r\n <div class=\"feedback\" id=\"stegFeedback\"><\/div>\r\n <div class=\"ctrl-item\" style=\"margin-top:7px\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Stegbreite<\/span><span class=\"ctrl-val\" id=\"vStegW\">12 px<\/span><\/div>\r\n <input type=\"range\" id=\"sStegW\" min=\"1\" max=\"170\" value=\"12\" step=\"1\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-label\">Shabby \/ Patina<\/div>\r\n <div class=\"shabby-color-row\">\r\n <label>Patina-Farbe<\/label>\r\n <input type=\"color\" id=\"shabbyPicker\" value=\"#4a2e0a\">\r\n <\/div>\r\n <div class=\"presets\" id=\"shabbyPresets\"><\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Kratzspuren<\/span><span class=\"ctrl-val\" id=\"vScratch\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sScratch\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Abbl\u00e4ttern<\/span><span class=\"ctrl-val\" id=\"vChip\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sChip\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Patina \/ Staub<\/span><span class=\"ctrl-val\" id=\"vPatina\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sPatina\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Vergoldung verwaschen<\/span><span class=\"ctrl-val\" id=\"vWash\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sWash\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <\/aside>\r\n <main class=\"stage\" id=\"stage\" style=\"background:#f5f0eb\">\r\n <canvas id=\"wallCanvas\"><\/canvas>\r\n <div class=\"stage-label\">\r\n <div class=\"stage-frame-name\" id=\"stageName\">Schwarz \u00b7 Goldsteg<\/div>\r\n <div class=\"stage-frame-detail\" id=\"stageDetail\">\u2605 Erste Wahl \u00b7 #1a1008<\/div>\r\n <\/div>\r\n <div class=\"artwork-wrap\">\r\n <canvas id=\"mainCanvas\"><\/canvas>\r\n <\/div>\r\n <div class=\"info-strip\">\r\n <span class=\"info-pill\" id=\"infoHex\">#1a1008<\/span>\r\n <span class=\"info-sep\">\u00b7<\/span>\r\n <span class=\"info-pill\" id=\"infoName\">Schwarz-Gold<\/span>\r\n <span class=\"info-sep\">\u00b7<\/span>\r\n <span class=\"info-pill\" id=\"infoWidth\">24 px<\/span>\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n<script>\r\n\/\/ \u2500\u2500 COLOR UTILS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst DE_COLORS={rot:'#ff0000',dunkelrot:'#8b0000',hellrot:'#ff6666',karmesin:'#dc143c',bordeaux:'#800020',weinrot:'#722f37',rubinrot:'#9b111e',gruen:'#008000',gr\u00fcn:'#008000',dunkelgruen:'#006400',dunkelgr\u00fcn:'#006400',hellgruen:'#90ee90',hellgr\u00fcn:'#90ee90',olivgruen:'#6b8e23',olivgr\u00fcn:'#6b8e23',blau:'#0000ff',dunkelblau:'#00008b',hellblau:'#add8e6',himmelblau:'#87ceeb',gelb:'#ffff00',dunkelgelb:'#ccaa00',hellgelb:'#ffffe0',orange:'#ffa500',dunkelorange:'#ff8c00',lila:'#800080',violett:'#ee82ee',flieder:'#c8a2c8',pflaume:'#8b008b',purpur:'#800080',magenta:'#ff00ff',rosa:'#ffc0cb',pink:'#ff69b4',lachs:'#fa8072',braun:'#a52a2a',dunkelbraun:'#3b1a15',hellbraun:'#c8a060',mahagoni:'#3b1a15',beige:'#f5f5dc',sand:'#f4a460',creme:'#fffdd0',weiss:'#ffffff',wei\u00df:'#ffffff',hellgrau:'#d3d3d3',grau:'#808080',dunkelgrau:'#696969',anthrazit:'#383838',schwarz:'#000000',gold:'#ffd700',silber:'#c0c0c0',bronze:'#cd7f32',kupfer:'#b87333',tuerkis:'#40e0d0',t\u00fcrkis:'#40e0d0',turkis:'#40e0d0',cyan:'#00ffff',ocker:'#cc7722',terrakotta:'#e2725b',rost:'#b7410e',elfenbein:'#fffff0',naturweiss:'#fdf6e3',mintgruen:'#98ff98',mintgr\u00fcn:'#98ff98'};\r\nconst CSS_COLORS={aliceblue:'#f0f8ff',antiquewhite:'#faebd7',aqua:'#00ffff',aquamarine:'#7fffd4',azure:'#f0ffff',beige:'#f5f5dc',bisque:'#ffe4c4',black:'#000000',blanchedalmond:'#ffebcd',blue:'#0000ff',blueviolet:'#8a2be2',brown:'#a52a2a',burlywood:'#deb887',cadetblue:'#5f9ea0',chartreuse:'#7fff00',chocolate:'#d2691e',coral:'#ff7f50',cornflowerblue:'#6495ed',cornsilk:'#fff8dc',crimson:'#dc143c',cyan:'#00ffff',darkblue:'#00008b',darkcyan:'#008b8b',darkgoldenrod:'#b8860b',darkgray:'#a9a9a9',darkgreen:'#006400',darkgrey:'#a9a9a9',darkkhaki:'#bdb76b',darkmagenta:'#8b008b',darkolivegreen:'#556b2f',darkorange:'#ff8c00',darkorchid:'#9932cc',darkred:'#8b0000',darksalmon:'#e9967a',darkseagreen:'#8fbc8f',darkslateblue:'#483d8b',darkslategray:'#2f4f4f',darkslategrey:'#2f4f4f',darkturquoise:'#00ced1',darkviolet:'#9400d3',deeppink:'#ff1493',deepskyblue:'#00bfff',dimgray:'#696969',dimgrey:'#696969',dodgerblue:'#1e90ff',firebrick:'#b22222',floralwhite:'#fffaf0',forestgreen:'#228b22',fuchsia:'#ff00ff',gainsboro:'#dcdcdc',ghostwhite:'#f8f8ff',gold:'#ffd700',goldenrod:'#daa520',gray:'#808080',green:'#008000',greenyellow:'#adff2f',grey:'#808080',honeydew:'#f0fff0',hotpink:'#ff69b4',indianred:'#cd5c5c',indigo:'#4b0082',ivory:'#fffff0',khaki:'#f0e68c',lavender:'#e6e6fa',lavenderblush:'#fff0f5',lawngreen:'#7cfc00',lemonchiffon:'#fffacd',lightblue:'#add8e6',lightcoral:'#f08080',lightcyan:'#e0ffff',lightgoldenrodyellow:'#fafad2',lightgray:'#d3d3d3',lightgreen:'#90ee90',lightgrey:'#d3d3d3',lightpink:'#ffb6c1',lightsalmon:'#ffa07a',lightseagreen:'#20b2aa',lightskyblue:'#87cefa',lightslategray:'#778899',lightslategrey:'#778899',lightsteelblue:'#b0c4de',lightyellow:'#ffffe0',lime:'#00ff00',limegreen:'#32cd32',linen:'#faf0e6',magenta:'#ff00ff',maroon:'#800000',mediumaquamarine:'#66cdaa',mediumblue:'#0000cd',mediumorchid:'#ba55d3',mediumpurple:'#9370db',mediumseagreen:'#3cb371',mediumslateblue:'#7b68ee',mediumspringgreen:'#00fa9a',mediumturquoise:'#48d1cc',mediumvioletred:'#c71585',midnightblue:'#191970',mintcream:'#f5fffa',mistyrose:'#ffe4e1',moccasin:'#ffe4b5',navajowhite:'#ffdead',navy:'#000080',oldlace:'#fdf5e6',olive:'#808000',olivedrab:'#6b8e23',orange:'#ffa500',orangered:'#ff4500',orchid:'#da70d6',palegoldenrod:'#eee8aa',palegreen:'#98fb98',paleturquoise:'#afeeee',palevioletred:'#db7093',papayawhip:'#ffefd5',peachpuff:'#ffdab9',peru:'#cd853f',pink:'#ffc0cb',plum:'#dda0dd',powderblue:'#b0e0e6',purple:'#800080',red:'#ff0000',rosybrown:'#bc8f8f',royalblue:'#4169e1',saddlebrown:'#8b4513',salmon:'#fa8072',sandybrown:'#f4a460',seagreen:'#2e8b57',seashell:'#fff5ee',sienna:'#a0522d',silver:'#c0c0c0',skyblue:'#87ceeb',slateblue:'#6a5acd',slategray:'#708090',slategrey:'#708090',snow:'#fffafa',springgreen:'#00ff7f',steelblue:'#4682b4',tan:'#d2b48c',teal:'#008080',thistle:'#d8bfd8',tomato:'#ff6347',turquoise:'#40e0d0',violet:'#ee82ee',wheat:'#f5deb3',white:'#ffffff',whitesmoke:'#f5f5f5',yellow:'#ffff00',yellowgreen:'#9acd32'};\r\nfunction parseColor(s){\r\n s=s.trim();\r\n if(\/^#[0-9a-fA-F]{3}$\/.test(s)){const h=s.slice(1);return '#'+h.split('').map(c=>c+c).join('');}\r\n if(\/^#[0-9a-fA-F]{6}$\/.test(s))return s.toLowerCase();\r\n if(\/^[0-9a-fA-F]{6}$\/.test(s))return '#'+s.toLowerCase();\r\n if(\/^[0-9a-fA-F]{3}$\/.test(s))return '#'+s.split('').map(c=>c+c).join('');\r\n const k=s.toLowerCase();\r\n return DE_COLORS[k]||CSS_COLORS[k]||null;\r\n}\r\nfunction hexToRgb(h){h=h.replace('#','');if(h.length===3)h=h.split('').map(c=>c+c).join('');const n=parseInt(h,16);return[(n>>16)&255,(n>>8)&255,n&255];}\r\nfunction rgb(r,g,b,a=1){return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`;}\r\n\/\/ \u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst FRAMES=[\r\n {id:'schwarz-gold',name:'Schwarz \u00b7 Goldsteg',detail:'\u2605 Erste Wahl',hex:'#1a1008',r:26,g:16,b:8,recommended:true},\r\n {id:'purpur',name:'Tiefdunkles Purpur',detail:'\u2605 Zweite Wahl',hex:'#2d1a28',r:45,g:26,b:40,recommended:true},\r\n {id:'antiweiss',name:'Antik-Wei\u00df',detail:'Warm \u00b7 hell',hex:'#f0e6da',r:240,g:230,b:218},\r\n {id:'mahagoni',name:'Mahagoni',detail:'Dunkelbraun \u00b7 warm',hex:'#3b1a15',r:59,g:26,b:21},\r\n {id:'silber',name:'Silber \/ Aluminium',detail:'Modern \u00b7 k\u00fchl',hex:'#8a8a8a',r:138,g:138,b:138},\r\n {id:'naturholz',name:'Naturholz \u00b7 Eiche',detail:'Hell \u00b7 warm',hex:'#c8a060',r:200,g:160,b:96,wood:true},\r\n {id:'schwarz-matt',name:'Schwarz Matt',detail:'Puristisch',hex:'#111111',r:17,g:17,b:17},\r\n {id:'custom',name:'Freie Farbe',detail:'Benutzerdefiniert',hex:'#8b4513',r:139,g:69,b:19,custom:true},\r\n];\r\nconst WALLS=['#0a0709','#1c1018','#2a1a22','#3d2832','#f5f0eb','#e8ddd5','#d4c4b0','#b0a898','#7a6070','#4a3840'];\r\nconst STEG_PRESETS=[{hex:'#c9a84c',label:'Gold'},{hex:'#e8e8e8',label:'Silber'},{hex:'#b87333',label:'Kupfer'},{hex:'#f5f5dc',label:'Elfenbein'},{hex:'#ffffff',label:'Wei\u00df'},{hex:'#111111',label:'Schwarz'},{hex:'#c8b400',label:'Messing'},{hex:'#8b0000',label:'Dunkelrot'}];\r\nconst SHABBY_PRESETS=[{hex:'#4a2e0a',label:'Rost-Braun'},{hex:'#2a3a1a',label:'Moos-Gr\u00fcn'},{hex:'#1a1a3a',label:'Nacht-Blau'},{hex:'#3a3020',label:'Antik-Gold'},{hex:'#5a1a1a',label:'Tief-Rot'},{hex:'#c8b090',label:'Kalk-Wei\u00df'},{hex:'#2a2a2a',label:'Kohle'},{hex:'#8a6040',label:'Leder'}];\r\n\/\/ \u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet cur=FRAMES[0],wall=WALLS[4];\r\nlet W=24,bright=100,sat=100;\r\nlet scratch=0,chip=0,patina=0,wash=0;\r\nlet shabbyHex='#4a2e0a',stegHex='#c9a84c',stegVisible=true,stegWidthPx=12;\r\nlet activeShabby=0,activeSteg=0;\r\nlet imgLoaded=false;\r\n\/\/ \u2500\u2500 CANVASES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst mainCanvas=document.getElementById('mainCanvas');\r\nconst wallCanvas=document.getElementById('wallCanvas');\r\nconst srcImg=document.createElement('img');\r\nconst ctx=mainCanvas.getContext('2d');\r\n\/\/ \u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ adjColor wird NUR f\u00fcr Rahmenfarbe verwendet, NIEMALS f\u00fcr Bildpixel\r\nfunction adjColor(r,g,b){\r\n const bf=bright\/100,sf=sat\/100,gray=0.299*r+0.587*g+0.114*b;\r\n return[Math.min(255,Math.max(0,(gray+(r-gray)*sf)*bf)),\r\n Math.min(255,Math.max(0,(gray+(g-gray)*sf)*bf)),\r\n Math.min(255,Math.max(0,(gray+(b-gray)*sf)*bf))];\r\n}\r\n\/\/ \u2500\u2500 MAIN DRAW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ Reihenfolge: 1) Rahmen zeichnen, 2) Bild ZULETZT obenauf legen\r\n\/\/ \u2192 Helligkeit\/S\u00e4ttigung k\u00f6nnen das Bild niemals ber\u00fchren\r\nfunction drawAll(){\r\n if(!imgLoaded)return;\r\n const stage=document.getElementById('stage');\r\n const stageW=stage.offsetWidth||window.innerWidth-290;\r\n const stageH=stage.offsetHeight||window.innerHeight;\r\n const maxW=Math.min(stageW-40,480);\r\n const maxH=Math.min(stageH-80,520);\r\n const scale=Math.min(maxW\/(srcImg.naturalWidth+W*2),maxH\/(srcImg.naturalHeight+W*2),1);\r\n let iw=Math.round(srcImg.naturalWidth*scale);\r\n let ih=Math.round(srcImg.naturalHeight*scale);\r\n const fw=Math.round(W*scale);\r\n \/\/ FIX (wei\u00dfer Streifen): Canvas-Gesamtma\u00dfe auf GERADE Werte zwingen.\r\n \/\/ Ungerade Ma\u00dfe erzeugen mit Drop-Shadow-Filter + Antialiasing eine helle\r\n \/\/ Subpixel-Linie an der Unterkante.\r\n let cw=iw+fw*2; cw+=cw%2;\r\n let ch=ih+fw*2; ch+=ch%2;\r\n mainCanvas.width=cw;\r\n mainCanvas.height=ch;\r\n \/\/ tats\u00e4chlicher Bildbereich (f\u00fcllt evtl. die geraden-Korrektur-Pixel mit)\r\n iw=cw-fw*2;\r\n ih=ch-fw*2;\r\n \/\/ SCHRITT 1: Rahmen zeichnen (gesamte Canvas-Fl\u00e4che)\r\n drawFrame(cw,ch,fw);\r\n \/\/ SCHRITT 2: Bild ZULETZT in den Innenbereich zeichnen.\r\n \/\/ ctx.filter ist nirgendwo gesetzt \u2192 Bild kommt unver\u00e4ndert.\r\n \/\/ Bild deckt den gesamten Innenbereich [fw \u2026 cw-fw] \/ [fw \u2026 ch-fw] ab,\r\n \/\/ damit keine Rahmen-\/Steg-Linie und kein Antialiasing-Saum durchscheint.\r\n ctx.drawImage(srcImg,fw,fw,iw,ih);\r\n \/\/ Info\r\n document.getElementById('stageName').textContent=cur.name;\r\n document.getElementById('stageDetail').textContent=cur.detail+' \u00b7 '+cur.hex;\r\n document.getElementById('infoHex').textContent=cur.hex;\r\n document.getElementById('infoName').textContent=cur.name;\r\n document.getElementById('infoWidth').textContent=W+' px';\r\n}\r\nfunction drawFrame(cw,ch,fw){\r\n const f=cur;\r\n \/\/ adjColor nur f\u00fcr Rahmenfarbe\r\n const[r,g,b]=adjColor(f.r,f.g,f.b);\r\n function drawTrap(pts,lightF){\r\n const lr=Math.min(255,r*lightF),lg=Math.min(255,g*lightF),lb=Math.min(255,b*lightF);\r\n const dr=r*.38,dg=g*.38,db=b*.38;\r\n ctx.beginPath();\r\n ctx.moveTo(pts[0][0],pts[0][1]);\r\n pts.slice(1).forEach(p=>ctx.lineTo(p[0],p[1]));\r\n ctx.closePath();\r\n let grd;\r\n try{grd=ctx.createLinearGradient(pts[0][0],pts[0][1],pts[3][0],pts[3][1]);}catch(e){}\r\n if(grd){\r\n grd.addColorStop(0,rgb(lr,lg,lb));\r\n grd.addColorStop(.3,rgb(Math.min(255,r*1.1),Math.min(255,g*1.1),Math.min(255,b*1.1)));\r\n grd.addColorStop(.7,rgb(r,g,b));\r\n grd.addColorStop(1,rgb(dr,dg,db));\r\n ctx.fillStyle=grd;\r\n }else ctx.fillStyle=rgb(r,g,b);\r\n ctx.fill();\r\n ctx.strokeStyle=rgb(lr,lg,lb,.2);ctx.lineWidth=1;ctx.stroke();\r\n }\r\n \/\/ 4 Rahmen-Fl\u00e4chen\r\n drawTrap([[0,0],[cw,0],[cw-fw,fw],[fw,fw]],1.78);\r\n drawTrap([[0,ch],[cw,ch],[cw-fw,ch-fw],[fw,ch-fw]],.48);\r\n drawTrap([[0,0],[fw,fw],[fw,ch-fw],[0,ch]],1.3);\r\n drawTrap([[cw,0],[cw-fw,fw],[cw-fw,ch-fw],[cw,ch]],.68);\r\n \/\/ Holzmaserung\r\n if(f.wood){\r\n ctx.save();ctx.globalAlpha=.14;\r\n for(let i=0;i<45;i++){\r\n const x=Math.random()*cw;\r\n ctx.beginPath();ctx.moveTo(x,0);\r\n ctx.bezierCurveTo(x+(Math.random()-.5)*9,ch*.3,x+(Math.random()-.5)*7,ch*.7,x+(Math.random()-.5)*12,ch);\r\n ctx.strokeStyle=Math.random()>.5?'rgba(0,0,0,.35)':'rgba(255,210,80,.25)';\r\n ctx.lineWidth=Math.random()*1.4;ctx.stroke();\r\n }\r\n ctx.restore();\r\n }\r\n \/\/ Innensteg\r\n if(stegVisible){\r\n const[sr,sg,sb]=hexToRgb(stegHex);\r\n \/\/ Steg-Farbe wird NICHT durch adjColor geschickt \u2013 eigene Farbe.\r\n \/\/ Stegbreite ist jetzt ABSOLUT in px (wie der Rahmen W). Mit demselben\r\n \/\/ scale runterrechnen (fw = round(W*scale) \u2192 scale = fw\/W) und auf die\r\n \/\/ Rahmenbreite fw begrenzen, damit der Steg nie breiter als der Rahmen ist.\r\n const sc=W>0?fw\/W:1;\r\n const gs=Math.max(1,Math.min(fw,Math.round(stegWidthPx*sc)));\r\n \/\/ FIX (Steg auf Bild): Steg HART auf das Rahmenband clippen, damit kein\r\n \/\/ Pixel in den Bildbereich [fw \u2026 cw-fw] ragt. Linienmitte so w\u00e4hlen, dass\r\n \/\/ die INNENkante des Stegs b\u00fcndig bei fw liegt und der Steg nach AUSSEN\r\n \/\/ (in den Rahmen hinein) w\u00e4chst.\r\n const inset=fw-gs\/2;\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n ctx.strokeStyle=rgb(sr,sg,sb,.93);ctx.lineWidth=gs;\r\n ctx.strokeRect(inset,inset,cw-inset*2,ch-inset*2);\r\n \/\/ Glanzkante (aussen am Steg)\r\n const outer=inset-gs\/2-1;\r\n ctx.strokeStyle=rgb(Math.min(255,sr+65),Math.min(255,sg+65),Math.min(255,sb+45),.38);\r\n ctx.lineWidth=1;ctx.strokeRect(outer,outer,cw-outer*2,ch-outer*2);\r\n \/\/ Schattenkante (innen, b\u00fcndig an Bildkante fw)\r\n ctx.strokeStyle=rgb(sr*.4,sg*.4,sb*.4,.3);\r\n ctx.lineWidth=1;ctx.strokeRect(fw+0.5,fw+0.5,cw-(fw+0.5)*2,ch-(fw+0.5)*2);\r\n ctx.restore();\r\n if(wash>0)drawWashEffect(cw,ch,fw,sr,sg,sb);\r\n }\r\n \/\/ Shabby-Effekte: clippen auf Rahmenband\r\n const[shR,shG,shB]=hexToRgb(shabbyHex);\r\n if(scratch>0)drawScratches(cw,ch,fw,shR,shG,shB);\r\n if(chip>0)drawChips(cw,ch,fw,r,g,b,shR,shG,shB);\r\n if(patina>0)drawPatina(cw,ch,fw,shR,shG,shB);\r\n}\r\n\/\/ Clip auf Rahmenband (au\u00dferhalb des Bildbereichs)\r\nfunction clipToFrameBand(cw,ch,fw){\r\n ctx.beginPath();\r\n \/\/ \u00c4u\u00dferes Rechteck\r\n ctx.rect(0,0,cw,ch);\r\n \/\/ Inneres Rechteck (Bildbereich) \u2013 evenodd schneidet es aus\r\n ctx.rect(fw,fw,cw-fw*2,ch-fw*2);\r\n ctx.clip('evenodd');\r\n}\r\nfunction drawScratches(cw,ch,fw,sr,sg,sb){\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n for(let i=0;i<Math.round(scratch*.9);i++){\r\n const x1=Math.random()*cw,y1=Math.random()*ch;\r\n const a=Math.random()*Math.PI,len=8+Math.random()*65;\r\n ctx.globalAlpha=(0.12+Math.random()*.55)*(scratch\/100);\r\n ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x1+Math.cos(a)*len,y1+Math.sin(a)*len);\r\n ctx.lineWidth=Math.random()<.18?2:1;\r\n ctx.strokeStyle=Math.random()>.45?rgb(Math.min(255,sr+120),Math.min(255,sg+120),Math.min(255,sb+120),.8):rgb(sr*.4,sg*.4,sb*.4,.7);\r\n ctx.stroke();\r\n }\r\n ctx.restore();\r\n}\r\nfunction drawChips(cw,ch,fw,r,g,b,sr,sg,sb){\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n for(let i=0;i<Math.round(chip*.45);i++){\r\n const side=Math.floor(Math.random()*4);\r\n let x,y;\r\n if(side===0){x=Math.random()*cw;y=Math.random()*fw;}\r\n else if(side===1){x=Math.random()*cw;y=ch-Math.random()*fw;}\r\n else if(side===2){x=Math.random()*fw;y=Math.random()*ch;}\r\n else{x=cw-Math.random()*fw;y=Math.random()*ch;}\r\n const sz=3+Math.random()*22*(chip\/100);\r\n ctx.globalAlpha=.75*(chip\/100);\r\n ctx.fillStyle=rgb(sr*.25,sg*.25,sb*.25);\r\n ctx.beginPath();ctx.ellipse(x,y,sz*1.5,sz*.65,Math.random()*Math.PI,0,Math.PI*2);ctx.fill();\r\n ctx.globalAlpha=.35*(chip\/100);\r\n ctx.strokeStyle=rgb(Math.min(255,sr+80),Math.min(255,sg+80),Math.min(255,sb+80),.6);\r\n ctx.lineWidth=1;ctx.stroke();\r\n }\r\n ctx.restore();\r\n}\r\nfunction drawPatina(cw,ch,fw,sr,sg,sb){\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n [[0,0],[cw,0],[0,ch],[cw,ch]].forEach(([cx,cy])=>{\r\n const g=ctx.createRadialGradient(cx,cy,0,cx,cy,fw*3);\r\n g.addColorStop(0,rgb(sr,sg,sb,(patina\/100)*.65));\r\n g.addColorStop(.5,rgb(sr,sg,sb,(patina\/100)*.3));\r\n g.addColorStop(1,rgb(sr,sg,sb,0));\r\n ctx.fillStyle=g;ctx.fillRect(0,0,cw,ch);\r\n });\r\n ctx.globalAlpha=(patina\/100)*.38;\r\n for(let i=0;i<patina*4;i++){\r\n const side=Math.floor(Math.random()*4);let x,y;\r\n if(side===0){x=Math.random()*cw;y=Math.random()*fw;}\r\n else if(side===1){x=Math.random()*cw;y=ch-Math.random()*fw;}\r\n else if(side===2){x=Math.random()*fw;y=fw+Math.random()*(ch-fw*2);}\r\n else{x=cw-Math.random()*fw;y=fw+Math.random()*(ch-fw*2);}\r\n ctx.fillStyle=rgb(Math.min(255,sr+Math.random()*50-25),Math.min(255,sg+Math.random()*40-20),Math.min(255,sb+Math.random()*30-15),.75);\r\n ctx.beginPath();ctx.arc(x,y,Math.random()*2,0,Math.PI*2);ctx.fill();\r\n }\r\n ctx.restore();\r\n}\r\nfunction drawWashEffect(cw,ch,fw,gr,gg,gb){\r\n const[sr,sg,sb]=hexToRgb(shabbyHex);\r\n const gi=Math.round(fw*.80),gs=Math.max(1,Math.round(fw*.11));\r\n \/\/ Wash bleibt ebenfalls auf dem Rahmenband\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n ctx.globalAlpha=(wash\/100)*.7;\r\n ctx.strokeStyle=rgb(sr*.6+gr*.4,sg*.6+gg*.4,sb*.6+gb*.4,(wash\/100)*.85);\r\n ctx.lineWidth=gs*2.2;ctx.strokeRect(gi,gi,cw-gi*2,ch-gi*2);\r\n for(let i=0;i<wash*.55;i++){\r\n const pct=Math.random();let px,py;\r\n if(pct<.25){px=gi+Math.random()*(cw-gi*2);py=gi;}\r\n else if(pct<.5){px=gi+Math.random()*(cw-gi*2);py=ch-gi;}\r\n else if(pct<.75){px=gi;py=gi+Math.random()*(ch-gi*2);}\r\n else{px=cw-gi;py=gi+Math.random()*(ch-gi*2);}\r\n ctx.fillStyle=rgb(sr*.5+80,sg*.5+70,sb*.5+50,.4);\r\n ctx.beginPath();ctx.ellipse(px,py,3+Math.random()*9,2+Math.random()*4,Math.random()*Math.PI,0,Math.PI*2);ctx.fill();\r\n }\r\n ctx.restore();\r\n}\r\n\/\/ \u2500\u2500 WANDTEXTUR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction drawWallTexture(hexColor){\r\n const stage=document.getElementById('stage');\r\n const W2=stage.offsetWidth||300,H2=stage.offsetHeight||500;\r\n wallCanvas.width=W2;wallCanvas.height=H2;\r\n const wctx=wallCanvas.getContext('2d');\r\n wctx.clearRect(0,0,W2,H2);\r\n const[wr,wg,wb]=hexToRgb(hexColor);\r\n for(let i=0;i<1600;i++){\r\n const x=Math.random()*W2,y=Math.random()*H2;\r\n const len=4+Math.random()*20,angle=Math.random()*Math.PI;\r\n const br=(Math.random()-.5)*26;\r\n wctx.globalAlpha=0.05+Math.random()*.09;\r\n wctx.strokeStyle=`rgb(${Math.min(255,Math.max(0,wr+br))},${Math.min(255,Math.max(0,wg+br))},${Math.min(255,Math.max(0,wb+br))})`;\r\n wctx.lineWidth=1.5+Math.random()*2.5;wctx.lineCap='round';\r\n wctx.beginPath();wctx.moveTo(x,y);wctx.lineTo(x+Math.cos(angle)*len,y+Math.sin(angle)*len);wctx.stroke();\r\n }\r\n for(let i=0;i<5000;i++){\r\n const x=Math.random()*W2,y=Math.random()*H2,br=(Math.random()-.5)*38;\r\n wctx.globalAlpha=0.03+Math.random()*.06;\r\n wctx.fillStyle=`rgb(${Math.min(255,Math.max(0,wr+br))},${Math.min(255,Math.max(0,wg+br))},${Math.min(255,Math.max(0,wb+br))})`;\r\n wctx.beginPath();wctx.arc(x,y,Math.random()*1.1,0,Math.PI*2);wctx.fill();\r\n }\r\n for(let i=0;i<6;i++){\r\n const x=Math.random()*W2,y=Math.random()*H2,r=W2*(0.3+Math.random()*.5);\r\n const br=(Math.random()-.5)*16;\r\n const g=wctx.createRadialGradient(x,y,0,x,y,r);\r\n g.addColorStop(0,`rgba(${Math.min(255,Math.max(0,wr+br))},${Math.min(255,Math.max(0,wg+br))},${Math.min(255,Math.max(0,wb+br))},0.06)`);\r\n g.addColorStop(1,`rgba(${wr},${wg},${wb},0)`);\r\n wctx.fillStyle=g;wctx.fillRect(0,0,W2,H2);\r\n }\r\n}\r\n\/\/ \u2500\u2500 UI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction renderFrameList(){\r\n const el=document.getElementById('frameList');el.innerHTML='';\r\n FRAMES.forEach(f=>{\r\n const b=document.createElement('button');\r\n b.className='frame-btn'+(f.id===cur.id?' active':'');\r\n b.innerHTML=`<div class=\"frame-swatch\" style=\"background:${f.hex}\">${f.id==='schwarz-gold'?`<div class=\"frame-swatch-inner\" style=\"background:#c9a84c\"><\/div>`:''}<\/div><div class=\"frame-info\"><div class=\"frame-name\">${f.name}<\/div><div class=\"frame-hex\">${f.hex}<\/div><\/div>${f.recommended?'<div class=\"rec-dot\"><\/div>':''}`;\r\n b.onclick=()=>{cur=f;drawAll();renderFrameList();};\r\n el.appendChild(b);\r\n });\r\n}\r\nfunction renderWallList(){\r\n const el=document.getElementById('wallList');el.innerHTML='';\r\n WALLS.forEach(w=>{\r\n const b=document.createElement('button');\r\n b.className='wall-btn'+(w===wall?' active':'');\r\n b.style.background=w;\r\n b.onclick=()=>{wall=w;document.getElementById('stage').style.background=wall;drawWallTexture(w);renderWallList();};\r\n el.appendChild(b);\r\n });\r\n}\r\nfunction renderPresets(presets,containerId,activeIdx,onPick){\r\n const el=document.getElementById(containerId);if(!el)return;el.innerHTML='';\r\n presets.forEach((p,i)=>{\r\n const b=document.createElement('div');\r\n b.className='preset-dot'+(i===activeIdx?' active':'');\r\n b.style.background=p.hex;b.title=p.label;\r\n b.onclick=()=>onPick(p.hex,i);\r\n el.appendChild(b);\r\n });\r\n}\r\nfunction bindCustomColor(pickerId,hexInputId,applyId,feedbackId,onApply){\r\n const picker=document.getElementById(pickerId);\r\n const hexIn=document.getElementById(hexInputId);\r\n const applyBtn=document.getElementById(applyId);\r\n const fb=document.getElementById(feedbackId);\r\n applyBtn.onclick=()=>{\r\n const resolved=parseColor(hexIn.value);\r\n if(!resolved){fb.textContent='\u2717 Ung\u00fcltige Farbe';fb.style.color='#c04040';return;}\r\n try{picker.value=resolved;}catch(e){}\r\n hexIn.value=resolved;fb.textContent=resolved;fb.style.color='#d8ccd4';\r\n onApply(resolved);\r\n };\r\n hexIn.onkeydown=e=>{if(e.key==='Enter')applyBtn.onclick();};\r\n hexIn.oninput=()=>{fb.textContent='';};\r\n picker.oninput=e=>{hexIn.value=e.target.value;fb.textContent='';applyBtn.onclick();};\r\n}\r\nfunction bindSlider(id,valId,unit,cb){\r\n const sl=document.getElementById(id),vl=document.getElementById(valId);\r\n sl.oninput=()=>{vl.textContent=sl.value+unit;cb(parseInt(sl.value));};\r\n}\r\n\/\/ \u2500\u2500 IMAGE LOAD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ WICHTIG: srcImg erst HIER setzen \u2013 nach allen Funktionsdefinitionen.\r\n\/\/ Bei data-URLs kann onload synchron feuern; dann w\u00e4ren drawAll etc. noch undefiniert.\r\nfunction loadDefaultImage(){\r\n srcImg.onload=()=>{imgLoaded=true;drawAll();};\r\n srcImg.src='data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"400\" height=\"500\"><rect width=\"400\" height=\"500\" fill=\"%23c8b090\"\/><text x=\"200\" y=\"260\" text-anchor=\"middle\" font-size=\"18\" fill=\"%23443020\" font-family=\"serif\">Bild hochladen<\/text><\/svg>';\r\n}\r\ndocument.getElementById('imgUpload').onchange=e=>{\r\n const f=e.target.files[0];if(!f)return;\r\n imgLoaded=false;\r\n srcImg.onload=()=>{imgLoaded=true;drawAll();};\r\n srcImg.src=URL.createObjectURL(f);\r\n};\r\n\/\/ \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nrenderFrameList();\r\nrenderWallList();\r\nrenderPresets(SHABBY_PRESETS,'shabbyPresets',activeShabby,function onShabby(hex,i){\r\n shabbyHex=hex;activeShabby=i;\r\n document.getElementById('shabbyPicker').value=hex;\r\n renderPresets(SHABBY_PRESETS,'shabbyPresets',i,onShabby);\r\n drawAll();\r\n});\r\ndocument.getElementById('shabbyPicker').oninput=e=>{\r\n shabbyHex=e.target.value;activeShabby=-1;\r\n renderPresets(SHABBY_PRESETS,'shabbyPresets',-1,()=>{});drawAll();\r\n};\r\nrenderPresets(STEG_PRESETS,'stegPresets',activeSteg,function onSteg(hex,i){\r\n stegHex=hex;activeSteg=i;\r\n document.getElementById('stegPicker').value=hex;\r\n document.getElementById('stegHexInput').value=hex;\r\n renderPresets(STEG_PRESETS,'stegPresets',i,onSteg);\r\n drawAll();\r\n});\r\ndocument.getElementById('stegPicker').oninput=e=>{\r\n stegHex=e.target.value;activeSteg=-1;\r\n renderPresets(STEG_PRESETS,'stegPresets',-1,()=>{});drawAll();\r\n};\r\nbindCustomColor('customPicker','customHex','customApply','customFeedback',hex=>{\r\n const[r,g,b]=hexToRgb(hex);\r\n const cf=FRAMES.find(f=>f.id==='custom');\r\n cf.r=r;cf.g=g;cf.b=b;cf.hex=hex;cf.name='Freie Farbe';\r\n cur=cf;drawAll();renderFrameList();\r\n});\r\nbindCustomColor('stegPicker','stegHexInput','stegApply','stegFeedback',hex=>{\r\n stegHex=hex;drawAll();\r\n});\r\ndocument.getElementById('stegVisible').onchange=e=>{\r\n stegVisible=e.target.checked;\r\n document.getElementById('stegVisLabel').textContent=stegVisible?'An':'Aus';\r\n document.getElementById('stegControls').style.opacity=stegVisible?'1':'0.4';\r\n document.getElementById('stegControls').style.pointerEvents=stegVisible?'auto':'none';\r\n drawAll();\r\n};\r\nbindSlider('sWidth','vWidth',' px',v=>{W=v;drawAll();});\r\nbindSlider('sBright','vBright','%',v=>{bright=v;drawAll();});\r\nbindSlider('sSat','vSat','%',v=>{sat=v;drawAll();});\r\nbindSlider('sScratch','vScratch','%',v=>{scratch=v;drawAll();});\r\nbindSlider('sChip','vChip','%',v=>{chip=v;drawAll();});\r\nbindSlider('sPatina','vPatina','%',v=>{patina=v;drawAll();});\r\nbindSlider('sWash','vWash','%',v=>{wash=v;drawAll();});\r\nbindSlider('sStegW','vStegW',' px',v=>{stegWidthPx=v;drawAll();});\r\ndocument.getElementById('stage').style.background=wall;\r\n\/\/ Wandtextur und Bild erst nach Layout rendern\r\nrequestAnimationFrame(()=>{\r\n drawWallTexture(wall);\r\n loadDefaultImage(); \/\/ startet onload \u2192 drawAll\r\n});\r\nwindow.addEventListener('resize',()=>{drawWallTexture(wall);if(imgLoaded)drawAll();});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Rahmen-Simulation \u00b7 Mohn Rahmensimulation Ohne Passepartout Bild einf\u00fcgen \u2b06 Eigenes Bild hochladen Rahmen w\u00e4hlen Freie Rahmenfarbe OK Wandfarbe Rahmen \u00b7 Breite & Farbe Breite24 px Rahmen Helligkeit100% Rahmen S\u00e4ttigung100% Innensteg Steg anzeigen An Farbe OK Stegbreite12 px Shabby \/ Patina Patina-Farbe Kratzspuren0% Abbl\u00e4ttern0% Patina \/ Staub0% Vergoldung verwaschen0% Schwarz \u00b7 Goldsteg \u2605 Erste Wahl \u00b7…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7305","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Rahmen-Simmulation - kobold-grafik<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rahmen-Simmulation - kobold-grafik\" \/>\n<meta property=\"og:description\" content=\"Rahmen-Simulation \u00b7 Mohn Rahmensimulation Ohne Passepartout Bild einf\u00fcgen \u2b06 Eigenes Bild hochladen Rahmen w\u00e4hlen Freie Rahmenfarbe OK Wandfarbe Rahmen \u00b7 Breite & Farbe Breite24 px Rahmen Helligkeit100% Rahmen S\u00e4ttigung100% Innensteg Steg anzeigen An Farbe OK Stegbreite12 px Shabby \/ Patina Patina-Farbe Kratzspuren0% Abbl\u00e4ttern0% Patina \/ Staub0% Vergoldung verwaschen0% Schwarz \u00b7 Goldsteg \u2605 Erste Wahl \u00b7...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/\" \/>\n<meta property=\"og:site_name\" content=\"kobold-grafik\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-05T10:43:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/\",\"url\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/\",\"name\":\"Rahmen-Simmulation - kobold-grafik\",\"isPartOf\":{\"@id\":\"https:\/\/www.uwekobold.de\/#website\"},\"datePublished\":\"2026-06-05T10:30:53+00:00\",\"dateModified\":\"2026-06-05T10:43:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.uwekobold.de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rahmen-Simmulation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.uwekobold.de\/#website\",\"url\":\"https:\/\/www.uwekobold.de\/\",\"name\":\"kobold-grafik\",\"description\":\"fine art photography\",\"publisher\":{\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.uwekobold.de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e\",\"name\":\"Uwe Kobold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg\",\"contentUrl\":\"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg\",\"width\":1000,\"height\":1000,\"caption\":\"Uwe Kobold\"},\"logo\":{\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.uwekobold.de\"]}]}<\/script>\n","yoast_head_json":{"title":"Rahmen-Simmulation - kobold-grafik","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/","og_locale":"en_US","og_type":"article","og_title":"Rahmen-Simmulation - kobold-grafik","og_description":"Rahmen-Simulation \u00b7 Mohn Rahmensimulation Ohne Passepartout Bild einf\u00fcgen \u2b06 Eigenes Bild hochladen Rahmen w\u00e4hlen Freie Rahmenfarbe OK Wandfarbe Rahmen \u00b7 Breite & Farbe Breite24 px Rahmen Helligkeit100% Rahmen S\u00e4ttigung100% Innensteg Steg anzeigen An Farbe OK Stegbreite12 px Shabby \/ Patina Patina-Farbe Kratzspuren0% Abbl\u00e4ttern0% Patina \/ Staub0% Vergoldung verwaschen0% Schwarz \u00b7 Goldsteg \u2605 Erste Wahl \u00b7...","og_url":"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/","og_site_name":"kobold-grafik","article_modified_time":"2026-06-05T10:43:40+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/","url":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/","name":"Rahmen-Simmulation - kobold-grafik","isPartOf":{"@id":"https:\/\/www.uwekobold.de\/#website"},"datePublished":"2026-06-05T10:30:53+00:00","dateModified":"2026-06-05T10:43:40+00:00","breadcrumb":{"@id":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uwekobold.de\/"},{"@type":"ListItem","position":2,"name":"Rahmen-Simmulation"}]},{"@type":"WebSite","@id":"https:\/\/www.uwekobold.de\/#website","url":"https:\/\/www.uwekobold.de\/","name":"kobold-grafik","description":"fine art photography","publisher":{"@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uwekobold.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e","name":"Uwe Kobold","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/","url":"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg","contentUrl":"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg","width":1000,"height":1000,"caption":"Uwe Kobold"},"logo":{"@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.uwekobold.de"]}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages\/7305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/comments?post=7305"}],"version-history":[{"count":10,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages\/7305\/revisions"}],"predecessor-version":[{"id":7316,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages\/7305\/revisions\/7316"}],"wp:attachment":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/media?parent=7305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nRahmen-Simulation \u00b7 Mohn<\/title>\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Josefin+Sans:wght@100;200;300&display=swap');\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n:root{--bg:#0a0709;--surface:#161014;--border:#2a1e24;--text:#f5f0ee;--muted:#c8b8c4;--accent:#b84060}\r\nbody{background:var(--bg);color:var(--text);font-family:'Josefin Sans',sans-serif;font-weight:200;min-height:100vh;overflow-x:hidden}\r\n.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}\r\n\/* SIDEBAR *\/\r\n.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:28px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a1e24 transparent}\r\n.sidebar-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1.22rem;color:#f5f0ee;margin-bottom:2px;line-height:1.2}\r\n.sidebar-sub{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:#cfc0c8;margin-bottom:22px}\r\n.section-label{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:#ddd0d8;margin-bottom:9px;margin-top:18px;padding-bottom:5px;border-bottom:1px solid var(--border)}\r\n.frame-list{display:flex;flex-direction:column;gap:3px}\r\n.frame-btn{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:2px;background:transparent;cursor:pointer;transition:all .2s;text-align:left;width:100%}\r\n.frame-btn:hover{background:#1a1015;border-color:#3e2535}\r\n.frame-btn.active{background:#1e1218;border-color:#4a2535}\r\n.frame-swatch{width:22px;height:22px;border-radius:1px;flex-shrink:0;position:relative;overflow:hidden}\r\n.frame-swatch-inner{position:absolute;inset:4px;border-radius:1px}\r\n.frame-info{flex:1}\r\n.frame-name{font-size:.70rem;letter-spacing:.04em;color:#f2ecf0;line-height:1.2;margin-bottom:1px}\r\n.frame-hex{font-size:.55rem;letter-spacing:.1em;color:#d8ccd4}\r\n.rec-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}\r\n.wall-list{display:flex;flex-wrap:wrap;gap:6px}\r\n.wall-btn{width:26px;height:26px;border-radius:1px;border:2px solid transparent;cursor:pointer;transition:all .18s}\r\n.wall-btn:hover{transform:scale(1.12)}\r\n.wall-btn.active{border-color:#ede0e8}\r\n.custom-color-row{display:flex;gap:7px;align-items:center;margin-top:6px}\r\n.custom-color-row input[type=color]{width:34px;height:28px;border:1px solid var(--border);border-radius:2px;background:none;cursor:pointer;padding:1px}\r\n.custom-color-row input[type=text]{flex:1;background:#0e0a0d;border:1px solid var(--border);border-radius:2px;color:#f2ecf0;font-family:'Josefin Sans',sans-serif;font-size:.66rem;letter-spacing:.08em;padding:5px 7px;outline:none}\r\n.custom-color-row input[type=text]:focus{border-color:#4a2535}\r\n.custom-color-row button{background:#1e1218;border:1px solid #4a2535;border-radius:2px;color:#f0e4ea;font-family:'Josefin Sans',sans-serif;font-size:.58rem;letter-spacing:.1em;padding:5px 9px;cursor:pointer;white-space:nowrap;transition:all .2s}\r\n.custom-color-row button:hover{background:#2a1a22}\r\n.feedback{font-size:.56rem;letter-spacing:.1em;color:#d8ccd4;margin-top:3px;height:13px}\r\n.ctrl-item{display:flex;flex-direction:column;gap:3px;margin-bottom:7px}\r\n.ctrl-label{display:flex;justify-content:space-between;align-items:center}\r\n.ctrl-name{font-size:.56rem;letter-spacing:.1em;color:#e8dce4}\r\n.ctrl-val{font-size:.56rem;letter-spacing:.08em;color:#ede6ea;min-width:42px;text-align:right}\r\ninput[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:3px}\r\n.shabby-color-row{display:flex;gap:8px;align-items:center;margin-bottom:7px}\r\n.shabby-color-row label{font-size:.55rem;letter-spacing:.1em;color:#e8dce4;white-space:nowrap}\r\n.shabby-color-row input[type=color]{width:28px;height:22px;border:1px solid var(--border);border-radius:2px;background:none;cursor:pointer;padding:1px}\r\n.presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}\r\n.preset-dot{width:20px;height:20px;border-radius:1px;border:1px solid transparent;cursor:pointer;transition:all .15s;flex-shrink:0}\r\n.preset-dot:hover{transform:scale(1.15)}\r\n.preset-dot.active{border-color:#f0e4ea}\r\n.upload-zone{border:1px dashed var(--border);border-radius:2px;padding:11px;text-align:center;cursor:pointer;transition:all .22s;margin-top:4px;display:block}\r\n.upload-zone:hover{border-color:#5a3040;background:#14090e}\r\n.upload-zone input{display:none}\r\n.upload-icon{font-size:1.1rem;opacity:.35;margin-bottom:3px}\r\n.upload-text{font-size:.56rem;letter-spacing:.1em;color:#d8ccd4;line-height:1.5}\r\n\/* STAGE *\/\r\n.stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f5f0eb;transition:background .5s ease;overflow:visible}\r\n#wallCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}\r\n.artwork-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}\r\n#mainCanvas{display:block;filter:drop-shadow(4px 12px 18px rgba(0,0,0,.5)) drop-shadow(1px 4px 6px rgba(0,0,0,.3))}\r\n.stage-label{position:absolute;top:22px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:2}\r\n.stage-frame-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.98rem;color:rgba(245,240,238,.45);letter-spacing:.04em}\r\n.stage-frame-detail{font-size:.53rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(200,184,196,.5);margin-top:2px}\r\n.info-strip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;white-space:nowrap;z-index:2}\r\n.info-pill{font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(200,184,196,.45)}\r\n.info-sep{color:rgba(200,184,196,.2);font-size:.42rem}\r\n@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}\r\n.artwork-wrap{animation:fadeUp .8s ease both}\r\n@media(max-width:768px){\r\n .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}\r\n .sidebar{position:static;height:auto;max-height:44vh;overflow-y:auto;border-right:none;border-bottom:1px solid var(--border);padding:16px 14px}\r\n .stage{min-height:54vh}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n <aside class=\"sidebar\">\r\n <div class=\"sidebar-title\">Rahmensimulation<\/div>\r\n <div class=\"sidebar-sub\">Ohne Passepartout<\/div>\r\n <div class=\"section-label\">Bild einf\u00fcgen<\/div>\r\n <label class=\"upload-zone\">\r\n <input type=\"file\" id=\"imgUpload\" accept=\"image\/*\">\r\n <div class=\"upload-icon\">\u2b06<\/div>\r\n <div class=\"upload-text\">Eigenes Bild hochladen<\/div>\r\n <\/label>\r\n <div class=\"section-label\">Rahmen w\u00e4hlen<\/div>\r\n <div class=\"frame-list\" id=\"frameList\"><\/div>\r\n <div class=\"section-label\">Freie Rahmenfarbe<\/div>\r\n <div class=\"custom-color-row\">\r\n <input type=\"color\" id=\"customPicker\" value=\"#8b4513\">\r\n <input type=\"text\" id=\"customHex\" placeholder=\"#8B4513 oder Name\" value=\"#8b4513\">\r\n <button id=\"customApply\">OK<\/button>\r\n <\/div>\r\n <div class=\"feedback\" id=\"customFeedback\"><\/div>\r\n <div class=\"section-label\">Wandfarbe<\/div>\r\n <div class=\"wall-list\" id=\"wallList\"><\/div>\r\n <div class=\"section-label\">Rahmen \u00b7 Breite & Farbe<\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Breite<\/span><span class=\"ctrl-val\" id=\"vWidth\">24 px<\/span><\/div>\r\n <input type=\"range\" id=\"sWidth\" min=\"2\" max=\"700\" value=\"24\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Rahmen Helligkeit<\/span><span class=\"ctrl-val\" id=\"vBright\">100%<\/span><\/div>\r\n <input type=\"range\" id=\"sBright\" min=\"20\" max=\"200\" value=\"100\" step=\"5\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Rahmen S\u00e4ttigung<\/span><span class=\"ctrl-val\" id=\"vSat\">100%<\/span><\/div>\r\n <input type=\"range\" id=\"sSat\" min=\"0\" max=\"200\" value=\"100\" step=\"5\">\r\n <\/div>\r\n <div class=\"section-label\">Innensteg<\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Steg anzeigen<\/span>\r\n <label style=\"display:flex;align-items:center;gap:6px;cursor:pointer\">\r\n <input type=\"checkbox\" id=\"stegVisible\" checked style=\"accent-color:var(--accent)\">\r\n <span class=\"ctrl-val\" id=\"stegVisLabel\">An<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <div id=\"stegControls\">\r\n <div class=\"shabby-color-row\">\r\n <label>Farbe<\/label>\r\n <input type=\"color\" id=\"stegPicker\" value=\"#c9a84c\">\r\n <\/div>\r\n <div class=\"presets\" id=\"stegPresets\"><\/div>\r\n <div class=\"custom-color-row\">\r\n <input type=\"text\" id=\"stegHexInput\" placeholder=\"#C9A84C oder Name\" value=\"#c9a84c\">\r\n <button id=\"stegApply\">OK<\/button>\r\n <\/div>\r\n <div class=\"feedback\" id=\"stegFeedback\"><\/div>\r\n <div class=\"ctrl-item\" style=\"margin-top:7px\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Stegbreite<\/span><span class=\"ctrl-val\" id=\"vStegW\">12 px<\/span><\/div>\r\n <input type=\"range\" id=\"sStegW\" min=\"1\" max=\"170\" value=\"12\" step=\"1\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"section-label\">Shabby \/ Patina<\/div>\r\n <div class=\"shabby-color-row\">\r\n <label>Patina-Farbe<\/label>\r\n <input type=\"color\" id=\"shabbyPicker\" value=\"#4a2e0a\">\r\n <\/div>\r\n <div class=\"presets\" id=\"shabbyPresets\"><\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Kratzspuren<\/span><span class=\"ctrl-val\" id=\"vScratch\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sScratch\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Abbl\u00e4ttern<\/span><span class=\"ctrl-val\" id=\"vChip\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sChip\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Patina \/ Staub<\/span><span class=\"ctrl-val\" id=\"vPatina\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sPatina\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <div class=\"ctrl-item\">\r\n <div class=\"ctrl-label\"><span class=\"ctrl-name\">Vergoldung verwaschen<\/span><span class=\"ctrl-val\" id=\"vWash\">0%<\/span><\/div>\r\n <input type=\"range\" id=\"sWash\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\r\n <\/div>\r\n <\/aside>\r\n <main class=\"stage\" id=\"stage\" style=\"background:#f5f0eb\">\r\n <canvas id=\"wallCanvas\"><\/canvas>\r\n <div class=\"stage-label\">\r\n <div class=\"stage-frame-name\" id=\"stageName\">Schwarz \u00b7 Goldsteg<\/div>\r\n <div class=\"stage-frame-detail\" id=\"stageDetail\">\u2605 Erste Wahl \u00b7 #1a1008<\/div>\r\n <\/div>\r\n <div class=\"artwork-wrap\">\r\n <canvas id=\"mainCanvas\"><\/canvas>\r\n <\/div>\r\n <div class=\"info-strip\">\r\n <span class=\"info-pill\" id=\"infoHex\">#1a1008<\/span>\r\n <span class=\"info-sep\">\u00b7<\/span>\r\n <span class=\"info-pill\" id=\"infoName\">Schwarz-Gold<\/span>\r\n <span class=\"info-sep\">\u00b7<\/span>\r\n <span class=\"info-pill\" id=\"infoWidth\">24 px<\/span>\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n<script>\r\n\/\/ \u2500\u2500 COLOR UTILS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst DE_COLORS={rot:'#ff0000',dunkelrot:'#8b0000',hellrot:'#ff6666',karmesin:'#dc143c',bordeaux:'#800020',weinrot:'#722f37',rubinrot:'#9b111e',gruen:'#008000',gr\u00fcn:'#008000',dunkelgruen:'#006400',dunkelgr\u00fcn:'#006400',hellgruen:'#90ee90',hellgr\u00fcn:'#90ee90',olivgruen:'#6b8e23',olivgr\u00fcn:'#6b8e23',blau:'#0000ff',dunkelblau:'#00008b',hellblau:'#add8e6',himmelblau:'#87ceeb',gelb:'#ffff00',dunkelgelb:'#ccaa00',hellgelb:'#ffffe0',orange:'#ffa500',dunkelorange:'#ff8c00',lila:'#800080',violett:'#ee82ee',flieder:'#c8a2c8',pflaume:'#8b008b',purpur:'#800080',magenta:'#ff00ff',rosa:'#ffc0cb',pink:'#ff69b4',lachs:'#fa8072',braun:'#a52a2a',dunkelbraun:'#3b1a15',hellbraun:'#c8a060',mahagoni:'#3b1a15',beige:'#f5f5dc',sand:'#f4a460',creme:'#fffdd0',weiss:'#ffffff',wei\u00df:'#ffffff',hellgrau:'#d3d3d3',grau:'#808080',dunkelgrau:'#696969',anthrazit:'#383838',schwarz:'#000000',gold:'#ffd700',silber:'#c0c0c0',bronze:'#cd7f32',kupfer:'#b87333',tuerkis:'#40e0d0',t\u00fcrkis:'#40e0d0',turkis:'#40e0d0',cyan:'#00ffff',ocker:'#cc7722',terrakotta:'#e2725b',rost:'#b7410e',elfenbein:'#fffff0',naturweiss:'#fdf6e3',mintgruen:'#98ff98',mintgr\u00fcn:'#98ff98'};\r\nconst CSS_COLORS={aliceblue:'#f0f8ff',antiquewhite:'#faebd7',aqua:'#00ffff',aquamarine:'#7fffd4',azure:'#f0ffff',beige:'#f5f5dc',bisque:'#ffe4c4',black:'#000000',blanchedalmond:'#ffebcd',blue:'#0000ff',blueviolet:'#8a2be2',brown:'#a52a2a',burlywood:'#deb887',cadetblue:'#5f9ea0',chartreuse:'#7fff00',chocolate:'#d2691e',coral:'#ff7f50',cornflowerblue:'#6495ed',cornsilk:'#fff8dc',crimson:'#dc143c',cyan:'#00ffff',darkblue:'#00008b',darkcyan:'#008b8b',darkgoldenrod:'#b8860b',darkgray:'#a9a9a9',darkgreen:'#006400',darkgrey:'#a9a9a9',darkkhaki:'#bdb76b',darkmagenta:'#8b008b',darkolivegreen:'#556b2f',darkorange:'#ff8c00',darkorchid:'#9932cc',darkred:'#8b0000',darksalmon:'#e9967a',darkseagreen:'#8fbc8f',darkslateblue:'#483d8b',darkslategray:'#2f4f4f',darkslategrey:'#2f4f4f',darkturquoise:'#00ced1',darkviolet:'#9400d3',deeppink:'#ff1493',deepskyblue:'#00bfff',dimgray:'#696969',dimgrey:'#696969',dodgerblue:'#1e90ff',firebrick:'#b22222',floralwhite:'#fffaf0',forestgreen:'#228b22',fuchsia:'#ff00ff',gainsboro:'#dcdcdc',ghostwhite:'#f8f8ff',gold:'#ffd700',goldenrod:'#daa520',gray:'#808080',green:'#008000',greenyellow:'#adff2f',grey:'#808080',honeydew:'#f0fff0',hotpink:'#ff69b4',indianred:'#cd5c5c',indigo:'#4b0082',ivory:'#fffff0',khaki:'#f0e68c',lavender:'#e6e6fa',lavenderblush:'#fff0f5',lawngreen:'#7cfc00',lemonchiffon:'#fffacd',lightblue:'#add8e6',lightcoral:'#f08080',lightcyan:'#e0ffff',lightgoldenrodyellow:'#fafad2',lightgray:'#d3d3d3',lightgreen:'#90ee90',lightgrey:'#d3d3d3',lightpink:'#ffb6c1',lightsalmon:'#ffa07a',lightseagreen:'#20b2aa',lightskyblue:'#87cefa',lightslategray:'#778899',lightslategrey:'#778899',lightsteelblue:'#b0c4de',lightyellow:'#ffffe0',lime:'#00ff00',limegreen:'#32cd32',linen:'#faf0e6',magenta:'#ff00ff',maroon:'#800000',mediumaquamarine:'#66cdaa',mediumblue:'#0000cd',mediumorchid:'#ba55d3',mediumpurple:'#9370db',mediumseagreen:'#3cb371',mediumslateblue:'#7b68ee',mediumspringgreen:'#00fa9a',mediumturquoise:'#48d1cc',mediumvioletred:'#c71585',midnightblue:'#191970',mintcream:'#f5fffa',mistyrose:'#ffe4e1',moccasin:'#ffe4b5',navajowhite:'#ffdead',navy:'#000080',oldlace:'#fdf5e6',olive:'#808000',olivedrab:'#6b8e23',orange:'#ffa500',orangered:'#ff4500',orchid:'#da70d6',palegoldenrod:'#eee8aa',palegreen:'#98fb98',paleturquoise:'#afeeee',palevioletred:'#db7093',papayawhip:'#ffefd5',peachpuff:'#ffdab9',peru:'#cd853f',pink:'#ffc0cb',plum:'#dda0dd',powderblue:'#b0e0e6',purple:'#800080',red:'#ff0000',rosybrown:'#bc8f8f',royalblue:'#4169e1',saddlebrown:'#8b4513',salmon:'#fa8072',sandybrown:'#f4a460',seagreen:'#2e8b57',seashell:'#fff5ee',sienna:'#a0522d',silver:'#c0c0c0',skyblue:'#87ceeb',slateblue:'#6a5acd',slategray:'#708090',slategrey:'#708090',snow:'#fffafa',springgreen:'#00ff7f',steelblue:'#4682b4',tan:'#d2b48c',teal:'#008080',thistle:'#d8bfd8',tomato:'#ff6347',turquoise:'#40e0d0',violet:'#ee82ee',wheat:'#f5deb3',white:'#ffffff',whitesmoke:'#f5f5f5',yellow:'#ffff00',yellowgreen:'#9acd32'};\r\nfunction parseColor(s){\r\n s=s.trim();\r\n if(\/^#[0-9a-fA-F]{3}$\/.test(s)){const h=s.slice(1);return '#'+h.split('').map(c=>c+c).join('');}\r\n if(\/^#[0-9a-fA-F]{6}$\/.test(s))return s.toLowerCase();\r\n if(\/^[0-9a-fA-F]{6}$\/.test(s))return '#'+s.toLowerCase();\r\n if(\/^[0-9a-fA-F]{3}$\/.test(s))return '#'+s.split('').map(c=>c+c).join('');\r\n const k=s.toLowerCase();\r\n return DE_COLORS[k]||CSS_COLORS[k]||null;\r\n}\r\nfunction hexToRgb(h){h=h.replace('#','');if(h.length===3)h=h.split('').map(c=>c+c).join('');const n=parseInt(h,16);return[(n>>16)&255,(n>>8)&255,n&255];}\r\nfunction rgb(r,g,b,a=1){return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`;}\r\n\/\/ \u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst FRAMES=[\r\n {id:'schwarz-gold',name:'Schwarz \u00b7 Goldsteg',detail:'\u2605 Erste Wahl',hex:'#1a1008',r:26,g:16,b:8,recommended:true},\r\n {id:'purpur',name:'Tiefdunkles Purpur',detail:'\u2605 Zweite Wahl',hex:'#2d1a28',r:45,g:26,b:40,recommended:true},\r\n {id:'antiweiss',name:'Antik-Wei\u00df',detail:'Warm \u00b7 hell',hex:'#f0e6da',r:240,g:230,b:218},\r\n {id:'mahagoni',name:'Mahagoni',detail:'Dunkelbraun \u00b7 warm',hex:'#3b1a15',r:59,g:26,b:21},\r\n {id:'silber',name:'Silber \/ Aluminium',detail:'Modern \u00b7 k\u00fchl',hex:'#8a8a8a',r:138,g:138,b:138},\r\n {id:'naturholz',name:'Naturholz \u00b7 Eiche',detail:'Hell \u00b7 warm',hex:'#c8a060',r:200,g:160,b:96,wood:true},\r\n {id:'schwarz-matt',name:'Schwarz Matt',detail:'Puristisch',hex:'#111111',r:17,g:17,b:17},\r\n {id:'custom',name:'Freie Farbe',detail:'Benutzerdefiniert',hex:'#8b4513',r:139,g:69,b:19,custom:true},\r\n];\r\nconst WALLS=['#0a0709','#1c1018','#2a1a22','#3d2832','#f5f0eb','#e8ddd5','#d4c4b0','#b0a898','#7a6070','#4a3840'];\r\nconst STEG_PRESETS=[{hex:'#c9a84c',label:'Gold'},{hex:'#e8e8e8',label:'Silber'},{hex:'#b87333',label:'Kupfer'},{hex:'#f5f5dc',label:'Elfenbein'},{hex:'#ffffff',label:'Wei\u00df'},{hex:'#111111',label:'Schwarz'},{hex:'#c8b400',label:'Messing'},{hex:'#8b0000',label:'Dunkelrot'}];\r\nconst SHABBY_PRESETS=[{hex:'#4a2e0a',label:'Rost-Braun'},{hex:'#2a3a1a',label:'Moos-Gr\u00fcn'},{hex:'#1a1a3a',label:'Nacht-Blau'},{hex:'#3a3020',label:'Antik-Gold'},{hex:'#5a1a1a',label:'Tief-Rot'},{hex:'#c8b090',label:'Kalk-Wei\u00df'},{hex:'#2a2a2a',label:'Kohle'},{hex:'#8a6040',label:'Leder'}];\r\n\/\/ \u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet cur=FRAMES[0],wall=WALLS[4];\r\nlet W=24,bright=100,sat=100;\r\nlet scratch=0,chip=0,patina=0,wash=0;\r\nlet shabbyHex='#4a2e0a',stegHex='#c9a84c',stegVisible=true,stegWidthPx=12;\r\nlet activeShabby=0,activeSteg=0;\r\nlet imgLoaded=false;\r\n\/\/ \u2500\u2500 CANVASES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst mainCanvas=document.getElementById('mainCanvas');\r\nconst wallCanvas=document.getElementById('wallCanvas');\r\nconst srcImg=document.createElement('img');\r\nconst ctx=mainCanvas.getContext('2d');\r\n\/\/ \u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ adjColor wird NUR f\u00fcr Rahmenfarbe verwendet, NIEMALS f\u00fcr Bildpixel\r\nfunction adjColor(r,g,b){\r\n const bf=bright\/100,sf=sat\/100,gray=0.299*r+0.587*g+0.114*b;\r\n return[Math.min(255,Math.max(0,(gray+(r-gray)*sf)*bf)),\r\n Math.min(255,Math.max(0,(gray+(g-gray)*sf)*bf)),\r\n Math.min(255,Math.max(0,(gray+(b-gray)*sf)*bf))];\r\n}\r\n\/\/ \u2500\u2500 MAIN DRAW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ Reihenfolge: 1) Rahmen zeichnen, 2) Bild ZULETZT obenauf legen\r\n\/\/ \u2192 Helligkeit\/S\u00e4ttigung k\u00f6nnen das Bild niemals ber\u00fchren\r\nfunction drawAll(){\r\n if(!imgLoaded)return;\r\n const stage=document.getElementById('stage');\r\n const stageW=stage.offsetWidth||window.innerWidth-290;\r\n const stageH=stage.offsetHeight||window.innerHeight;\r\n const maxW=Math.min(stageW-40,480);\r\n const maxH=Math.min(stageH-80,520);\r\n const scale=Math.min(maxW\/(srcImg.naturalWidth+W*2),maxH\/(srcImg.naturalHeight+W*2),1);\r\n let iw=Math.round(srcImg.naturalWidth*scale);\r\n let ih=Math.round(srcImg.naturalHeight*scale);\r\n const fw=Math.round(W*scale);\r\n \/\/ FIX (wei\u00dfer Streifen): Canvas-Gesamtma\u00dfe auf GERADE Werte zwingen.\r\n \/\/ Ungerade Ma\u00dfe erzeugen mit Drop-Shadow-Filter + Antialiasing eine helle\r\n \/\/ Subpixel-Linie an der Unterkante.\r\n let cw=iw+fw*2; cw+=cw%2;\r\n let ch=ih+fw*2; ch+=ch%2;\r\n mainCanvas.width=cw;\r\n mainCanvas.height=ch;\r\n \/\/ tats\u00e4chlicher Bildbereich (f\u00fcllt evtl. die geraden-Korrektur-Pixel mit)\r\n iw=cw-fw*2;\r\n ih=ch-fw*2;\r\n \/\/ SCHRITT 1: Rahmen zeichnen (gesamte Canvas-Fl\u00e4che)\r\n drawFrame(cw,ch,fw);\r\n \/\/ SCHRITT 2: Bild ZULETZT in den Innenbereich zeichnen.\r\n \/\/ ctx.filter ist nirgendwo gesetzt \u2192 Bild kommt unver\u00e4ndert.\r\n \/\/ Bild deckt den gesamten Innenbereich [fw \u2026 cw-fw] \/ [fw \u2026 ch-fw] ab,\r\n \/\/ damit keine Rahmen-\/Steg-Linie und kein Antialiasing-Saum durchscheint.\r\n ctx.drawImage(srcImg,fw,fw,iw,ih);\r\n \/\/ Info\r\n document.getElementById('stageName').textContent=cur.name;\r\n document.getElementById('stageDetail').textContent=cur.detail+' \u00b7 '+cur.hex;\r\n document.getElementById('infoHex').textContent=cur.hex;\r\n document.getElementById('infoName').textContent=cur.name;\r\n document.getElementById('infoWidth').textContent=W+' px';\r\n}\r\nfunction drawFrame(cw,ch,fw){\r\n const f=cur;\r\n \/\/ adjColor nur f\u00fcr Rahmenfarbe\r\n const[r,g,b]=adjColor(f.r,f.g,f.b);\r\n function drawTrap(pts,lightF){\r\n const lr=Math.min(255,r*lightF),lg=Math.min(255,g*lightF),lb=Math.min(255,b*lightF);\r\n const dr=r*.38,dg=g*.38,db=b*.38;\r\n ctx.beginPath();\r\n ctx.moveTo(pts[0][0],pts[0][1]);\r\n pts.slice(1).forEach(p=>ctx.lineTo(p[0],p[1]));\r\n ctx.closePath();\r\n let grd;\r\n try{grd=ctx.createLinearGradient(pts[0][0],pts[0][1],pts[3][0],pts[3][1]);}catch(e){}\r\n if(grd){\r\n grd.addColorStop(0,rgb(lr,lg,lb));\r\n grd.addColorStop(.3,rgb(Math.min(255,r*1.1),Math.min(255,g*1.1),Math.min(255,b*1.1)));\r\n grd.addColorStop(.7,rgb(r,g,b));\r\n grd.addColorStop(1,rgb(dr,dg,db));\r\n ctx.fillStyle=grd;\r\n }else ctx.fillStyle=rgb(r,g,b);\r\n ctx.fill();\r\n ctx.strokeStyle=rgb(lr,lg,lb,.2);ctx.lineWidth=1;ctx.stroke();\r\n }\r\n \/\/ 4 Rahmen-Fl\u00e4chen\r\n drawTrap([[0,0],[cw,0],[cw-fw,fw],[fw,fw]],1.78);\r\n drawTrap([[0,ch],[cw,ch],[cw-fw,ch-fw],[fw,ch-fw]],.48);\r\n drawTrap([[0,0],[fw,fw],[fw,ch-fw],[0,ch]],1.3);\r\n drawTrap([[cw,0],[cw-fw,fw],[cw-fw,ch-fw],[cw,ch]],.68);\r\n \/\/ Holzmaserung\r\n if(f.wood){\r\n ctx.save();ctx.globalAlpha=.14;\r\n for(let i=0;i<45;i++){\r\n const x=Math.random()*cw;\r\n ctx.beginPath();ctx.moveTo(x,0);\r\n ctx.bezierCurveTo(x+(Math.random()-.5)*9,ch*.3,x+(Math.random()-.5)*7,ch*.7,x+(Math.random()-.5)*12,ch);\r\n ctx.strokeStyle=Math.random()>.5?'rgba(0,0,0,.35)':'rgba(255,210,80,.25)';\r\n ctx.lineWidth=Math.random()*1.4;ctx.stroke();\r\n }\r\n ctx.restore();\r\n }\r\n \/\/ Innensteg\r\n if(stegVisible){\r\n const[sr,sg,sb]=hexToRgb(stegHex);\r\n \/\/ Steg-Farbe wird NICHT durch adjColor geschickt \u2013 eigene Farbe.\r\n \/\/ Stegbreite ist jetzt ABSOLUT in px (wie der Rahmen W). Mit demselben\r\n \/\/ scale runterrechnen (fw = round(W*scale) \u2192 scale = fw\/W) und auf die\r\n \/\/ Rahmenbreite fw begrenzen, damit der Steg nie breiter als der Rahmen ist.\r\n const sc=W>0?fw\/W:1;\r\n const gs=Math.max(1,Math.min(fw,Math.round(stegWidthPx*sc)));\r\n \/\/ FIX (Steg auf Bild): Steg HART auf das Rahmenband clippen, damit kein\r\n \/\/ Pixel in den Bildbereich [fw \u2026 cw-fw] ragt. Linienmitte so w\u00e4hlen, dass\r\n \/\/ die INNENkante des Stegs b\u00fcndig bei fw liegt und der Steg nach AUSSEN\r\n \/\/ (in den Rahmen hinein) w\u00e4chst.\r\n const inset=fw-gs\/2;\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n ctx.strokeStyle=rgb(sr,sg,sb,.93);ctx.lineWidth=gs;\r\n ctx.strokeRect(inset,inset,cw-inset*2,ch-inset*2);\r\n \/\/ Glanzkante (aussen am Steg)\r\n const outer=inset-gs\/2-1;\r\n ctx.strokeStyle=rgb(Math.min(255,sr+65),Math.min(255,sg+65),Math.min(255,sb+45),.38);\r\n ctx.lineWidth=1;ctx.strokeRect(outer,outer,cw-outer*2,ch-outer*2);\r\n \/\/ Schattenkante (innen, b\u00fcndig an Bildkante fw)\r\n ctx.strokeStyle=rgb(sr*.4,sg*.4,sb*.4,.3);\r\n ctx.lineWidth=1;ctx.strokeRect(fw+0.5,fw+0.5,cw-(fw+0.5)*2,ch-(fw+0.5)*2);\r\n ctx.restore();\r\n if(wash>0)drawWashEffect(cw,ch,fw,sr,sg,sb);\r\n }\r\n \/\/ Shabby-Effekte: clippen auf Rahmenband\r\n const[shR,shG,shB]=hexToRgb(shabbyHex);\r\n if(scratch>0)drawScratches(cw,ch,fw,shR,shG,shB);\r\n if(chip>0)drawChips(cw,ch,fw,r,g,b,shR,shG,shB);\r\n if(patina>0)drawPatina(cw,ch,fw,shR,shG,shB);\r\n}\r\n\/\/ Clip auf Rahmenband (au\u00dferhalb des Bildbereichs)\r\nfunction clipToFrameBand(cw,ch,fw){\r\n ctx.beginPath();\r\n \/\/ \u00c4u\u00dferes Rechteck\r\n ctx.rect(0,0,cw,ch);\r\n \/\/ Inneres Rechteck (Bildbereich) \u2013 evenodd schneidet es aus\r\n ctx.rect(fw,fw,cw-fw*2,ch-fw*2);\r\n ctx.clip('evenodd');\r\n}\r\nfunction drawScratches(cw,ch,fw,sr,sg,sb){\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n for(let i=0;i<Math.round(scratch*.9);i++){\r\n const x1=Math.random()*cw,y1=Math.random()*ch;\r\n const a=Math.random()*Math.PI,len=8+Math.random()*65;\r\n ctx.globalAlpha=(0.12+Math.random()*.55)*(scratch\/100);\r\n ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x1+Math.cos(a)*len,y1+Math.sin(a)*len);\r\n ctx.lineWidth=Math.random()<.18?2:1;\r\n ctx.strokeStyle=Math.random()>.45?rgb(Math.min(255,sr+120),Math.min(255,sg+120),Math.min(255,sb+120),.8):rgb(sr*.4,sg*.4,sb*.4,.7);\r\n ctx.stroke();\r\n }\r\n ctx.restore();\r\n}\r\nfunction drawChips(cw,ch,fw,r,g,b,sr,sg,sb){\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n for(let i=0;i<Math.round(chip*.45);i++){\r\n const side=Math.floor(Math.random()*4);\r\n let x,y;\r\n if(side===0){x=Math.random()*cw;y=Math.random()*fw;}\r\n else if(side===1){x=Math.random()*cw;y=ch-Math.random()*fw;}\r\n else if(side===2){x=Math.random()*fw;y=Math.random()*ch;}\r\n else{x=cw-Math.random()*fw;y=Math.random()*ch;}\r\n const sz=3+Math.random()*22*(chip\/100);\r\n ctx.globalAlpha=.75*(chip\/100);\r\n ctx.fillStyle=rgb(sr*.25,sg*.25,sb*.25);\r\n ctx.beginPath();ctx.ellipse(x,y,sz*1.5,sz*.65,Math.random()*Math.PI,0,Math.PI*2);ctx.fill();\r\n ctx.globalAlpha=.35*(chip\/100);\r\n ctx.strokeStyle=rgb(Math.min(255,sr+80),Math.min(255,sg+80),Math.min(255,sb+80),.6);\r\n ctx.lineWidth=1;ctx.stroke();\r\n }\r\n ctx.restore();\r\n}\r\nfunction drawPatina(cw,ch,fw,sr,sg,sb){\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n [[0,0],[cw,0],[0,ch],[cw,ch]].forEach(([cx,cy])=>{\r\n const g=ctx.createRadialGradient(cx,cy,0,cx,cy,fw*3);\r\n g.addColorStop(0,rgb(sr,sg,sb,(patina\/100)*.65));\r\n g.addColorStop(.5,rgb(sr,sg,sb,(patina\/100)*.3));\r\n g.addColorStop(1,rgb(sr,sg,sb,0));\r\n ctx.fillStyle=g;ctx.fillRect(0,0,cw,ch);\r\n });\r\n ctx.globalAlpha=(patina\/100)*.38;\r\n for(let i=0;i<patina*4;i++){\r\n const side=Math.floor(Math.random()*4);let x,y;\r\n if(side===0){x=Math.random()*cw;y=Math.random()*fw;}\r\n else if(side===1){x=Math.random()*cw;y=ch-Math.random()*fw;}\r\n else if(side===2){x=Math.random()*fw;y=fw+Math.random()*(ch-fw*2);}\r\n else{x=cw-Math.random()*fw;y=fw+Math.random()*(ch-fw*2);}\r\n ctx.fillStyle=rgb(Math.min(255,sr+Math.random()*50-25),Math.min(255,sg+Math.random()*40-20),Math.min(255,sb+Math.random()*30-15),.75);\r\n ctx.beginPath();ctx.arc(x,y,Math.random()*2,0,Math.PI*2);ctx.fill();\r\n }\r\n ctx.restore();\r\n}\r\nfunction drawWashEffect(cw,ch,fw,gr,gg,gb){\r\n const[sr,sg,sb]=hexToRgb(shabbyHex);\r\n const gi=Math.round(fw*.80),gs=Math.max(1,Math.round(fw*.11));\r\n \/\/ Wash bleibt ebenfalls auf dem Rahmenband\r\n ctx.save();\r\n clipToFrameBand(cw,ch,fw);\r\n ctx.globalAlpha=(wash\/100)*.7;\r\n ctx.strokeStyle=rgb(sr*.6+gr*.4,sg*.6+gg*.4,sb*.6+gb*.4,(wash\/100)*.85);\r\n ctx.lineWidth=gs*2.2;ctx.strokeRect(gi,gi,cw-gi*2,ch-gi*2);\r\n for(let i=0;i<wash*.55;i++){\r\n const pct=Math.random();let px,py;\r\n if(pct<.25){px=gi+Math.random()*(cw-gi*2);py=gi;}\r\n else if(pct<.5){px=gi+Math.random()*(cw-gi*2);py=ch-gi;}\r\n else if(pct<.75){px=gi;py=gi+Math.random()*(ch-gi*2);}\r\n else{px=cw-gi;py=gi+Math.random()*(ch-gi*2);}\r\n ctx.fillStyle=rgb(sr*.5+80,sg*.5+70,sb*.5+50,.4);\r\n ctx.beginPath();ctx.ellipse(px,py,3+Math.random()*9,2+Math.random()*4,Math.random()*Math.PI,0,Math.PI*2);ctx.fill();\r\n }\r\n ctx.restore();\r\n}\r\n\/\/ \u2500\u2500 WANDTEXTUR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction drawWallTexture(hexColor){\r\n const stage=document.getElementById('stage');\r\n const W2=stage.offsetWidth||300,H2=stage.offsetHeight||500;\r\n wallCanvas.width=W2;wallCanvas.height=H2;\r\n const wctx=wallCanvas.getContext('2d');\r\n wctx.clearRect(0,0,W2,H2);\r\n const[wr,wg,wb]=hexToRgb(hexColor);\r\n for(let i=0;i<1600;i++){\r\n const x=Math.random()*W2,y=Math.random()*H2;\r\n const len=4+Math.random()*20,angle=Math.random()*Math.PI;\r\n const br=(Math.random()-.5)*26;\r\n wctx.globalAlpha=0.05+Math.random()*.09;\r\n wctx.strokeStyle=`rgb(${Math.min(255,Math.max(0,wr+br))},${Math.min(255,Math.max(0,wg+br))},${Math.min(255,Math.max(0,wb+br))})`;\r\n wctx.lineWidth=1.5+Math.random()*2.5;wctx.lineCap='round';\r\n wctx.beginPath();wctx.moveTo(x,y);wctx.lineTo(x+Math.cos(angle)*len,y+Math.sin(angle)*len);wctx.stroke();\r\n }\r\n for(let i=0;i<5000;i++){\r\n const x=Math.random()*W2,y=Math.random()*H2,br=(Math.random()-.5)*38;\r\n wctx.globalAlpha=0.03+Math.random()*.06;\r\n wctx.fillStyle=`rgb(${Math.min(255,Math.max(0,wr+br))},${Math.min(255,Math.max(0,wg+br))},${Math.min(255,Math.max(0,wb+br))})`;\r\n wctx.beginPath();wctx.arc(x,y,Math.random()*1.1,0,Math.PI*2);wctx.fill();\r\n }\r\n for(let i=0;i<6;i++){\r\n const x=Math.random()*W2,y=Math.random()*H2,r=W2*(0.3+Math.random()*.5);\r\n const br=(Math.random()-.5)*16;\r\n const g=wctx.createRadialGradient(x,y,0,x,y,r);\r\n g.addColorStop(0,`rgba(${Math.min(255,Math.max(0,wr+br))},${Math.min(255,Math.max(0,wg+br))},${Math.min(255,Math.max(0,wb+br))},0.06)`);\r\n g.addColorStop(1,`rgba(${wr},${wg},${wb},0)`);\r\n wctx.fillStyle=g;wctx.fillRect(0,0,W2,H2);\r\n }\r\n}\r\n\/\/ \u2500\u2500 UI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction renderFrameList(){\r\n const el=document.getElementById('frameList');el.innerHTML='';\r\n FRAMES.forEach(f=>{\r\n const b=document.createElement('button');\r\n b.className='frame-btn'+(f.id===cur.id?' active':'');\r\n b.innerHTML=`<div class=\"frame-swatch\" style=\"background:${f.hex}\">${f.id==='schwarz-gold'?`<div class=\"frame-swatch-inner\" style=\"background:#c9a84c\"><\/div>`:''}<\/div><div class=\"frame-info\"><div class=\"frame-name\">${f.name}<\/div><div class=\"frame-hex\">${f.hex}<\/div><\/div>${f.recommended?'<div class=\"rec-dot\"><\/div>':''}`;\r\n b.onclick=()=>{cur=f;drawAll();renderFrameList();};\r\n el.appendChild(b);\r\n });\r\n}\r\nfunction renderWallList(){\r\n const el=document.getElementById('wallList');el.innerHTML='';\r\n WALLS.forEach(w=>{\r\n const b=document.createElement('button');\r\n b.className='wall-btn'+(w===wall?' active':'');\r\n b.style.background=w;\r\n b.onclick=()=>{wall=w;document.getElementById('stage').style.background=wall;drawWallTexture(w);renderWallList();};\r\n el.appendChild(b);\r\n });\r\n}\r\nfunction renderPresets(presets,containerId,activeIdx,onPick){\r\n const el=document.getElementById(containerId);if(!el)return;el.innerHTML='';\r\n presets.forEach((p,i)=>{\r\n const b=document.createElement('div');\r\n b.className='preset-dot'+(i===activeIdx?' active':'');\r\n b.style.background=p.hex;b.title=p.label;\r\n b.onclick=()=>onPick(p.hex,i);\r\n el.appendChild(b);\r\n });\r\n}\r\nfunction bindCustomColor(pickerId,hexInputId,applyId,feedbackId,onApply){\r\n const picker=document.getElementById(pickerId);\r\n const hexIn=document.getElementById(hexInputId);\r\n const applyBtn=document.getElementById(applyId);\r\n const fb=document.getElementById(feedbackId);\r\n applyBtn.onclick=()=>{\r\n const resolved=parseColor(hexIn.value);\r\n if(!resolved){fb.textContent='\u2717 Ung\u00fcltige Farbe';fb.style.color='#c04040';return;}\r\n try{picker.value=resolved;}catch(e){}\r\n hexIn.value=resolved;fb.textContent=resolved;fb.style.color='#d8ccd4';\r\n onApply(resolved);\r\n };\r\n hexIn.onkeydown=e=>{if(e.key==='Enter')applyBtn.onclick();};\r\n hexIn.oninput=()=>{fb.textContent='';};\r\n picker.oninput=e=>{hexIn.value=e.target.value;fb.textContent='';applyBtn.onclick();};\r\n}\r\nfunction bindSlider(id,valId,unit,cb){\r\n const sl=document.getElementById(id),vl=document.getElementById(valId);\r\n sl.oninput=()=>{vl.textContent=sl.value+unit;cb(parseInt(sl.value));};\r\n}\r\n\/\/ \u2500\u2500 IMAGE LOAD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ WICHTIG: srcImg erst HIER setzen \u2013 nach allen Funktionsdefinitionen.\r\n\/\/ Bei data-URLs kann onload synchron feuern; dann w\u00e4ren drawAll etc. noch undefiniert.\r\nfunction loadDefaultImage(){\r\n srcImg.onload=()=>{imgLoaded=true;drawAll();};\r\n srcImg.src='data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"400\" height=\"500\"><rect width=\"400\" height=\"500\" fill=\"%23c8b090\"\/><text x=\"200\" y=\"260\" text-anchor=\"middle\" font-size=\"18\" fill=\"%23443020\" font-family=\"serif\">Bild hochladen<\/text><\/svg>';\r\n}\r\ndocument.getElementById('imgUpload').onchange=e=>{\r\n const f=e.target.files[0];if(!f)return;\r\n imgLoaded=false;\r\n srcImg.onload=()=>{imgLoaded=true;drawAll();};\r\n srcImg.src=URL.createObjectURL(f);\r\n};\r\n\/\/ \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nrenderFrameList();\r\nrenderWallList();\r\nrenderPresets(SHABBY_PRESETS,'shabbyPresets',activeShabby,function onShabby(hex,i){\r\n shabbyHex=hex;activeShabby=i;\r\n document.getElementById('shabbyPicker').value=hex;\r\n renderPresets(SHABBY_PRESETS,'shabbyPresets',i,onShabby);\r\n drawAll();\r\n});\r\ndocument.getElementById('shabbyPicker').oninput=e=>{\r\n shabbyHex=e.target.value;activeShabby=-1;\r\n renderPresets(SHABBY_PRESETS,'shabbyPresets',-1,()=>{});drawAll();\r\n};\r\nrenderPresets(STEG_PRESETS,'stegPresets',activeSteg,function onSteg(hex,i){\r\n stegHex=hex;activeSteg=i;\r\n document.getElementById('stegPicker').value=hex;\r\n document.getElementById('stegHexInput').value=hex;\r\n renderPresets(STEG_PRESETS,'stegPresets',i,onSteg);\r\n drawAll();\r\n});\r\ndocument.getElementById('stegPicker').oninput=e=>{\r\n stegHex=e.target.value;activeSteg=-1;\r\n renderPresets(STEG_PRESETS,'stegPresets',-1,()=>{});drawAll();\r\n};\r\nbindCustomColor('customPicker','customHex','customApply','customFeedback',hex=>{\r\n const[r,g,b]=hexToRgb(hex);\r\n const cf=FRAMES.find(f=>f.id==='custom');\r\n cf.r=r;cf.g=g;cf.b=b;cf.hex=hex;cf.name='Freie Farbe';\r\n cur=cf;drawAll();renderFrameList();\r\n});\r\nbindCustomColor('stegPicker','stegHexInput','stegApply','stegFeedback',hex=>{\r\n stegHex=hex;drawAll();\r\n});\r\ndocument.getElementById('stegVisible').onchange=e=>{\r\n stegVisible=e.target.checked;\r\n document.getElementById('stegVisLabel').textContent=stegVisible?'An':'Aus';\r\n document.getElementById('stegControls').style.opacity=stegVisible?'1':'0.4';\r\n document.getElementById('stegControls').style.pointerEvents=stegVisible?'auto':'none';\r\n drawAll();\r\n};\r\nbindSlider('sWidth','vWidth',' px',v=>{W=v;drawAll();});\r\nbindSlider('sBright','vBright','%',v=>{bright=v;drawAll();});\r\nbindSlider('sSat','vSat','%',v=>{sat=v;drawAll();});\r\nbindSlider('sScratch','vScratch','%',v=>{scratch=v;drawAll();});\r\nbindSlider('sChip','vChip','%',v=>{chip=v;drawAll();});\r\nbindSlider('sPatina','vPatina','%',v=>{patina=v;drawAll();});\r\nbindSlider('sWash','vWash','%',v=>{wash=v;drawAll();});\r\nbindSlider('sStegW','vStegW',' px',v=>{stegWidthPx=v;drawAll();});\r\ndocument.getElementById('stage').style.background=wall;\r\n\/\/ Wandtextur und Bild erst nach Layout rendern\r\nrequestAnimationFrame(()=>{\r\n drawWallTexture(wall);\r\n loadDefaultImage(); \/\/ startet onload \u2192 drawAll\r\n});\r\nwindow.addEventListener('resize',()=>{drawWallTexture(wall);if(imgLoaded)drawAll();});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Rahmen-Simulation \u00b7 Mohn Rahmensimulation Ohne Passepartout Bild einf\u00fcgen \u2b06 Eigenes Bild hochladen Rahmen w\u00e4hlen Freie Rahmenfarbe OK Wandfarbe Rahmen \u00b7 Breite & Farbe Breite24 px Rahmen Helligkeit100% Rahmen S\u00e4ttigung100% Innensteg Steg anzeigen An Farbe OK Stegbreite12 px Shabby \/ Patina Patina-Farbe Kratzspuren0% Abbl\u00e4ttern0% Patina \/ Staub0% Vergoldung verwaschen0% Schwarz \u00b7 Goldsteg \u2605 Erste Wahl \u00b7…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7305","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Rahmen-Simmulation - kobold-grafik<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rahmen-Simmulation - kobold-grafik\" \/>\n<meta property=\"og:description\" content=\"Rahmen-Simulation \u00b7 Mohn Rahmensimulation Ohne Passepartout Bild einf\u00fcgen \u2b06 Eigenes Bild hochladen Rahmen w\u00e4hlen Freie Rahmenfarbe OK Wandfarbe Rahmen \u00b7 Breite & Farbe Breite24 px Rahmen Helligkeit100% Rahmen S\u00e4ttigung100% Innensteg Steg anzeigen An Farbe OK Stegbreite12 px Shabby \/ Patina Patina-Farbe Kratzspuren0% Abbl\u00e4ttern0% Patina \/ Staub0% Vergoldung verwaschen0% Schwarz \u00b7 Goldsteg \u2605 Erste Wahl \u00b7...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/\" \/>\n<meta property=\"og:site_name\" content=\"kobold-grafik\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-05T10:43:40+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/\",\"url\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/\",\"name\":\"Rahmen-Simmulation - kobold-grafik\",\"isPartOf\":{\"@id\":\"https:\/\/www.uwekobold.de\/#website\"},\"datePublished\":\"2026-06-05T10:30:53+00:00\",\"dateModified\":\"2026-06-05T10:43:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.uwekobold.de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rahmen-Simmulation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.uwekobold.de\/#website\",\"url\":\"https:\/\/www.uwekobold.de\/\",\"name\":\"kobold-grafik\",\"description\":\"fine art photography\",\"publisher\":{\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.uwekobold.de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e\",\"name\":\"Uwe Kobold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg\",\"contentUrl\":\"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg\",\"width\":1000,\"height\":1000,\"caption\":\"Uwe Kobold\"},\"logo\":{\"@id\":\"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.uwekobold.de\"]}]}<\/script>\n","yoast_head_json":{"title":"Rahmen-Simmulation - kobold-grafik","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/","og_locale":"en_US","og_type":"article","og_title":"Rahmen-Simmulation - kobold-grafik","og_description":"Rahmen-Simulation \u00b7 Mohn Rahmensimulation Ohne Passepartout Bild einf\u00fcgen \u2b06 Eigenes Bild hochladen Rahmen w\u00e4hlen Freie Rahmenfarbe OK Wandfarbe Rahmen \u00b7 Breite & Farbe Breite24 px Rahmen Helligkeit100% Rahmen S\u00e4ttigung100% Innensteg Steg anzeigen An Farbe OK Stegbreite12 px Shabby \/ Patina Patina-Farbe Kratzspuren0% Abbl\u00e4ttern0% Patina \/ Staub0% Vergoldung verwaschen0% Schwarz \u00b7 Goldsteg \u2605 Erste Wahl \u00b7...","og_url":"https:\/\/www.uwekobold.de\/en\/rahmen-simmulation-2\/","og_site_name":"kobold-grafik","article_modified_time":"2026-06-05T10:43:40+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/","url":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/","name":"Rahmen-Simmulation - kobold-grafik","isPartOf":{"@id":"https:\/\/www.uwekobold.de\/#website"},"datePublished":"2026-06-05T10:30:53+00:00","dateModified":"2026-06-05T10:43:40+00:00","breadcrumb":{"@id":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.uwekobold.de\/rahmen-simmulation-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uwekobold.de\/"},{"@type":"ListItem","position":2,"name":"Rahmen-Simmulation"}]},{"@type":"WebSite","@id":"https:\/\/www.uwekobold.de\/#website","url":"https:\/\/www.uwekobold.de\/","name":"kobold-grafik","description":"fine art photography","publisher":{"@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uwekobold.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/1cb68d5160ac31b685e1bfeb6b88979e","name":"Uwe Kobold","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/","url":"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg","contentUrl":"https:\/\/www.uwekobold.de\/wp-content\/uploads\/2023\/04\/21D9014F-5789-4AE6-B2D2-E5DF20C2A72E.jpeg","width":1000,"height":1000,"caption":"Uwe Kobold"},"logo":{"@id":"https:\/\/www.uwekobold.de\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.uwekobold.de"]}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages\/7305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/comments?post=7305"}],"version-history":[{"count":10,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages\/7305\/revisions"}],"predecessor-version":[{"id":7316,"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/pages\/7305\/revisions\/7316"}],"wp:attachment":[{"href":"https:\/\/www.uwekobold.de\/en\/wp-json\/wp\/v2\/media?parent=7305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}