{"id":10546,"date":"2025-05-28T07:52:52","date_gmt":"2025-05-28T05:52:52","guid":{"rendered":"https:\/\/www.tele-look.com\/web\/?page_id=10546"},"modified":"2026-08-31T18:47:08","modified_gmt":"2026-08-31T16:47:08","slug":"roi-rechner","status":"publish","type":"page","link":"https:\/\/www.tele-look.com\/web\/roi-rechner\/","title":{"rendered":"ROI-Rechner: Ihr Einsparpotenzial berechnen | tele-LOOK"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10546\" class=\"elementor elementor-10546\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-tl_bc_sec_10546 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"tl_bc_sec_10546\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-tl_bc_col_10546\" data-id=\"tl_bc_col_10546\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-tl_bc_widget_10546 elementor-widget elementor-widget-html\" data-id=\"tl_bc_widget_10546\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<style>\n\/* --- TELE-LOOK BREADCRUMB PILL (UNTER HERO) --- *\/\n.breadcrumb-wrap {\n  display: flex !important;\n  justify-content: center !important;\n  width: 100% !important;\n  margin: 1.25rem 0 2rem 0 !important;\n  position: relative !important;\n  z-index: 20 !important;\n}\n.breadcrumb-pill {\n  display: inline-flex !important;\n  align-items: center !important;\n  gap: 0.6rem !important;\n  background: var(--tl-bg-card, #ffffff) !important;\n  border: 1px solid var(--tl-border, #cbd5e1) !important;\n  border-radius: 9999px !important;\n  padding: 0.45rem 1.15rem !important;\n  font-family: 'Montserrat', sans-serif !important;\n  font-size: 0.78rem !important;\n  font-weight: 700 !important;\n  text-transform: uppercase !important;\n  letter-spacing: 0.05em !important;\n  color: var(--tl-text-muted, #64748b) !important;\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;\n  transition: all 0.25s ease !important;\n}\n.breadcrumb-pill a {\n  color: var(--tl-text-secondary, #475569) !important;\n  text-decoration: none !important;\n  transition: color 0.2s ease !important;\n}\n.breadcrumb-pill a:hover {\n  color: #0284c7 !important;\n}\n.breadcrumb-pill .sep {\n  color: var(--tl-text-muted, #94a3b8) !important;\n  opacity: 0.6 !important;\n}\n.breadcrumb-pill .current {\n  color: #0284c7 !important;\n  font-weight: 800 !important;\n}\n[data-theme=\"dark\"] .breadcrumb-pill,\nhtml.dark .breadcrumb-pill,\nbody.dark .breadcrumb-pill,\n.dark .breadcrumb-pill {\n  background: #0f172a !important;\n  border-color: rgba(56, 189, 248, 0.3) !important;\n  color: #94a3b8 !important;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;\n}\n[data-theme=\"dark\"] .breadcrumb-pill a,\nhtml.dark .breadcrumb-pill a,\nbody.dark .breadcrumb-pill a,\n.dark .breadcrumb-pill a {\n  color: #cbd5e1 !important;\n}\n[data-theme=\"dark\"] .breadcrumb-pill a:hover,\nhtml.dark .breadcrumb-pill a:hover,\nbody.dark .breadcrumb-pill a:hover,\n.dark .breadcrumb-pill a:hover {\n  color: #38bdf8 !important;\n}\n[data-theme=\"dark\"] .breadcrumb-pill .current,\nhtml.dark .breadcrumb-pill .current,\nbody.dark .breadcrumb-pill .current,\n.dark .breadcrumb-pill .current {\n  color: #38bdf8 !important;\n}\n<\/style>\n\n\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10546\" class=\"elementor elementor-10546\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-tl_modernized_sec_10546 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"tl_modernized_sec_10546\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-tl_modernized_col_10546\" data-id=\"tl_modernized_col_10546\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-tl_modernized_widget_10546 elementor-widget elementor-widget-html\" data-id=\"tl_modernized_widget_10546\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"de\" data-theme=\"light\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>ROI-Rechner | tele-LOOK Live-Video-Support<\/title>\n  <meta name=\"description\" content=\"Berechnen Sie Ihr Einsparpotenzial mit tele-LOOK in Echtzeit: Reduzieren Sie Fehlfahrten im Kundendienst und steigern Sie Ihre Service-Rendite.\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap\" rel=\"stylesheet\">\n  <style>\n\/* ==========================================================================\n   TELE-LOOK ROI-RECHNER \u2013 MASTER LANDINGPAGE DESIGN (B2B SaaS 2026)\n   - Scope: Vollst\u00e4ndig isoliert auf .tl-app\n   - Standard: Light Mode (mit Theme-Toggle in Navigation)\n   - 100% Inhalts- und Rechner-Logik Erhalt (Echtzeit-Berechnung)\n   - Zero-Glow Standard & Responsive Slider Design\n   ========================================================================== *\/\n\n:root {\n  --tl-transition: 0.25s ease;\n}\n\n\/* LIGHT MODE (Standard) *\/\n[data-theme=\"light\"] .tl-app,\n.tl-app {\n  --tl-bg-base:        #f8fafc;\n  --tl-bg-surface:     #f1f5f9;\n  --tl-bg-card:        #ffffff;\n  --tl-bg-card-hover:  #ffffff;\n  --tl-border:         #e2e8f0;\n  --tl-border-brand:   rgba(6, 182, 212, 0.4);\n  \n  --tl-text-primary:   #0f172a;\n  --tl-text-secondary: #475569;\n  --tl-text-muted:     #64748b;\n  \n  --tl-grad-text:      linear-gradient(90deg, #0284c7 0%, #06b6d4 50%, #10b981 100%);\n  --tl-grad-btn:       linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);\n  \n  --tl-logo-color:     #0f172a;\n  --tl-logo-sub:       #64748b;\n  \n  --tl-pill-bg:        #ffffff;\n  --tl-pill-border:    #cbd5e1;\n  --tl-pill-text:      #475569;\n  \n  --tl-nav-link:       #475569;\n  --tl-nav-link-hover: #0f172a;\n  \n  --tl-slider-track:   #e2e8f0;\n  --tl-slider-thumb:   #0284c7;\n  \n  --tl-calc-box-bg:    #f8fafc;\n  --tl-calc-box-border:#e2e8f0;\n  \n  --tl-result-bg:      linear-gradient(145deg, #f0fdf4, #ecfeff);\n  --tl-result-border:  #67e8f9;\n  \n  --tl-footer-bg:      #0f172a;\n  --tl-header-bg:      rgba(255, 255, 255, 0.95);\n  --tl-dark-section:   #091326;\n  \n  --tl-shadow-card:    0 8px 24px rgba(15, 23, 42, 0.06);\n  --tl-shadow-card-h:  0 16px 36px rgba(15, 23, 42, 0.12);\n}\n\n\/* DARK MODE *\/\n[data-theme=\"dark\"] .tl-app {\n  --tl-bg-base:        #060c1a;\n  --tl-bg-surface:     #0b152d;\n  --tl-bg-card:        rgba(15, 27, 54, 0.65);\n  --tl-bg-card-hover:  rgba(20, 35, 70, 0.85);\n  --tl-border:         rgba(56, 189, 248, 0.15);\n  --tl-border-brand:   rgba(34, 211, 238, 0.4);\n  \n  --tl-text-primary:   #ffffff;\n  --tl-text-secondary: #94a3b8;\n  --tl-text-muted:     #64748b;\n  \n  --tl-grad-text:      linear-gradient(90deg, #38bdf8 0%, #22d3ee 50%, #34d399 100%);\n  --tl-grad-btn:       linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%);\n  \n  --tl-logo-color:     #ffffff;\n  --tl-logo-sub:       #64748b;\n  \n  --tl-pill-bg:        rgba(56, 189, 248, 0.08);\n  --tl-pill-border:    rgba(56, 189, 248, 0.2);\n  --tl-pill-text:      #94a3b8;\n  \n  --tl-nav-link:       #94a3b8;\n  --tl-nav-link-hover: #ffffff;\n  \n  --tl-slider-track:   #1e293b;\n  --tl-slider-thumb:   #38bdf8;\n  \n  --tl-calc-box-bg:    rgba(15, 23, 42, 0.6);\n  --tl-calc-box-border:rgba(255, 255, 255, 0.08);\n  \n  --tl-result-bg:      rgba(6, 182, 212, 0.08);\n  --tl-result-border:  rgba(34, 211, 238, 0.35);\n  \n  --tl-footer-bg:      #030712;\n  --tl-header-bg:      rgba(6, 12, 26, 0.94);\n  --tl-dark-section:   #040915;\n  \n  --tl-shadow-card:    0 16px 40px rgba(0, 0, 0, 0.45);\n  --tl-shadow-card-h:  0 22px 50px rgba(0, 0, 0, 0.6);\n}\n\n\/* =============================================\n   SCOPED STYLES\n   ============================================= *\/\n\n.tl-app {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--tl-bg-base);\n  color: var(--tl-text-primary);\n  font-size: 16px;\n  line-height: 1.75;\n  transition: background var(--tl-transition), color var(--tl-transition);\n  position: relative;\n  width: 100%;\n  overflow-x: hidden;\n}\n\n.tl-app *, .tl-app *::before, .tl-app *::after { box-sizing: border-box; }\n.tl-app a { color: inherit; text-decoration: none; }\n\n.tl-container {\n  width: min(100% - 40px, 1200px);\n  margin-inline: auto;\n}\n\n.tl-app h1, .tl-app h2, .tl-app h3, .tl-app h4, .tl-app .logo-name, .tl-app .tl-eyebrow, .tl-app .btn, .tl-app .res-num {\n  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\n}\n\n.tl-app h1 {\n  font-size: clamp(38px, 5.2vw, 68px);\n  font-weight: 900 !important;\n  line-height: 1.08;\n  letter-spacing: -0.025em;\n  margin: 0 0 24px 0;\n  color: var(--tl-text-primary);\n}\n\n.tl-app h2 {\n  font-size: clamp(24px, 3.2vw, 38px);\n  font-weight: 800 !important;\n  line-height: 1.2;\n  letter-spacing: -0.02em;\n  margin: 0 0 14px 0;\n  color: var(--tl-text-primary);\n}\n\n.tl-app h3 {\n  font-size: 20px;\n  font-weight: 800 !important;\n  line-height: 1.3;\n  margin: 0 0 10px 0;\n  color: var(--tl-text-primary);\n}\n\n.tl-app p { margin: 0 0 1rem 0; color: var(--tl-text-secondary); }\n\n.tl-app .text-gradient {\n  background: var(--tl-grad-text) !important;\n  -webkit-background-clip: text !important;\n  -webkit-text-fill-color: transparent !important;\n  background-clip: text !important;\n  display: inline-block;\n}\n\n.tl-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 18px;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: #0284c7;\n}\n\n[data-theme=\"dark\"] .tl-eyebrow { color: #38bdf8; }\n\n.tl-eyebrow::before {\n  content: \"\";\n  width: 20px;\n  height: 2.5px;\n  border-radius: 99px;\n  background: #0284c7;\n  flex-shrink: 0;\n}\n\n[data-theme=\"dark\"] .tl-eyebrow::before { background: #38bdf8; }\n\n\/* Header *\/\n.tl-header {\n  position: sticky;\n  top: 0;\n  z-index: 50;\n  background: var(--tl-header-bg);\n  border-bottom: 1px solid var(--tl-border);\n  backdrop-filter: blur(18px);\n  -webkit-backdrop-filter: blur(18px);\n  transition: background var(--tl-transition), border-color var(--tl-transition);\n}\n\n.tl-header-inner {\n  display: flex;\n  align-items: center;\n  min-height: 80px;\n  gap: 24px;\n}\n\n.logo { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1; }\n.logo-name { font-size: 24px; font-weight: 900; letter-spacing: -0.05em; color: var(--tl-logo-color); transition: color var(--tl-transition); }\n.logo-sub { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tl-logo-sub); }\n\n.tl-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }\n.tl-nav a {\n  position: relative;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--tl-nav-link);\n  transition: color var(--tl-transition);\n}\n.tl-nav a::after {\n  content: \"\";\n  position: absolute;\n  bottom: -6px; left: 0; right: 0;\n  height: 2px;\n  background: #0284c7;\n  transform: scaleX(0);\n  transform-origin: center;\n  transition: transform 0.2s;\n  border-radius: 99px;\n}\n.tl-nav a:hover { color: var(--tl-nav-link-hover); }\n.tl-nav a:hover::after { transform: scaleX(1); }\n\n.nav-theme-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  background: transparent;\n  border: 1px solid var(--tl-border);\n  color: var(--tl-text-primary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  margin-left: 6px;\n}\n.nav-theme-btn:hover {\n  background: var(--tl-bg-surface);\n  border-color: var(--tl-border-brand);\n  transform: scale(1.05);\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px 24px;\n  border-radius: 999px;\n  font-size: 13px;\n  font-weight: 800;\n  cursor: pointer;\n  border: none;\n  transition: transform 0.2s, box-shadow 0.2s;\n  line-height: 1;\n  text-decoration: none;\n}\n.btn-primary {\n  background: var(--tl-grad-btn);\n  color: #ffffff !important;\n  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25);\n}\n.btn-primary:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 22px rgba(6, 182, 212, 0.4);\n}\n.btn-outline {\n  background: var(--tl-bg-card);\n  color: var(--tl-text-primary) !important;\n  border: 1px solid var(--tl-border);\n  backdrop-filter: blur(8px);\n}\n.btn-outline:hover {\n  transform: translateY(-2px);\n  border-color: var(--tl-border-brand);\n  background: var(--tl-bg-card-hover);\n}\n.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 12px; }\n\n.menu-toggle {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  gap: 5px;\n  width: 40px;\n  height: 40px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n}\n.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--tl-text-primary); border-radius: 2px; }\n\n.mobile-menu {\n  display: none;\n  flex-direction: column;\n  gap: 18px;\n  padding: 24px 20px 28px;\n  border-top: 1px solid var(--tl-border);\n  background: var(--tl-header-bg);\n}\n.mobile-menu.open { display: flex; }\n.mobile-menu a:not(.btn) { font-size: 15px; font-weight: 700; color: var(--tl-text-primary); }\n.mobile-menu .btn { width: 100%; }\n\n\/* Hero *\/\n.tl-hero { position: relative; padding: 88px 0 54px; }\n.hero-center { text-align: center; max-width: 860px; margin: 0 auto; }\n.hero-text-lead { font-size: 19px; line-height: 1.75; margin-bottom: 24px; color: var(--tl-text-secondary); }\n\n.hero-badges-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 10px;\n  margin-bottom: 36px;\n}\n.hero-badge-pill {\n  padding: 8px 18px;\n  background: var(--tl-pill-bg);\n  border: 1px solid var(--tl-pill-border);\n  border-radius: 999px;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--tl-text-primary);\n}\n\n\/* Calculator Card *\/\n.calc-card-main {\n  background: var(--tl-bg-card);\n  border: 1px solid var(--tl-border);\n  border-radius: 28px;\n  padding: 44px;\n  box-shadow: var(--tl-shadow-card-h);\n  margin-bottom: 48px;\n}\n\n.calc-inputs-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.calc-input-box {\n  background: var(--tl-calc-box-bg);\n  border: 1px solid var(--tl-calc-box-border);\n  border-radius: 18px;\n  padding: 22px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.calc-label {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 800;\n  color: var(--tl-text-primary);\n  display: block;\n}\n.calc-sublabel { font-size: 12px; line-height: 1.5; color: var(--tl-text-muted); margin: 0; }\n\n.calc-input-wrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.calc-number-field {\n  width: 100%;\n  padding: 12px 36px 12px 16px;\n  font-size: 18px;\n  font-weight: 800;\n  font-family: 'Montserrat', sans-serif;\n  border-radius: 12px;\n  border: 1px solid var(--tl-border);\n  background: var(--tl-bg-card);\n  color: var(--tl-text-primary);\n  outline: none;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n.calc-number-field:focus {\n  border-color: #0284c7;\n  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);\n}\n\n.calc-unit {\n  position: absolute;\n  right: 14px;\n  font-weight: 800;\n  color: var(--tl-text-muted);\n}\n\n\/* Slider Component *\/\n.custom-slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 8px;\n  border-radius: 9999px;\n  background: var(--tl-slider-track);\n  outline: none;\n  cursor: pointer;\n}\n.custom-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: var(--tl-slider-thumb);\n  border: 3px solid #ffffff;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n  transition: transform 0.15s ease;\n}\n.custom-slider::-webkit-slider-thumb:hover {\n  transform: scale(1.15);\n}\n.custom-slider::-moz-range-thumb {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: var(--tl-slider-thumb);\n  border: 3px solid #ffffff;\n}\n\n.slider-val-badge {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 15px;\n  font-weight: 800;\n  background: var(--tl-bg-card);\n  border: 1px solid var(--tl-border);\n  padding: 6px 14px;\n  border-radius: 10px;\n  min-width: 50px;\n  text-align: center;\n  color: var(--tl-text-primary);\n}\n\n\/* Calculation Notice *\/\n.calc-notice {\n  background: var(--tl-bg-surface);\n  border: 1px solid var(--tl-border);\n  border-left: 4px solid #f59e0b;\n  border-radius: 14px;\n  padding: 16px 20px;\n  font-size: 13px;\n  line-height: 1.65;\n  color: var(--tl-text-secondary);\n  margin-bottom: 32px;\n}\n\n\/* Results Grid *\/\n.calc-results-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.result-card {\n  background: var(--tl-calc-box-bg);\n  border: 1px solid var(--tl-calc-box-border);\n  border-radius: 20px;\n  padding: 28px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 16px;\n}\n\n.result-card.highlight {\n  background: var(--tl-result-bg);\n  border: 2px solid var(--tl-result-border);\n}\n\n.res-title {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 14px;\n  font-weight: 800;\n  color: var(--tl-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n}\n\n.res-val-wrap {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  padding-top: 12px;\n  border-top: 1px solid var(--tl-border);\n}\n\n.res-num {\n  font-size: 44px;\n  font-weight: 900;\n  line-height: 1;\n  color: #10b981;\n}\n\n.res-curr { font-size: 22px; font-weight: 800; color: #10b981; }\n\n.res-roi-rate {\n  font-size: 13px;\n  font-weight: 700;\n  color: var(--tl-text-secondary);\n  margin-top: 6px;\n}\n\n\/* Monetarisierung Banner *\/\n.monetize-box {\n  background: var(--tl-dark-section);\n  border-radius: 28px;\n  padding: 44px;\n  color: #ffffff;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 40px;\n  border: 1px solid rgba(56, 189, 248, 0.2);\n  margin-bottom: 48px;\n  box-shadow: var(--tl-shadow-card);\n}\n.monetize-box h2 { color: #ffffff; margin-bottom: 10px; }\n.monetize-box p { color: rgba(255,255,255,0.75); font-size: 15px; margin: 0; max-width: 600px; }\n\n\/* Final CTA *\/\n.cta-section { padding: 80px 0; background: var(--tl-dark-section); position: relative; overflow: hidden; }\n.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }\n.cta-section h2 { color: #fff; margin-bottom: 12px; }\n.cta-section p { color: rgba(255,255,255,0.7); font-size: 17px; margin: 0; }\n\n\/* Footer *\/\n.tl-footer { padding: 28px 0; background: var(--tl-footer-bg); border-top: 1px solid rgba(255,255,255,0.06); }\n.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }\n.footer-copy { font-size: 12px; color: #64748b; }\n\n\/* Responsive *\/\n@media (max-width: 960px) {\n  .calc-inputs-grid { grid-template-columns: 1fr; }\n  .calc-results-grid { grid-template-columns: 1fr; }\n  .monetize-box { flex-direction: column; align-items: flex-start; }\n}\n@media (max-width: 840px) {\n  .tl-nav, .tl-header-inner > .btn { display: none; }\n  .menu-toggle { display: flex; }\n  .cta-inner { flex-direction: column; align-items: flex-start; }\n  .calc-card-main { padding: 26px 20px; }\n}\n@media (max-width: 580px) {\n  .tl-container { width: min(100% - 32px, 1200px); }\n  .tl-hero { padding: 64px 0 44px; }\n  .res-num { font-size: 36px; }\n}\n  <\/style>\n<\/head>\n<body>\n\n<div class=\"tl-app\" id=\"tlApp\">\n\n  <!-- \u2500\u2500 HEADER \u2500\u2500 -->\n  \n\n\n  <main>\n    <!-- \u2500\u2500 HERO SECTION \u2500\u2500 -->\n    <section class=\"tl-hero\">\n      <div class=\"tl-container hero-center\">\n        <span class=\"tl-eyebrow\">ROI-Rechner<\/span>\n\n        <h1>\n          Wie viel spart tele-LOOK<br>\n          <span class=\"text-gradient\">Ihrem Unternehmen?<\/span>\n        <\/h1>\n\n        <p class=\"hero-text-lead\">\n          Jede vermiedene Anfahrt spart wertvolle Zeit und direkte Fahrzeugkosten. Berechnen Sie Ihr Einsparpotenzial in Echtzeit und sehen Sie, ab wann sich tele-LOOK lohnt.\n        <\/p>\n\n        <div class=\"hero-badges-row\">\n          <span class=\"hero-badge-pill\">\u2713 Kostenlos &amp; unverbindlich<\/span>\n          <span class=\"hero-badge-pill\">\u2713 Ergebnis in Echtzeit<\/span>\n          <span class=\"hero-badge-pill\">\u2713 Individuell anpassbar<\/span>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <div class=\"breadcrumb-wrap\">\n      <nav class=\"breadcrumb-pill\" aria-label=\"Breadcrumb\">\n        <span style=\"color: #38bdf8; font-size: 0.85rem;\">\u25cf<\/span>\n        <a href=\"https:\/\/www.tele-look.com\/web\/\">Startseite<\/a>\n        <span class=\"sep\">\/<\/span>\n        <span class=\"current\">ROI-Rechner: Ihr Einsparpotenzial berechnen | tele-LOOK<\/span>\n      <\/nav>\n    <\/div>\n    \n\n\n\n    <!-- \u2500\u2500 RECHNER INTERAKTIV \u2500\u2500 -->\n    <section id=\"rechner\" style=\"padding-bottom: 60px;\">\n      <div class=\"tl-container\" style=\"max-width: 980px;\">\n\n        <div class=\"calc-card-main\">\n          \n          <div style=\"display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--tl-border);\">\n            <div style=\"width:44px;height:44px;border-radius:12px;background:var(--tl-bg-surface);color:#0284c7;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;\">\n              \ud83e\uddee\n            <\/div>\n            <div>\n              <h2>Pers\u00f6nliche Potenzialberechnung<\/h2>\n              <p style=\"font-size:13px;color:var(--tl-text-muted);margin:0;\">Passen Sie die Regler an die Gegebenheiten in Ihrem Betrieb an.<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Eingaben Grid -->\n          <div class=\"calc-inputs-grid\">\n            \n            <!-- Input 1: Kosten pro Einsatz -->\n            <div class=\"calc-input-box\">\n              <div>\n                <label for=\"cost-input\" class=\"calc-label\">Kosten pro Vor-Ort-Einsatz<\/label>\n                <p class=\"calc-sublabel\">\u00d8 Kosten f\u00fcr Kraftstoff, Fahrzeug &amp; Fahrzeit des Technikers.<\/p>\n              <\/div>\n              <div class=\"calc-input-wrap\">\n                <input type=\"number\" id=\"cost-input\" value=\"250\" class=\"calc-number-field\" min=\"50\" max=\"1000\">\n                <span class=\"calc-unit\">\u20ac<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- Input 2: Lizenzkosten -->\n            <div class=\"calc-input-box\">\n              <div>\n                <label for=\"license-cost-input\" class=\"calc-label\">Kosten pro Lizenz \/ Monat<\/label>\n                <p class=\"calc-sublabel\">Ihre monatliche Investition pro Support-Lizenz.<\/p>\n              <\/div>\n              <div class=\"calc-input-wrap\">\n                <input type=\"number\" id=\"license-cost-input\" value=\"95\" class=\"calc-number-field\" min=\"1\" max=\"500\">\n                <span class=\"calc-unit\">\u20ac<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- Input 3: Eins\u00e4tze pro Techniker (Slider) -->\n            <div class=\"calc-input-box\">\n              <div>\n                <label for=\"visits-slider\" class=\"calc-label\">Eins\u00e4tze pro Techniker \/ Monat<\/label>\n                <p class=\"calc-sublabel\">Wie oft f\u00e4hrt ein Techniker durchschnittlich zum Kunden vor Ort?<\/p>\n              <\/div>\n              <div style=\"display:flex;align-items:center;gap:12px;margin-top:6px;\">\n                <input type=\"range\" min=\"1\" max=\"100\" value=\"10\" class=\"custom-slider\" id=\"visits-slider\">\n                <span id=\"visits-value\" class=\"slider-val-badge\">10<\/span>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n          <!-- Berechnungsgrundlage Info -->\n          <div class=\"calc-notice\">\n            <strong>Berechnungsgrundlage:<\/strong> Wir kalkulieren defensiv mit einer Reduktionsrate von <strong>65 %<\/strong> der Vor-Ort-Eins\u00e4tze durch tele-LOOK Video-Support. In der Praxis werden je nach Komplexit\u00e4t Ihrer Eins\u00e4tze oft bis zu 80 % erreicht.\n          <\/div>\n\n          <!-- Ergebnis Grid -->\n          <div class=\"calc-results-grid\">\n            \n            <!-- Monatliche Ersparnis -->\n            <div class=\"result-card\">\n              <div>\n                <h3 class=\"res-title\">\n                  <span style=\"width:8px;height:8px;border-radius:50%;background:#10b981;\"><\/span>\n                  Monatliche Netto-Ersparnis\n                <\/h3>\n                <p style=\"font-size:12px;color:var(--tl-text-muted);margin:4px 0 0;\">Ersparnis abz\u00fcglich der Lizenzkosten, berechnet pro Service-Techniker.<\/p>\n              <\/div>\n              <div class=\"res-val-wrap\">\n                <span id=\"monthly-savings\" class=\"res-num\">0<\/span>\n                <span class=\"res-curr\">\u20ac<\/span>\n              <\/div>\n            <\/div>\n\n            <!-- J\u00e4hrlicher ROI -->\n            <div class=\"result-card highlight\">\n              <div>\n                <h3 class=\"res-title\">\n                  <span style=\"width:8px;height:8px;border-radius:50%;background:#0284c7;\"><\/span>\n                  J\u00e4hrlicher Gesamt-ROI\n                <\/h3>\n                <p style=\"font-size:12px;color:var(--tl-text-muted);margin:4px 0 0;\">Die j\u00e4hrliche Rendite auf Ihre Support-Investition.<\/p>\n              <\/div>\n              <div>\n                <div class=\"res-val-wrap\">\n                  <span id=\"yearly-savings\" class=\"res-num\">0<\/span>\n                  <span class=\"res-curr\">\u20ac<\/span>\n                <\/div>\n                <p class=\"res-roi-rate\">\n                  ROI: <strong id=\"roi-value\" style=\"color:#0284c7;font-size:16px;\">0<\/strong> % Rendite p.a.\n                <\/p>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- \u2500\u2500 MONETARISIERUNG BANNER \u2500\u2500 -->\n        <div class=\"monetize-box\" id=\"monetarisierung\">\n          <div>\n            <span class=\"tl-eyebrow\" style=\"color:#38bdf8;\">Tipp: Service monetarisieren<\/span>\n            <h2>tele-LOOK kann auch Umsatz bringen<\/h2>\n            <p>\n              Neben der Einsparung von Reisekosten k\u00f6nnen Sie mit tele-LOOK auch bezahlten Remote-Support als neue Serviceleistung etablieren. Kunden zahlen gerne f\u00fcr eine schnelle Online-Soforthilfe, die ihnen unn\u00f6tige Ausfallzeiten und teure Technikeranfahrten erspart.\n            <\/p>\n          <\/div>\n          <a class=\"btn btn-primary\" href=\"\/web\/service-monetarisierung-mit-tele-look\/\" style=\"white-space:nowrap;flex-shrink:0;\">\n            Mehr zur Monetarisierung \u2192\n          <\/a>\n        <\/div>\n\n      <\/div>\n    <\/section>\n\n\n    <!-- \u2500\u2500 FINAL CTA \u2500\u2500 -->\n    <section class=\"cta-section\">\n      <div class=\"tl-container cta-inner\">\n        <div>\n          <span class=\"tl-eyebrow\" style=\"color:#38bdf8;\">Bereit f\u00fcr messbare Einsparungen?<\/span>\n          <h2>Sehen statt raten.<\/h2>\n          <p>Testen Sie tele-LOOK 14 Tage lang unverbindlich und erleben Sie die Kostenersparnis im eigenen Betrieb.<\/p>\n        <\/div>\n        <a class=\"btn btn-primary\" href=\"\/web\/live-demo\/\" style=\"white-space:nowrap;flex-shrink:0;\">\n          14 Tage kostenlos testen \u2192\n        <\/a>\n      <\/div>\n    <\/section>\n  <\/main>\n\n\n  <!-- \u2500\u2500 FOOTER \u2500\u2500 -->\n  \n\n<\/div><!-- \/tl-app -->\n\n<script>\n(function() {\n  const html = document.documentElement;\n  const themeToggle = document.getElementById('themeToggle');\n  const themeIcon = document.getElementById('themeIcon');\n  const mobileThemeToggle = document.getElementById('mobileThemeToggle');\n  const mobileThemeIcon = document.getElementById('mobileThemeIcon');\n\n  function updateThemeUI(theme) {\n    html.setAttribute('data-theme', theme);\n    const icon = theme === 'dark' ? '\u2600\ufe0f' : '\ud83c\udf19';\n    if (themeIcon) themeIcon.textContent = icon;\n    if (mobileThemeIcon) mobileThemeIcon.textContent = icon;\n    localStorage.setItem('tl-theme', theme);\n  }\n\n  const currentTheme = localStorage.getItem('tl-theme') || 'light';\n  updateThemeUI(currentTheme);\n\n  function toggleTheme() {\n    const isDark = html.getAttribute('data-theme') === 'dark';\n    updateThemeUI(isDark ? 'light' : 'dark');\n  }\n\n  if (themeToggle) themeToggle.addEventListener('click', toggleTheme);\n  if (mobileThemeToggle) mobileThemeToggle.addEventListener('click', toggleTheme);\n\n  const menuToggle = document.getElementById('menuToggle');\n  const mobileMenu = document.getElementById('mobileMenu');\n  if (menuToggle && mobileMenu) {\n    menuToggle.addEventListener('click', function() {\n      const isOpen = mobileMenu.classList.toggle('open');\n      menuToggle.setAttribute('aria-label', isOpen ? 'Men\u00fc schlie\u00dfen' : 'Men\u00fc \u00f6ffnen');\n    });\n  }\n})();\n\n\/\/ Real-time ROI Calculator Logic\n(function initROICalculator() {\n  const costInput        = document.getElementById('cost-input');\n  const visitsSlider     = document.getElementById('visits-slider');\n  const licenseCostInput = document.getElementById('license-cost-input');\n  const visitsValue      = document.getElementById('visits-value');\n  const monthlySavings   = document.getElementById('monthly-savings');\n  const yearlySavings    = document.getElementById('yearly-savings');\n  const roiValue         = document.getElementById('roi-value');\n\n  const EFFICIENCY_FACTOR = 0.65;\n\n  function formatNumber(num) {\n    return num.toLocaleString('de-DE');\n  }\n\n  function calculateSavings() {\n    const costPerVisit  = parseFloat(costInput.value)        || 0;\n    const monthlyVisits = parseInt(visitsSlider.value)        || 0;\n    const licenseCost   = parseFloat(licenseCostInput.value)  || 0;\n\n    if (visitsValue) visitsValue.textContent = monthlyVisits;\n\n    if (costPerVisit <= 0 || monthlyVisits <= 0 || licenseCost <= 0) {\n      if (monthlySavings) monthlySavings.textContent = '0';\n      if (yearlySavings)  yearlySavings.textContent  = '0';\n      if (roiValue)       roiValue.textContent       = '0';\n      return;\n    }\n\n    const totalMonthlyCostWithout   = costPerVisit * monthlyVisits;\n    const potentialSavingsFromVisits = totalMonthlyCostWithout * EFFICIENCY_FACTOR;\n    const netMonthlySaving           = Math.round(potentialSavingsFromVisits - licenseCost);\n    const yearlySaving               = netMonthlySaving * 12;\n    const roi = (licenseCost > 0 && netMonthlySaving > 0)\n      ? Math.round((netMonthlySaving \/ licenseCost) * 100)\n      : 0;\n\n    if (monthlySavings) monthlySavings.textContent = netMonthlySaving > 0 ? formatNumber(netMonthlySaving) : '0';\n    if (yearlySavings)  yearlySavings.textContent  = yearlySaving    > 0 ? formatNumber(yearlySaving)      : '0';\n    if (roiValue)       roiValue.textContent       = formatNumber(roi);\n  }\n\n  if (costInput)        costInput.addEventListener('input',        calculateSavings);\n  if (licenseCostInput) licenseCostInput.addEventListener('input',  calculateSavings);\n  if (visitsSlider)     visitsSlider.addEventListener('input',      calculateSavings);\n\n  calculateSavings();\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n<script>\n(function() {\n  function syncTheme() {\n    var html = document.documentElement;\n    var theme = html.getAttribute('data-theme') || (html.classList.contains('dark') ? 'dark' : 'light') || localStorage.getItem('tl-theme') || 'light';\n    var apps = document.querySelectorAll('.tl-app, #tele-look-main-wrapper');\n    apps.forEach(function(app) {\n      if (theme === 'dark') {\n        app.classList.add('dark');\n        app.setAttribute('data-theme', 'dark');\n      } else {\n        app.classList.remove('dark');\n        app.setAttribute('data-theme', 'light');\n      }\n    });\n  }\n  syncTheme();\n  var observer = new MutationObserver(function(mutations) {\n    mutations.forEach(function(mutation) {\n      if (mutation.attributeName === 'class' || mutation.attributeName === 'data-theme') {\n        syncTheme();\n      }\n    });\n  });\n  observer.observe(document.documentElement, { attributes: true });\n  window.addEventListener('storage', syncTheme);\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ROI-Rechner | tele-LOOK Live-Video-Support ROI-Rechner Wie viel spart tele-LOOK Ihrem Unternehmen? Jede vermiedene Anfahrt spart wertvolle Zeit und direkte Fahrzeugkosten. Berechnen Sie Ihr Einsparpotenzial in Echtzeit und sehen Sie, ab wann sich tele-LOOK lohnt. \u2713 Kostenlos &amp; unverbindlich \u2713 Ergebnis in Echtzeit \u2713 Individuell anpassbar \u25cf Startseite \/ ROI-Rechner: Ihr Einsparpotenzial berechnen | tele-LOOK \ud83e\uddee [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10546","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages\/10546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/comments?post=10546"}],"version-history":[{"count":239,"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages\/10546\/revisions"}],"predecessor-version":[{"id":17069,"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages\/10546\/revisions\/17069"}],"wp:attachment":[{"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/media?parent=10546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}