{"id":17062,"date":"2020-02-14T11:44:56","date_gmt":"2020-02-14T10:44:56","guid":{"rendered":"http:\/\/www.schwimmbadtechnik-ratingen.de\/?page_id=17062"},"modified":"2025-08-20T13:02:00","modified_gmt":"2025-08-20T11:02:00","slug":"testarea","status":"publish","type":"page","link":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/","title":{"rendered":"TESTAREA"},"content":{"rendered":"


\n
\n
\n
\n
\n LogiLED Simulator<\/title><\/p>\n<style>\n :root{\n --bg:#000; --panel:#0f172a; --brand:#06b6d4; --focus-y:60%;\n \/* Feste Wasserlinie (relativ zur Bildh\u00f6he der B\u00fchne) *\/\n --waterline: 30%;\n }\n *{box-sizing:border-box;margin:0;padding:0}\n html,body{height:100%;width:100%;background:var(--bg);color:#00FFFFFF;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif}\n .page{display:flex;flex-direction:column;min-height:100%;width:100%;overflow-x:hidden}<\/p>\n<p> \/* Rahmen *\/\n .frame{width:100%;padding:4px;border-radius:28px;overflow:visible;\n background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%)}\n .frame-inner{border-radius:26px;overflow:visible;\n background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%);\n padding:clamp(12px,2.5vw,18px);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04)}<\/p>\n<p> \/* Layout *\/\n .wrap{\n display:grid;grid-template-columns:1.25fr 0.75fr;\n gap:clamp(14px,2vw,22px);\n width:100%;\n padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px);\n align-items:stretch\n }\n @media (max-width:1100px){.wrap{grid-template-columns:1fr}}<\/p>\n<p> \/* B\u00fchne \u2013 feste Ratio, damit die Wasserlinie absolut stabil bleibt *\/\n .stage{\n position:relative;background:#000;border-radius:16px;overflow:hidden;\n border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 40px rgba(0,0,0,.45);width:100%\n }\n .stage::before{content:\"\";display:block;aspect-ratio:40\/27} \/* fix *\/<\/p>\n<p> \/* Panel *\/\n .panel{\n background:linear-gradient(180deg,#0f172a,#0b1220);\n border:1px solid rgba(255,255,255,.08);\n border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;\n box-shadow:0 8px 30px rgba(0,0,0,.35);width:100%;position:relative;overflow:hidden;height:100%;min-height:0\n }\n .panel::before{\n content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.24;\n background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png');\n background-position:center center;background-size:cover;background-repeat:no-repeat;\n }\n .panel h1{position:relative;margin-top:6px;margin-bottom:8px;text-align:center;font-size:clamp(18px,4vw,36px);font-weight:800;color:#fff;z-index:1}<\/p>\n<p> \/* Buttons *\/\n .modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;position:relative;z-index:1}\n .btn{padding:12px;border:none;border-radius:10px;background:#1f2937;color:#e5e7eb;cursor:pointer;font-weight:650;transition:transform .06s ease, box-shadow .2s ease}\n .btn:hover{box-shadow:0 0 0 2px rgba(6,182,212,.25) inset}\n .btn:active{transform:translateY(1px)}\n .btn.active{background:var(--brand);color:#001014;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}<\/p>\n<p> \/* Bild-Layer *\/\n .layer{\n position:absolute;inset:0;width:100%;height:100%;\n object-fit:cover;object-position:50% var(--focus-y);\n display:block;transition:opacity .28s ease, filter .28s ease;pointer-events:none\n }\n .lighten{mix-blend-mode:lighten}\n .z-base{z-index:0}.z-dual{z-index:1}.z-power{z-index:2}.z-ring{z-index:3}<\/p>\n<p> \/* Gemeinsame Unterwasser-Maske (fix an der Wasserlinie) *\/\n .underwaterMask{\n -webkit-mask-image: linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline));\n mask-image: linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline));\n }<\/p>\n<p> \/* Glow (dezent) *\/\n .glow-overlay{\n position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;\n mix-blend-mode:screen;\n background: radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%);\n filter: blur(10px);\n transition: opacity .25s ease;\n }<\/p>\n<p> \/* Dimm-Overlay \u2013 nur unter Wasser, weich *\/\n .water-overlay{\n position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .28s ease;\n mix-blend-mode:multiply;\n background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%);\n }<\/p>\n<p> \/* Reglerbereich *\/\n .section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;display:grid;gap:10px;width:100%;position:relative;z-index:1}\n .row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}\n label{font-size:13px;color:#cbd5e1}<\/p>\n<p> \/* Range Slider (Cyan) *\/\n input[type=range]{width:100%;appearance:none;-webkit-appearance:none;accent-color:var(--brand);\n --p:100%;height:8px;border-radius:999px;outline:none;\n background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%)}\n input[type=range]::-webkit-slider-runnable-track{height:8px;background:transparent;border-radius:999px}\n input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;\n background:#0b1220;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(6,182,212,.22);margin-top:-5px}\n input[type=range]::-moz-range-track{height:8px;background:rgba(255,255,255,.18);border:none;border-radius:999px}\n input[type=range]::-moz-range-progress{height:8px;background:var(--brand);border:none;border-radius:999px}\n input[type=range]::-moz-range-thumb{width:18px;height:18px;border-<!-- LogiLED_Code_Final \u2014 Avada 7.13 kompatibel (geh\u00e4rtet & 1:1 Verhalten)\n \u00c4nderungen: \n - Vollst\u00e4ndiger Scope unter #logiled-sim, eindeutige Pr\u00e4fixe (lls-*) gegen Avada-Klassen.\n - Keine <html>\/<head>\/<body>-Tags; f\u00fcr Avada Code Block gedacht.\n - Layer-Images: loading=\"eager\"\/decoding=\"async\"\/fetchpriority, max-width:none, kein lazy.\n - Mobile: Hintergrund transparent (wie Originalvorgabe).\n - Logik & Bildpfade identisch zu \u201eLogiLED_Code_Final\u201c.\n--><\/p>\n<div id=\"logiled-sim\" class=\"lls-page\" aria-live=\"polite\">\n<style>\n \/* ===== Scope & Vars ===== *\/\n #logiled-sim{ --lls-bg:#000; --lls-panel:#0f172a; --lls-brand:#06b6d4; --lls-focus-y:60%; --lls-waterline:30%;\n color:#00FFFFFF; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif;\n background:var(--lls-bg);\n }\n #logiled-sim *{box-sizing:border-box;margin:0;padding:0}<\/p>\n<p> \/* ===== Layout \/ Rahmen ===== *\/\n #logiled-sim .lls-frame{width:100%;padding:4px;border-radius:28px;overflow:visible;\n background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%)}\n #logiled-sim .lls-frame-inner{border-radius:26px;overflow:visible;\n background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%);\n padding:clamp(12px,2.5vw,18px);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04)}<\/p>\n<p> #logiled-sim .lls-wrap{display:grid;grid-template-columns:1.25fr 0.75fr;gap:clamp(14px,2vw,22px);width:100%;\n padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px);align-items:stretch}\n @media (max-width:1100px){#logiled-sim .lls-wrap{grid-template-columns:1fr}}<\/p>\n<p> \/* ===== B\u00fchne (fixe Ratio h\u00e4lt Wasserlinie stabil) ===== *\/\n #logiled-sim .lls-stage{position:relative;background:#000;border-radius:16px;overflow:hidden;\n border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 40px rgba(0,0,0,.45);width:100%}\n #logiled-sim .lls-stage::before{content:\"\";display:block;aspect-ratio:40\/27}<\/p>\n<p> \/* Harte Bildregeln gegen Theme-Resets *\/\n #logiled-sim .lls-layer{position:absolute;inset:0;width:100%;height:100%;\n object-fit:cover;object-position:50% var(--lls-focus-y);display:block;\n transition:opacity .28s ease, filter .28s ease;pointer-events:none;max-width:none !important}\n #logiled-sim .lls-lighten{mix-blend-mode:lighten}\n #logiled-sim .lls-z-base{z-index:0}.lls-z-dual{z-index:1}.lls-z-power{z-index:2}.lls-z-ring{z-index:3}<\/p>\n<p> \/* Gemeinsame Unterwasser-Maske *\/\n #logiled-sim .lls-under{ -webkit-mask-image: linear-gradient(to bottom, transparent var(--lls-waterline), #fff var(--lls-waterline));\n mask-image: linear-gradient(to bottom, transparent var(--lls-waterline), #fff var(--lls-waterline)); }<\/p>\n<p> \/* Glow & Dimm *\/\n #logiled-sim .lls-glow{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:screen;\n background: radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%);\n filter: blur(10px);transition: opacity .25s ease}\n #logiled-sim .lls-water{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .28s ease;\n mix-blend-mode:multiply;background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%)}<\/p>\n<p> \/* ===== Panel ===== *\/\n #logiled-sim .lls-panel{background:linear-gradient(180deg,#0f172a,#0b1220);\n border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;\n box-shadow:0 8px 30px rgba(0,0,0,.35);width:100%;position:relative;overflow:hidden;height:100%;min-height:0}\n #logiled-sim .lls-panel::before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.24;\n background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png');\n background-position:center center;background-size:cover;background-repeat:no-repeat}\n #logiled-sim .lls-title{position:relative;margin:6px 0 8px;text-align:center;font-size:clamp(18px,4vw,36px);font-weight:800;color:#fff;z-index:1}<\/p>\n<p> \/* Buttons (keine .btn-Kollision) *\/\n #logiled-sim .lls-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;position:relative;z-index:1}\n #logiled-sim .lls-button{padding:12px;border:0;border-radius:10px;background:#1f2937;color:#e5e7eb;cursor:pointer;\n font-weight:650;transition:transform .06s ease, box-shadow .2s ease;display:inline-block;text-align:center}\n #logiled-sim .lls-button:hover{box-shadow:0 0 0 2px rgba(6,182,212,.25) inset}\n #logiled-sim .lls-button:active{transform:translateY(1px)}\n #logiled-sim .lls-button.is-active{background:var(--lls-brand);color:#001014;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}<\/p>\n<p> \/* Regler *\/\n #logiled-sim .lls-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;display:grid;gap:10px;width:100%;position:relative;z-index:1}\n #logiled-sim .lls-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}\n #logiled-sim label{font-size:13px;color:#cbd5e1}\n #logiled-sim input[type=range]{width:100%;appearance:none;-webkit-appearance:none;accent-color:var(--lls-brand);\n --p:100%;height:8px;border-radius:999px;outline:none;\n background:linear-gradient(to right,var(--lls-brand) 0,var(--lls-brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%)}\n #logiled-sim input[type=range]::-webkit-slider-runnable-track{height:8px;background:transparent;border-radius:999px}\n #logiled-sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0b1220;border:3px solid var(--lls-brand);box-shadow:0 0 0 4px rgba(6,182,212,.22);margin-top:-5px}\n #logiled-sim input[type=range]::-moz-range-track{height:8px;background:rgba(255,255,255,.18);border:none;border-radius:999px}\n #logiled-sim input[type=range]::-moz-range-progress{height:8px;background:var(--lls-brand);border:none;border-radius:999px}\n #logiled-sim input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0b1220;border:3px solid var(--lls-brand);box-shadow:0 0 0 4px rgba(6,182,212,.22)}\n #logiled-sim .lls-value{min-width:68px;text-align:right;color:#e5e7eb;font-variant-numeric:tabular-nums}\n #logiled-sim .lls-hide{display:none !important}<\/p>\n<p> \/* ===== Mobile: Hintergrund transparent ===== *\/\n @media (max-width:820px){\n #logiled-sim{ background:transparent; }\n #logiled-sim .lls-wrap{display:flex;flex-direction:column;gap:12px;padding:0 10px 14px}\n #logiled-sim .lls-panel{order:2;padding:12px;height:auto}\n #logiled-sim .lls-panel::before{background-position:center right 6px;background-size:auto 86%;opacity:.16}\n #logiled-sim .lls-modes{grid-template-columns:repeat(2,1fr);gap:10px}\n #logiled-sim .lls-button{padding:14px;font-size:15px;border-radius:12px}\n #logiled-sim .lls-section{gap:12px}\n #logiled-sim .lls-row{grid-template-columns:1fr}\n #logiled-sim .lls-value{display:none}\n }\n <\/style>\n<div class=\"lls-frame\">\n<div class=\"lls-frame-inner\">\n <main class=\"lls-wrap\"><\/p>\n<figure class=\"lls-stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" id=\"llsBase\" class=\"lls-layer lls-z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\"><br \/>\n <!-- Alle Licht-Layer nur unter Wasser maskiert --><br \/>\n <img data-recalc-dims=\"1\" id=\"llsPW\" class=\"lls-layer lls-z-power lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsPC\" class=\"lls-layer lls-z-power lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsRing\" class=\"lls-layer lls-z-ring lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsDualC\" class=\"lls-layer lls-z-dual lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsDualW\" class=\"lls-layer lls-z-dual lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <!-- Glow & Dimm \u2013 ebenfalls unter Wasser maskiert --><\/p>\n<div id=\"llsGlow\" class=\"lls-glow lls-under\" aria-hidden=\"true\"><\/div>\n<div id=\"llsWater\" class=\"lls-water lls-under\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"lls-panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1 class=\"lls-title\">LogiLED Simulator<\/h1>\n<div class=\"lls-modes\">\n <button class=\"lls-button is-active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"lls-section\">\n<div id=\"llsRowRing\" class=\"lls-row lls-hide\">\n <label for=\"llsRingDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsRingDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsRingDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\" \/><\/p>\n<div id=\"llsRowTotalDim\" class=\"lls-row lls-hide\">\n <label for=\"llsTotalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsTotalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsTotalDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" \/><\/p>\n<div id=\"llsRowPowerTemp\" class=\"lls-row lls-hide\">\n <label for=\"llsPowerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsPowerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"llsPowerTemp\" class=\"lls-hide\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\" \/><\/p>\n<div id=\"llsRowPowerDim\" class=\"lls-row lls-hide\">\n <label for=\"llsPowerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsPowerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsPowerDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" \/>\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<p> <script>\n (function(){\n \/\/ ===== DOM-Refs =====\n const root = document.getElementById('logiled-sim');\n const $ = id => document.getElementById(id);\n const imgRing = $('llsRing'), imgDualC=$('llsDualC'), imgDualW=$('llsDualW'),\n imgPW=$('llsPW'), imgPC=$('llsPC'), water=$('llsWater'), glow=$('llsGlow');\n const ringDim=$('llsRingDim'), powerDim=$('llsPowerDim'), totalDim=$('llsTotalDim'), powerTemp=$('llsPowerTemp');\n const ringDimVal=$('llsRingDimVal'), powerDimVal=$('llsPowerDimVal'), totalDimVal=$('llsTotalDimVal'), powerTempVal=$('llsPowerTempVal');<\/p>\n<p> \/\/ ===== Logik-Parameter (exakt wie \u201eLogiLED_Code_Final\u201c) =====\n let mode='off';\n const MIN_BRIGHT=0.5; \/\/ nie ganz aus (au\u00dfer AUS)\n const GAMMA=1.2;\n const BOOST=1.4; \/\/ +40% Deckel (entspricht fr\u00fcherem +20% Output auf Basis)\n const MODE_ATTEN={ ring:0.80, power:0.90, dual:1.20 }; \/\/ ring < power < dual\n\n const clamp01=x=>Math.max(0,Math.min(1,x));\n const brightnessBase=p=>(MIN_BRIGHT+(1-MIN_BRIGHT)*Math.pow(clamp01(p),GAMMA));\n const brightBoosted=p=>Math.min(BOOST,brightnessBase(p)*BOOST);\n const brightFinal=(p,key)=>brightBoosted(p)*MODE_ATTEN[key];<\/p>\n<p> function paintRange(el){ const min=+el.min||0,max=+el.max||100,val=((+el.value-min)\/(max-min))*100; el.style.setProperty('--p',val+'%'); }\n function setGlowWater(b){ const bN=Math.min(1,b), i=Math.max(0,(bN-MIN_BRIGHT)\/(1-MIN_BRIGHT)); glow.style.opacity=(i*0.4).toFixed(3); water.style.opacity=(1-bN).toFixed(3); }\n const hidePower=()=>{ imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual =()=>{ imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent=ringDim.value; powerDimVal.textContent=powerDim.value; totalDimVal.textContent=totalDim.value; powerTempVal.textContent=powerTemp.value;<\/p>\n<p> if(mode==='off'){\n [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{el.style.opacity=0; el.style.filter='brightness(0)';});\n glow.style.opacity=0; water.style.opacity=0; return;\n }<\/p>\n<p> if(mode==='ring'){\n const p=Number(ringDim.value)\/100, b=brightFinal(p,'ring');\n hideDual(); hidePower();\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }<\/p>\n<p> if(mode==='dual_cold'||mode==='dual_warm'){\n const p=Number(totalDim.value)\/100, b=brightFinal(p,'dual');\n const t=Number(powerTemp.value), def=(mode==='dual_cold')?6500:3000;\n const isDef=(t===def), blend=(isDef&&p>0.99)?(p-0.99)\/0.01:0;\n imgDualC.style.opacity=(mode==='dual_cold')?blend:0;\n imgDualW.style.opacity=(mode==='dual_warm')?blend:0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }<\/p>\n<p> if(mode==='power_cold'||mode==='power_warm'){\n const p=Number(powerDim.value)\/100, b=brightFinal(p,'power');\n const t=Number(powerTemp.value), warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }\n }<\/p>\n<p> function show(el,yes){ el.classList.toggle('lls-hide', !yes); }<\/p>\n<p> \/\/ Delegierter Click-Handler auf dem Komponent-Root (robust gegen Avada-Wrapper)\n root.addEventListener('click', e=>{\n const b=e.target.closest('.lls-button[data-mode]'); if(!b) return;\n mode=b.dataset.mode;\n root.querySelectorAll('.lls-button').forEach(x=>x.classList.toggle('is-active', x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('llsRowRing'), mode==='ring'); show(document.getElementById('llsRingDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('llsRowTotalDim'), isDual); show(document.getElementById('llsTotalDim'), isDual);\n show(document.getElementById('llsRowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('llsPowerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('llsRowPowerDim'), isPower); show(document.getElementById('llsPowerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{\n el.addEventListener(ev,apply); el.addEventListener(ev,()=>paintRange(el));\n });\n });<\/p>\n<p> \/\/ Initial\n [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n })();\n <\/script>\n<\/div>\n<p><!-- Avada-ready (keine <html>\/<head>\/<body>) \u2013 Minimal-Scope-Version, beh\u00e4lt deine Klassenbezeichnungen bei --><\/p>\n<div id=\"logiled-sim\">\n<style>\n \/* Variablen & Reset nur innerhalb des Wrappers *\/\n #logiled-sim{ --bg:#000; --panel:#0f172a; --brand:#06b6d4; --focus-y:60%; --waterline:30%; background:var(--bg); color:#00FFFFFF; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif }\n #logiled-sim *{ box-sizing:border-box; margin:0; padding:0 }<\/p>\n<p> \/* Rahmen *\/\n #logiled-sim .frame{ width:100%; padding:4px; border-radius:28px; overflow:visible; background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%) }\n #logiled-sim .frame-inner{ border-radius:26px; overflow:visible; background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%); padding:clamp(12px,2.5vw,18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04) }<\/p>\n<p> \/* Layout *\/\n #logiled-sim .wrap{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(14px,2vw,22px); width:100%; padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px); align-items:stretch }\n @media (max-width:1100px){ #logiled-sim .wrap{ grid-template-columns:1fr } }<\/p>\n<p> \/* B\u00fchne \u2013 feste Ratio *\/\n #logiled-sim .stage{ position:relative; background:#000; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 40px rgba(0,0,0,.45); width:100% }\n #logiled-sim .stage::before{ content:\"\"; display:block; aspect-ratio:40\/27 }<\/p>\n<p> \/* Bild-Layer (hart gegen Theme-Resets) *\/\n #logiled-sim .layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--focus-y); display:block; transition:opacity .28s ease, filter .28s ease; pointer-events:none; max-width:none !important }\n #logiled-sim .lighten{ mix-blend-mode:lighten }\n #logiled-sim .z-base{ z-index:0 } #logiled-sim .z-dual{ z-index:1 } #logiled-sim .z-power{ z-index:2 } #logiled-sim .z-ring{ z-index:3 }<\/p>\n<p> \/* Unterwasser-Maske *\/\n #logiled-sim .underwaterMask{ -webkit-mask-image:linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline)); mask-image:linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline)) }<\/p>\n<p> \/* Glow & Wasser *\/\n #logiled-sim .glow-overlay{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; mix-blend-mode:screen; background:radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%); filter:blur(10px); transition:opacity .25s ease }\n #logiled-sim .water-overlay{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; transition:opacity .28s ease; mix-blend-mode:multiply; background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%) }<\/p>\n<p> \/* Panel *\/\n #logiled-sim .panel{ background:linear-gradient(180deg,#0f172a,#0b1220); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 8px 30px rgba(0,0,0,.35); width:100%; position:relative; overflow:hidden; height:100%; min-height:0 }\n #logiled-sim .panel::before{ content:\"\"; position:absolute; inset:0; pointer-events:none; opacity:.24; background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png'); background-position:center center; background-size:cover; background-repeat:no-repeat }\n #logiled-sim .panel h1{ position:relative; margin-top:6px; margin-bottom:8px; text-align:center; font-size:clamp(18px,4vw,36px); font-weight:800; color:#fff; z-index:1 }<\/p>\n<p> \/* Buttons (scoped .btn) *\/\n #logiled-sim .modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; position:relative; z-index:1 }\n #logiled-sim .btn{ padding:12px; border:none; border-radius:10px; background:#1f2937; color:#e5e7eb; cursor:pointer; font-weight:650; transition:transform .06s ease, box-shadow .2s ease; display:inline-block; text-align:center }\n #logiled-sim .btn:hover{ box-shadow:0 0 0 2px rgba(6,182,212,.25) inset }\n #logiled-sim .btn:active{ transform:translateY(1px) }\n #logiled-sim .btn.active{ background:var(--brand); color:#001014; box-shadow:0 0 0 2px rgba(0,0,0,.15) inset }<\/p>\n<p> \/* Reglerbereich *\/\n #logiled-sim .section{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; display:grid; gap:10px; width:100%; position:relative; z-index:1 }\n #logiled-sim .row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center }\n #logiled-sim label{ font-size:13px; color:#cbd5e1 }<\/p>\n<p> \/* Range Slider *\/\n #logiled-sim input[type=range]{ width:100%; appearance:none; -webkit-appearance:none; accent-color:var(--brand); --p:100%; height:8px; border-radius:999px; outline:none; background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%) }\n #logiled-sim input[type=range]::-webkit-slider-runnable-track{ height:8px; background:transparent; border-radius:999px }\n #logiled-sim input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#0b1220; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(6,182,212,.22); margin-top:-5px }\n #logiled-sim input[type=range]::-moz-range-track{ height:8px; background:rgba(255,255,255,.18); border:none; border-radius:999px }\n #logiled-sim input[type=range]::-moz-range-progress{ height:8px; background:var(--brand); border:none; border-radius:999px }\n #logiled-sim input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#0b1220; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(6,182,212,.22) }<\/p>\n<p> #logiled-sim .value{ min-width:68px; text-align:right; color:#e5e7eb; font-variant-numeric:tabular-nums }\n #logiled-sim .hidden{ display:none }<\/p>\n<p> \/* Mobile *\/\n @media (max-width:820px){\n #logiled-sim{ --bg:transparent }\n #logiled-sim .wrap{ display:flex; flex-direction:column; gap:12px; padding:0 10px 14px }\n #logiled-sim .panel{ order:2; padding:12px; height:auto }\n #logiled-sim .panel::before{ background-position:center right 6px; background-size:auto 86%; opacity:.16 }\n #logiled-sim .modes{ grid-template-columns:repeat(2,1fr); gap:10px }\n #logiled-sim .btn{ padding:14px; font-size:15px; border-radius:12px }\n #logiled-sim .section{ gap:12px }\n #logiled-sim .row{ grid-template-columns:1fr }\n #logiled-sim .value{ display:none }\n #logiled-sim input[type=range]{ height:34px }\n #logiled-sim label{ font-size:14px }\n }\n <\/style>\n<div class=\"page\">\n<div class=\"frame\">\n<div class=\"frame-inner\">\n <main class=\"wrap\"><\/p>\n<figure class=\"stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" id=\"imgBase\" class=\"layer z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgPowerW\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgPowerC\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgRing\" class=\"layer z-ring lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgDualC\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgDualW\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><\/p>\n<div id=\"glowOverlay\" class=\"glow-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<div id=\"waterOverlay\" class=\"water-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1>LogiLED Simulator<\/h1>\n<div class=\"modes\">\n <button class=\"btn btn-off active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"btn btn-ring\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"btn btn-dual-c\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-dual-w\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-c\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-w\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"section\">\n<div id=\"rowRing\" class=\"row hidden\">\n <label for=\"ringDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"ringDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"ringDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\"><\/p>\n<div id=\"rowTotalDim\" class=\"row hidden\">\n <label for=\"totalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"totalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"totalDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\"><\/p>\n<div id=\"rowPowerTemp\" class=\"row hidden\">\n <label for=\"powerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"value\"><span id=\"powerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"powerTemp\" class=\"hidden\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\"><\/p>\n<div id=\"rowPowerDim\" class=\"row hidden\">\n <label for=\"powerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"powerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"powerDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script>\n (function(){\n \/\/ Scope alle Events auf den Wrapper, nicht auf document\n const root = document.getElementById('logiled-sim');\n \/\/ Ebenen\n const imgRing = document.getElementById('imgRing');\n const imgDualC= document.getElementById('imgDualC');\n const imgDualW= document.getElementById('imgDualW');\n const imgPW = document.getElementById('imgPowerW');\n const imgPC = document.getElementById('imgPowerC');\n const water = document.getElementById('waterOverlay');\n const glow = document.getElementById('glowOverlay');\n \/\/ Regler\n const ringDim = document.getElementById('ringDim');\n const powerDim = document.getElementById('powerDim');\n const totalDim = document.getElementById('totalDim');\n const powerTemp= document.getElementById('powerTemp');\n \/\/ Readouts\n const ringDimVal = document.getElementById('ringDimVal');\n const powerDimVal = document.getElementById('powerDimVal');\n const totalDimVal = document.getElementById('totalDimVal');\n const powerTempVal= document.getElementById('powerTempVal');<\/p>\n<p> let mode = 'off';\n const MIN_BRIGHT=0.5, GAMMA=1.2, BOOST=1.4;\n const MODE_ATTEN={ ring:0.80, power:0.90, dual:1.20 };<\/p>\n<p> const clamp01 = x => Math.max(0, Math.min(1, x));\n const brightnessBase = p => (MIN_BRIGHT + (1-MIN_BRIGHT) * Math.pow(clamp01(p), GAMMA));\n const brightBoosted = p => Math.min(BOOST, brightnessBase(p) * BOOST);\n const brightFinal = (p,modeKey) => brightBoosted(p) * MODE_ATTEN[modeKey];<\/p>\n<p> function paintRange(el){ const min=+el.min||0, max=+el.max||100, val=(+el.value-min)\/(max-min)*100; el.style.setProperty('--p', val+'%'); }\n function setGlowAndWaterByBrightness(b){ const bNorm=Math.min(1,b); const glowIntensity=Math.max(0,(bNorm-MIN_BRIGHT)\/(1-MIN_BRIGHT)); glow.style.opacity=(glowIntensity*0.4).toFixed(3); water.style.opacity=(1-bNorm).toFixed(3); }\n const hidePower=()=>{ imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual =()=>{ imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent=ringDim.value; powerDimVal.textContent=powerDim.value; totalDimVal.textContent=totalDim.value; powerTempVal.textContent=powerTemp.value;\n if(mode==='off'){ [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{ el.style.opacity=0; el.style.filter='brightness(0)'; }); glow.style.opacity=0; water.style.opacity=0; return; }\n if(mode==='ring'){ const p=Number(ringDim.value)\/100, b=brightFinal(p,'ring'); hideDual(); hidePower(); imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`; setGlowAndWaterByBrightness(b); return; }\n if(mode==='dual_cold'||mode==='dual_warm'){\n const p=Number(totalDim.value)\/100, b=brightFinal(p,'dual');\n const t=Number(powerTemp.value), defT=(mode==='dual_cold')?6500:3000;\n const isDef=(t===defT), blend=(isDef && p>0.99)?(p-0.99)\/0.01:0;\n imgDualC.style.opacity=(mode==='dual_cold')?blend:0; imgDualW.style.opacity=(mode==='dual_warm')?blend:0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b); return;\n }\n if(mode==='power_cold'||mode==='power_warm'){\n const p=Number(powerDim.value)\/100, b=brightFinal(p,'power');\n const t=Number(powerTemp.value), warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b); return;\n }\n }<\/p>\n<p> const show=(el,yes)=> el.classList.toggle('hidden',!yes);<\/p>\n<p> root.addEventListener('click', e=>{\n const b=e.target.closest('.btn[data-mode]'); if(!b) return;\n mode=b.dataset.mode;\n root.querySelectorAll('.btn').forEach(x=>x.classList.toggle('active', x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('rowRing'), mode==='ring');\n show(document.getElementById('ringDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('rowTotalDim'), isDual); show(document.getElementById('totalDim'), isDual);\n show(document.getElementById('rowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('powerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('rowPowerDim'), isPower); show(document.getElementById('powerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{ el.addEventListener(ev,apply); el.addEventListener(ev,()=>paintRange(el)); });\n });<\/p>\n<p> [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n })();\n <\/script>\n<\/div>\n<p><!-- LogiLED_Code_Final \u2014 Avada 7.13 kompatibel (geh\u00e4rtet & 1:1 Verhalten)\n \u00c4nderungen: \n - Vollst\u00e4ndiger Scope unter #logiled-sim, eindeutige Pr\u00e4fixe (lls-*) gegen Avada-Klassen.\n - Keine <html>\/<head>\/<body>-Tags; f\u00fcr Avada Code Block gedacht.\n - Layer-Images: loading=\"eager\"\/decoding=\"async\"\/fetchpriority, max-width:none, kein lazy.\n - Mobile: Hintergrund transparent (wie Originalvorgabe).\n - Logik & Bildpfade identisch zu \u201eLogiLED_Code_Final\u201c.\n--><\/p>\n<div id=\"logiled-sim\" class=\"lls-page\" aria-live=\"polite\">\n<style>\n \/* ===== Scope & Vars ===== *\/\n #logiled-sim{ --lls-bg:#000; --lls-panel:#0f172a; --lls-brand:#06b6d4; --lls-focus-y:60%; --lls-waterline:30%;\n color:#00FFFFFF; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif;\n background:var(--lls-bg);\n }\n #logiled-sim *{box-sizing:border-box;margin:0;padding:0}<\/p>\n<p> \/* ===== Layout \/ Rahmen ===== *\/\n #logiled-sim .lls-frame{width:100%;padding:4px;border-radius:28px;overflow:visible;\n background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%)}\n #logiled-sim .lls-frame-inner{border-radius:26px;overflow:visible;\n background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%);\n padding:clamp(12px,2.5vw,18px);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04)}<\/p>\n<p> #logiled-sim .lls-wrap{display:grid;grid-template-columns:1.25fr 0.75fr;gap:clamp(14px,2vw,22px);width:100%;\n padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px);align-items:stretch}\n @media (max-width:1100px){#logiled-sim .lls-wrap{grid-template-columns:1fr}}<\/p>\n<p> \/* ===== B\u00fchne (fixe Ratio h\u00e4lt Wasserlinie stabil) ===== *\/\n #logiled-sim .lls-stage{position:relative;background:#000;border-radius:16px;overflow:hidden;\n border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 40px rgba(0,0,0,.45);width:100%}\n #logiled-sim .lls-stage::before{content:\"\";display:block;aspect-ratio:40\/27}<\/p>\n<p> \/* Harte Bildregeln gegen Theme-Resets *\/\n #logiled-sim .lls-layer{position:absolute;inset:0;width:100%;height:100%;\n object-fit:cover;object-position:50% var(--lls-focus-y);display:block;\n transition:opacity .28s ease, filter .28s ease;pointer-events:none;max-width:none !important}\n #logiled-sim .lls-lighten{mix-blend-mode:lighten}\n #logiled-sim .lls-z-base{z-index:0}.lls-z-dual{z-index:1}.lls-z-power{z-index:2}.lls-z-ring{z-index:3}<\/p>\n<p> \/* Gemeinsame Unterwasser-Maske *\/\n #logiled-sim .lls-under{ -webkit-mask-image: linear-gradient(to bottom, transparent var(--lls-waterline), #fff var(--lls-waterline));\n mask-image: linear-gradient(to bottom, transparent var(--lls-waterline), #fff var(--lls-waterline)); }<\/p>\n<p> \/* Glow & Dimm *\/\n #logiled-sim .lls-glow{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:screen;\n background: radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%);\n filter: blur(10px);transition: opacity .25s ease}\n #logiled-sim .lls-water{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .28s ease;\n mix-blend-mode:multiply;background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%)}<\/p>\n<p> \/* ===== Panel ===== *\/\n #logiled-sim .lls-panel{background:linear-gradient(180deg,#0f172a,#0b1220);\n border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;\n box-shadow:0 8px 30px rgba(0,0,0,.35);width:100%;position:relative;overflow:hidden;height:100%;min-height:0}\n #logiled-sim .lls-panel::before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.24;\n background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png');\n background-position:center center;background-size:cover;background-repeat:no-repeat}\n #logiled-sim .lls-title{position:relative;margin:6px 0 8px;text-align:center;font-size:clamp(18px,4vw,36px);font-weight:800;color:#fff;z-index:1}<\/p>\n<p> \/* Buttons (keine .btn-Kollision) *\/\n #logiled-sim .lls-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;position:relative;z-index:1}\n #logiled-sim .lls-button{padding:12px;border:0;border-radius:10px;background:#1f2937;color:#e5e7eb;cursor:pointer;\n font-weight:650;transition:transform .06s ease, box-shadow .2s ease;display:inline-block;text-align:center}\n #logiled-sim .lls-button:hover{box-shadow:0 0 0 2px rgba(6,182,212,.25) inset}\n #logiled-sim .lls-button:active{transform:translateY(1px)}\n #logiled-sim .lls-button.is-active{background:var(--lls-brand);color:#001014;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}<\/p>\n<p> \/* Regler *\/\n #logiled-sim .lls-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;display:grid;gap:10px;width:100%;position:relative;z-index:1}\n #logiled-sim .lls-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}\n #logiled-sim label{font-size:13px;color:#cbd5e1}\n #logiled-sim input[type=range]{width:100%;appearance:none;-webkit-appearance:none;accent-color:var(--lls-brand);\n --p:100%;height:8px;border-radius:999px;outline:none;\n background:linear-gradient(to right,var(--lls-brand) 0,var(--lls-brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%)}\n #logiled-sim input[type=range]::-webkit-slider-runnable-track{height:8px;background:transparent;border-radius:999px}\n #logiled-sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0b1220;border:3px solid var(--lls-brand);box-shadow:0 0 0 4px rgba(6,182,212,.22);margin-top:-5px}\n #logiled-sim input[type=range]::-moz-range-track{height:8px;background:rgba(255,255,255,.18);border:none;border-radius:999px}\n #logiled-sim input[type=range]::-moz-range-progress{height:8px;background:var(--lls-brand);border:none;border-radius:999px}\n #logiled-sim input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0b1220;border:3px solid var(--lls-brand);box-shadow:0 0 0 4px rgba(6,182,212,.22)}\n #logiled-sim .lls-value{min-width:68px;text-align:right;color:#e5e7eb;font-variant-numeric:tabular-nums}\n #logiled-sim .lls-hide{display:none !important}<\/p>\n<p> \/* ===== Mobile: Hintergrund transparent ===== *\/\n @media (max-width:820px){\n #logiled-sim{ background:transparent; }\n #logiled-sim .lls-wrap{display:flex;flex-direction:column;gap:12px;padding:0 10px 14px}\n #logiled-sim .lls-panel{order:2;padding:12px;height:auto}\n #logiled-sim .lls-panel::before{background-position:center right 6px;background-size:auto 86%;opacity:.16}\n #logiled-sim .lls-modes{grid-template-columns:repeat(2,1fr);gap:10px}\n #logiled-sim .lls-button{padding:14px;font-size:15px;border-radius:12px}\n #logiled-sim .lls-section{gap:12px}\n #logiled-sim .lls-row{grid-template-columns:1fr}\n #logiled-sim .lls-value{display:none}\n }\n <\/style>\n<div class=\"lls-frame\">\n<div class=\"lls-frame-inner\">\n <main class=\"lls-wrap\"><\/p>\n<figure class=\"lls-stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" id=\"llsBase\" class=\"lls-layer lls-z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\"><br \/>\n <!-- Alle Licht-Layer nur unter Wasser maskiert --><br \/>\n <img data-recalc-dims=\"1\" id=\"llsPW\" class=\"lls-layer lls-z-power lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsPC\" class=\"lls-layer lls-z-power lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsRing\" class=\"lls-layer lls-z-ring lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsDualC\" class=\"lls-layer lls-z-dual lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsDualW\" class=\"lls-layer lls-z-dual lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <!-- Glow & Dimm \u2013 ebenfalls unter Wasser maskiert --><\/p>\n<div id=\"llsGlow\" class=\"lls-glow lls-under\" aria-hidden=\"true\"><\/div>\n<div id=\"llsWater\" class=\"lls-water lls-under\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"lls-panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1 class=\"lls-title\">LogiLED Simulator<\/h1>\n<div class=\"lls-modes\">\n <button class=\"lls-button is-active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"lls-section\">\n<div id=\"llsRowRing\" class=\"lls-row lls-hide\">\n <label for=\"llsRingDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsRingDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsRingDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\" \/><\/p>\n<div id=\"llsRowTotalDim\" class=\"lls-row lls-hide\">\n <label for=\"llsTotalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsTotalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsTotalDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" \/><\/p>\n<div id=\"llsRowPowerTemp\" class=\"lls-row lls-hide\">\n <label for=\"llsPowerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsPowerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"llsPowerTemp\" class=\"lls-hide\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\" \/><\/p>\n<div id=\"llsRowPowerDim\" class=\"lls-row lls-hide\">\n <label for=\"llsPowerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsPowerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsPowerDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" \/>\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<p> <script>\n (function(){\n \/\/ ===== DOM-Refs =====\n const root = document.getElementById('logiled-sim');\n const $ = id => document.getElementById(id);\n const imgRing = $('llsRing'), imgDualC=$('llsDualC'), imgDualW=$('llsDualW'),\n imgPW=$('llsPW'), imgPC=$('llsPC'), water=$('llsWater'), glow=$('llsGlow');\n const ringDim=$('llsRingDim'), powerDim=$('llsPowerDim'), totalDim=$('llsTotalDim'), powerTemp=$('llsPowerTemp');\n const ringDimVal=$('llsRingDimVal'), powerDimVal=$('llsPowerDimVal'), totalDimVal=$('llsTotalDimVal'), powerTempVal=$('llsPowerTempVal');<\/p>\n<p> \/\/ ===== Logik-Parameter (exakt wie \u201eLogiLED_Code_Final\u201c) =====\n let mode='off';\n const MIN_BRIGHT=0.5; \/\/ nie ganz aus (au\u00dfer AUS)\n const GAMMA=1.2;\n const BOOST=1.4; \/\/ +40% Deckel (entspricht fr\u00fcherem +20% Output auf Basis)\n const MODE_ATTEN={ ring:0.80, power:0.90, dual:1.20 }; \/\/ ring < power < dual\n\n const clamp01=x=>Math.max(0,Math.min(1,x));\n const brightnessBase=p=>(MIN_BRIGHT+(1-MIN_BRIGHT)*Math.pow(clamp01(p),GAMMA));\n const brightBoosted=p=>Math.min(BOOST,brightnessBase(p)*BOOST);\n const brightFinal=(p,key)=>brightBoosted(p)*MODE_ATTEN[key];<\/p>\n<p> function paintRange(el){ const min=+el.min||0,max=+el.max||100,val=((+el.value-min)\/(max-min))*100; el.style.setProperty('--p',val+'%'); }\n function setGlowWater(b){ const bN=Math.min(1,b), i=Math.max(0,(bN-MIN_BRIGHT)\/(1-MIN_BRIGHT)); glow.style.opacity=(i*0.4).toFixed(3); water.style.opacity=(1-bN).toFixed(3); }\n const hidePower=()=>{ imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual =()=>{ imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent=ringDim.value; powerDimVal.textContent=powerDim.value; totalDimVal.textContent=totalDim.value; powerTempVal.textContent=powerTemp.value;<\/p>\n<p> if(mode==='off'){\n [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{el.style.opacity=0; el.style.filter='brightness(0)';});\n glow.style.opacity=0; water.style.opacity=0; return;\n }<\/p>\n<p> if(mode==='ring'){\n const p=Number(ringDim.value)\/100, b=brightFinal(p,'ring');\n hideDual(); hidePower();\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }<\/p>\n<p> if(mode==='dual_cold'||mode==='dual_warm'){\n const p=Number(totalDim.value)\/100, b=brightFinal(p,'dual');\n const t=Number(powerTemp.value), def=(mode==='dual_cold')?6500:3000;\n const isDef=(t===def), blend=(isDef&&p>0.99)?(p-0.99)\/0.01:0;\n imgDualC.style.opacity=(mode==='dual_cold')?blend:0;\n imgDualW.style.opacity=(mode==='dual_warm')?blend:0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }<\/p>\n<p> if(mode==='power_cold'||mode==='power_warm'){\n const p=Number(powerDim.value)\/100, b=brightFinal(p,'power');\n const t=Number(powerTemp.value), warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }\n }<\/p>\n<p> function show(el,yes){ el.classList.toggle('lls-hide', !yes); }<\/p>\n<p> \/\/ Delegierter Click-Handler auf dem Komponent-Root (robust gegen Avada-Wrapper)\n root.addEventListener('click', e=>{\n const b=e.target.closest('.lls-button[data-mode]'); if(!b) return;\n mode=b.dataset.mode;\n root.querySelectorAll('.lls-button').forEach(x=>x.classList.toggle('is-active', x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('llsRowRing'), mode==='ring'); show(document.getElementById('llsRingDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('llsRowTotalDim'), isDual); show(document.getElementById('llsTotalDim'), isDual);\n show(document.getElementById('llsRowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('llsPowerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('llsRowPowerDim'), isPower); show(document.getElementById('llsPowerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{\n el.addEventListener(ev,apply); el.addEventListener(ev,()=>paintRange(el));\n });\n });<\/p>\n<p> \/\/ Initial\n [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n })();\n <\/script>\n<\/div>\n<p><!-- Avada-ready (keine <html>\/<head>\/<body>) \u2013 Minimal-Scope-Version, beh\u00e4lt deine Klassenbezeichnungen bei --><\/p>\n<div id=\"logiled-sim\">\n<style>\n \/* Variablen & Reset nur innerhalb des Wrappers *\/\n #logiled-sim{ --bg:#000; --panel:#0f172a; --brand:#06b6d4; --focus-y:60%; --waterline:30%; background:var(--bg); color:#00FFFFFF; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif }\n #logiled-sim *{ box-sizing:border-box; margin:0; padding:0 }<\/p>\n<p> \/* Rahmen *\/\n #logiled-sim .frame{ width:100%; padding:4px; border-radius:28px; overflow:visible; background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%) }\n #logiled-sim .frame-inner{ border-radius:26px; overflow:visible; background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%); padding:clamp(12px,2.5vw,18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04) }<\/p>\n<p> \/* Layout *\/\n #logiled-sim .wrap{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(14px,2vw,22px); width:100%; padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px); align-items:stretch }\n @media (max-width:1100px){ #logiled-sim .wrap{ grid-template-columns:1fr } }<\/p>\n<p> \/* B\u00fchne \u2013 feste Ratio *\/\n #logiled-sim .stage{ position:relative; background:#000; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 40px rgba(0,0,0,.45); width:100% }\n #logiled-sim .stage::before{ content:\"\"; display:block; aspect-ratio:40\/27 }<\/p>\n<p> \/* Bild-Layer (hart gegen Theme-Resets) *\/\n #logiled-sim .layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--focus-y); display:block; transition:opacity .28s ease, filter .28s ease; pointer-events:none; max-width:none !important }\n #logiled-sim .lighten{ mix-blend-mode:lighten }\n #logiled-sim .z-base{ z-index:0 } #logiled-sim .z-dual{ z-index:1 } #logiled-sim .z-power{ z-index:2 } #logiled-sim .z-ring{ z-index:3 }<\/p>\n<p> \/* Unterwasser-Maske *\/\n #logiled-sim .underwaterMask{ -webkit-mask-image:linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline)); mask-image:linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline)) }<\/p>\n<p> \/* Glow & Wasser *\/\n #logiled-sim .glow-overlay{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; mix-blend-mode:screen; background:radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%); filter:blur(10px); transition:opacity .25s ease }\n #logiled-sim .water-overlay{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; transition:opacity .28s ease; mix-blend-mode:multiply; background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%) }<\/p>\n<p> \/* Panel *\/\n #logiled-sim .panel{ background:linear-gradient(180deg,#0f172a,#0b1220); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 8px 30px rgba(0,0,0,.35); width:100%; position:relative; overflow:hidden; height:100%; min-height:0 }\n #logiled-sim .panel::before{ content:\"\"; position:absolute; inset:0; pointer-events:none; opacity:.24; background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png'); background-position:center center; background-size:cover; background-repeat:no-repeat }\n #logiled-sim .panel h1{ position:relative; margin-top:6px; margin-bottom:8px; text-align:center; font-size:clamp(18px,4vw,36px); font-weight:800; color:#fff; z-index:1 }<\/p>\n<p> \/* Buttons (scoped .btn) *\/\n #logiled-sim .modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; position:relative; z-index:1 }\n #logiled-sim .btn{ padding:12px; border:none; border-radius:10px; background:#1f2937; color:#e5e7eb; cursor:pointer; font-weight:650; transition:transform .06s ease, box-shadow .2s ease; display:inline-block; text-align:center }\n #logiled-sim .btn:hover{ box-shadow:0 0 0 2px rgba(6,182,212,.25) inset }\n #logiled-sim .btn:active{ transform:translateY(1px) }\n #logiled-sim .btn.active{ background:var(--brand); color:#001014; box-shadow:0 0 0 2px rgba(0,0,0,.15) inset }<\/p>\n<p> \/* Reglerbereich *\/\n #logiled-sim .section{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; display:grid; gap:10px; width:100%; position:relative; z-index:1 }\n #logiled-sim .row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center }\n #logiled-sim label{ font-size:13px; color:#cbd5e1 }<\/p>\n<p> \/* Range Slider *\/\n #logiled-sim input[type=range]{ width:100%; appearance:none; -webkit-appearance:none; accent-color:var(--brand); --p:100%; height:8px; border-radius:999px; outline:none; background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%) }\n #logiled-sim input[type=range]::-webkit-slider-runnable-track{ height:8px; background:transparent; border-radius:999px }\n #logiled-sim input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#0b1220; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(6,182,212,.22); margin-top:-5px }\n #logiled-sim input[type=range]::-moz-range-track{ height:8px; background:rgba(255,255,255,.18); border:none; border-radius:999px }\n #logiled-sim input[type=range]::-moz-range-progress{ height:8px; background:var(--brand); border:none; border-radius:999px }\n #logiled-sim input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#0b1220; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(6,182,212,.22) }<\/p>\n<p> #logiled-sim .value{ min-width:68px; text-align:right; color:#e5e7eb; font-variant-numeric:tabular-nums }\n #logiled-sim .hidden{ display:none }<\/p>\n<p> \/* Mobile *\/\n @media (max-width:820px){\n #logiled-sim{ --bg:transparent }\n #logiled-sim .wrap{ display:flex; flex-direction:column; gap:12px; padding:0 10px 14px }\n #logiled-sim .panel{ order:2; padding:12px; height:auto }\n #logiled-sim .panel::before{ background-position:center right 6px; background-size:auto 86%; opacity:.16 }\n #logiled-sim .modes{ grid-template-columns:repeat(2,1fr); gap:10px }\n #logiled-sim .btn{ padding:14px; font-size:15px; border-radius:12px }\n #logiled-sim .section{ gap:12px }\n #logiled-sim .row{ grid-template-columns:1fr }\n #logiled-sim .value{ display:none }\n #logiled-sim input[type=range]{ height:34px }\n #logiled-sim label{ font-size:14px }\n }\n <\/style>\n<div class=\"page\">\n<div class=\"frame\">\n<div class=\"frame-inner\">\n <main class=\"wrap\"><\/p>\n<figure class=\"stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" id=\"imgBase\" class=\"layer z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgPowerW\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgPowerC\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgRing\" class=\"layer z-ring lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgDualC\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgDualW\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><\/p>\n<div id=\"glowOverlay\" class=\"glow-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<div id=\"waterOverlay\" class=\"water-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1>LogiLED Simulator<\/h1>\n<div class=\"modes\">\n <button class=\"btn btn-off active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"btn btn-ring\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"btn btn-dual-c\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-dual-w\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-c\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-w\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"section\">\n<div id=\"rowRing\" class=\"row hidden\">\n <label for=\"ringDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"ringDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"ringDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\"><\/p>\n<div id=\"rowTotalDim\" class=\"row hidden\">\n <label for=\"totalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"totalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"totalDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\"><\/p>\n<div id=\"rowPowerTemp\" class=\"row hidden\">\n <label for=\"powerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"value\"><span id=\"powerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"powerTemp\" class=\"hidden\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\"><\/p>\n<div id=\"rowPowerDim\" class=\"row hidden\">\n <label for=\"powerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"powerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"powerDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script>\n (function(){\n \/\/ Scope alle Events auf den Wrapper, nicht auf document\n const root = document.getElementById('logiled-sim');\n \/\/ Ebenen\n const imgRing = document.getElementById('imgRing');\n const imgDualC= document.getElementById('imgDualC');\n const imgDualW= document.getElementById('imgDualW');\n const imgPW = document.getElementById('imgPowerW');\n const imgPC = document.getElementById('imgPowerC');\n const water = document.getElementById('waterOverlay');\n const glow = document.getElementById('glowOverlay');\n \/\/ Regler\n const ringDim = document.getElementById('ringDim');\n const powerDim = document.getElementById('powerDim');\n const totalDim = document.getElementById('totalDim');\n const powerTemp= document.getElementById('powerTemp');\n \/\/ Readouts\n const ringDimVal = document.getElementById('ringDimVal');\n const powerDimVal = document.getElementById('powerDimVal');\n const totalDimVal = document.getElementById('totalDimVal');\n const powerTempVal= document.getElementById('powerTempVal');<\/p>\n<p> let mode = 'off';\n const MIN_BRIGHT=0.5, GAMMA=1.2, BOOST=1.4;\n const MODE_ATTEN={ ring:0.80, power:0.90, dual:1.20 };<\/p>\n<p> const clamp01 = x => Math.max(0, Math.min(1, x));\n const brightnessBase = p => (MIN_BRIGHT + (1-MIN_BRIGHT) * Math.pow(clamp01(p), GAMMA));\n const brightBoosted = p => Math.min(BOOST, brightnessBase(p) * BOOST);\n const brightFinal = (p,modeKey) => brightBoosted(p) * MODE_ATTEN[modeKey];<\/p>\n<p> function paintRange(el){ const min=+el.min||0, max=+el.max||100, val=(+el.value-min)\/(max-min)*100; el.style.setProperty('--p', val+'%'); }\n function setGlowAndWaterByBrightness(b){ const bNorm=Math.min(1,b); const glowIntensity=Math.max(0,(bNorm-MIN_BRIGHT)\/(1-MIN_BRIGHT)); glow.style.opacity=(glowIntensity*0.4).toFixed(3); water.style.opacity=(1-bNorm).toFixed(3); }\n const hidePower=()=>{ imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual =()=>{ imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent=ringDim.value; powerDimVal.textContent=powerDim.value; totalDimVal.textContent=totalDim.value; powerTempVal.textContent=powerTemp.value;\n if(mode==='off'){ [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{ el.style.opacity=0; el.style.filter='brightness(0)'; }); glow.style.opacity=0; water.style.opacity=0; return; }\n if(mode==='ring'){ const p=Number(ringDim.value)\/100, b=brightFinal(p,'ring'); hideDual(); hidePower(); imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`; setGlowAndWaterByBrightness(b); return; }\n if(mode==='dual_cold'||mode==='dual_warm'){\n const p=Number(totalDim.value)\/100, b=brightFinal(p,'dual');\n const t=Number(powerTemp.value), defT=(mode==='dual_cold')?6500:3000;\n const isDef=(t===defT), blend=(isDef && p>0.99)?(p-0.99)\/0.01:0;\n imgDualC.style.opacity=(mode==='dual_cold')?blend:0; imgDualW.style.opacity=(mode==='dual_warm')?blend:0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b); return;\n }\n if(mode==='power_cold'||mode==='power_warm'){\n const p=Number(powerDim.value)\/100, b=brightFinal(p,'power');\n const t=Number(powerTemp.value), warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b); return;\n }\n }<\/p>\n<p> const show=(el,yes)=> el.classList.toggle('hidden',!yes);<\/p>\n<p> root.addEventListener('click', e=>{\n const b=e.target.closest('.btn[data-mode]'); if(!b) return;\n mode=b.dataset.mode;\n root.querySelectorAll('.btn').forEach(x=>x.classList.toggle('active', x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('rowRing'), mode==='ring');\n show(document.getElementById('ringDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('rowTotalDim'), isDual); show(document.getElementById('totalDim'), isDual);\n show(document.getElementById('rowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('powerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('rowPowerDim'), isPower); show(document.getElementById('powerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{ el.addEventListener(ev,apply); el.addEventListener(ev,()=>paintRange(el)); });\n });<\/p>\n<p> [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n })();\n <\/script>\n<\/div>\n<p><!-- LogiLED_Code_Final \u2014 Avada 7.13 kompatibel (geh\u00e4rtet & 1:1 Verhalten)\n \u00c4nderungen: \n - Vollst\u00e4ndiger Scope unter #logiled-sim, eindeutige Pr\u00e4fixe (lls-*) gegen Avada-Klassen.\n - Keine <html>\/<head>\/<body>-Tags; f\u00fcr Avada Code Block gedacht.\n - Layer-Images: loading=\"eager\"\/decoding=\"async\"\/fetchpriority, max-width:none, kein lazy.\n - Mobile: Hintergrund transparent (wie Originalvorgabe).\n - Logik & Bildpfade identisch zu \u201eLogiLED_Code_Final\u201c.\n--><\/p>\n<div id=\"logiled-sim\" class=\"lls-page\" aria-live=\"polite\">\n<style>\n \/* ===== Scope & Vars ===== *\/\n #logiled-sim{ --lls-bg:#000; --lls-panel:#0f172a; --lls-brand:#06b6d4; --lls-focus-y:60%; --lls-waterline:30%;\n color:#00FFFFFF; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif;\n background:var(--lls-bg);\n }\n #logiled-sim *{box-sizing:border-box;margin:0;padding:0}<\/p>\n<p> \/* ===== Layout \/ Rahmen ===== *\/\n #logiled-sim .lls-frame{width:100%;padding:4px;border-radius:28px;overflow:visible;\n background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%)}\n #logiled-sim .lls-frame-inner{border-radius:26px;overflow:visible;\n background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%);\n padding:clamp(12px,2.5vw,18px);\n box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04)}<\/p>\n<p> #logiled-sim .lls-wrap{display:grid;grid-template-columns:1.25fr 0.75fr;gap:clamp(14px,2vw,22px);width:100%;\n padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px);align-items:stretch}\n @media (max-width:1100px){#logiled-sim .lls-wrap{grid-template-columns:1fr}}<\/p>\n<p> \/* ===== B\u00fchne (fixe Ratio h\u00e4lt Wasserlinie stabil) ===== *\/\n #logiled-sim .lls-stage{position:relative;background:#000;border-radius:16px;overflow:hidden;\n border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 40px rgba(0,0,0,.45);width:100%}\n #logiled-sim .lls-stage::before{content:\"\";display:block;aspect-ratio:40\/27}<\/p>\n<p> \/* Harte Bildregeln gegen Theme-Resets *\/\n #logiled-sim .lls-layer{position:absolute;inset:0;width:100%;height:100%;\n object-fit:cover;object-position:50% var(--lls-focus-y);display:block;\n transition:opacity .28s ease, filter .28s ease;pointer-events:none;max-width:none !important}\n #logiled-sim .lls-lighten{mix-blend-mode:lighten}\n #logiled-sim .lls-z-base{z-index:0}.lls-z-dual{z-index:1}.lls-z-power{z-index:2}.lls-z-ring{z-index:3}<\/p>\n<p> \/* Gemeinsame Unterwasser-Maske *\/\n #logiled-sim .lls-under{ -webkit-mask-image: linear-gradient(to bottom, transparent var(--lls-waterline), #fff var(--lls-waterline));\n mask-image: linear-gradient(to bottom, transparent var(--lls-waterline), #fff var(--lls-waterline)); }<\/p>\n<p> \/* Glow & Dimm *\/\n #logiled-sim .lls-glow{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:screen;\n background: radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%);\n filter: blur(10px);transition: opacity .25s ease}\n #logiled-sim .lls-water{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .28s ease;\n mix-blend-mode:multiply;background: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%)}<\/p>\n<p> \/* ===== Panel ===== *\/\n #logiled-sim .lls-panel{background:linear-gradient(180deg,#0f172a,#0b1220);\n border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;\n box-shadow:0 8px 30px rgba(0,0,0,.35);width:100%;position:relative;overflow:hidden;height:100%;min-height:0}\n #logiled-sim .lls-panel::before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:.24;\n background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png');\n background-position:center center;background-size:cover;background-repeat:no-repeat}\n #logiled-sim .lls-title{position:relative;margin:6px 0 8px;text-align:center;font-size:clamp(18px,4vw,36px);font-weight:800;color:#fff;z-index:1}<\/p>\n<p> \/* Buttons (keine .btn-Kollision) *\/\n #logiled-sim .lls-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;position:relative;z-index:1}\n #logiled-sim .lls-button{padding:12px;border:0;border-radius:10px;background:#1f2937;color:#e5e7eb;cursor:pointer;\n font-weight:650;transition:transform .06s ease, box-shadow .2s ease;display:inline-block;text-align:center}\n #logiled-sim .lls-button:hover{box-shadow:0 0 0 2px rgba(6,182,212,.25) inset}\n #logiled-sim .lls-button:active{transform:translateY(1px)}\n #logiled-sim .lls-button.is-active{background:var(--lls-brand);color:#001014;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}<\/p>\n<p> \/* Regler *\/\n #logiled-sim .lls-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;display:grid;gap:10px;width:100%;position:relative;z-index:1}\n #logiled-sim .lls-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}\n #logiled-sim label{font-size:13px;color:#cbd5e1}\n #logiled-sim input[type=range]{width:100%;appearance:none;-webkit-appearance:none;accent-color:var(--lls-brand);\n --p:100%;height:8px;border-radius:999px;outline:none;\n background:linear-gradient(to right,var(--lls-brand) 0,var(--lls-brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%)}\n #logiled-sim input[type=range]::-webkit-slider-runnable-track{height:8px;background:transparent;border-radius:999px}\n #logiled-sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0b1220;border:3px solid var(--lls-brand);box-shadow:0 0 0 4px rgba(6,182,212,.22);margin-top:-5px}\n #logiled-sim input[type=range]::-moz-range-track{height:8px;background:rgba(255,255,255,.18);border:none;border-radius:999px}\n #logiled-sim input[type=range]::-moz-range-progress{height:8px;background:var(--lls-brand);border:none;border-radius:999px}\n #logiled-sim input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0b1220;border:3px solid var(--lls-brand);box-shadow:0 0 0 4px rgba(6,182,212,.22)}\n #logiled-sim .lls-value{min-width:68px;text-align:right;color:#e5e7eb;font-variant-numeric:tabular-nums}\n #logiled-sim .lls-hide{display:none !important}<\/p>\n<p> \/* ===== Mobile: Hintergrund transparent ===== *\/\n @media (max-width:820px){\n #logiled-sim{ background:transparent; }\n #logiled-sim .lls-wrap{display:flex;flex-direction:column;gap:12px;padding:0 10px 14px}\n #logiled-sim .lls-panel{order:2;padding:12px;height:auto}\n #logiled-sim .lls-panel::before{background-position:center right 6px;background-size:auto 86%;opacity:.16}\n #logiled-sim .lls-modes{grid-template-columns:repeat(2,1fr);gap:10px}\n #logiled-sim .lls-button{padding:14px;font-size:15px;border-radius:12px}\n #logiled-sim .lls-section{gap:12px}\n #logiled-sim .lls-row{grid-template-columns:1fr}\n #logiled-sim .lls-value{display:none}\n }\n <\/style>\n<div class=\"lls-frame\">\n<div class=\"lls-frame-inner\">\n <main class=\"lls-wrap\"><\/p>\n<figure class=\"lls-stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" id=\"llsBase\" class=\"lls-layer lls-z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\"><br \/>\n <!-- Alle Licht-Layer nur unter Wasser maskiert --><br \/>\n <img data-recalc-dims=\"1\" id=\"llsPW\" class=\"lls-layer lls-z-power lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsPC\" class=\"lls-layer lls-z-power lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsRing\" class=\"lls-layer lls-z-ring lls-lighten lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsDualC\" class=\"lls-layer lls-z-dual lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"llsDualW\" class=\"lls-layer lls-z-dual lls-under\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <!-- Glow & Dimm \u2013 ebenfalls unter Wasser maskiert --><\/p>\n<div id=\"llsGlow\" class=\"lls-glow lls-under\" aria-hidden=\"true\"><\/div>\n<div id=\"llsWater\" class=\"lls-water lls-under\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"lls-panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1 class=\"lls-title\">LogiLED Simulator<\/h1>\n<div class=\"lls-modes\">\n <button class=\"lls-button is-active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"lls-button\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"lls-section\">\n<div id=\"llsRowRing\" class=\"lls-row lls-hide\">\n <label for=\"llsRingDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsRingDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsRingDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\" \/><\/p>\n<div id=\"llsRowTotalDim\" class=\"lls-row lls-hide\">\n <label for=\"llsTotalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsTotalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsTotalDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" \/><\/p>\n<div id=\"llsRowPowerTemp\" class=\"lls-row lls-hide\">\n <label for=\"llsPowerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsPowerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"llsPowerTemp\" class=\"lls-hide\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\" \/><\/p>\n<div id=\"llsRowPowerDim\" class=\"lls-row lls-hide\">\n <label for=\"llsPowerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"lls-value\"><span id=\"llsPowerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"llsPowerDim\" class=\"lls-hide\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\" \/>\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<p> <script>\n (function(){\n \/\/ ===== DOM-Refs =====\n const root = document.getElementById('logiled-sim');\n const $ = id => document.getElementById(id);\n const imgRing = $('llsRing'), imgDualC=$('llsDualC'), imgDualW=$('llsDualW'),\n imgPW=$('llsPW'), imgPC=$('llsPC'), water=$('llsWater'), glow=$('llsGlow');\n const ringDim=$('llsRingDim'), powerDim=$('llsPowerDim'), totalDim=$('llsTotalDim'), powerTemp=$('llsPowerTemp');\n const ringDimVal=$('llsRingDimVal'), powerDimVal=$('llsPowerDimVal'), totalDimVal=$('llsTotalDimVal'), powerTempVal=$('llsPowerTempVal');<\/p>\n<p> \/\/ ===== Logik-Parameter (exakt wie \u201eLogiLED_Code_Final\u201c) =====\n let mode='off';\n const MIN_BRIGHT=0.5; \/\/ nie ganz aus (au\u00dfer AUS)\n const GAMMA=1.2;\n const BOOST=1.4; \/\/ +40% Deckel (entspricht fr\u00fcherem +20% Output auf Basis)\n const MODE_ATTEN={ ring:0.80, power:0.90, dual:1.20 }; \/\/ ring < power < dual\n\n const clamp01=x=>Math.max(0,Math.min(1,x));\n const brightnessBase=p=>(MIN_BRIGHT+(1-MIN_BRIGHT)*Math.pow(clamp01(p),GAMMA));\n const brightBoosted=p=>Math.min(BOOST,brightnessBase(p)*BOOST);\n const brightFinal=(p,key)=>brightBoosted(p)*MODE_ATTEN[key];<\/p>\n<p> function paintRange(el){ const min=+el.min||0,max=+el.max||100,val=((+el.value-min)\/(max-min))*100; el.style.setProperty('--p',val+'%'); }\n function setGlowWater(b){ const bN=Math.min(1,b), i=Math.max(0,(bN-MIN_BRIGHT)\/(1-MIN_BRIGHT)); glow.style.opacity=(i*0.4).toFixed(3); water.style.opacity=(1-bN).toFixed(3); }\n const hidePower=()=>{ imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual =()=>{ imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent=ringDim.value; powerDimVal.textContent=powerDim.value; totalDimVal.textContent=totalDim.value; powerTempVal.textContent=powerTemp.value;<\/p>\n<p> if(mode==='off'){\n [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{el.style.opacity=0; el.style.filter='brightness(0)';});\n glow.style.opacity=0; water.style.opacity=0; return;\n }<\/p>\n<p> if(mode==='ring'){\n const p=Number(ringDim.value)\/100, b=brightFinal(p,'ring');\n hideDual(); hidePower();\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }<\/p>\n<p> if(mode==='dual_cold'||mode==='dual_warm'){\n const p=Number(totalDim.value)\/100, b=brightFinal(p,'dual');\n const t=Number(powerTemp.value), def=(mode==='dual_cold')?6500:3000;\n const isDef=(t===def), blend=(isDef&&p>0.99)?(p-0.99)\/0.01:0;\n imgDualC.style.opacity=(mode==='dual_cold')?blend:0;\n imgDualW.style.opacity=(mode==='dual_warm')?blend:0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }<\/p>\n<p> if(mode==='power_cold'||mode==='power_warm'){\n const p=Number(powerDim.value)\/100, b=brightFinal(p,'power');\n const t=Number(powerTemp.value), warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowWater(b); return;\n }\n }<\/p>\n<p> function show(el,yes){ el.classList.toggle('lls-hide', !yes); }<\/p>\n<p> \/\/ Delegierter Click-Handler auf dem Komponent-Root (robust gegen Avada-Wrapper)\n root.addEventListener('click', e=>{\n const b=e.target.closest('.lls-button[data-mode]'); if(!b) return;\n mode=b.dataset.mode;\n root.querySelectorAll('.lls-button').forEach(x=>x.classList.toggle('is-active', x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('llsRowRing'), mode==='ring'); show(document.getElementById('llsRingDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('llsRowTotalDim'), isDual); show(document.getElementById('llsTotalDim'), isDual);\n show(document.getElementById('llsRowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('llsPowerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('llsRowPowerDim'), isPower); show(document.getElementById('llsPowerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{\n el.addEventListener(ev,apply); el.addEventListener(ev,()=>paintRange(el));\n });\n });<\/p>\n<p> \/\/ Initial\n [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n })();\n <\/script>\n<\/div>\n<p><!-- Avada-ready (keine <html>\/<head>\/<body>) \u2013 Minimal-Scope-Version, beh\u00e4lt deine Klassenbezeichnungen bei --><\/p>\n<div id=\"logiled-sim\">\n<style>\n \/* Variablen & Reset nur innerhalb des Wrappers *\/\n #logiled-sim{ --bg:#000; --panel:#0f172a; --brand:#06b6d4; --focus-y:60%; --waterline:30%; background:var(--bg); color:#00FFFFFF; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif }\n #logiled-sim *{ box-sizing:border-box; margin:0; padding:0 }<\/p>\n<p> \/* Rahmen *\/\n #logiled-sim .frame{ width:100%; padding:4px; border-radius:28px; overflow:visible; background:linear-gradient(135deg,#009fe3 0%,#ffffff 50%,#009fe3 100%) }\n #logiled-sim .frame-inner{ border-radius:26px; overflow:visible; background:radial-gradient(1200px 600px at 50% -10%, #111b33 0%, #0b1220 40%, #070b12 100%); padding:clamp(12px,2.5vw,18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04) }<\/p>\n<p> \/* Layout *\/\n #logiled-sim .wrap{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(14px,2vw,22px); width:100%; padding:0 clamp(8px,2vw,40px) clamp(12px,2.5vw,24px); align-items:stretch }\n @media (max-width:1100px){ #logiled-sim .wrap{ grid-template-columns:1fr } }<\/p>\n<p> \/* B\u00fchne \u2013 feste Ratio *\/\n #logiled-sim .stage{ position:relative; background:#000; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.07); box-shadow:0 10px 40px rgba(0,0,0,.45); width:100% }\n #logiled-sim .stage::before{ content:\"\"; display:block; aspect-ratio:40\/27 }<\/p>\n<p> \/* Bild-Layer (hart gegen Theme-Resets) *\/\n #logiled-sim .layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--focus-y); display:block; transition:opacity .28s ease, filter .28s ease; pointer-events:none; max-width:none !important }\n #logiled-sim .lighten{ mix-blend-mode:lighten }\n #logiled-sim .z-base{ z-index:0 } #logiled-sim .z-dual{ z-index:1 } #logiled-sim .z-power{ z-index:2 } #logiled-sim .z-ring{ z-index:3 }<\/p>\n<p> \/* Unterwasser-Maske *\/\n #logiled-sim .underwaterMask{ -webkit-mask-image:linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline)); mask-image:linear-gradient(to bottom, transparent var(--waterline), #fff var(--waterline)) }<\/p>\n<p> \/* Glow & Wasser *\/\n #logiled-sim .glow-overlay{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; mix-blend-mode:screen; background:radial-gradient(160% 110% at 50% 62%, rgba(255,255,255,.12) 0%, rgba(0,255,255,.10) 18%, rgba(0,0,0,0) 52%); filter:blur(10px); transition:opacity .25s ease }\n #logiled-sim .water-overlay{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; transition:opacity .28s ease; mix-blend-mode:multiply; background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%) }<\/p>\n<p> \/* Panel *\/\n #logiled-sim .panel{ background:linear-gradient(180deg,#0f172a,#0b1220); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 8px 30px rgba(0,0,0,.35); width:100%; position:relative; overflow:hidden; height:100%; min-height:0 }\n #logiled-sim .panel::before{ content:\"\"; position:absolute; inset:0; pointer-events:none; opacity:.24; background-image:url('https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/FB.png'); background-position:center center; background-size:cover; background-repeat:no-repeat }\n #logiled-sim .panel h1{ position:relative; margin-top:6px; margin-bottom:8px; text-align:center; font-size:clamp(18px,4vw,36px); font-weight:800; color:#fff; z-index:1 }<\/p>\n<p> \/* Buttons (scoped .btn) *\/\n #logiled-sim .modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; position:relative; z-index:1 }\n #logiled-sim .btn{ padding:12px; border:none; border-radius:10px; background:#1f2937; color:#e5e7eb; cursor:pointer; font-weight:650; transition:transform .06s ease, box-shadow .2s ease; display:inline-block; text-align:center }\n #logiled-sim .btn:hover{ box-shadow:0 0 0 2px rgba(6,182,212,.25) inset }\n #logiled-sim .btn:active{ transform:translateY(1px) }\n #logiled-sim .btn.active{ background:var(--brand); color:#001014; box-shadow:0 0 0 2px rgba(0,0,0,.15) inset }<\/p>\n<p> \/* Reglerbereich *\/\n #logiled-sim .section{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; display:grid; gap:10px; width:100%; position:relative; z-index:1 }\n #logiled-sim .row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center }\n #logiled-sim label{ font-size:13px; color:#cbd5e1 }<\/p>\n<p> \/* Range Slider *\/\n #logiled-sim input[type=range]{ width:100%; appearance:none; -webkit-appearance:none; accent-color:var(--brand); --p:100%; height:8px; border-radius:999px; outline:none; background:linear-gradient(to right,var(--brand) 0,var(--brand) var(--p),rgba(255,255,255,.18) var(--p),rgba(255,255,255,.18) 100%) }\n #logiled-sim input[type=range]::-webkit-slider-runnable-track{ height:8px; background:transparent; border-radius:999px }\n #logiled-sim input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#0b1220; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(6,182,212,.22); margin-top:-5px }\n #logiled-sim input[type=range]::-moz-range-track{ height:8px; background:rgba(255,255,255,.18); border:none; border-radius:999px }\n #logiled-sim input[type=range]::-moz-range-progress{ height:8px; background:var(--brand); border:none; border-radius:999px }\n #logiled-sim input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#0b1220; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(6,182,212,.22) }<\/p>\n<p> #logiled-sim .value{ min-width:68px; text-align:right; color:#e5e7eb; font-variant-numeric:tabular-nums }\n #logiled-sim .hidden{ display:none }<\/p>\n<p> \/* Mobile *\/\n @media (max-width:820px){\n #logiled-sim{ --bg:transparent }\n #logiled-sim .wrap{ display:flex; flex-direction:column; gap:12px; padding:0 10px 14px }\n #logiled-sim .panel{ order:2; padding:12px; height:auto }\n #logiled-sim .panel::before{ background-position:center right 6px; background-size:auto 86%; opacity:.16 }\n #logiled-sim .modes{ grid-template-columns:repeat(2,1fr); gap:10px }\n #logiled-sim .btn{ padding:14px; font-size:15px; border-radius:12px }\n #logiled-sim .section{ gap:12px }\n #logiled-sim .row{ grid-template-columns:1fr }\n #logiled-sim .value{ display:none }\n #logiled-sim input[type=range]{ height:34px }\n #logiled-sim label{ font-size:14px }\n }\n <\/style>\n<div class=\"page\">\n<div class=\"frame\">\n<div class=\"frame-inner\">\n <main class=\"wrap\"><\/p>\n<figure class=\"stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" id=\"imgBase\" class=\"layer z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgPowerW\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgPowerC\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgRing\" class=\"layer z-ring lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgDualC\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><br \/>\n <img data-recalc-dims=\"1\" id=\"imgDualW\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\" loading=\"eager\" decoding=\"async\"><\/p>\n<div id=\"glowOverlay\" class=\"glow-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<div id=\"waterOverlay\" class=\"water-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1>LogiLED Simulator<\/h1>\n<div class=\"modes\">\n <button class=\"btn btn-off active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"btn btn-ring\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"btn btn-dual-c\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-dual-w\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-c\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-w\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"section\">\n<div id=\"rowRing\" class=\"row hidden\">\n <label for=\"ringDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"ringDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"ringDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\"><\/p>\n<div id=\"rowTotalDim\" class=\"row hidden\">\n <label for=\"totalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"totalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"totalDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\"><\/p>\n<div id=\"rowPowerTemp\" class=\"row hidden\">\n <label for=\"powerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"value\"><span id=\"powerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"powerTemp\" class=\"hidden\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\"><\/p>\n<div id=\"rowPowerDim\" class=\"row hidden\">\n <label for=\"powerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"powerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"powerDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script>\n (function(){\n \/\/ Scope alle Events auf den Wrapper, nicht auf document\n const root = document.getElementById('logiled-sim');\n \/\/ Ebenen\n const imgRing = document.getElementById('imgRing');\n const imgDualC= document.getElementById('imgDualC');\n const imgDualW= document.getElementById('imgDualW');\n const imgPW = document.getElementById('imgPowerW');\n const imgPC = document.getElementById('imgPowerC');\n const water = document.getElementById('waterOverlay');\n const glow = document.getElementById('glowOverlay');\n \/\/ Regler\n const ringDim = document.getElementById('ringDim');\n const powerDim = document.getElementById('powerDim');\n const totalDim = document.getElementById('totalDim');\n const powerTemp= document.getElementById('powerTemp');\n \/\/ Readouts\n const ringDimVal = document.getElementById('ringDimVal');\n const powerDimVal = document.getElementById('powerDimVal');\n const totalDimVal = document.getElementById('totalDimVal');\n const powerTempVal= document.getElementById('powerTempVal');<\/p>\n<p> let mode = 'off';\n const MIN_BRIGHT=0.5, GAMMA=1.2, BOOST=1.4;\n const MODE_ATTEN={ ring:0.80, power:0.90, dual:1.20 };<\/p>\n<p> const clamp01 = x => Math.max(0, Math.min(1, x));\n const brightnessBase = p => (MIN_BRIGHT + (1-MIN_BRIGHT) * Math.pow(clamp01(p), GAMMA));\n const brightBoosted = p => Math.min(BOOST, brightnessBase(p) * BOOST);\n const brightFinal = (p,modeKey) => brightBoosted(p) * MODE_ATTEN[modeKey];<\/p>\n<p> function paintRange(el){ const min=+el.min||0, max=+el.max||100, val=(+el.value-min)\/(max-min)*100; el.style.setProperty('--p', val+'%'); }\n function setGlowAndWaterByBrightness(b){ const bNorm=Math.min(1,b); const glowIntensity=Math.max(0,(bNorm-MIN_BRIGHT)\/(1-MIN_BRIGHT)); glow.style.opacity=(glowIntensity*0.4).toFixed(3); water.style.opacity=(1-bNorm).toFixed(3); }\n const hidePower=()=>{ imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual =()=>{ imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent=ringDim.value; powerDimVal.textContent=powerDim.value; totalDimVal.textContent=totalDim.value; powerTempVal.textContent=powerTemp.value;\n if(mode==='off'){ [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{ el.style.opacity=0; el.style.filter='brightness(0)'; }); glow.style.opacity=0; water.style.opacity=0; return; }\n if(mode==='ring'){ const p=Number(ringDim.value)\/100, b=brightFinal(p,'ring'); hideDual(); hidePower(); imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`; setGlowAndWaterByBrightness(b); return; }\n if(mode==='dual_cold'||mode==='dual_warm'){\n const p=Number(totalDim.value)\/100, b=brightFinal(p,'dual');\n const t=Number(powerTemp.value), defT=(mode==='dual_cold')?6500:3000;\n const isDef=(t===defT), blend=(isDef && p>0.99)?(p-0.99)\/0.01:0;\n imgDualC.style.opacity=(mode==='dual_cold')?blend:0; imgDualW.style.opacity=(mode==='dual_warm')?blend:0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b); return;\n }\n if(mode==='power_cold'||mode==='power_warm'){\n const p=Number(powerDim.value)\/100, b=brightFinal(p,'power');\n const t=Number(powerTemp.value), warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b); return;\n }\n }<\/p>\n<p> const show=(el,yes)=> el.classList.toggle('hidden',!yes);<\/p>\n<p> root.addEventListener('click', e=>{\n const b=e.target.closest('.btn[data-mode]'); if(!b) return;\n mode=b.dataset.mode;\n root.querySelectorAll('.btn').forEach(x=>x.classList.toggle('active', x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('rowRing'), mode==='ring');\n show(document.getElementById('ringDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('rowTotalDim'), isDual); show(document.getElementById('totalDim'), isDual);\n show(document.getElementById('rowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('powerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('rowPowerDim'), isPower); show(document.getElementById('powerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{ el.addEventListener(ev,apply); el.addEventListener(ev,()=>paintRange(el)); });\n });<\/p>\n<p> [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n })();\n <\/script>\n<\/div>\n<p>radius:50%;background:#0b1220;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(6,182,212,.22)}<\/p>\n<p> .value{min-width:68px;text-align:right;color:#e5e7eb;font-variant-numeric:tabular-nums}<br \/>\n .hidden{display:none}<\/p>\n<p> \/* Mobile (ohne Ratio-Wechsel \u2192 Wasserlinie bleibt fix) *\/<br \/>\n @media (max-width:820px){<br \/>\n .wrap{display:flex;flex-direction:column;gap:12px;padding:0 10px 14px}<br \/>\n .panel{order:2;padding:12px;height:auto}<br \/>\n .panel::before{background-position:center right 6px;background-size:auto 86%;opacity:.16}<br \/>\n .modes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}<br \/>\n .btn{padding:14px;font-size:15px;border-radius:12px}<br \/>\n .section{gap:12px}<br \/>\n .row{grid-template-columns:1fr}<br \/>\n .value{display:none}<br \/>\n input[type=range]{height:34px}<br \/>\n label{font-size:14px}<br \/>\n :root { --bg: transparent; }<br \/>\n }<br \/>\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"page\">\n<div class=\"frame\">\n<div class=\"frame-inner\">\n <main class=\"wrap\"><\/p>\n<figure class=\"stage\" aria-live=\"polite\">\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"imgBase\" class=\"layer z-base\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?w=1100&ssl=1\" alt=\"Scheinwerfer aus\"><br \/>\n <!-- Alle Licht-Layer + Dual-Layer nur unter Wasser maskiert --><br \/>\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"imgPowerW\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/6.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power warmwei\u00df\"><br \/>\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"imgPowerC\" class=\"layer z-power lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/5.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Power kaltwei\u00df\"><br \/>\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"imgRing\" class=\"layer z-ring lighten underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/2.jpg?w=1100&ssl=1\" style=\"opacity:1;filter:brightness(0)\" alt=\"Ambiente-Ring\"><br \/>\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"imgDualC\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/3.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual kaltwei\u00df (voll)\"><br \/>\n <img data-recalc-dims=\"1\" decoding=\"async\" id=\"imgDualW\" class=\"layer z-dual underwaterMask\" src=\"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/4.jpg?w=1100&ssl=1\" style=\"opacity:0\" alt=\"Dual warmwei\u00df (voll)\"><br \/>\n <!-- Glow & Dimm \u2013 ebenfalls unter Wasser maskiert --><\/p>\n<div id=\"glowOverlay\" class=\"glow-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<div id=\"waterOverlay\" class=\"water-overlay underwaterMask\" aria-hidden=\"true\"><\/div>\n<\/figure>\n<aside class=\"panel\" role=\"form\" aria-label=\"Bedienoberfl\u00e4che\">\n<h1>LogiLED Simulator<\/h1>\n<div class=\"modes\">\n <button class=\"btn btn-off active\" data-mode=\"off\">AUS<\/button><br \/>\n <button class=\"btn btn-ring\" data-mode=\"ring\">Ambiente Modus<\/button><br \/>\n <button class=\"btn btn-dual-c\" data-mode=\"dual_cold\">Dual Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-dual-w\" data-mode=\"dual_warm\">Dual Modus warmwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-c\" data-mode=\"power_cold\">Power Modus kaltwei\u00df<\/button><br \/>\n <button class=\"btn btn-power-w\" data-mode=\"power_warm\">Power Modus warmwei\u00df<\/button>\n <\/div>\n<div class=\"section\">\n<div id=\"rowRing\" class=\"row hidden\">\n <label for=\"ringDim\">Ambiente Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"ringDimVal\">0<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"ringDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\"><\/p>\n<div id=\"rowTotalDim\" class=\"row hidden\">\n <label for=\"totalDim\">Gesamt Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"totalDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"totalDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\"><\/p>\n<div id=\"rowPowerTemp\" class=\"row hidden\">\n <label for=\"powerTemp\">Power Farbtemperatur<\/label><\/p>\n<div class=\"value\"><span id=\"powerTempVal\">4500<\/span>K<\/div>\n<\/p><\/div>\n<p> <input id=\"powerTemp\" class=\"hidden\" type=\"range\" min=\"3000\" max=\"6500\" value=\"4500\" step=\"50\"><\/p>\n<div id=\"rowPowerDim\" class=\"row hidden\">\n <label for=\"powerDim\">Power Helligkeit<\/label><\/p>\n<div class=\"value\"><span id=\"powerDimVal\">100<\/span>%<\/div>\n<\/p><\/div>\n<p> <input id=\"powerDim\" class=\"hidden\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" step=\"1\">\n <\/div>\n<\/aside>\n<p> <\/main>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script>\n \/\/ Ebenen\n const imgRing = document.getElementById('imgRing');\n const imgDualC= document.getElementById('imgDualC');\n const imgDualW= document.getElementById('imgDualW');\n const imgPW = document.getElementById('imgPowerW');\n const imgPC = document.getElementById('imgPowerC');\n const water = document.getElementById('waterOverlay');\n const glow = document.getElementById('glowOverlay');<\/p>\n<p> \/\/ Regler\n const ringDim = document.getElementById('ringDim');\n const powerDim = document.getElementById('powerDim');\n const totalDim = document.getElementById('totalDim');\n const powerTemp= document.getElementById('powerTemp');<\/p>\n<p> \/\/ Readouts\n const ringDimVal = document.getElementById('ringDimVal');\n const powerDimVal = document.getElementById('powerDimVal');\n const totalDimVal = document.getElementById('totalDimVal');\n const powerTempVal= document.getElementById('powerTempVal');<\/p>\n<p> let mode = 'off';<\/p>\n<p> \/\/ Helligkeit & Faktoren\n const MIN_BRIGHT = 0.5; \/\/ nie ganz aus (au\u00dfer AUS)\n const GAMMA = 1.2;\n const BOOST = 1.4; \/\/ +20 % Output<\/p>\n<p> \/\/ Eindeutige Helligkeitsreihenfolge: ring < power < dual\n const MODE_ATTEN = {\n ring : 0.80, \/\/ sanfteste Helligkeit\n power: 0.90, \/\/ mittlere Helligkeit (\u2248 5% dunkler als fr\u00fchere Basis)\n dual : 1.20 \/\/ am hellsten\n };\n\n const clamp01 = x => Math.max(0, Math.min(1, x));\n const brightnessBase = p => (MIN_BRIGHT + (1-MIN_BRIGHT) * Math.pow(clamp01(p), GAMMA));\n const brightBoosted = p => Math.min(BOOST, brightnessBase(p) * BOOST);\n const brightFinal = (p,modeKey) => brightBoosted(p) * MODE_ATTEN[modeKey];<\/p>\n<p> \/\/ Slider-Progress (Cyan) zeichnen\n function paintRange(el){\n const min = +el.min || 0, max = +el.max || 100, val = (+el.value - min)\/(max - min) * 100;\n el.style.setProperty('--p', val + '%');\n }<\/p>\n<p> \/\/ Glow & Wasser-Overlay in Abh\u00e4ngigkeit der sichtbaren Helligkeit\n function setGlowAndWaterByBrightness(b){\n const bNorm = Math.min(1, b);\n const glowIntensity = Math.max(0, (bNorm - MIN_BRIGHT) \/ (1 - MIN_BRIGHT));\n glow.style.opacity = (glowIntensity * 0.4).toFixed(3);\n water.style.opacity = (1 - bNorm).toFixed(3);\n }<\/p>\n<p> const hidePower = () => { imgPW.style.opacity=0; imgPW.style.filter='brightness(0)'; imgPC.style.opacity=0; imgPC.style.filter='brightness(0)'; };\n const hideDual = () => { imgDualC.style.opacity=0; imgDualW.style.opacity=0; };<\/p>\n<p> function apply(){\n ringDimVal.textContent = ringDim.value;\n powerDimVal.textContent = powerDim.value;\n totalDimVal.textContent = totalDim.value;\n powerTempVal.textContent= powerTemp.value;<\/p>\n<p> if(mode==='off'){\n [imgRing,imgPW,imgPC,imgDualC,imgDualW].forEach(el=>{el.style.opacity=0; el.style.filter='brightness(0)';});\n glow.style.opacity=0; water.style.opacity=0; return;\n }<\/p>\n<p> if(mode==='ring'){\n const p = Number(ringDim.value)\/100, b = brightFinal(p,'ring');\n hideDual(); hidePower();\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b);\n return;\n }<\/p>\n<p> if(mode==='dual_cold' || mode==='dual_warm'){\n const p = Number(totalDim.value)\/100, b = brightFinal(p,'dual');\n const t = Number(powerTemp.value); const defT = (mode==='dual_cold')?6500:3000;\n const isDef = (t === defT); const blend = isDef && p>0.99 ? (p-0.99)\/0.01 : 0;\n imgDualC.style.opacity = (mode==='dual_cold') ? blend : 0;\n imgDualW.style.opacity = (mode==='dual_warm') ? blend : 0;\n const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n imgRing.style.opacity=1; imgRing.style.filter=`brightness(${b})`;\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b);\n return;\n }<\/p>\n<p> if(mode==='power_cold' || mode==='power_warm'){\n const p = Number(powerDim.value)\/100, b = brightFinal(p,'power');\n const t = Number(powerTemp.value); const warmW=(6500-t)\/(6500-3000), coldW=1-warmW;\n hideDual(); imgRing.style.opacity=0; imgRing.style.filter='brightness(0)';\n imgPW.style.opacity=warmW; imgPW.style.filter=`brightness(${b})`;\n imgPC.style.opacity=coldW; imgPC.style.filter=`brightness(${b})`;\n setGlowAndWaterByBrightness(b);\n return;\n }\n }<\/p>\n<p> const show=(el,yes)=> el.classList.toggle('hidden',!yes);<\/p>\n<p> document.addEventListener('click', e=>{\n const b=e.target.closest('.btn[data-mode]'); if(!b) return;\n mode=b.dataset.mode; document.querySelectorAll('.btn').forEach(x=>x.classList.toggle('active',x===b));\n if(mode==='ring'){ ringDim.value=100; }\n if(mode==='dual_cold'||mode==='dual_warm'){ totalDim.value=100; powerTemp.value=(mode==='dual_cold')?6500:3000; }\n if(mode==='power_cold'||mode==='power_warm'){ powerDim.value=100; powerTemp.value=(mode==='power_cold')?6500:3000; }\n show(document.getElementById('rowRing'), mode==='ring');\n show(document.getElementById('ringDim'), mode==='ring');\n const isDual=(mode==='dual_cold'||mode==='dual_warm');\n show(document.getElementById('rowTotalDim'), isDual); show(document.getElementById('totalDim'), isDual);\n show(document.getElementById('rowPowerTemp'), isDual || mode.startsWith('power')); show(document.getElementById('powerTemp'), isDual || mode.startsWith('power'));\n const isPower=mode.startsWith('power');\n show(document.getElementById('rowPowerDim'), isPower); show(document.getElementById('powerDim'), isPower);\n apply();\n });<\/p>\n<p> ['input','change'].forEach(ev=>{\n [ringDim,powerDim,totalDim,powerTemp].forEach(el=>{\n el.addEventListener(ev,apply);\n el.addEventListener(ev,()=>paintRange(el));\n });\n });<\/p>\n<p> \/\/ Initial\n [ringDim,powerDim,totalDim,powerTemp].forEach(paintRange);\n ringDim.value=100; totalDim.value=100; powerDim.value=100; powerTemp.value=4500; apply();\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LogiLED Simulator LogiLED Simulator AUS Ambiente Modus Dual Modus kaltwei\u00df Dual Modus warmwei\u00df Power Modus kaltwei\u00df Power Modus warmwei\u00df Ambiente […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-17062","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>TESTAREA - Schwimmbadtechnik Ratingen<\/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.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TESTAREA - Schwimmbadtechnik Ratingen\" \/>\n<meta property=\"og:description\" content=\"LogiLED Simulator LogiLED Simulator AUS Ambiente Modus Dual Modus kaltwei\u00df Dual Modus warmwei\u00df Power Modus kaltwei\u00df Power Modus warmwei\u00df Ambiente [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/\" \/>\n<meta property=\"og:site_name\" content=\"Schwimmbadtechnik Ratingen\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T11:02:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/\",\"url\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/\",\"name\":\"TESTAREA - Schwimmbadtechnik Ratingen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/1.png\",\"datePublished\":\"2020-02-14T10:44:56+00:00\",\"dateModified\":\"2025-08-20T11:02:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.schwimmbadtechnik-ratingen.de\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/1.png?fit=1536%2C1024&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.schwimmbadtechnik-ratingen.de\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/1.png?fit=1536%2C1024&ssl=1\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/index.php\\\/testarea\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TESTAREA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/#website\",\"url\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/\",\"name\":\"Schwimmbadtechnik Ratingen\",\"description\":\"MTS-Produkte\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/#organization\",\"name\":\"MTS-Produkte GmbH\",\"url\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.schwimmbadtechnik-ratingen.de\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/MTS_Logo_2015_800_retina.jpg?fit=800%2C130&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.schwimmbadtechnik-ratingen.de\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/MTS_Logo_2015_800_retina.jpg?fit=800%2C130&ssl=1\",\"width\":800,\"height\":130,\"caption\":\"MTS-Produkte GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.schwimmbadtechnik-ratingen.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TESTAREA - Schwimmbadtechnik Ratingen","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.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/","og_locale":"de_DE","og_type":"article","og_title":"TESTAREA - Schwimmbadtechnik Ratingen","og_description":"LogiLED Simulator LogiLED Simulator AUS Ambiente Modus Dual Modus kaltwei\u00df Dual Modus warmwei\u00df Power Modus kaltwei\u00df Power Modus warmwei\u00df Ambiente [...]","og_url":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/","og_site_name":"Schwimmbadtechnik Ratingen","article_modified_time":"2025-08-20T11:02:00+00:00","og_image":[{"url":"https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/","url":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/","name":"TESTAREA - Schwimmbadtechnik Ratingen","isPartOf":{"@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/#primaryimage"},"image":{"@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/#primaryimage"},"thumbnailUrl":"https:\/\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png","datePublished":"2020-02-14T10:44:56+00:00","dateModified":"2025-08-20T11:02:00+00:00","breadcrumb":{"@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/#primaryimage","url":"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?fit=1536%2C1024&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2025\/08\/1.png?fit=1536%2C1024&ssl=1","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/testarea\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.schwimmbadtechnik-ratingen.de\/"},{"@type":"ListItem","position":2,"name":"TESTAREA"}]},{"@type":"WebSite","@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/#website","url":"https:\/\/www.schwimmbadtechnik-ratingen.de\/","name":"Schwimmbadtechnik Ratingen","description":"MTS-Produkte","publisher":{"@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.schwimmbadtechnik-ratingen.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/#organization","name":"MTS-Produkte GmbH","url":"https:\/\/www.schwimmbadtechnik-ratingen.de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2016\/03\/MTS_Logo_2015_800_retina.jpg?fit=800%2C130&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.schwimmbadtechnik-ratingen.de\/wp-content\/uploads\/2016\/03\/MTS_Logo_2015_800_retina.jpg?fit=800%2C130&ssl=1","width":800,"height":130,"caption":"MTS-Produkte GmbH"},"image":{"@id":"https:\/\/www.schwimmbadtechnik-ratingen.de\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P7u58y-4rc","_links":{"self":[{"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/pages\/17062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/comments?post=17062"}],"version-history":[{"count":86,"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/pages\/17062\/revisions"}],"predecessor-version":[{"id":21396,"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/pages\/17062\/revisions\/21396"}],"wp:attachment":[{"href":"https:\/\/www.schwimmbadtechnik-ratingen.de\/index.php\/wp-json\/wp\/v2\/media?parent=17062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}