BERGHOCH Sichtweiten-Simulator<\/title>\n<style>\n:root{--blue:#002f63;--border:#d9e2ec;--light:#f4f7fb}\n*{box-sizing:border-box}\nbody{margin:0;font-family:Arial,Helvetica,sans-serif;background:#ffffff;color:#102033}\n.wrapper{max-width:1280px;margin:0 auto;padding:24px}\n.hero{background:linear-gradient(135deg,var(--blue),#001b3d);color:white;padding:26px;border-radius:18px;margin-bottom:20px}\n.hero h1{margin:0 0 8px;font-size:30px}.hero p{margin:0;color:#dbe8f7;font-size:17px}\n.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}\n.card{background:white;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}\n.section-title{margin-bottom:14px;padding:10px 12px;border-radius:12px;background:#eef6ff;border-left:5px solid var(--blue);font-weight:bold;color:var(--blue)}\nlabel{display:block;font-weight:bold;margin-top:16px;margin-bottom:8px}\nselect,input[type=range]{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);font-size:16px;background:white}\n.range-row{display:flex;align-items:center;gap:12px}\n.badge{background:var(--blue);color:white;border-radius:999px;padding:7px 12px;min-width:92px;text-align:center;font-weight:bold}\n.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}\n.kpi{background:var(--light);border-radius:14px;padding:14px;border:1px solid var(--border)}\n.kpi span{display:block;color:#5b6b7d;font-size:13px}.kpi strong{display:block;font-size:20px;color:var(--blue);margin-top:5px}\n#scene{width:100%;height:650px;background:#e9f2fa;border-radius:18px;border:1px solid var(--border);display:block}\n.info{margin-top:18px;line-height:1.55;background:#f8fbff;border-left:5px solid var(--blue);padding:14px;border-radius:12px}\n.note{font-size:13px;color:#5b6b7d;margin-top:12px}\n.camera-table{margin-top:20px;overflow:auto}.camera-table table{width:100%;border-collapse:collapse;font-size:14px}.camera-table th{background:var(--blue);color:white}.camera-table th,.camera-table td{border:1px solid var(--border);padding:10px;text-align:center}\n@media(max-width:900px){.settings-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:24px}}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrapper\">\n<section class=\"hero\">\n<h1>BERGHOCH Einfahrt- und Sichtweiten-Simulator<\/h1>\n<p>Kamera am Haus, Montageh\u00f6he, Zielentfernung und Sichtweite realistisch einstellen.<\/p>\n<\/section>\n\n<div class=\"settings-grid\">\n<div class=\"card\">\n<div class=\"section-title\">1. Haus \/ Montage<\/div>\n\n<label for=\"height\">Installationsh\u00f6he<\/label>\n<select id=\"height\">\n<option value=\"2\">2,0 m<\/option>\n<option value=\"2.5\">2,5 m<\/option>\n<option value=\"3\" selected>3,0 m<\/option>\n<option value=\"3.5\">3,5 m<\/option>\n<option value=\"4\">4,0 m<\/option>\n<option value=\"4.5\">4,5 m<\/option>\n<option value=\"5\">5,0 m<\/option>\n<\/select>\n\n<label for=\"targetDistance\">Ziel-Entfernung vom Haus<\/label>\n<div class=\"range-row\">\n<input id=\"targetDistance\" type=\"range\" min=\"5\" max=\"120\" value=\"50\">\n<div class=\"badge\"><span id=\"targetOut\">50<\/span> m<\/div>\n<\/div>\n\n<label for=\"viewDistance\">Sichtweite \/ dargestellter Bereich<\/label>\n<div class=\"range-row\">\n<input id=\"viewDistance\" type=\"range\" min=\"20\" max=\"150\" value=\"100\">\n<div class=\"badge\"><span id=\"viewOut\">100<\/span> m<\/div>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"section-title\">2. Kamera \/ Objektiv<\/div>\n\n<label for=\"camera\">Modell ausw\u00e4hlen<\/label>\n<select id=\"camera\">\n<option value=\"basic_aussen_8mp\" selected>Basic Au\u00dfen 8MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"basic_dome_8mp\">Basic Dome 8MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"basic_aussen_12mp\">Basic Au\u00dfen 12MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"basic_dome_12mp\">Basic Dome 12MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"pro_zoom_aussen_8mp\">Pro Zoom Au\u00dfen 8MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"pro_zoom_aussen_12mp\">Pro Zoom Au\u00dfen 12MP \u2013 4-40 mm \u2013 10x<\/option>\n<option value=\"pro_zoom_dome_8mp\">Pro Zoom Dome 8MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"pro_zoom_dome_12mp\">Pro Zoom Dome 12MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"pro_zoom_dome_ultra_8mp\">Pro Zoom Dome Ultra 8MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"ptz_20x_8mp\">PTZ 20x Zoom 8MP \u2013 4.7-94 mm \u2013 20x<\/option>\n<\/select>\n\n<label for=\"zoom\">Brennweite \/ Zoomstufe<\/label>\n<select id=\"zoom\"><\/select>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<canvas id=\"scene\" width=\"1180\" height=\"650\"><\/canvas>\n\n<div class=\"kpis\">\n<div class=\"kpi\"><span>Sichtwinkel<\/span><strong id=\"angleOut\">-<\/strong><\/div>\n<div class=\"kpi\"><span>Sichtbreite am Ziel<\/span><strong id=\"widthOut\">-<\/strong><\/div>\n<div class=\"kpi\"><span>Montageh\u00f6he<\/span><strong id=\"heightOut\">-<\/strong><\/div>\n<div class=\"kpi\"><span>Zielbereich<\/span><strong id=\"usageOut\">-<\/strong><\/div>\n<\/div>\n\n<div class=\"info\" id=\"info\"><\/div>\n<p class=\"note\">Haus, Hof und Stra\u00dfe liegen in dieser Version auf einer gemeinsamen Ebene. Die Kamera sitzt an der Hausfassade und blickt auf den Hof bzw. die Einfahrt.<\/p>\n<\/div>\n\n<div class=\"card camera-table\">\n<h2>Kamera\u00fcbersicht<\/h2>\n<table>\n<thead>\n<tr>\n<th>Modell<\/th>\n<th>Aufl\u00f6sung<\/th>\n<th>Linse<\/th>\n<th>Zoom<\/th>\n<th>Sichtwinkel<\/th>\n<th>Kameratyp<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr><td>Basic Au\u00dfen 8MP<\/td><td>8 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Basic Dome 8MP<\/td><td>8 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Basic Au\u00dfen 12MP<\/td><td>12 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Basic Dome 12MP<\/td><td>12 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Au\u00dfen 8MP<\/td><td>8 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Au\u00dfen 12MP<\/td><td>12 MP<\/td><td>4\u201340 mm<\/td><td>10x<\/td><td>ca. 90\u00b0 bis 9\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Dome 8MP<\/td><td>8 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Dome 12MP<\/td><td>12 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Dome Ultra 8MP<\/td><td>8 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>PTZ 20x Zoom 8MP<\/td><td>8 MP<\/td><td>4.7\u201394 mm<\/td><td>20x<\/td><td>ca. 60\u00b0 bis 3\u00b0<\/td><td>PTZ Au\u00dfen<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<\/div>\n\n<script>\nconst DATA={\nbasic_aussen_8mp:{name:\"Basic Au\u00dfen 8MP\",res:\"8 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Bullet Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"Standardbereich\"}]},\nbasic_dome_8mp:{name:\"Basic Dome 8MP\",res:\"8 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Dome Innen\/Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"Eingang \/ Fassade\"}]},\nbasic_aussen_12mp:{name:\"Basic Au\u00dfen 12MP\",res:\"12 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Bullet Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"hohe Aufl\u00f6sung\"}]},\nbasic_dome_12mp:{name:\"Basic Dome 12MP\",res:\"12 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Dome Innen\/Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"hohe Aufl\u00f6sung\"}]},\npro_zoom_aussen_8mp:{name:\"Pro Zoom Au\u00dfen 8MP\",res:\"8 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Bullet Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\npro_zoom_aussen_12mp:{name:\"Pro Zoom Au\u00dfen 12MP\",res:\"12 MP\",lens:\"4-40 mm\",zoom:\"10x\",type:\"Bullet Au\u00dfen\",points:[\n{f:\"4 mm\",angle:90,width10:20,usage:\"breiter \u00dcberblick\"},\n{f:\"10 mm\",angle:35,width10:6.3,usage:\"Zufahrt \/ Hof\"},\n{f:\"20 mm\",angle:18,width10:3.2,usage:\"Detail auf Distanz\"},\n{f:\"30 mm\",angle:12,width10:2.1,usage:\"starker Zoom\"},\n{f:\"40 mm\",angle:9,width10:1.5,usage:\"maximaler Zoom\"}]},\npro_zoom_dome_8mp:{name:\"Pro Zoom Dome 8MP\",res:\"8 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Dome Innen\/Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\npro_zoom_dome_12mp:{name:\"Pro Zoom Dome 12MP\",res:\"12 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Dome Innen\/Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\npro_zoom_dome_ultra_8mp:{name:\"Pro Zoom Dome Ultra 8MP\",res:\"8 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Dome Innen\/Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\nptz_20x_8mp:{name:\"PTZ 20x Zoom 8MP\",res:\"8 MP\",lens:\"4.7-94 mm\",zoom:\"20x\",type:\"PTZ Au\u00dfen\",points:[\n{f:\"4.7 mm\",angle:60,width10:12,usage:\"\u00dcberblick Einfahrt\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Zufahrt\"},\n{f:\"20 mm\",angle:15,width10:2.75,usage:\"Detail\"},\n{f:\"50 mm\",angle:6,width10:0.5,usage:\"starker Zoom\"},\n{f:\"94 mm\",angle:3,width10:0.25,usage:\"maximaler Detailzoom\"}]}\n};\n\nconst camera=document.getElementById(\"camera\");\nconst zoom=document.getElementById(\"zoom\");\nconst heightEl=document.getElementById(\"height\");\nconst targetDistance=document.getElementById(\"targetDistance\");\nconst viewDistance=document.getElementById(\"viewDistance\");\nconst canvas=document.getElementById(\"scene\");\nconst ctx=canvas.getContext(\"2d\");\n\nfunction setZoom(){\n const cam=DATA[camera.value];\n zoom.innerHTML=\"\";\n cam.points.forEach((p,i)=>{\n const o=document.createElement(\"option\");\n o.value=i;\n o.textContent=p.f+\" | \"+p.usage+\" | ca. \"+p.angle+\"\u00b0\";\n zoom.appendChild(o);\n });\n zoom.selectedIndex=0;\n}\nfunction fmt(n){return n>=10?Math.round(n):Math.round(n*10)\/10;}\nfunction fmtHeight(h){return String(h).replace(\".\",\",\")+\" m\";}\n\nfunction update(){\n const cam=DATA[camera.value];\n const p=cam.points[Number(zoom.value)||0];\n const target=Number(targetDistance.value);\n const view=Number(viewDistance.value);\n const h=Number(heightEl.value);\n const width=(target\/10)*p.width10;\n\n document.getElementById(\"targetOut\").textContent=target;\n document.getElementById(\"viewOut\").textContent=view;\n document.getElementById(\"angleOut\").textContent=\"ca. \"+p.angle+\"\u00b0\";\n document.getElementById(\"widthOut\").textContent=\"ca. \"+fmt(width)+\" m\";\n document.getElementById(\"heightOut\").textContent=fmtHeight(h);\n document.getElementById(\"usageOut\").textContent=p.usage;\n document.getElementById(\"info\").innerHTML=\"<b>\"+cam.name+\"<\/b><br>Aufl\u00f6sung: \"+cam.res+\" \u00b7 Typ: \"+cam.type+\"<br>Linse: \"+cam.lens+\" \u00b7 Zoom: \"+cam.zoom+\"<br><br>Montageh\u00f6he: <b>\"+fmtHeight(h)+\"<\/b><br>Zielentfernung: <b>\"+target+\" m<\/b><br>Dargestellte Sichtweite: <b>\"+view+\" m<\/b><br>Bildbreite am Ziel: ca. <b>\"+fmt(width)+\" m<\/b>.\";\n draw(cam,p,target,view,width,h);\n}\n\nfunction draw(cam,p,target,view,width,h){\n ctx.clearRect(0,0,1180,650);\n\n \/\/ Hintergrund\n let bg=ctx.createLinearGradient(0,0,0,650);\n bg.addColorStop(0,\"#dcefff\");\n bg.addColorStop(.46,\"#f7fbff\");\n bg.addColorStop(.47,\"#d9e9cd\");\n bg.addColorStop(1,\"#b8d3a0\");\n ctx.fillStyle=bg;ctx.fillRect(0,0,1180,650);\n\n \/\/ Gemeinsame Bodenlinie\n const groundY=520;\n ctx.fillStyle=\"#9fbd85\";\n ctx.fillRect(0,groundY,1180,130);\n\n \/\/ Haus links, sauberer Fassadenaufbau mit Geschossen\n const houseX=25, houseW=310, houseTop=120, houseH=400;\n ctx.fillStyle=\"#e9e1d6\";\n ctx.fillRect(houseX,houseTop,houseW,houseH);\n\n \/\/ Dach\n ctx.fillStyle=\"#1d3557\";\n ctx.beginPath();\n ctx.moveTo(houseX-12,houseTop);\n ctx.lineTo(houseX+houseW\/2,58);\n ctx.lineTo(houseX+houseW+18,houseTop);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Geschoss-Trennlinien: EG, 1. OG, 2. OG\n const floorEG=520;\n const lineEG=385;\n const lineOG=250;\n ctx.strokeStyle=\"#b9aa98\";\n ctx.lineWidth=3;\n ctx.beginPath();\n ctx.moveTo(houseX, lineEG);\n ctx.lineTo(houseX+houseW, lineEG);\n ctx.moveTo(houseX, lineOG);\n ctx.lineTo(houseX+houseW, lineOG);\n ctx.stroke();\n\n \/\/ dezente Sockellinie\n ctx.fillStyle=\"#d1c2af\";\n ctx.fillRect(houseX, floorEG-12, houseW, 12);\n\n \/\/ Haust\u00fcr proportional im Erdgeschoss\n const doorW=72, doorH=118;\n const doorX=houseX + houseW\/2 - doorW\/2;\n const doorY=floorEG-doorH;\n ctx.fillStyle=\"#7b5b3d\";\n ctx.fillRect(doorX,doorY,doorW,doorH);\n ctx.fillStyle=\"#5f412a\";\n ctx.fillRect(doorX+6,doorY+8,doorW-12,doorH-16);\n ctx.fillStyle=\"#d9c29a\";\n ctx.beginPath();\n ctx.arc(doorX+doorW-16,doorY+doorH\/2,4,0,Math.PI*2);\n ctx.fill();\n \/\/ T\u00fcrstufe\n ctx.fillStyle=\"#b8b8b8\";\n ctx.fillRect(doorX-12,floorEG,doorW+24,10);\n\n \/\/ Fenster sauber ausgerichtet je Geschoss\n function windowBox(x,y,w,h){\n ctx.fillStyle=\"#93b4d7\";\n ctx.fillRect(x,y,w,h);\n ctx.strokeStyle=\"rgba(255,255,255,.85)\";\n ctx.lineWidth=2;\n ctx.beginPath();\n ctx.moveTo(x+w\/2,y);\n ctx.lineTo(x+w\/2,y+h);\n ctx.moveTo(x,y+h\/2);\n ctx.lineTo(x+w,y+h\/2);\n ctx.stroke();\n ctx.strokeStyle=\"#6f8faa\";\n ctx.lineWidth=2;\n ctx.strokeRect(x,y,w,h);\n }\n\n const winW=58, winH=48;\n const leftWin=houseX+55;\n const rightWin=houseX+houseW-55-winW;\n \/\/ 2. OG\n windowBox(leftWin,155,winW,winH);\n windowBox(rightWin,155,winW,winH);\n \/\/ 1. OG\n windowBox(leftWin,285,winW,winH);\n windowBox(rightWin,285,winW,winH);\n \/\/ Erdgeschoss: Fenster links\/rechts neben Haust\u00fcr\n windowBox(houseX+38,420,52,44);\n windowBox(houseX+houseW-38-52,420,52,44);\n\n \/\/ kleine Beschriftung der Geschosse\n ctx.fillStyle=\"rgba(0,47,99,.55)\";\n ctx.font=\"12px Arial\";\n ctx.textAlign=\"left\";\n ctx.fillText(\"2. OG\",houseX+10,145);\n ctx.fillText(\"1. OG\",houseX+10,278);\n ctx.fillText(\"EG\",houseX+10,413);\n\n \/\/ Hof \/ Stra\u00dfe auf gleicher Ebene direkt an Hausanfang\n const startX=houseX+houseW;\n ctx.fillStyle=\"#cfcfcf\";\n ctx.beginPath();\n ctx.moveTo(startX,groundY);\n ctx.lineTo(1180,groundY);\n ctx.lineTo(1180,650);\n ctx.lineTo(startX,650);\n ctx.closePath();\n ctx.fill();\n\n \/\/ leichte Perspektivlinien auf Stra\u00dfe\/Hof\n ctx.strokeStyle=\"rgba(0,0,0,.12)\";\n ctx.lineWidth=2;\n ctx.beginPath();ctx.moveTo(startX,groundY);ctx.lineTo(1180,610);ctx.stroke();\n ctx.beginPath();ctx.moveTo(startX,650);ctx.lineTo(1180,540);ctx.stroke();\n\n function mapX(m){\n return startX + 55 + (Math.min(m,view)\/view) * (1180-startX-105);\n }\n function laneY(m){\n return groundY + 75 + (Math.min(m,view)\/view)*35;\n }\n\n \/\/ Distanzmarken\n let step=view<=60?10:20;\n for(let meter=step; meter<=view; meter+=step){\n let x=mapX(meter);\n let y=laneY(meter);\n ctx.strokeStyle=\"rgba(0,0,0,.22)\";\n ctx.lineWidth=1;\n ctx.beginPath();\n ctx.moveTo(x,y-65);\n ctx.lineTo(x,y+65);\n ctx.stroke();\n ctx.fillStyle=\"#334\";\n ctx.font=\"13px Arial\";\n ctx.textAlign=\"center\";\n ctx.fillText(meter+\" m\",x,y-72);\n }\n\n \/\/ Kamera-H\u00f6he an Fassade, unten ist Erdgeschoss \/ T\u00fcrbereich\n const cx=startX;\n const cy=groundY - 75 - ((h-2)\/3)*230;\n\n ctx.strokeStyle=\"rgba(0,47,99,.35)\";ctx.lineWidth=2;\n ctx.beginPath();ctx.moveTo(startX-45,cy);ctx.lineTo(startX+45,cy);ctx.stroke();\n ctx.fillStyle=\"#002f63\";ctx.font=\"bold 13px Arial\";ctx.textAlign=\"left\";ctx.fillText(fmtHeight(h),startX+50,cy+4);\n\n \/\/ Kamera\n ctx.fillStyle=\"#002f63\";\n ctx.fillRect(cx-34,cy-14,38,25);\n ctx.beginPath();ctx.arc(cx+7,cy-2,15,0,Math.PI*2);ctx.fill();\n ctx.fillStyle=\"#fff\";ctx.beginPath();ctx.arc(cx+7,cy-2,5,0,Math.PI*2);ctx.fill();\n\n \/\/ Ziel\n const visualTarget=Math.min(target,view);\n const targetX=mapX(visualTarget);\n const targetY=laneY(visualTarget);\n let t=visualTarget\/view;\n let carScale=.75+t*.55;\n\n ctx.fillStyle=target>view?\"#8a3b3b\":\"#444\";\n ctx.fillRect(targetX-55*carScale,targetY-20*carScale,110*carScale,38*carScale);\n ctx.fillStyle=\"#222\";\n ctx.beginPath();ctx.arc(targetX-34*carScale,targetY+23*carScale,10*carScale,0,Math.PI*2);ctx.fill();\n ctx.beginPath();ctx.arc(targetX+34*carScale,targetY+23*carScale,10*carScale,0,Math.PI*2);ctx.fill();\n ctx.fillStyle=\"#aab7c4\";ctx.fillRect(targetX-28*carScale,targetY-37*carScale,56*carScale,18*carScale);\n\n \/\/ Sichtkegel auf gleicher Ebene\n const angleRad=p.angle*Math.PI\/180;\n const dir=Math.atan2(targetY-cy,targetX-cx);\n const half=angleRad\/2;\n const len=Math.hypot(targetX-cx,targetY-cy)+130;\n const ax=cx+Math.cos(dir-half)*len;\n const ay=cy+Math.sin(dir-half)*len;\n const bx=cx+Math.cos(dir+half)*len;\n const by=cy+Math.sin(dir+half)*len;\n\n ctx.fillStyle=\"rgba(0,91,159,.20)\";\n ctx.strokeStyle=\"#005b9f\";\n ctx.lineWidth=3;\n ctx.beginPath();\n ctx.moveTo(cx,cy);\n ctx.lineTo(ax,ay);\n ctx.lineTo(bx,by);\n ctx.closePath();\n ctx.fill();ctx.stroke();\n\n \/\/ Zielbreite\n let lineW=Math.max(70,Math.min(300,width*5));\n ctx.strokeStyle=\"#002f63\";ctx.lineWidth=4;\n ctx.beginPath();\n ctx.moveTo(targetX-lineW\/2,targetY-70);\n ctx.lineTo(targetX+lineW\/2,targetY-70);\n ctx.stroke();\n ctx.fillStyle=\"#002f63\";\n ctx.font=\"bold 16px Arial\";\n ctx.textAlign=\"center\";\n let targetText=target>view?(\"Ziel \"+target+\" m au\u00dferhalb der dargestellten \"+view+\" m\"):(\"Ziel: \"+target+\" m | Sichtbreite ca. \"+fmt(width)+\" m\");\n ctx.fillText(targetText,targetX,targetY-84);\n\n \/\/ \u00dcberschrift im Canvas\n ctx.fillStyle=\"#002f63\";\n ctx.font=\"bold 24px Arial\";\n ctx.textAlign=\"center\";\n ctx.fillText(cam.name+\" | \"+p.f+\" | H\u00f6he \"+fmtHeight(h),760,38);\n}\n\ncamera.addEventListener(\"change\",()=>{setZoom();update();});\nzoom.addEventListener(\"change\",update);\nheightEl.addEventListener(\"change\",update);\ntargetDistance.addEventListener(\"input\",update);\nviewDistance.addEventListener(\"input\",update);\nsetZoom();update();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<script language='javascript' type='text\/javascript'>function getWR360PopupSkin(){return 'light_clean';}<\/script>","protected":false},"excerpt":{"rendered":"<p>BERGHOCH Sichtweiten-Simulator BERGHOCH Einfahrt- und Sichtweiten-Simulator Kamera am Haus, Montageh\u00f6he, Zielentfernung und Sichtweite realistisch einstellen. 1. Haus \/ Montage Installationsh\u00f6he 2,0 m2,5 m3,0 m3,5 m4,0 m4,5 m5,0 m Ziel-Entfernung vom<\/p>","protected":false},"author":7006,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-72695","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/pages\/72695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/users\/7006"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/comments?post=72695"}],"version-history":[{"count":0,"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/pages\/72695\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/media?parent=72695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n\nBERGHOCH Sichtweiten-Simulator<\/title>\n<style>\n:root{--blue:#002f63;--border:#d9e2ec;--light:#f4f7fb}\n*{box-sizing:border-box}\nbody{margin:0;font-family:Arial,Helvetica,sans-serif;background:#ffffff;color:#102033}\n.wrapper{max-width:1280px;margin:0 auto;padding:24px}\n.hero{background:linear-gradient(135deg,var(--blue),#001b3d);color:white;padding:26px;border-radius:18px;margin-bottom:20px}\n.hero h1{margin:0 0 8px;font-size:30px}.hero p{margin:0;color:#dbe8f7;font-size:17px}\n.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}\n.card{background:white;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}\n.section-title{margin-bottom:14px;padding:10px 12px;border-radius:12px;background:#eef6ff;border-left:5px solid var(--blue);font-weight:bold;color:var(--blue)}\nlabel{display:block;font-weight:bold;margin-top:16px;margin-bottom:8px}\nselect,input[type=range]{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);font-size:16px;background:white}\n.range-row{display:flex;align-items:center;gap:12px}\n.badge{background:var(--blue);color:white;border-radius:999px;padding:7px 12px;min-width:92px;text-align:center;font-weight:bold}\n.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}\n.kpi{background:var(--light);border-radius:14px;padding:14px;border:1px solid var(--border)}\n.kpi span{display:block;color:#5b6b7d;font-size:13px}.kpi strong{display:block;font-size:20px;color:var(--blue);margin-top:5px}\n#scene{width:100%;height:650px;background:#e9f2fa;border-radius:18px;border:1px solid var(--border);display:block}\n.info{margin-top:18px;line-height:1.55;background:#f8fbff;border-left:5px solid var(--blue);padding:14px;border-radius:12px}\n.note{font-size:13px;color:#5b6b7d;margin-top:12px}\n.camera-table{margin-top:20px;overflow:auto}.camera-table table{width:100%;border-collapse:collapse;font-size:14px}.camera-table th{background:var(--blue);color:white}.camera-table th,.camera-table td{border:1px solid var(--border);padding:10px;text-align:center}\n@media(max-width:900px){.settings-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:24px}}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrapper\">\n<section class=\"hero\">\n<h1>BERGHOCH Einfahrt- und Sichtweiten-Simulator<\/h1>\n<p>Kamera am Haus, Montageh\u00f6he, Zielentfernung und Sichtweite realistisch einstellen.<\/p>\n<\/section>\n\n<div class=\"settings-grid\">\n<div class=\"card\">\n<div class=\"section-title\">1. Haus \/ Montage<\/div>\n\n<label for=\"height\">Installationsh\u00f6he<\/label>\n<select id=\"height\">\n<option value=\"2\">2,0 m<\/option>\n<option value=\"2.5\">2,5 m<\/option>\n<option value=\"3\" selected>3,0 m<\/option>\n<option value=\"3.5\">3,5 m<\/option>\n<option value=\"4\">4,0 m<\/option>\n<option value=\"4.5\">4,5 m<\/option>\n<option value=\"5\">5,0 m<\/option>\n<\/select>\n\n<label for=\"targetDistance\">Ziel-Entfernung vom Haus<\/label>\n<div class=\"range-row\">\n<input id=\"targetDistance\" type=\"range\" min=\"5\" max=\"120\" value=\"50\">\n<div class=\"badge\"><span id=\"targetOut\">50<\/span> m<\/div>\n<\/div>\n\n<label for=\"viewDistance\">Sichtweite \/ dargestellter Bereich<\/label>\n<div class=\"range-row\">\n<input id=\"viewDistance\" type=\"range\" min=\"20\" max=\"150\" value=\"100\">\n<div class=\"badge\"><span id=\"viewOut\">100<\/span> m<\/div>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<div class=\"section-title\">2. Kamera \/ Objektiv<\/div>\n\n<label for=\"camera\">Modell ausw\u00e4hlen<\/label>\n<select id=\"camera\">\n<option value=\"basic_aussen_8mp\" selected>Basic Au\u00dfen 8MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"basic_dome_8mp\">Basic Dome 8MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"basic_aussen_12mp\">Basic Au\u00dfen 12MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"basic_dome_12mp\">Basic Dome 12MP \u2013 3.6 mm \u2013 kein Zoom<\/option>\n<option value=\"pro_zoom_aussen_8mp\">Pro Zoom Au\u00dfen 8MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"pro_zoom_aussen_12mp\">Pro Zoom Au\u00dfen 12MP \u2013 4-40 mm \u2013 10x<\/option>\n<option value=\"pro_zoom_dome_8mp\">Pro Zoom Dome 8MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"pro_zoom_dome_12mp\">Pro Zoom Dome 12MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"pro_zoom_dome_ultra_8mp\">Pro Zoom Dome Ultra 8MP \u2013 2.7-13.5 mm \u2013 5x<\/option>\n<option value=\"ptz_20x_8mp\">PTZ 20x Zoom 8MP \u2013 4.7-94 mm \u2013 20x<\/option>\n<\/select>\n\n<label for=\"zoom\">Brennweite \/ Zoomstufe<\/label>\n<select id=\"zoom\"><\/select>\n<\/div>\n<\/div>\n\n<div class=\"card\">\n<canvas id=\"scene\" width=\"1180\" height=\"650\"><\/canvas>\n\n<div class=\"kpis\">\n<div class=\"kpi\"><span>Sichtwinkel<\/span><strong id=\"angleOut\">-<\/strong><\/div>\n<div class=\"kpi\"><span>Sichtbreite am Ziel<\/span><strong id=\"widthOut\">-<\/strong><\/div>\n<div class=\"kpi\"><span>Montageh\u00f6he<\/span><strong id=\"heightOut\">-<\/strong><\/div>\n<div class=\"kpi\"><span>Zielbereich<\/span><strong id=\"usageOut\">-<\/strong><\/div>\n<\/div>\n\n<div class=\"info\" id=\"info\"><\/div>\n<p class=\"note\">Haus, Hof und Stra\u00dfe liegen in dieser Version auf einer gemeinsamen Ebene. Die Kamera sitzt an der Hausfassade und blickt auf den Hof bzw. die Einfahrt.<\/p>\n<\/div>\n\n<div class=\"card camera-table\">\n<h2>Kamera\u00fcbersicht<\/h2>\n<table>\n<thead>\n<tr>\n<th>Modell<\/th>\n<th>Aufl\u00f6sung<\/th>\n<th>Linse<\/th>\n<th>Zoom<\/th>\n<th>Sichtwinkel<\/th>\n<th>Kameratyp<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr><td>Basic Au\u00dfen 8MP<\/td><td>8 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Basic Dome 8MP<\/td><td>8 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Basic Au\u00dfen 12MP<\/td><td>12 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Basic Dome 12MP<\/td><td>12 MP<\/td><td>3.6 mm<\/td><td>kein Zoom<\/td><td>ca. 82\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Au\u00dfen 8MP<\/td><td>8 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Au\u00dfen 12MP<\/td><td>12 MP<\/td><td>4\u201340 mm<\/td><td>10x<\/td><td>ca. 90\u00b0 bis 9\u00b0<\/td><td>Bullet Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Dome 8MP<\/td><td>8 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Dome 12MP<\/td><td>12 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>Pro Zoom Dome Ultra 8MP<\/td><td>8 MP<\/td><td>2.7\u201313.5 mm<\/td><td>5x<\/td><td>ca. 105\u00b0 bis 20\u00b0<\/td><td>Dome Innen\/Au\u00dfen<\/td><\/tr>\n<tr><td>PTZ 20x Zoom 8MP<\/td><td>8 MP<\/td><td>4.7\u201394 mm<\/td><td>20x<\/td><td>ca. 60\u00b0 bis 3\u00b0<\/td><td>PTZ Au\u00dfen<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<\/div>\n\n<script>\nconst DATA={\nbasic_aussen_8mp:{name:\"Basic Au\u00dfen 8MP\",res:\"8 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Bullet Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"Standardbereich\"}]},\nbasic_dome_8mp:{name:\"Basic Dome 8MP\",res:\"8 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Dome Innen\/Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"Eingang \/ Fassade\"}]},\nbasic_aussen_12mp:{name:\"Basic Au\u00dfen 12MP\",res:\"12 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Bullet Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"hohe Aufl\u00f6sung\"}]},\nbasic_dome_12mp:{name:\"Basic Dome 12MP\",res:\"12 MP\",lens:\"3.6 mm\",zoom:\"kein Zoom\",type:\"Dome Innen\/Au\u00dfen\",points:[{f:\"3.6 mm\",angle:82,width10:13.5,usage:\"hohe Aufl\u00f6sung\"}]},\npro_zoom_aussen_8mp:{name:\"Pro Zoom Au\u00dfen 8MP\",res:\"8 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Bullet Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\npro_zoom_aussen_12mp:{name:\"Pro Zoom Au\u00dfen 12MP\",res:\"12 MP\",lens:\"4-40 mm\",zoom:\"10x\",type:\"Bullet Au\u00dfen\",points:[\n{f:\"4 mm\",angle:90,width10:20,usage:\"breiter \u00dcberblick\"},\n{f:\"10 mm\",angle:35,width10:6.3,usage:\"Zufahrt \/ Hof\"},\n{f:\"20 mm\",angle:18,width10:3.2,usage:\"Detail auf Distanz\"},\n{f:\"30 mm\",angle:12,width10:2.1,usage:\"starker Zoom\"},\n{f:\"40 mm\",angle:9,width10:1.5,usage:\"maximaler Zoom\"}]},\npro_zoom_dome_8mp:{name:\"Pro Zoom Dome 8MP\",res:\"8 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Dome Innen\/Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\npro_zoom_dome_12mp:{name:\"Pro Zoom Dome 12MP\",res:\"12 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Dome Innen\/Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\npro_zoom_dome_ultra_8mp:{name:\"Pro Zoom Dome Ultra 8MP\",res:\"8 MP\",lens:\"2.7-13.5 mm\",zoom:\"5x\",type:\"Dome Innen\/Au\u00dfen\",points:[\n{f:\"2.7 mm\",angle:105,width10:19,usage:\"sehr breiter \u00dcberblick\"},\n{f:\"5 mm\",angle:60,width10:11,usage:\"Einfahrt \/ Hof\"},\n{f:\"8 mm\",angle:38,width10:7,usage:\"mittlere Distanz\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Detailbereich\"},\n{f:\"13.5 mm\",angle:20,width10:3.5,usage:\"enger Zoom\"}]},\nptz_20x_8mp:{name:\"PTZ 20x Zoom 8MP\",res:\"8 MP\",lens:\"4.7-94 mm\",zoom:\"20x\",type:\"PTZ Au\u00dfen\",points:[\n{f:\"4.7 mm\",angle:60,width10:12,usage:\"\u00dcberblick Einfahrt\"},\n{f:\"10 mm\",angle:30,width10:5.5,usage:\"Zufahrt\"},\n{f:\"20 mm\",angle:15,width10:2.75,usage:\"Detail\"},\n{f:\"50 mm\",angle:6,width10:0.5,usage:\"starker Zoom\"},\n{f:\"94 mm\",angle:3,width10:0.25,usage:\"maximaler Detailzoom\"}]}\n};\n\nconst camera=document.getElementById(\"camera\");\nconst zoom=document.getElementById(\"zoom\");\nconst heightEl=document.getElementById(\"height\");\nconst targetDistance=document.getElementById(\"targetDistance\");\nconst viewDistance=document.getElementById(\"viewDistance\");\nconst canvas=document.getElementById(\"scene\");\nconst ctx=canvas.getContext(\"2d\");\n\nfunction setZoom(){\n const cam=DATA[camera.value];\n zoom.innerHTML=\"\";\n cam.points.forEach((p,i)=>{\n const o=document.createElement(\"option\");\n o.value=i;\n o.textContent=p.f+\" | \"+p.usage+\" | ca. \"+p.angle+\"\u00b0\";\n zoom.appendChild(o);\n });\n zoom.selectedIndex=0;\n}\nfunction fmt(n){return n>=10?Math.round(n):Math.round(n*10)\/10;}\nfunction fmtHeight(h){return String(h).replace(\".\",\",\")+\" m\";}\n\nfunction update(){\n const cam=DATA[camera.value];\n const p=cam.points[Number(zoom.value)||0];\n const target=Number(targetDistance.value);\n const view=Number(viewDistance.value);\n const h=Number(heightEl.value);\n const width=(target\/10)*p.width10;\n\n document.getElementById(\"targetOut\").textContent=target;\n document.getElementById(\"viewOut\").textContent=view;\n document.getElementById(\"angleOut\").textContent=\"ca. \"+p.angle+\"\u00b0\";\n document.getElementById(\"widthOut\").textContent=\"ca. \"+fmt(width)+\" m\";\n document.getElementById(\"heightOut\").textContent=fmtHeight(h);\n document.getElementById(\"usageOut\").textContent=p.usage;\n document.getElementById(\"info\").innerHTML=\"<b>\"+cam.name+\"<\/b><br>Aufl\u00f6sung: \"+cam.res+\" \u00b7 Typ: \"+cam.type+\"<br>Linse: \"+cam.lens+\" \u00b7 Zoom: \"+cam.zoom+\"<br><br>Montageh\u00f6he: <b>\"+fmtHeight(h)+\"<\/b><br>Zielentfernung: <b>\"+target+\" m<\/b><br>Dargestellte Sichtweite: <b>\"+view+\" m<\/b><br>Bildbreite am Ziel: ca. <b>\"+fmt(width)+\" m<\/b>.\";\n draw(cam,p,target,view,width,h);\n}\n\nfunction draw(cam,p,target,view,width,h){\n ctx.clearRect(0,0,1180,650);\n\n \/\/ Hintergrund\n let bg=ctx.createLinearGradient(0,0,0,650);\n bg.addColorStop(0,\"#dcefff\");\n bg.addColorStop(.46,\"#f7fbff\");\n bg.addColorStop(.47,\"#d9e9cd\");\n bg.addColorStop(1,\"#b8d3a0\");\n ctx.fillStyle=bg;ctx.fillRect(0,0,1180,650);\n\n \/\/ Gemeinsame Bodenlinie\n const groundY=520;\n ctx.fillStyle=\"#9fbd85\";\n ctx.fillRect(0,groundY,1180,130);\n\n \/\/ Haus links, sauberer Fassadenaufbau mit Geschossen\n const houseX=25, houseW=310, houseTop=120, houseH=400;\n ctx.fillStyle=\"#e9e1d6\";\n ctx.fillRect(houseX,houseTop,houseW,houseH);\n\n \/\/ Dach\n ctx.fillStyle=\"#1d3557\";\n ctx.beginPath();\n ctx.moveTo(houseX-12,houseTop);\n ctx.lineTo(houseX+houseW\/2,58);\n ctx.lineTo(houseX+houseW+18,houseTop);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Geschoss-Trennlinien: EG, 1. OG, 2. OG\n const floorEG=520;\n const lineEG=385;\n const lineOG=250;\n ctx.strokeStyle=\"#b9aa98\";\n ctx.lineWidth=3;\n ctx.beginPath();\n ctx.moveTo(houseX, lineEG);\n ctx.lineTo(houseX+houseW, lineEG);\n ctx.moveTo(houseX, lineOG);\n ctx.lineTo(houseX+houseW, lineOG);\n ctx.stroke();\n\n \/\/ dezente Sockellinie\n ctx.fillStyle=\"#d1c2af\";\n ctx.fillRect(houseX, floorEG-12, houseW, 12);\n\n \/\/ Haust\u00fcr proportional im Erdgeschoss\n const doorW=72, doorH=118;\n const doorX=houseX + houseW\/2 - doorW\/2;\n const doorY=floorEG-doorH;\n ctx.fillStyle=\"#7b5b3d\";\n ctx.fillRect(doorX,doorY,doorW,doorH);\n ctx.fillStyle=\"#5f412a\";\n ctx.fillRect(doorX+6,doorY+8,doorW-12,doorH-16);\n ctx.fillStyle=\"#d9c29a\";\n ctx.beginPath();\n ctx.arc(doorX+doorW-16,doorY+doorH\/2,4,0,Math.PI*2);\n ctx.fill();\n \/\/ T\u00fcrstufe\n ctx.fillStyle=\"#b8b8b8\";\n ctx.fillRect(doorX-12,floorEG,doorW+24,10);\n\n \/\/ Fenster sauber ausgerichtet je Geschoss\n function windowBox(x,y,w,h){\n ctx.fillStyle=\"#93b4d7\";\n ctx.fillRect(x,y,w,h);\n ctx.strokeStyle=\"rgba(255,255,255,.85)\";\n ctx.lineWidth=2;\n ctx.beginPath();\n ctx.moveTo(x+w\/2,y);\n ctx.lineTo(x+w\/2,y+h);\n ctx.moveTo(x,y+h\/2);\n ctx.lineTo(x+w,y+h\/2);\n ctx.stroke();\n ctx.strokeStyle=\"#6f8faa\";\n ctx.lineWidth=2;\n ctx.strokeRect(x,y,w,h);\n }\n\n const winW=58, winH=48;\n const leftWin=houseX+55;\n const rightWin=houseX+houseW-55-winW;\n \/\/ 2. OG\n windowBox(leftWin,155,winW,winH);\n windowBox(rightWin,155,winW,winH);\n \/\/ 1. OG\n windowBox(leftWin,285,winW,winH);\n windowBox(rightWin,285,winW,winH);\n \/\/ Erdgeschoss: Fenster links\/rechts neben Haust\u00fcr\n windowBox(houseX+38,420,52,44);\n windowBox(houseX+houseW-38-52,420,52,44);\n\n \/\/ kleine Beschriftung der Geschosse\n ctx.fillStyle=\"rgba(0,47,99,.55)\";\n ctx.font=\"12px Arial\";\n ctx.textAlign=\"left\";\n ctx.fillText(\"2. OG\",houseX+10,145);\n ctx.fillText(\"1. OG\",houseX+10,278);\n ctx.fillText(\"EG\",houseX+10,413);\n\n \/\/ Hof \/ Stra\u00dfe auf gleicher Ebene direkt an Hausanfang\n const startX=houseX+houseW;\n ctx.fillStyle=\"#cfcfcf\";\n ctx.beginPath();\n ctx.moveTo(startX,groundY);\n ctx.lineTo(1180,groundY);\n ctx.lineTo(1180,650);\n ctx.lineTo(startX,650);\n ctx.closePath();\n ctx.fill();\n\n \/\/ leichte Perspektivlinien auf Stra\u00dfe\/Hof\n ctx.strokeStyle=\"rgba(0,0,0,.12)\";\n ctx.lineWidth=2;\n ctx.beginPath();ctx.moveTo(startX,groundY);ctx.lineTo(1180,610);ctx.stroke();\n ctx.beginPath();ctx.moveTo(startX,650);ctx.lineTo(1180,540);ctx.stroke();\n\n function mapX(m){\n return startX + 55 + (Math.min(m,view)\/view) * (1180-startX-105);\n }\n function laneY(m){\n return groundY + 75 + (Math.min(m,view)\/view)*35;\n }\n\n \/\/ Distanzmarken\n let step=view<=60?10:20;\n for(let meter=step; meter<=view; meter+=step){\n let x=mapX(meter);\n let y=laneY(meter);\n ctx.strokeStyle=\"rgba(0,0,0,.22)\";\n ctx.lineWidth=1;\n ctx.beginPath();\n ctx.moveTo(x,y-65);\n ctx.lineTo(x,y+65);\n ctx.stroke();\n ctx.fillStyle=\"#334\";\n ctx.font=\"13px Arial\";\n ctx.textAlign=\"center\";\n ctx.fillText(meter+\" m\",x,y-72);\n }\n\n \/\/ Kamera-H\u00f6he an Fassade, unten ist Erdgeschoss \/ T\u00fcrbereich\n const cx=startX;\n const cy=groundY - 75 - ((h-2)\/3)*230;\n\n ctx.strokeStyle=\"rgba(0,47,99,.35)\";ctx.lineWidth=2;\n ctx.beginPath();ctx.moveTo(startX-45,cy);ctx.lineTo(startX+45,cy);ctx.stroke();\n ctx.fillStyle=\"#002f63\";ctx.font=\"bold 13px Arial\";ctx.textAlign=\"left\";ctx.fillText(fmtHeight(h),startX+50,cy+4);\n\n \/\/ Kamera\n ctx.fillStyle=\"#002f63\";\n ctx.fillRect(cx-34,cy-14,38,25);\n ctx.beginPath();ctx.arc(cx+7,cy-2,15,0,Math.PI*2);ctx.fill();\n ctx.fillStyle=\"#fff\";ctx.beginPath();ctx.arc(cx+7,cy-2,5,0,Math.PI*2);ctx.fill();\n\n \/\/ Ziel\n const visualTarget=Math.min(target,view);\n const targetX=mapX(visualTarget);\n const targetY=laneY(visualTarget);\n let t=visualTarget\/view;\n let carScale=.75+t*.55;\n\n ctx.fillStyle=target>view?\"#8a3b3b\":\"#444\";\n ctx.fillRect(targetX-55*carScale,targetY-20*carScale,110*carScale,38*carScale);\n ctx.fillStyle=\"#222\";\n ctx.beginPath();ctx.arc(targetX-34*carScale,targetY+23*carScale,10*carScale,0,Math.PI*2);ctx.fill();\n ctx.beginPath();ctx.arc(targetX+34*carScale,targetY+23*carScale,10*carScale,0,Math.PI*2);ctx.fill();\n ctx.fillStyle=\"#aab7c4\";ctx.fillRect(targetX-28*carScale,targetY-37*carScale,56*carScale,18*carScale);\n\n \/\/ Sichtkegel auf gleicher Ebene\n const angleRad=p.angle*Math.PI\/180;\n const dir=Math.atan2(targetY-cy,targetX-cx);\n const half=angleRad\/2;\n const len=Math.hypot(targetX-cx,targetY-cy)+130;\n const ax=cx+Math.cos(dir-half)*len;\n const ay=cy+Math.sin(dir-half)*len;\n const bx=cx+Math.cos(dir+half)*len;\n const by=cy+Math.sin(dir+half)*len;\n\n ctx.fillStyle=\"rgba(0,91,159,.20)\";\n ctx.strokeStyle=\"#005b9f\";\n ctx.lineWidth=3;\n ctx.beginPath();\n ctx.moveTo(cx,cy);\n ctx.lineTo(ax,ay);\n ctx.lineTo(bx,by);\n ctx.closePath();\n ctx.fill();ctx.stroke();\n\n \/\/ Zielbreite\n let lineW=Math.max(70,Math.min(300,width*5));\n ctx.strokeStyle=\"#002f63\";ctx.lineWidth=4;\n ctx.beginPath();\n ctx.moveTo(targetX-lineW\/2,targetY-70);\n ctx.lineTo(targetX+lineW\/2,targetY-70);\n ctx.stroke();\n ctx.fillStyle=\"#002f63\";\n ctx.font=\"bold 16px Arial\";\n ctx.textAlign=\"center\";\n let targetText=target>view?(\"Ziel \"+target+\" m au\u00dferhalb der dargestellten \"+view+\" m\"):(\"Ziel: \"+target+\" m | Sichtbreite ca. \"+fmt(width)+\" m\");\n ctx.fillText(targetText,targetX,targetY-84);\n\n \/\/ \u00dcberschrift im Canvas\n ctx.fillStyle=\"#002f63\";\n ctx.font=\"bold 24px Arial\";\n ctx.textAlign=\"center\";\n ctx.fillText(cam.name+\" | \"+p.f+\" | H\u00f6he \"+fmtHeight(h),760,38);\n}\n\ncamera.addEventListener(\"change\",()=>{setZoom();update();});\nzoom.addEventListener(\"change\",update);\nheightEl.addEventListener(\"change\",update);\ntargetDistance.addEventListener(\"input\",update);\nviewDistance.addEventListener(\"input\",update);\nsetZoom();update();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<script language='javascript' type='text\/javascript'>function getWR360PopupSkin(){return 'light_clean';}<\/script>","protected":false},"excerpt":{"rendered":"<p>BERGHOCH Sichtweiten-Simulator BERGHOCH Einfahrt- und Sichtweiten-Simulator Kamera am Haus, Montageh\u00f6he, Zielentfernung und Sichtweite realistisch einstellen. 1. Haus \/ Montage Installationsh\u00f6he 2,0 m2,5 m3,0 m3,5 m4,0 m4,5 m5,0 m Ziel-Entfernung vom<\/p>","protected":false},"author":7006,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-72695","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/pages\/72695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/users\/7006"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/comments?post=72695"}],"version-history":[{"count":0,"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/pages\/72695\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.berghoch.de\/en\/wp-json\/wp\/v2\/media?parent=72695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}