{"id":1338,"date":"2026-03-10T15:16:20","date_gmt":"2026-03-10T15:16:20","guid":{"rendered":"https:\/\/www.fritzkohle.de\/?page_id=1338"},"modified":"2026-03-11T09:25:10","modified_gmt":"2026-03-11T09:25:10","slug":"1338-2","status":"publish","type":"page","link":"https:\/\/www.fritzkohle.de\/?page_id=1338","title":{"rendered":"LES Film \/ Media Production &amp; Budget Sustainability Calculator"},"content":{"rendered":"\n<p><strong>How I created this calculator:<\/strong><br><br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uploaded the LES model to Gemini. You can find the LES model <a href=\"https:\/\/www.tandfonline.com\/doi\/abs\/10.1080\/25741136.2025.2587986\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/li>\n\n\n\n<li>Uploaded a Film TV Media Top Cover Excel sheet. You can find one <a href=\"https:\/\/www.studiobinder.com\/film-production-documents\/\" target=\"_blank\" rel=\"noreferrer noopener\">here.<\/a><br><br><\/li>\n<\/ul>\n\n\n\n<p>I prompted Gemini to apply the LES model, then integrate the sustainable production value chain and cost factors from the Top Cover sheet to design an app that allows a production to enter critical data. The app is a basic model that you can use for free. The calculator will not remember your data input or outcome.<br><br><\/p>\n\n\n\n<p><strong>Disclaimer:<\/strong> This is a work in progress, but it can be considered a prototype where AI synthesizes a framework, like the LES model, with a standard industry top cover sheet and cost factors to arrive at a custom-made sustainability calculator.<br><br><\/p>\n\n\n\n<p>Using the LES model combined with AI, a production can develop its own tailor-made sustainability app. The user is required to evaluate each cost factor in the app regarding sustainability based on project activity on a scale from 0\u201310. A score of 5 equals the default minimum sustainability standard. For this to work, the user must have a basic understanding of sustainability practices. The sustainable production value chain in the link above can help create that understanding. <br><br><\/p>\n\n\n\n<p><a href=\"https:\/\/wearealbert.org\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Albert<\/a> and the <a href=\"https:\/\/www.sustainableentertainmentalliance.org\/toolkit\" target=\"_blank\" rel=\"noopener\" title=\"\">Green Production Guide<\/a> offer valuable tools that can be used in conjuntion with this app to arrive at a reliable LES score. For example a positive Albert or Green Production Guide evaluation can justify a score of 5 or higher in the corresponding LES category. For more details review the case stuides in the research paper.<br><br><\/p>\n\n\n\n<p>It is tempting and easy to cheat with this calculator, which will only be of use if the production team has a sincere wish to be sustainable. This app generates a LES score that gives a reasonable indication of how sustainable a production really is only when reliable data is entered to the best knowledge of the user.<br><br><\/p>\n\n\n\n<p>The calculator will then arrive at the LES or sustainability score: &lt; 5 (not sustainable) or &gt; 5 (sustainable). The calculator will also calculate the budget if you add known costs.<br><\/p>\n\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>LES Sustainability and Budget Calculator<\/title>\n    <!-- Tailwind CSS for modern styling -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- React and Babel for single-file interactivity -->\n    <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&display=swap');\n        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }\n        input[type=range] { accent-color: #10b981; }\n        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }\n        \n        .no-scrollbar::-webkit-scrollbar { display: none; }\n        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    <\/style>\n<\/head>\n<body class=\"text-slate-900\">\n    <div id=\"root\"><\/div>\n\n    <script type=\"text\/babel\">\n        const { useState, useMemo, Fragment, useEffect } = React;\n\n        \/\/ --- GLOBAL CONSTANTS ---\n        const weights = { wp: 0.3, wc: 0.2, wl1: 0.2, wl2: 0.3, wd: 0.1 };\n\n        const currencies = [\n            { symbol: '\u20ac', code: 'EUR' },\n            { symbol: '$', code: 'USD' }, \n            { symbol: '\u00a3', code: 'GBP' },\n            { symbol: '\u00a5', code: 'JPY' }\n        ];\n\n        const distDescriptions = {\n            d1: { 0: \"No selection.\", 1: \"Level 1: Local release. Minimal transmission footprint.\", 2: \"Level 2: National broadcast or theatrical run.\", 3: \"Level 3: Multi-territory HD distribution.\", 4: \"Level 4: Global Premium saturation.\", 5: \"Level 5: Global Saturation. Universal load.\" },\n            d2: { 0: \"No selection.\", 1: \"Level 1: Low-impact static hosting.\", 2: \"Level 2: Standard HD VOD streaming.\", 3: \"Level 3: Major VOD (4K) with CDN caching.\", 4: \"Level 4: Global CDN replication (HDR).\", 5: \"Level 5: Extreme Concurrent 8K\/HDR load.\" },\n            d3: { 0: \"No selection.\", 1: \"Level 1: Micro-territory city focus.\", 2: \"Level 2: Domestic country-wide reach.\", 3: \"Level 3: Regional block reach (e.g., EU\/NA).\", 4: \"Level 4: Intercontinental reach.\", 5: \"Level 5: Universal global saturation.\" }\n        };\n\n        \/\/ --- SUB-COMPONENTS ---\n\n        const Icon = ({ name, size = 20, className = \"\" }) => {\n            const icons = {\n                leaf: <path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8a7 7 0 0 1-7 7c-1.18 0-2.34-.3-3.39-.86L11 20z\" \/>,\n                settings: <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\" \/>,\n                users: <Fragment><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/Fragment>,\n                film: <Fragment><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M7 3v18M17 3v18M3 7h4M3 12h4M3 17h4M17 7h4M17 12h4M17 17h4\"\/><\/Fragment>,\n                globe: <Fragment><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a14.5 14.5 0 0 0 0 20M2 12h20\"\/><\/Fragment>,\n                info: <Fragment><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4M12 8h.01\"\/><\/Fragment>,\n                alert: <Fragment><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\"\/><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\"\/><\/Fragment>,\n                trend: <polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\" \/>,\n                landmark: <Fragment><line x1=\"3\" x2=\"21\" y1=\"22\" y2=\"22\"\/><line x1=\"6\" x2=\"6\" y1=\"18\" y2=\"11\"\/><line x1=\"10\" x2=\"10\" y1=\"18\" y2=\"11\"\/><line x1=\"14\" x2=\"14\" y1=\"18\" y2=\"11\"\/><line x1=\"18\" x2=\"18\" y1=\"18\" y2=\"11\"\/><polygon points=\"12 2 20 7 4 7 12 2\"\/><\/Fragment>,\n                equal: <Fragment><line x1=\"5\" x2=\"19\" y1=\"9\" y2=\"9\"\/><line x1=\"5\" x2=\"19\" y1=\"15\" y2=\"15\"\/><\/Fragment>,\n                coins: <Fragment><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18.1\"\/><path d=\"M7 6h1v4\"\/><\/Fragment>\n            };\n            return (\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>{icons[name]}<\/svg>\n            );\n        };\n\n        const MiniCard = ({ label, cost, sym }) => (\n            <div className=\"bg-white p-4 rounded-2xl border border-slate-100 shadow-sm text-center\">\n                <p className=\"text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1\">{label}<\/p>\n                <p className=\"text-sm font-black text-slate-800 tracking-tighter\">{sym}{(cost || 0).toLocaleString(undefined, { maximumFractionDigits: 0 })}<\/p>\n            <\/div>\n        );\n\n        const RoleBudgetInput = ({ label, data, onChange, sym, color = \"emerald\" }) => (\n            <div className={`bg-${color}-800\/40 border border-${color}-700\/50 p-4 rounded-2xl shadow-sm space-y-3`}>\n                <label className={`text-[10px] font-bold text-${color}-300 uppercase tracking-wider block mb-2 leading-none h-4 overflow-hidden`}>{label}<\/label>\n                <div className=\"grid grid-cols-3 gap-2\">\n                    <div className=\"space-y-1 text-center\">\n                        <span className={`text-[8px] uppercase font-black text-${color}-500 block`}>Rate<\/span>\n                        <div className=\"relative\">\n                            <span className={`absolute left-1.5 top-1.5 text-${color}-500 font-bold text-[10px]`}>{sym}<\/span>\n                            <input type=\"number\" step=\"0.01\" value={data.rate || ''} onChange={(e) => onChange('rate', e.target.value)} className={`w-full bg-${color}-900\/50 p-1.5 pl-4 text-[10px] font-bold text-white rounded-lg outline-none focus:ring-1 focus:ring-${color}-400 placeholder:text-${color}-800`} placeholder=\"0\" \/>\n                        <\/div>\n                    <\/div>\n                    <div className=\"space-y-1 text-center\">\n                        <span className={`text-[8px] uppercase font-black text-${color}-500 block`}>Amount<\/span>\n                        <input type=\"number\" step=\"1\" value={data.amount || ''} onChange={(e) => onChange('amount', e.target.value)} className={`w-full bg-${color}-900\/50 p-1.5 text-[10px] font-bold text-white rounded-lg outline-none focus:ring-1 focus:ring-${color}-400 text-center placeholder:text-${color}-800`} placeholder=\"0\" \/>\n                    <\/div>\n                    <div className=\"space-y-1 text-center\">\n                        <span className={`text-[8px] uppercase font-black text-${color}-500 block`}>Total<\/span>\n                        <div className={`w-full bg-${color}-950\/50 p-1.5 text-[10px] font-black text-${color}-300 rounded-lg border border-${color}-800\/50 truncate`}>\n                            {sym}{(data.total || 0).toLocaleString(undefined, { maximumFractionDigits: 0 })}\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        );\n\n        const AssessmentRow = ({ id, item, sym, onChange, color, noSlider = false }) => {\n            const colorMap = { emerald: 'text-emerald-600', blue: 'text-blue-600', indigo: 'text-indigo-600', teal: 'text-teal-600' };\n            if (!item) return null;\n            return (\n                <div className=\"group relative p-4 rounded-2xl border border-slate-50 hover:border-slate-200 transition-all duration-300 bg-white shadow-sm\">\n                    <div className=\"grid grid-cols-1 md:grid-cols-12 gap-6 items-center text-center md:text-left\">\n                        <div className={noSlider ? \"md:col-span-12\" : \"md:col-span-6\"}>\n                            <div className=\"flex flex-col md:flex-row items-center md:items-start justify-between mb-1\">\n                                <div className=\"space-y-1 text-center md:text-left\">\n                                    <label className=\"text-sm font-bold text-slate-800 block leading-none\">{item.label}<\/label>\n                                    {item.sub && <p className={`text-[8px] font-black uppercase ${colorMap[color]} tracking-tight leading-none text-left`}>{item.sub}<\/p>}\n                                <\/div>\n                                {(!item.isPersonnel && item.greenCert !== undefined && !item.hideItemCost) && (\n                                    <div className=\"flex items-center gap-2 bg-slate-50 px-2 py-1 rounded-lg border border-slate-200 shadow-sm mt-2 md:mt-0 h-fit\">\n                                        <input type=\"checkbox\" checked={item.greenCert} onChange={(e) => onChange(id, 'greenCert', e.target.checked)} className=\"w-3 h-3 rounded text-emerald-600 focus:ring-emerald-500 cursor-pointer\" \/>\n                                        <label className=\"text-[9px] font-black uppercase text-slate-500 cursor-pointer whitespace-nowrap\">Green Certification<\/label>\n                                    <\/div>\n                                )}\n                            <\/div>\n                            <p className=\"text-[10px] text-slate-400 italic leading-tight mb-3 text-center md:text-left\">{item.info}<\/p>\n                            {!item.hideItemCost && (\n                                <div className=\"grid grid-cols-3 gap-3\">\n                                    <div className=\"space-y-1 text-center\"><span className=\"text-[8px] uppercase font-black text-slate-400 leading-none block\">Rate<\/span><input type=\"number\" step=\"0.01\" className=\"w-full bg-white border border-slate-200 rounded-lg p-1.5 text-[10px] font-bold outline-none focus:ring-1 focus:ring-emerald-400 shadow-sm\" value={item.rate || ''} onChange={(e) => onChange(id, 'rate', e.target.value)}\/><\/div>\n                                    <div className=\"space-y-1 text-center\"><span className=\"text-[8px] uppercase font-black text-slate-400 leading-none block\">Amount<\/span><input type=\"number\" step=\"1\" className=\"w-full bg-white border border-slate-200 rounded-lg p-1.5 text-[10px] font-bold outline-none focus:ring-1 focus:ring-emerald-400 shadow-sm text-center\" value={item.amount || ''} onChange={(e) => onChange(id, 'amount', e.target.value)}\/><\/div>\n                                    <div className=\"space-y-1 text-center\"><span className=\"text-[8px] uppercase font-black text-slate-400 leading-none block\">Total<\/span><div className=\"w-full bg-slate-50 border border-slate-200 rounded-lg p-1.5 text-[10px] font-black text-slate-700 truncate text-center\">{sym}{(item.cost || 0).toLocaleString(undefined, { maximumFractionDigits: 0 })}<\/div><\/div>\n                                <\/div>\n                            )}\n                        <\/div>\n                        {!noSlider && (\n                            <div className=\"md:col-span-6 flex flex-col gap-2\">\n                                <div className=\"flex justify-between items-center text-[10px] font-bold uppercase leading-none\"><span className=\"text-slate-400 tracking-tighter\">Relational Depth<\/span><span className={`${colorMap[color]} font-black`}>{(item.score || 0).toFixed(1)}\/10<\/span><\/div>\n                                <input type=\"range\" min=\"0\" max=\"10\" step=\"0.1\" value={item.score} onChange={(e) => onChange(id, 'score', parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer\" \/>\n                            <\/div>\n                        )}\n                    <\/div>\n                <\/div>\n            );\n        };\n\n        const AssessmentCategory = ({ title, icon, score, totalCost, color, guidance, keys, data, onChange, sym, hideSectionCost = false }) => {\n            const [isOpen, setIsOpen] = useState(false);\n            const colorMap = { emerald: 'border-emerald-100 text-emerald-600', blue: 'border-blue-100 text-blue-600', indigo: 'border-indigo-100 text-indigo-100', teal: 'border-teal-100 text-teal-100' };\n            return (\n                <div className={`bg-white rounded-3xl shadow-sm border overflow-hidden transition-all ${colorMap[color].split(' ')[0]}`}>\n                    <div className=\"p-5 flex items-center justify-between cursor-pointer hover:bg-slate-50 transition-colors text-center md:text-left\" onClick={() => setIsOpen(!isOpen)}>\n                        <div className=\"flex items-center gap-4 text-center md:text-left\">\n                            <div className={`p-3 rounded-2xl bg-slate-100 ${colorMap[color].split(' ')[1]}`}>{icon}<\/div>\n                            <div>\n                                <h3 className=\"font-bold text-slate-800 uppercase tracking-tight text-sm text-center md:text-left\">{title}<\/h3>\n                                <p className=\"text-xs font-black text-slate-400 tracking-tight leading-none text-center md:text-left mt-1 text-center md:text-left\">Rating Summary: {(score || 0).toFixed(1)}\/10<\/p>\n                            <\/div>\n                        <\/div>\n                        <div className=\"flex items-center gap-6\">\n                            {!hideSectionCost && (\n                                <div className=\"text-right\">\n                                    <p className=\"text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1 text-center md:text-right\">Section Cost<\/p>\n                                    <p className=\"text-xl font-black text-slate-700 leading-none\">{sym}{(totalCost || 0).toLocaleString(undefined, { maximumFractionDigits: 0 })}<\/p>\n                                <\/div>\n                            )}\n                            {isOpen ? <div className=\"text-slate-300 text-xs\">\u25b2<\/div> : <div className=\"text-slate-300 text-xs\">\u25bc<\/div>}\n                        <\/div>\n                    <\/div>\n                    {isOpen && (\n                        <div className=\"p-6 border-t border-slate-50 space-y-8 animate-in slide-in-from-top-4 duration-300 text-center md:text-left\">\n                            <div className=\"p-4 rounded-2xl border bg-white shadow-sm flex gap-3 items-start text-left\">\n                                <Icon name=\"info\" size={18} className=\"shrink-0 mt-0.5 text-slate-400\"\/><p className=\"text-xs text-slate-600 leading-relaxed font-medium\">{guidance}<\/p>\n                            <\/div>\n                            <div className=\"grid grid-cols-1 gap-4\">\n                                {keys.map(key => (\n                                    data[key] ? <AssessmentRow key={key} id={key} item={data[key]} sym={sym} onChange={onChange} color={color} noSlider={data[key].isPersonnel} \/> : null\n                                ))}\n                            <\/div>\n                        <\/div>\n                    )}\n                <\/div>\n            );\n        };\n\n        const App = () => {\n            const [currency, setCurrency] = useState({ symbol: '\u20ac', code: 'EUR' });\n            const [isOpenP, setIsOpenP] = useState(false);\n            const [isOpenC, setIsOpenC] = useState(false);\n            const [isOpenL2, setIsOpenL2] = useState(false);\n            \n            const initRole = () => ({ rate: 0, amount: 0, total: 0 });\n\n            const [atlData, setAtlData] = useState({\n                execProducer: initRole(), producer: initRole(), director: initRole(),\n                talent: initRole(), scoreSoundMix: initRole(), cinematographer: initRole(), \n                editor: initRole(), travelLiving: initRole()\n            });\n\n            const [detailedData, setDetailedData] = useState({\n                \/\/ Section P: Pre-production, Production and Post\n                p_line_prod: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Line Producer\", isPersonnel: true },\n                p_assoc_prod: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Associate Producer\", isPersonnel: true },\n                p_office_pm: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Production Manager\", isPersonnel: true },\n                p_office_coord: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Production Coordinator\", isPersonnel: true },\n                p_office_sec: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Production Secretary\", isPersonnel: true },\n                p_office_runner: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Production Runner\", isPersonnel: true },\n                p_pa: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Production Assistant\", isPersonnel: true },\n                p_office_sust: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Sustainability Coordinator\", isPersonnel: true },\n                p_publicist: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Publicist\", isPersonnel: true },\n                p_srv_insurance: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Insurance\", greenCert: false },\n                \n                p_casting_dir: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Casting Director\", isPersonnel: true },\n                p_supporting_cast: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Supporting Cast\", isPersonnel: true },\n                p_talent_staff: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Talent Staff\", isPersonnel: true },\n                p_srv_talent_exp: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Talent Expenses\", greenCert: false },\n\n                p_ad_1ad: { rate: 0, amount: 0, cost: 0, score: 0, label: \"1st AD\", isPersonnel: true },\n                p_ad_2ad: { rate: 0, amount: 0, cost: 0, score: 0, label: \"2nd AD\", isPersonnel: true },\n                p_ad_3ad: { rate: 0, amount: 0, cost: 0, score: 0, label: \"3rd AD\", isPersonnel: true },\n                p_ad_runner: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Floor Runner\", isPersonnel: true },\n                p_ad_intimacy: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Intimacy Coach\", isPersonnel: true },\n                \n                p_cam_op: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Camera Operator\", isPersonnel: true },\n                p_cam_1ac: { rate: 0, amount: 0, cost: 0, score: 0, label: \"1st AC (Focus Puller)\", isPersonnel: true },\n                p_cam_2ac: { rate: 0, amount: 0, cost: 0, score: 0, label: \"2nd AC (Loader)\", isPersonnel: true },\n                p_cam_dit: { rate: 0, amount: 0, cost: 0, score: 0, label: \"DIT\", isPersonnel: true },\n                p_cam_grip: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Key Grip\", isPersonnel: true },\n                p_srv_cam_equip: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Camera Equipment Rental\", greenCert: false },\n                p_srv_light_equip: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Lighting Equipment Rental\", greenCert: false },\n                \n                p_loc_scout: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Location Scout\", isPersonnel: true },\n                p_srv_loc_fees: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Location Fees\", greenCert: false },\n                p_srv_security: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Set Security\", greenCert: false },\n                p_srv_cleaning: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Cleaning\", greenCert: false },\n                p_srv_shipping: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Baggage \/ Shipping\", greenCert: false },\n                p_srv_studio: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Studio Site Fees\", greenCert: false },\n\n                p_srv_storage: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Digital Storage\", greenCert: false },\n                p_srv_hard_drives: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Hard drives\", greenCert: false },\n                p_srv_cpus: { rate: 0, amount: 0, cost: 0, score: 0, label: \"CPUs\", greenCert: false },\n                p_srv_office_supplies: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Office Supplies\", greenCert: false },\n                p_srv_phone: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Phone\" },\n\n                p_srv_taxi: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Car Service \/ Taxi\", greenCert: false },\n                p_srv_fuel: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Fuel \/ Battery charges\", greenCert: false },\n                p_srv_parking: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Parking\" },\n                p_srv_transport: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Transport Fleet (EV\/Hybrid)\", greenCert: false },\n\n                p_snd_mixer: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Sound Mixer\", isPersonnel: true },\n                p_snd_boom: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Boom Operator\", isPersonnel: true },\n                p_srv_sound_equip: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Sound Equipment Rental\", greenCert: false },\n\n                p_edt_asst: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Assistant Editor\", isPersonnel: true },\n                p_edt_post_sup: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Post Supervisor\", isPersonnel: true },\n                p_projectionist: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Projectionist\", isPersonnel: true },\n                p_srv_edit_stations: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Edit stations\", greenCert: false },\n                p_srv_mix_stage: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Sound mixing stage\", greenCert: false },\n                p_srv_adr_foley: { rate: 0, amount: 0, cost: 0, score: 0, label: \"ADR \/ Foley\", greenCert: false },\n                p_srv_battery: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Mobile Battery (MBU)\", greenCert: false },\n\n                p_snd_effects: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Sound Effects\", isPersonnel: true },\n                p_dlg_editor: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Dialogue editor\", isPersonnel: true },\n                p_fx_editor: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Effects Editor\", isPersonnel: true },\n\n                p_writer: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Writers\", isPersonnel: true },\n                p_composer: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Music composer\", isPersonnel: true },\n                p_arranger: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Music Arranger\", isPersonnel: true },\n                p_musician: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Musicians\", isPersonnel: true },\n                p_vocalist: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Vocalists\", isPersonnel: true },\n                p_srv_copyright: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Copyrights\" },\n\n                p_srv_art: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Art Construction Materials\", greenCert: false },\n                p_srv_wardrobe: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Wardrobe Assets\", greenCert: false },\n                p_srv_makeup: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Makeup Products\", greenCert: false },\n                p_srv_waste: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Waste Management (Zero Waste)\", greenCert: false },\n\n                \/\/ Section C: Narrative Content\n                c_script: { score: 0, label: \"Editorial Influence: Script\", info: \"Normalization: repair vs replace, characters using EVs.\", hideItemCost: true },\n                c_vision: { score: 0, label: \"Director's Vision\", info: \"Sustainability as high-status choice.\", hideItemCost: true },\n                c_mix: { score: 0, label: \"Score & Sound Mix\", info: \"Ethical recording and mastering logic.\", hideItemCost: true },\n                c_planet_direct: { score: 0, label: \"Direct Placement\", sub: \"Central Plot Point\", info: \"Climate change is a central plot point (e.g., a documentary or a drama about a flood).\", hideItemCost: true },\n                c_planet_subtle: { score: 0, label: \"Subtle Placement\", sub: \"Background Integration\", info: \"Environmental actions are baked into the background. Characters might use reusable coffee cups, drive EVs, or eat plant-based meals without the script explicitly mentioning it.\", hideItemCost: true },\n\n                \/\/ Section L1: On-Screen Lifestyle\n                l1_talent: { score: 0, label: \"Talent and Crew: Behavior\", info: \"Normalizing sustainable habits in the frame. Characters and background cast should be seen using refillable bottles, eating plant-based meals, and performing active waste separation without making it the focus of the scene.\", hideItemCost: true },\n                l1_digital: { score: 0, label: \"Digital Well-being\", sub: \"promoting responsible use of AI & social media on screen.\", info: \"Depicting a healthy relationship with technology. Characters are shown putting devices away during social interactions and utilizing AI\/social media in a responsible, non-addictive manner.\", hideItemCost: true },\n                l1_set: { score: 0, label: \"Talent and Crew: Surroundings\", info: \"A set environment that signals a green future. Backgrounds should feature EV charging points, renewable energy sources (solar panels), and an absence of single-use plastics or excessive consumerism.\", hideItemCost: true },\n                l1_wardrobe: { score: 0, label: \"Talent and Crew: Wardrobe\", info: \"Characters should wear 'slow fashion'\u2014vintage, recycled, or durable clothing that is repeated throughout the story, rather than a constant cycle of new, fast-fashion outfits.\", hideItemCost: true },\n\n                \/\/ Section L2: Off-Screen Lifestyle & Policy\n                l2_staff: { score: 0, label: \"Staff & Talent lifestyle\", sub: \"vegetarian \/ vegan, use of public transport\", info: \"Crew members are encouraged to adopt low-impact habits on set, such as bringing their own mugs\/cutlery, opting for vegetarian catering, and practicing digital minimalism.\", hideItemCost: true },\n                l2_outreach: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Community Outreach\", info: \"Active engagement with the local area. This includes hiring local vendors, minimizing noise\/traffic disruption for residents, and donating leftover materials to local charities.\", greenCert: false },\n                l2_wellbeing: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Wellbeing Coordinator\", info: \"A dedicated role to ensure the 'Relational Depth' of the crew. Focuses on mental health, fair working hours, and maintaining a safe, inclusive environment that prevents burnout.\", isPersonnel: true },\n                l2_travel: { rate: 0, amount: 0, cost: 0, score: 0, label: \"Staff and Crew Transport\", info: \"Prioritizing public transport, mandatory carpooling, and the use of EV shuttles for all personnel commutes to and from the location.\", greenCert: false },\n                l2_contract: { score: 0, label: \"Contracts\", info: \"Sustainability requirements are baked into legal agreements. Contracts should include clauses on waste management, ethical sourcing, and fair labor standards.\", hideItemCost: true },\n                l2_digital_well: { score: 0, label: \"Digital Well-being\", sub: \"promoting responsible use of AI & social media off screen.\", info: \"Protecting crew 'headspace' via policy. Implementing a 'right to disconnect' (no emails after hours) and ensuring AI tools are used ethically to assist, not exploit, workers.\", hideItemCost: true },\n                l2_digital_waste: { score: 0, label: \"Digital Waste Policy\", sub: \"managing cloud\/data energy load.\", info: \"Managing the 'invisible' carbon footprint. Policies for regular cloud storage cleanup, using lower-resolution files for internal reviews, and avoiding data redundancy.\", hideItemCost: true },\n                l2_comm: { score: 0, label: \"Communication\", info: \"Ensuring the sustainability mission is clear. Constant updates through digital call sheets, green signage on set, and regular briefings to keep the crew aligned with the LES goals.\", hideItemCost: true },\n                l2_phil: { score: 0, label: \"Philosophy\", info: \"A holistic commitment to 'Relational Sustainability'\u2014valuing human connections and long-term environmental health over short-term production speed or convenience.\", hideItemCost: true },\n\n                \/\/ Section D: Distribution (The Delivery Burden Penalty)\n                d1: { cost: 0, score: 0, label: \"Theatrical & TV Broadcast\", info: \"Accounts for the significant energy load of physical venues (HVAC, high-intensity projection) and the carbon footprint of broadcast transmission infrastructure.\" },\n                d2: { cost: 0, score: 0, label: \"Streaming\/Digital Platforms\", info: \"Accounts for the 'invisible' footprint of data centers, CDN replication, and the energy consumed by end-user devices during playback.\" },\n                d3: { cost: 0, score: 0, label: \"Global Reach & Volume\", info: \"Accounts for the scale of the release. High saturation across multiple territories increases the cumulative data load and physical marketing footprint exponentially.\" }\n            });\n\n            const stats = useMemo(() => {\n                const getTotals = (pre) => {\n                    const keys = Object.keys(detailedData).filter(k => k.startsWith(pre));\n                    if (keys.length === 0) return { avg: 0, cost: 0 };\n                    const sumS = keys.reduce((acc, k) => acc + (detailedData[k].score || 0), 0);\n                    const sumC = keys.reduce((acc, k) => acc + (detailedData[k].cost || 0), 0);\n                    return { avg: sumS \/ keys.length, cost: Math.round(sumC) };\n                };\n                const p = getTotals('p_'), c = getTotals('c_'), l1 = getTotals('l1_'), l2 = getTotals('l2_');\n                const atlCostCalculated = Math.round(Object.values(atlData).reduce((a, b) => a + (b.total || 0), 0));\n                const dSum = (detailedData.d1?.score || 0) + (detailedData.d2?.score || 0) + (detailedData.d3?.score || 0);\n                const dPenalty = dSum * weights.wd;\n                const dCost = Math.round(((detailedData.d1?.cost || 0) + (detailedData.d2?.cost || 0) + (detailedData.d3?.cost || 0)));\n                const scoreNum = ((p.avg * weights.wp) + (c.avg * weights.wc) + (l1.avg * weights.wl1) + (l2.avg * weights.wl2) - dPenalty);\n                const score = isNaN(scoreNum) ? \"0.00\" : scoreNum.toFixed(2);\n                return { p, c, l1, l2, atlCost: atlCostCalculated, dSum, dPenalty, dCost, score };\n            }, [detailedData, atlData]);\n\n            const handleDetailedChange = (key, field, val) => {\n                setDetailedData(prev => {\n                    const item = prev[key];\n                    if (!item) return prev;\n                    let nRate = item.rate || 0, nAmt = item.amount || 0, nScore = item.score || 0, nCert = item.greenCert || false;\n                    if (field === 'rate') nRate = parseFloat(val) || 0;\n                    if (field === 'amount') nAmt = parseFloat(val) || 0;\n                    if (field === 'score') nScore = parseFloat(val) || 0;\n                    if (field === 'greenCert') { nCert = val; nScore = val ? 5 : 0; }\n                    return { ...prev, [key]: { ...item, rate: nRate, amount: nAmt, cost: Math.round(nRate * nAmt), score: nScore, greenCert: nCert } };\n                });\n            };\n\n            const handleAtlChange = (key, field, val) => {\n                setAtlData(prev => {\n                    const role = prev[key];\n                    let nRate = field === 'rate' ? (parseFloat(val) || 0) : role.rate;\n                    let nAmt = field === 'amount' ? (parseFloat(val) || 0) : role.amount;\n                    return { ...prev, [key]: { rate: nRate, amount: nAmt, total: Math.round(nRate * nAmt) } };\n                });\n            };\n\n            const renderSubGroup = (title, keys, color) => (\n                <div key={title} className=\"space-y-4 pt-4\">\n                    <h4 className={`text-[10px] font-black uppercase text-${color}-600 tracking-widest border-b border-slate-100 pb-1`}>{title}<\/h4>\n                    {keys.map(k => (\n                        detailedData[k] ? <AssessmentRow key={k} id={k} item={detailedData[k]} sym={currency.symbol} onChange={handleDetailedChange} color={color} noSlider={detailedData[k].isPersonnel} \/> : null\n                    ))}\n                <\/div>\n            );\n\n            const ScoreBarUI = ({ label, value, color }) => (\n                <div className=\"space-y-2\">\n                    <div className=\"flex justify-between text-[10px] font-bold uppercase text-slate-500 px-1 text-center md:text-left\"><span>{label}<\/span><span className=\"text-slate-700 font-black\">{(value || 0).toFixed(1)} \/ 10<\/span><\/div>\n                    <div className=\"w-full bg-slate-100 h-2.5 rounded-full overflow-hidden border border-slate-50 shadow-inner\">\n                        <div className={`${color} h-full rounded-full transition-all duration-700 ease-out shadow-sm`} style={{ width: `${Math.min(100, (value || 0) * 10)}%` }} \/>\n                    <\/div>\n                <\/div>\n            );\n\n            return (\n                <div className=\"min-h-screen p-4 md:p-8\">\n                    <div className=\"max-w-6xl mx-auto space-y-8\">\n                        <header className=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n                            <div className=\"text-center md:text-left\">\n                                <h1 className=\"text-3xl font-bold text-emerald-800 flex items-center gap-2 justify-center md:justify-start\">\n                                    <Icon name=\"leaf\" className=\"text-emerald-500\" \/>\n                                    LES Sustainability and Budget Calculator\n                                <\/h1>\n                                <p className=\"text-slate-500 mt-1 italic font-medium\">Relational Sustainability Framework \u2022 Comprehensive Multi-Department Evaluator<\/p>\n                            <\/div>\n                            <div className=\"flex gap-4 items-center justify-center\">\n                                <select className=\"bg-white border rounded-xl px-3 py-2 text-sm font-bold shadow-sm outline-none cursor-pointer\" value={currency.code} onChange={(e) => setCurrency(currencies.find(c => c.code === e.target.value))}>\n                                    {currencies.map(c => <option key={c.code} value={c.code}>{c.code} ({c.symbol})<\/option>)}\n                                <\/select>\n                                <div className=\"bg-white px-6 py-4 rounded-2xl shadow-sm border border-emerald-100 text-center min-w-[140px]\">\n                                    <p className=\"text-[10px] font-bold uppercase text-slate-400 mb-1\">Current Score<\/p>\n                                    <p className={`text-4xl font-black ${stats.score >= 5 ? 'text-emerald-600' : 'text-rose-500'}`}>{stats.score}<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/header>\n\n                        <section className=\"bg-emerald-900 text-white p-6 rounded-3xl shadow-lg relative border-b-4 border-emerald-950\">\n                            <div className=\"absolute top-0 right-0 p-8 opacity-10\"><Icon name=\"landmark\" size={120} \/><\/div>\n                            <div className=\"flex flex-col md:flex-row md:items-center justify-between mb-6 relative z-10 gap-4\">\n                                <h2 className=\"text-xl font-bold uppercase text-emerald-300\">Above the Line & Leadership<\/h2>\n                                <div className=\"bg-emerald-800\/50 px-6 py-2 rounded-2xl border border-emerald-700 backdrop-blur-sm text-right\">\n                                    <p className=\"text-[10px] uppercase font-bold text-emerald-300 tracking-widest leading-none mb-1 text-center md:text-right\">Section Overview<\/p>\n                                    <p className=\"text-xl font-black text-center md:text-right\">{currency.symbol}{(stats.atlCost || 0).toLocaleString()}<\/p>\n                                <\/div>\n                            <\/div>\n                            <div className=\"grid grid-cols-1 gap-4 relative z-10\">\n                                {Object.keys(atlData).map(k => (\n                                    <RoleBudgetInput key={k} label={k.replace(\/([A-Z])\/g, ' $1').toUpperCase()} data={atlData[k]} onChange={(f, v) => handleAtlChange(k, f, v)} sym={currency.symbol} \/>\n                                ))}\n                            <\/div>\n                        <\/section>\n\n                        <div className=\"space-y-6\">\n                            <div className=\"bg-white rounded-3xl shadow-sm border border-emerald-100 overflow-hidden\">\n                                <div className=\"p-5 flex items-center justify-between cursor-pointer hover:bg-slate-50\" onClick={() => setIsOpenP(!isOpenP)}>\n                                    <div className=\"flex items-center gap-4 text-center md:text-left\">\n                                        <div className={`p-3 rounded-2xl bg-slate-100 text-emerald-600`}><Icon name=\"settings\" \/><\/div>\n                                        <div><h3 className=\"font-bold text-slate-800 uppercase tracking-tight text-sm text-center md:text-left\">Pre-production, Production and Post (P)<\/h3><p className=\"text-xs font-black text-slate-400\">Rating Avg: {stats.p.avg.toFixed(1)}\/10<\/p><\/div>\n                                    <\/div>\n                                    <div className=\"flex items-center gap-6\">\n                                        <div className=\"text-right hidden md:block\"><p className=\"text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1\">Section Cost<\/p><p className=\"text-xl font-black text-slate-700\">{currency.symbol}{(stats.p.cost || 0).toLocaleString()}<\/p><\/div>\n                                        <div>{isOpenP ? \"\u25b2\" : \"\u25bc\"}<\/div>\n                                    <\/div>\n                                <\/div>\n                                {isOpenP && (\n                                    <div className=\"p-6 border-t border-slate-50 space-y-8 animate-in slide-in-from-top-4 duration-300\">\n                                        <div className=\"p-4 rounded-2xl border bg-white shadow-sm flex gap-3 items-start text-left\"><Icon name=\"info\" size={18} className=\"shrink-0 mt-0.5 text-emerald-600\"\/><p className=\"text-xs text-slate-600 leading-relaxed font-medium\">Operational Footprint: Evaluation of personnel logistics, hardware infrastructure, and facility energy loads per department.<\/p><\/div>\n                                        \n                                        {renderSubGroup(\"Production Management & Admin\", ['p_line_prod', 'p_assoc_prod', 'p_office_pm', 'p_office_coord', 'p_office_sec', 'p_office_runner', 'p_pa', 'p_office_sust', 'p_publicist', 'p_srv_insurance'], \"emerald\")}\n                                        {renderSubGroup(\"Casting & Talent\", ['p_casting_dir', 'p_supporting_cast', 'p_talent_staff', 'p_srv_talent_exp'], \"emerald\")}\n                                        {renderSubGroup(\"Assistant Directors & Set Operations\", ['p_ad_1ad','p_ad_2ad','p_ad_3ad','p_ad_runner','p_ad_intimacy'], \"emerald\")}\n                                        {renderSubGroup(\"Camera & Lighting\", ['p_cam_op','p_cam_1ac','p_cam_2ac','p_cam_dit', 'p_cam_grip', 'p_srv_cam_equip', 'p_srv_light_equip'], \"emerald\")}\n                                        {renderSubGroup(\"Sound Department\", ['p_snd_mixer','p_snd_boom', 'p_srv_sound_equip'], \"emerald\")}\n                                        {renderSubGroup(\"Locations & Logistics\", ['p_loc_scout', 'p_srv_loc_fees', 'p_srv_security', 'p_srv_cleaning', 'p_srv_shipping', 'p_srv_studio'], \"emerald\")}\n                                        {renderSubGroup(\"Office & Technical Infrastructure\", ['p_srv_storage', 'p_srv_hard_drives', 'p_srv_cpus', 'p_srv_office_supplies', 'p_srv_phone'], \"emerald\")}\n                                        {renderSubGroup(\"Transport\", ['p_srv_taxi', 'p_srv_fuel', 'p_srv_parking', 'p_srv_transport'], \"emerald\")}\n                                        {renderSubGroup(\"Wardrobe, Art & Makeup\", ['p_srv_art','p_srv_wardrobe','p_srv_makeup','p_srv_waste'], \"emerald\")}\n                                        {renderSubGroup(\"Editorial & Post-Production\", ['p_edt_asst','p_edt_post_sup', 'p_projectionist', 'p_srv_edit_stations', 'p_srv_mix_stage', 'p_srv_adr_foley', 'p_srv_battery'], \"emerald\")}\n                                        {renderSubGroup(\"Sound Post-Production\", ['p_snd_effects', 'p_dlg_editor', 'p_fx_editor'], \"emerald\")}\n                                        {renderSubGroup(\"Writing & Music\", ['p_writer', 'p_composer', 'p_arranger', 'p_musician', 'p_vocalist', 'p_srv_copyright'], \"emerald\")}\n                                    <\/div>\n                                )}\n                            <\/div>\n                            \n                            <div className=\"bg-white rounded-3xl shadow-sm border border-blue-100 overflow-hidden\">\n                                <div className=\"p-5 flex items-center justify-between cursor-pointer hover:bg-slate-50\" onClick={() => setIsOpenC(!isOpenC)}>\n                                    <div className=\"flex items-center gap-4 text-center md:text-left\">\n                                        <div className={`p-3 rounded-2xl bg-slate-100 text-blue-600`}><Icon name=\"film\" \/><\/div>\n                                        <div><h3 className=\"font-bold text-slate-800 uppercase tracking-tight text-sm text-center md:text-left\">Narrative Content (C)<\/h3><p className=\"text-xs font-black text-slate-400\">Rating Avg: {stats.c.avg.toFixed(1)}\/10<\/p><\/div>\n                                    <\/div>\n                                    <div className=\"flex items-center gap-6\">\n                                        <div>{isOpenC ? \"\u25b2\" : \"\u25bc\"}<\/div>\n                                    <\/div>\n                                <\/div>\n                                {isOpenC && (\n                                    <div className=\"p-6 border-t border-slate-50 space-y-8 animate-in slide-in-from-top-4 duration-300 text-center md:text-left\">\n                                        <div className=\"p-4 rounded-2xl border bg-white shadow-sm flex gap-3 items-start text-left\"><Icon name=\"info\" size={18} className=\"shrink-0 mt-0.5 text-blue-600\"\/><p className=\"text-xs text-slate-600 leading-relaxed font-medium\">Narrative Influence: Evaluation of script choices, creative vision, and the power of normalization through placement.<\/p><\/div>\n                                        {renderSubGroup(\"Creative Leadership\", ['c_script', 'c_vision', 'c_mix'], \"blue\")}\n                                        {renderSubGroup(\"Planet Placement\", ['c_planet_direct', 'c_planet_subtle'], \"blue\")}\n                                    <\/div>\n                                )}\n                            <\/div>\n                            \n                            <AssessmentCategory title=\"On-Screen Lifestyle (L1)\" icon={<Icon name=\"users\" \/>} score={stats.l1.avg} totalCost={0} color=\"indigo\" guidance=\"Visible Normalization: Portrayal of sustainable habits by Talent and Crew on screen, including digital well-being portrayal.\" keys={['l1_talent', 'l1_digital', 'l1_set', 'l1_wardrobe']} data={detailedData} onChange={handleDetailedChange} sym={currency.symbol} hideSectionCost={true} \/>\n                            \n                            <div className=\"bg-white rounded-3xl shadow-sm border border-teal-100 overflow-hidden\">\n                                <div className=\"p-5 flex items-center justify-between cursor-pointer hover:bg-slate-50 text-center md:text-left\" onClick={() => setIsOpenL2(!isOpenL2)}>\n                                    <div className=\"flex items-center gap-4\"><div className=\"p-3 rounded-2xl bg-slate-100 text-teal-600\"><Icon name=\"globe\" \/><\/div><div><h3 className=\"font-bold text-slate-800 uppercase tracking-tight text-sm\">Off-Screen Lifestyle (L2)<\/h3><p className=\"text-xs font-black text-slate-400 mt-1\">Rating Summary: {stats.l2.avg.toFixed(1)}\/10<\/p><\/div><\/div>\n                                    <div className=\"flex items-center gap-6\"><div className=\"text-right hidden md:block\"><p className=\"text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1\">Section Cost<\/p><p className=\"text-xl font-black text-slate-700\">{currency.symbol}{(stats.l2.cost || 0).toLocaleString()}<\/p><\/div><div>{isOpenL2 ? \"\u25b2\" : \"\u25bc\"}<\/div><\/div>\n                                <\/div>\n                                {isOpenL2 && (\n                                    <div className=\"p-6 border-t border-slate-50 space-y-12 animate-in slide-in-from-top-4 duration-300 text-center md:text-left\">\n                                        <div><h4 className=\"text-[10px] font-black uppercase text-teal-600 tracking-[0.2em] mb-4 border-b pb-2 text-left\">I. Lifestyle Factors<\/h4><div className=\"grid grid-cols-1 gap-4\">{['l2_staff', 'l2_outreach', 'l2_wellbeing', 'l2_travel'].map(k => <AssessmentRow key={k} id={k} item={detailedData[k]} sym={currency.symbol} onChange={handleDetailedChange} color=\"teal\" noSlider={detailedData[k]?.isPersonnel} \/>)}<\/div><\/div>\n                                        <div><h4 className=\"text-[12px] font-black uppercase text-teal-600 tracking-[0.1em] mb-1 text-left text-left\">Actionable Sustainability Policy<\/h4><p className=\"text-[9px] font-bold text-teal-500 uppercase mb-4 tracking-widest text-left text-left\">contract, communication, philosophy, digital well-being<\/p><div className=\"grid grid-cols-1 gap-4\">{['l2_contract', 'l2_digital_well', 'l2_digital_waste', 'l2_comm', 'l2_phil'].map(k => <AssessmentRow key={k} id={k} item={detailedData[k]} sym={currency.symbol} onChange={handleDetailedChange} color=\"teal\" noSlider={detailedData[k]?.isPersonnel} \/>)}<\/div><\/div>\n                                    <\/div>\n                                )}\n                            <\/div>\n\n                            <div className=\"bg-white border border-rose-100 rounded-3xl p-6 shadow-sm\">\n                                <div className=\"flex items-center justify-between mb-6 flex-col md:flex-row gap-4 text-center md:text-left\">\n                                    <div className=\"flex items-center gap-3\"><div className=\"p-3 bg-rose-50 text-rose-600 rounded-2xl text-center md:text-left\"><Icon name=\"alert\" size={24}\/><\/div><h3 className=\"font-bold text-slate-800 uppercase tracking-tight\">Distribution Penalty (D)<\/h3><\/div>\n                                    <div className=\"bg-rose-50 px-6 py-2 rounded-2xl border border-rose-100 text-right\"><p className=\"text-[10px] uppercase font-bold text-rose-400 mb-1 text-center md:text-right\">Section Overview<\/p><p className=\"text-xl font-black text-rose-600 text-center md:text-right\">{currency.symbol}{(stats.dCost || 0).toLocaleString()}<\/p><\/div>\n                                <\/div>\n                                <div className=\"p-4 rounded-2xl border bg-white shadow-sm flex gap-3 items-start mb-6\"><Icon name=\"info\" size={18} className=\"shrink-0 mt-0.5 text-rose-600\"\/><p className=\"text-xs text-slate-600 leading-relaxed font-medium\">Delivery Burden: Penalty subtracted directly from LES score based on transmission intensity.<\/p><\/div>\n                                <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">{['d1', 'd2', 'd3'].map(k => (\n                                    <div key={k} className=\"bg-slate-50 p-5 rounded-2xl border border-slate-100 flex flex-col gap-3 min-h-[220px]\">\n                                        <div className=\"flex justify-between items-start flex-col gap-1\">\n                                            <label className=\"text-[10px] font-bold text-slate-500 uppercase pt-1 text-left\">{detailedData[k].label}<\/label>\n                                            <p className=\"text-[9px] text-slate-400 italic leading-tight mb-2 text-left\">{detailedData[k].info}<\/p>\n                                            <div className=\"relative w-full\">\n                                                <span className=\"absolute left-2 top-1.5 text-slate-400 text-[10px] font-bold\">{currency.symbol}<\/span>\n                                                <input type=\"number\" className=\"w-full bg-white border border-slate-200 rounded-lg py-1 pl-5 pr-2 text-[10px] font-bold outline-none focus:ring-1 focus:ring-rose-300 text-center\" value={detailedData[k].cost || ''} onChange={(e) => handleDetailedChange(k, 'cost', e.target.value)} \/>\n                                            <\/div>\n                                        <\/div>\n                                        <select className=\"w-full text-sm p-2 rounded-xl border border-slate-200 bg-white font-bold\" value={detailedData[k].score || 0} onChange={(e) => handleDetailedChange(k, 'score', e.target.value)}><option value=\"0\">Select Level<\/option>{[1,2,3,4,5].map(v => <option key={v} value={v}>Level {v}<\/option>)}<\/select>\n                                        <div className=\"mt-auto pt-2 border-t border-slate-200\"><p className=\"text-[11px] text-slate-500 italic text-center md:text-left\">{distDescriptions[k][detailedData[k].score || 0]}<\/p><\/div>\n                                    <\/div>\n                                ))}<\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 mb-12 text-center md:text-left\">\n                            <div className=\"bg-white p-8 rounded-[2.5rem] shadow-sm border border-slate-200 text-center md:text-left\">\n                                <h3 className=\"font-bold text-lg mb-6 border-b pb-4 text-emerald-800 uppercase tracking-tight justify-center md:justify-start\">LES Formula Summary<\/h3>\n                                <div className=\"space-y-4 mb-6\">\n                                    <ScoreBarUI label=\"P: Production (30%)\" value={stats.p.avg} color=\"bg-emerald-500\" \/>\n                                    <ScoreBarUI label=\"C: Narrative (20%)\" value={stats.c.avg} color=\"bg-blue-500\" \/>\n                                    <ScoreBarUI label=\"L1: On-Screen (20%)\" value={stats.l1.avg} color=\"bg-indigo-500\" \/>\n                                    <ScoreBarUI label=\"L2: Off-Screen (30%)\" value={stats.l2.avg} color=\"bg-teal-500\" \/>\n                                    <ScoreBarUI label=\"D: Penalty (10%)\" value={stats.dSum \/ 1.5} color=\"bg-rose-400\" \/>\n                                <\/div>\n                                <div className=\"bg-emerald-50 border border-emerald-100 p-4 rounded-2xl flex items-center gap-3 text-center md:text-left\">\n                                    <div className=\"w-10 h-10 bg-emerald-500 text-white flex items-center justify-center rounded-full font-black text-sm shrink-0\">5.0<\/div>\n                                    <p className=\"text-[11px] font-bold text-emerald-800 uppercase tracking-tight leading-tight text-left\">Sustainability Threshold: A total score of <strong>5.0 or higher<\/strong> indicates a sustainable production.<\/p>\n                                <\/div>\n                            <\/div>\n                            <div className=\"bg-slate-900 text-white p-8 rounded-[2.5rem] shadow-xl flex flex-col justify-center relative overflow-hidden text-center md:text-left\">\n                                <div className=\"absolute top-0 right-0 p-8 opacity-10 text-center md:text-left\"><Icon name=\"equal\" size={160} \/><\/div>\n                                <div className=\"relative z-10 text-center md:text-left\">\n                                    <p className=\"text-slate-400 text-xs font-black uppercase tracking-[0.3em] mb-4 leading-none\">Mathematical Path<\/p>\n                                    <div className=\"space-y-2 font-mono text-[11px] text-slate-300\">\n                                        <p>+ ({stats.p.avg.toFixed(1)} \u00d7 0.3) + ({stats.c.avg.toFixed(1)} \u00d7 0.2) + ({stats.l1.avg.toFixed(1)} \u00d7 0.2) + ({stats.l2.avg.toFixed(1)} \u00d7 0.3) = {(parseFloat(stats.score) + stats.dPenalty).toFixed(2)}<\/p>\n                                        <p className=\"text-rose-400\">- ({stats.dSum} \u00d7 0.1) = {stats.dPenalty.toFixed(2)}<\/p>\n                                    <\/div>\n                                    <div className=\"mt-8 pt-8 border-t border-slate-800 flex items-end justify-between\">\n                                        <div><p className=\"text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2 leading-none\">Final Evaluation<\/p><h4 className=\"text-2xl font-bold text-center md:text-left\">Total LES Score<\/h4><\/div>\n                                        <p className={`text-7xl font-black tracking-tighter ${stats.score >= 5 ? 'text-emerald-400' : 'text-rose-400'}`}>{stats.score}<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <section className=\"bg-white border border-slate-200 rounded-[2.5rem] p-8 mb-12 shadow-sm text-center\">\n                            <div className=\"flex items-center gap-3 mb-8 justify-center text-center\"><div className=\"p-3 bg-slate-100 text-slate-600 rounded-2xl text-center\"><Icon name=\"coins\" size={24} \/><\/div><div><h2 className=\"text-2xl font-bold text-slate-800 uppercase tracking-tight text-center md:text-left\">Final Financial Summary<\/h2><\/div><\/div>\n                            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4 relative z-10 text-center\">\n                                <MiniCard label=\"Leadership\" cost={stats.atlCost} sym={currency.symbol} \/>\n                                <MiniCard label=\"Prod (P)\" cost={stats.p.cost} sym={currency.symbol} \/>\n                                <MiniCard label=\"Lifestyle (L2)\" cost={stats.l2.cost} sym={currency.symbol} \/>\n                                <MiniCard label=\"Dist (D)\" cost={stats.dCost} sym={currency.symbol} \/>\n                            <\/div>\n                            <div className=\"mt-8 p-8 bg-emerald-900 rounded-[2rem] text-center md:text-left\">\n                                <p className=\"text-emerald-300\/60 text-xs font-black uppercase tracking-[0.2em] mb-1 leading-none text-center md:text-left\">Total Project Investment<\/p>\n                                <h3 className=\"text-4xl font-black text-white text-center md:text-left\">{currency.symbol}{(stats.atlCost + stats.p.cost + stats.l2.cost + stats.dCost).toLocaleString(undefined, { minimumFractionDigits: 0 })}<\/h3>\n                            <\/div>\n                        <\/section>\n                    <\/div>\n                <\/div>\n            );\n        };\n\n        const root = ReactDOM.createRoot(document.getElementById('root'));\n        root.render(<App \/>);\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>How I created this calculator: I prompted Gemini to apply the LES model, then integrate the sustainable production value chain and cost factors from the Top Cover sheet to design an app that allows a production to enter critical data. The app is a basic model that you can use for free. The calculator will &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.fritzkohle.de\/?page_id=1338\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;LES Film \/ Media Production &amp; Budget Sustainability Calculator&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1338","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=\/wp\/v2\/pages\/1338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1338"}],"version-history":[{"count":58,"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=\/wp\/v2\/pages\/1338\/revisions"}],"predecessor-version":[{"id":1413,"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=\/wp\/v2\/pages\/1338\/revisions\/1413"}],"wp:attachment":[{"href":"https:\/\/www.fritzkohle.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}