{"id":14968,"date":"2026-03-12T22:51:48","date_gmt":"2026-03-12T21:51:48","guid":{"rendered":"https:\/\/www.tele-look.com\/web\/?page_id=14968"},"modified":"2026-10-19T09:44:07","modified_gmt":"2026-10-19T07:44:07","slug":"kaffemaschinenhersteller","status":"publish","type":"page","link":"https:\/\/www.tele-look.com\/web\/kaffemaschinenhersteller\/","title":{"rendered":"Kaffeemaschinenhersteller &#038; Service: Visueller Remote-Support ohne App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14968\" class=\"elementor elementor-14968\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-sim_opt_container_14968 e-con-full e-flex e-con e-parent\" data-id=\"sim_opt_container_14968\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-sim_opt_widget_14968 elementor-widget elementor-widget-html\" data-id=\"sim_opt_widget_14968\" 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>.breadcrumb-wrap { display: flex !important; justify-content: center !important; width: 100% !important; margin: 1.25rem 0 2rem 0 !important; position: relative !important; z-index: 20 !important; } .breadcrumb-pill { display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; background: var(--tl-bg-card, #ffffff) !important; border: 1px solid var(--tl-border, #cbd5e1) !important; border-radius: 9999px !important; padding: 0.45rem 1.15rem !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.78rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--tl-text-muted, #64748b) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important; transition: all 0.25s ease !important; } .breadcrumb-pill a { color: var(--tl-text-secondary, #475569) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .breadcrumb-pill a:hover { color: #135dff !important; } .breadcrumb-pill .sep { color: var(--tl-text-muted, #94a3b8) !important; opacity: 0.6 !important; } .breadcrumb-pill .current { color: #135dff !important; font-weight: 800 !important; } [data-theme=\"dark\"] .breadcrumb-pill, html.dark .breadcrumb-pill, body.dark .breadcrumb-pill, .dark .breadcrumb-pill { background: #0f172a !important; border-color: rgba(56, 189, 248, 0.3) !important; color: #94a3b8 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } [data-theme=\"dark\"] .breadcrumb-pill a, html.dark .breadcrumb-pill a, body.dark .breadcrumb-pill a, .dark .breadcrumb-pill a { color: #cbd5e1 !important; } [data-theme=\"dark\"] .breadcrumb-pill a:hover, html.dark .breadcrumb-pill a:hover, body.dark .breadcrumb-pill a:hover, .dark .breadcrumb-pill a:hover { color: #38bdf8 !important; } [data-theme=\"dark\"] .breadcrumb-pill .current, html.dark .breadcrumb-pill .current, body.dark .breadcrumb-pill .current, .dark .breadcrumb-pill .current { color: #38bdf8 !important; }<\/style>\n<!-- tele-LOOK Master Landingpage (2026 Clean B2B Standard) -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><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>:root { --tl-transition: 0.25s ease; } [data-theme=\"light\"] .tl-app, .tl-app { --tl-bg-base: #f8fafc; --tl-bg-surface: #f1f5f9; --tl-bg-card: #ffffff; --tl-bg-card-hover: #ffffff; --tl-border: #e2e8f0; --tl-border-brand: rgba(19, 93, 255, 0.35); --tl-text-primary: #0f172a; --tl-text-secondary: #475569; --tl-text-muted: #64748b; --tl-grad-text: linear-gradient(90deg, #135dff 0%, #06b6d4 50%, #10b981 100%); --tl-grad-btn: linear-gradient(90deg, #135dff 0%, #06b6d4 50%, #10b981 100%); --tl-logo-color: #0f172a; --tl-logo-sub: #64748b; --tl-nav-link: #475569; --tl-nav-link-hover: #0f172a; --tl-footer-bg: #0f172a; --tl-header-bg: rgba(255, 255, 255, 0.95); --tl-dark-section: #091326; --tl-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06); --tl-shadow-card-h: 0 16px 36px rgba(15, 23, 42, 0.12); } [data-theme=\"dark\"] .tl-app, html.dark .tl-app, body.dark .tl-app, .dark .tl-app, .tl-app.dark { --tl-bg-base: #060c1a; --tl-bg-surface: #0b152d; --tl-bg-card: rgba(15, 27, 54, 0.65); --tl-bg-card-hover: rgba(20, 35, 70, 0.85); --tl-border: rgba(56, 189, 248, 0.15); --tl-border-brand: rgba(34, 211, 238, 0.4); --tl-text-primary: #ffffff; --tl-text-secondary: #94a3b8; --tl-text-muted: #64748b; --tl-grad-text: linear-gradient(90deg, #38bdf8 0%, #22d3ee 50%, #34d399 100%); --tl-grad-btn: linear-gradient(90deg, #135dff 0%, #06b6d4 50%, #10b981 100%); --tl-logo-color: #ffffff; --tl-logo-sub: #64748b; --tl-nav-link: #94a3b8; --tl-nav-link-hover: #ffffff; --tl-footer-bg: #030712; --tl-header-bg: rgba(6, 12, 26, 0.94); --tl-dark-section: #040915; --tl-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.45); --tl-shadow-card-h: 0 22px 50px rgba(0, 0, 0, 0.6); } .tl-app { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--tl-bg-base); color: var(--tl-text-primary); font-size: 16px; line-height: 1.75; transition: background var(--tl-transition), color var(--tl-transition); position: relative; width: 100%; overflow-x: hidden; } .tl-app *, .tl-app *::before, .tl-app *::after { box-sizing: border-box; } .tl-app a { color: inherit; text-decoration: none; } .tl-app img { max-width: 100%; height: auto; } .tl-container { width: min(100% - 40px, 1200px); margin-inline: auto; } .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 .kpi-val { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } .tl-app h1 { font-size: clamp(34px, 4.8vw, 60px); font-weight: 900 !important; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 24px 0; color: var(--tl-text-primary); } .tl-app h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800 !important; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px 0; color: var(--tl-text-primary); } .tl-app h3 { font-size: 20px; font-weight: 800 !important; line-height: 1.3; margin: 0 0 10px 0; color: var(--tl-text-primary); } .tl-app p { margin: 0 0 1rem 0; color: var(--tl-text-secondary); } .tl-app .text-gradient { background: var(--tl-grad-text) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; } .tl-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #135dff; } [data-theme=\"dark\"] .tl-eyebrow, html.dark .tl-eyebrow, body.dark .tl-eyebrow, .dark .tl-eyebrow { color: #38bdf8; } .tl-eyebrow::before { content: \"\"; width: 20px; height: 2.5px; border-radius: 99px; background: #135dff; flex-shrink: 0; } [data-theme=\"dark\"] .tl-eyebrow::before, html.dark .tl-eyebrow::before, body.dark .tl-eyebrow::before, .dark .tl-eyebrow::before { background: #38bdf8; } .tl-header { position: sticky; top: 0; z-index: 50; background: var(--tl-header-bg); border-bottom: 1px solid var(--tl-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background var(--tl-transition), border-color var(--tl-transition); } .tl-header-inner { display: flex; align-items: center; min-height: 80px; gap: 24px; } .logo { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1; } .logo-name { font-size: 24px; font-weight: 900; letter-spacing: -0.05em; color: var(--tl-logo-color); transition: color var(--tl-transition); } .logo-sub { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tl-logo-sub); } .tl-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } .tl-nav a { position: relative; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tl-nav-link); transition: color var(--tl-transition); } .tl-nav a::after { content: \"\"; position: absolute; bottom: -6px; left: 0; right: 0; height: 2px; background: #135dff; transform: scaleX(0); transform-origin: center; transition: transform 0.2s; border-radius: 99px; } .tl-nav a:hover { color: var(--tl-nav-link-hover); } .tl-nav a:hover::after { transform: scaleX(1); } .nav-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1px solid var(--tl-border); color: var(--tl-text-primary); cursor: pointer; font-size: 16px; transition: all 0.2s ease; margin-left: 6px; } .nav-theme-btn:hover { background: var(--tl-bg-surface); border-color: var(--tl-border-brand); transform: scale(1.05); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; border: none; transition: transform 0.2s, box-shadow 0.2s; line-height: 1; text-decoration: none; } .btn-primary { background: var(--tl-grad-btn); color: #ffffff !important; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(6, 182, 212, 0.4); } .btn-outline { background: var(--tl-bg-card); color: var(--tl-text-primary) !important; border: 1px solid var(--tl-border); backdrop-filter: blur(8px); } .btn-outline:hover { transform: translateY(-2px); border-color: var(--tl-border-brand); background: var(--tl-bg-card-hover); } .btn-sm { min-height: 40px; padding: 10px 18px; font-size: 12px; } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 8px; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--tl-text-primary); border-radius: 2px; } .mobile-menu { display: none; flex-direction: column; gap: 18px; padding: 24px 20px 28px; border-top: 1px solid var(--tl-border); background: var(--tl-header-bg); } .mobile-menu.open { display: flex; } .mobile-menu a:not(.btn) { font-size: 15px; font-weight: 700; color: var(--tl-text-primary); } .mobile-menu .btn { width: 100%; } .tl-hero { position: relative; padding: 88px 0 60px; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } .hero-text-lead { font-size: 18px; line-height: 1.7; margin-bottom: 24px; color: var(--tl-text-secondary); } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; } .kpi-section { background: var(--tl-bg-surface); border-block: 1px solid var(--tl-border); padding: 36px 0; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .kpi-box { background: var(--tl-bg-card); border: 1px solid var(--tl-border); border-radius: 18px; padding: 22px; text-align: center; box-shadow: var(--tl-shadow-card); } .kpi-val { font-size: 36px; font-weight: 900; line-height: 1; color: #135dff; margin-bottom: 6px; } [data-theme=\"dark\"] .kpi-val, html.dark .kpi-val, body.dark .kpi-val, .dark .kpi-val { color: #38bdf8; } .kpi-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tl-text-muted); } .bento-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bento-box { background: var(--tl-bg-card); border: 1px solid var(--tl-border); border-radius: 24px; padding: 32px; box-shadow: var(--tl-shadow-card); display: flex; flex-direction: column; justify-content: space-between; } .usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .usecase-card { background: var(--tl-bg-card); border: 1px solid var(--tl-border); border-radius: 22px; padding: 28px; box-shadow: var(--tl-shadow-card); transition: transform 0.2s, box-shadow 0.2s; } .usecase-card:hover { transform: translateY(-4px); border-color: var(--tl-border-brand); box-shadow: var(--tl-shadow-card-h); } .tl-sec { padding: 74px 0; } .tl-sec-alt { background: var(--tl-bg-surface); } .tl-footer { padding: 28px 0; background: var(--tl-footer-bg); border-top: 1px solid rgba(255,255,255,0.06); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-copy { font-size: 12px; color: #64748b; } @media (max-width: 1060px) { .usecase-grid, .bento-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .tl-nav, .tl-header-inner > .btn { display: none; } .menu-toggle { display: flex; } .hero-grid { grid-template-columns: 1fr; gap: 36px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .usecase-grid, .bento-grid-3 { grid-template-columns: 1fr; } } @media (max-width: 580px) { .kpi-grid { grid-template-columns: 1fr; } .tl-hero { padding: 60px 0 40px; } }<\/style>\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-grid\">\n        <div>\n          <span class=\"tl-eyebrow\">Pragmatischer Video-Support f\u00fcr Kaffeemaschinen-Hersteller<\/span>\n          <h1>\n            Support-Kosten senken.<br>\n            <span class=\"text-gradient\">Kaffee-Qualit\u00e4t sichern.<\/span>\n          <\/h1>\n          <p class=\"hero-text-lead\">\n            Vom Office-Vollautomaten bis zur Gastronomie-Siebtr\u00e4germaschine: Pr\u00fcfen Sie Fehler live per Video, identifizieren Sie Ersatzteile aus der Ferne und <strong>vermeiden Sie einen gro\u00dfen Teil der unn\u00f6tigen Anfahrten.<\/strong>\n          <\/p>\n          <p style=\"font-size:15px;color:var(--tl-text-secondary);margin-bottom:24px;\">\n            Ihr Gespr\u00e4chspartner ben\u00f6tigt keine App. 100% DSGVO-konform auf deutschen Servern und sofort einsatzbereit.\n          <\/p>\n          <div class=\"hero-actions\">\n            <a class=\"btn btn-primary\" href=\"https:\/\/www.tele-look.com\/web\/kostenlos-testen\/\">14 Tage kostenlos testen \u2192<\/a>\n            <a class=\"btn btn-outline\" href=\"#use-cases\">Einsatzbereiche ansehen<\/a>\n          <\/div>\n          <p style=\"font-size:13px;color:var(--tl-text-muted);margin:0;\">\n            \u2713 0 Sek. Installationsaufwand \u00b7 \u2713 Ersatzteile pr\u00e4zise erkennen \u00b7 \u2713 Fehler sofort l\u00f6sen\n          <\/p>\n        <\/div>\n        <div><style>.tl-hero-sim-grid, .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr !important; align-items: center; gap: 36px; text-align: left; } .tl-hero-sim-grid { margin-bottom: 28px; } .tl-hero-sim-grid > *, .hero-grid > * { min-width: 0; max-width: 100%; } .hero-geo-box, .geo-snippet, .geo-snippet-box { max-width: 100% !important; } .tl-theme-toggle-floating, .theme-switch-fab, #themeFab { display: none !important; } .tl-monitor-device { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 580px; margin-inline: auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .tl-monitor-bezel { width: 100%; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); padding: 14px 9px 9px 9px; border-radius: 18px 18px 14px 14px; border: 1.5px solid #334155; box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08); position: relative; } .tl-monitor-cam { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; } .tl-monitor-cam-lens { width: 6px; height: 6px; border-radius: 50%; background: #020617; border: 1.5px solid #475569; } .tl-monitor-cam-led { width: 4px; height: 4px; border-radius: 50%; background: #10b981; } .tl-mockup-window { border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); background: #ffffff; overflow: hidden; width: 100%; } [data-theme=\"dark\"] .tl-mockup-window, html.dark .tl-mockup-window, body.dark .tl-mockup-window { background: #0f172a; } .tl-monitor-neck { width: 74px; height: 22px; background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 65%, #64748b 100%); clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%); border-left: 1px solid #64748b; border-right: 1px solid #64748b; } [data-theme=\"dark\"] .tl-monitor-neck, html.dark .tl-monitor-neck, body.dark .tl-monitor-neck { background: linear-gradient(180deg, #1e293b 0%, #334155 65%, #0f172a 100%); } .tl-monitor-base { width: 180px; height: 8px; background: linear-gradient(90deg, #64748b 0%, #e2e8f0 50%, #64748b 100%); border-radius: 6px 6px 2px 2px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22); border: 1px solid #94a3b8; } [data-theme=\"dark\"] .tl-monitor-base, html.dark .tl-monitor-base, body.dark .tl-monitor-base { background: linear-gradient(90deg, #1e293b 0%, #475569 50%, #1e293b 100%); border-color: #334155; } .tl-simulation-note { margin-top: 6px; font-size: 11px; font-weight: 500; color: #64748b; text-align: center; letter-spacing: 0.01em; } .tl-mockup-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-size: 11px; font-weight: 700; color: #475569; gap: 6px 8px; } [data-theme=\"dark\"] .tl-mockup-topbar, html.dark .tl-mockup-topbar, body.dark .tl-mockup-topbar { background: #0b152d; border-bottom-color: rgba(56, 189, 248, 0.18); color: #94a3b8; } .tl-mockup-dots { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .tl-dot { width: 9px; height: 9px; border-radius: 50%; } .tl-dot-red { background: #ef4444; } .tl-dot-yellow { background: #f59e0b; } .tl-dot-green { background: #10b981; } .tl-mockup-telemetry { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; } .tl-telemetry-timer { font-family: 'Montserrat', monospace, sans-serif; font-weight: 800; color: #0f172a; background: #ffffff; border: 1px solid #cbd5e1; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; letter-spacing: 0.03em; white-space: nowrap; } [data-theme=\"dark\"] .tl-telemetry-timer, html.dark .tl-telemetry-timer, body.dark .tl-telemetry-timer { color: #f8fafc; background: #0f172a; border-color: rgba(56, 189, 248, 0.25); } .tl-mockup-screen { position: relative; width: 100%; aspect-ratio: 16 \/ 9; background: #0f172a; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tl-mockup-screen > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; } .tl-live-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: rgba(15, 23, 42, 0.88); backdrop-filter: blur(8px); color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; z-index: 15; border: 1px solid rgba(255, 255, 255, 0.18); max-width: calc(100% - 20px); } .tl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; flex-shrink: 0; animation: tlPulse 1.5s infinite; } @keyframes tlPulse { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.8; } } .tl-telepunkt { position: absolute; top: 40%; left: 45%; transform: translate(-50%, -50%); z-index: 20; display: flex; flex-direction: column; align-items: center; transition: top 0.85s cubic-bezier(0.22, 1, 0.36, 1), left 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; pointer-events: none; } .tl-telepunkt-reticle { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tl-telepunkt-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #facc15; animation: tlSonarRing 1.8s infinite cubic-bezier(0.16, 1, 0.3, 1); } .tl-telepunkt-crosshair { position: absolute; inset: -5px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.75); } .tl-telepunkt-core { width: 16px; height: 16px; border-radius: 50%; background: #facc15; border: 2.5px solid #ffffff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.6); position: relative; z-index: 2; } @keyframes tlSonarRing { 0% { transform: scale(0.85); opacity: 1; } 80% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } .tl-telepunkt-tag { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 21; background: rgba(15, 23, 42, 0.94); color: #fef08a; border: 1px solid rgba(250, 204, 21, 0.65); font-size: 11.5px; font-weight: 800; padding: 7px 12px; border-radius: 8px; backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: opacity 0.3s ease; pointer-events: none; } .tl-telepunkt-tag-sub { color: #e2e8f0; background: rgba(255, 255, 255, 0.12); font-weight: 700; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .tl-shutter-flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; z-index: 25; transition: opacity 0.18s ease; } .tl-shutter-flash.is-flashing { opacity: 0.75; } .tl-photo-focus-box { position: absolute; border: 2px solid #38bdf8; border-radius: 6px; background: rgba(56, 189, 248, 0.12); opacity: 0; transform: scale(1.08); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 18; } .tl-photo-focus-box.is-visible { opacity: 1; transform: scale(1); } .tl-photo-toast { position: absolute; top: 10px; right: 10px; z-index: 22; display: flex; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.95); border: 1px solid #38bdf8; color: #ffffff; padding: 6px 10px; border-radius: 8px; font-size: 10.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.4); opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; max-width: calc(100% - 20px); } .tl-photo-toast.is-visible { opacity: 1; transform: translateY(0); } .tl-photo-toast-icon { width: 20px; height: 20px; border-radius: 5px; background: rgba(56, 189, 248, 0.2); color: #38bdf8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tl-pdf-overlay { position: absolute; inset: 0; z-index: 24; background: rgba(15, 23, 42, 0.88); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s ease; pointer-events: none; } .tl-pdf-overlay.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .tl-pdf-sheet { width: 100%; max-width: 475px; background: #ffffff; color: #0f172a; border-radius: 7px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); border: 1px solid #cbd5e1; padding: 9px 13px; font-family: 'Inter', sans-serif; font-size: 8.5px; line-height: 1.3; text-align: left; } .tl-pdf-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #e2e8f0; padding-bottom: 5px; margin-bottom: 6px; } .tl-pdf-title { font-family: 'Montserrat', sans-serif !important; font-size: 12px; font-weight: 900; color: #0f172a !important; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; } .tl-pdf-badge-ok { background: #dcfce7; color: #15803d; border: 1px solid #86efac; font-size: 7.5px; font-weight: 800; padding: 1.5px 5px; border-radius: 4px; text-transform: uppercase; } .tl-pdf-meta-right { text-align: right; font-size: 7.5px; color: #475569; line-height: 1.3; } .tl-pdf-meta-right strong { color: #0f172a; font-weight: 800; } .tl-pdf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px; padding: 4px 7px; margin-bottom: 6px; } .tl-pdf-col-lbl { display: block; font-size: 6.5px; font-weight: 700; text-transform: uppercase; color: #64748b; } .tl-pdf-col-val { font-size: 8px; font-weight: 800; color: #0f172a; } .tl-pdf-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; } .tl-pdf-photo-card { border: 1px solid #e2e8f0; border-radius: 4px; padding: 3px 5px; background: #f8fafc; display: flex; align-items: center; gap: 6px; } .tl-pdf-photo-thumb { width: 54px !important; height: 34px !important; border-radius: 3px !important; object-fit: cover !important; flex-shrink: 0; border: 1px solid #94a3b8 !important; background: #e2e8f0; margin: 0 !important; box-shadow: none !important; } .tl-pdf-nameplate-thumb { width: 54px !important; height: 34px !important; border-radius: 3px; flex-shrink: 0; border: 1px solid #64748b; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); padding: 2px 3px; display: flex; flex-direction: column; justify-content: space-between; font-family: 'Montserrat', monospace, sans-serif; color: #0f172a; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15); overflow: hidden; position: relative; } .tl-np-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #475569; padding-bottom: 1px; font-size: 4.5px; font-weight: 900; letter-spacing: 0.02em; color: #0f172a; } .tl-np-ce { font-size: 5px; font-weight: 900; border: 0.5px solid #0f172a; padding: 0 1px; line-height: 1; } .tl-np-rows { display: flex; flex-direction: column; gap: 0.5px; font-size: 4px; font-weight: 700; line-height: 1.1; color: #1e293b; } .tl-np-barcode { height: 4px; width: 100%; background: repeating-linear-gradient(90deg, #0f172a 0px, #0f172a 1px, transparent 1px, transparent 2px, #0f172a 2px, #0f172a 3.5px, transparent 3.5px, transparent 4.5px); opacity: 0.85; } .tl-pdf-photo-caption { font-size: 7.5px; color: #334155; line-height: 1.25; } .tl-pdf-photo-caption strong { display: block; color: #0f172a; font-size: 8px; } .tl-pdf-notes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .tl-pdf-note-item { background: #f1f5f9; border-left: 3px solid #0284c7; padding: 4px 7px; border-radius: 3px; font-size: 8px; color: #1e293b; display: flex; justify-content: space-between; align-items: center; gap: 6px; } .tl-pdf-note-item.is-resolved { background: #f0fdf4; border-left-color: #10b981; } .tl-pdf-billing-banner { background: linear-gradient(90deg, #eff6ff 0%, #ecfdf5 100%); border: 1px solid #6ee7b7; border-left: 3.5px solid #10b981; border-radius: 5px; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; color: #0f172a; } .tl-pdf-billing-banner strong { color: #047857; font-weight: 800; } .tl-pdf-saving-tag { color: #ffffff; font-weight: 800; background: #059669; padding: 2px 6px; border-radius: 4px; font-size: 7.5px; white-space: nowrap; flex-shrink: 0; } .tl-mockup-steps { display: grid; grid-template-columns: repeat(3, 1fr); background: #f1f5f9; border-top: 1px solid #e2e8f0; } [data-theme=\"dark\"] .tl-mockup-steps, html.dark .tl-mockup-steps, body.dark .tl-mockup-steps { background: #0b152d; border-top-color: rgba(56, 189, 248, 0.18); } .tl-step-tab { appearance: none; background: transparent !important; border: none !important; border-right: 1px solid #e2e8f0 !important; border-radius: 0 !important; padding: 8px 4px; font-family: 'Montserrat', sans-serif !important; font-size: 9.5px; font-weight: 800; color: #64748b !important; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease; position: relative; outline: none !important; box-shadow: none !important; } [data-theme=\"dark\"] .tl-step-tab, html.dark .tl-step-tab, body.dark .tl-step-tab { border-right-color: rgba(56, 189, 248, 0.18) !important; color: #94a3b8 !important; } .tl-step-tab:last-child { border-right: none !important; } .tl-step-tab.is-active { color: #0284c7 !important; background: #ffffff !important; } [data-theme=\"dark\"] .tl-step-tab.is-active, html.dark .tl-step-tab.is-active, body.dark .tl-step-tab.is-active { color: #38bdf8 !important; background: #0f172a !important; } .tl-step-tab.is-active::after { content: \"\"; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, #135dff 0%, #06b6d4 50%, #10b981 100%); } .tl-step-num { width: 16px; height: 16px; border-radius: 50%; background: #cbd5e1; color: #0f172a; font-size: 9.5px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tl-step-tab.is-active .tl-step-num { background: #0284c7; color: #ffffff; } @media (max-width: 980px) { .tl-hero-sim-grid, .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 600px) { .tl-mockup-dots { display: none; } .tl-mockup-topbar { padding: 7px 10px; font-size: 10px; } .tl-mockup-telemetry { font-size: 10px; gap: 5px; } .tl-mockup-screen { aspect-ratio: auto; min-height: 265px; } .tl-live-badge { font-size: 9px; padding: 3px 7px; } .tl-telepunkt-tag { font-size: 10.5px; padding: 6px 9px; } .tl-step-tab { padding: 8px 4px; font-size: 9.5px; flex-direction: column; gap: 3px; text-align: center; white-space: normal; line-height: 1.2; } .tl-pdf-overlay { padding: 6px; } .tl-pdf-sheet { padding: 7px 9px; font-size: 7.5px; } .tl-pdf-photos { grid-template-columns: 1fr; gap: 4px; } .tl-pdf-billing-banner { flex-direction: column; align-items: flex-start; gap: 4px; } }<\/style>\n<div class=\"tl-monitor-device\">\n  <div class=\"tl-monitor-bezel\">\n    <div class=\"tl-monitor-cam\" aria-hidden=\"true\">\n      <span class=\"tl-monitor-cam-lens\"><\/span>\n      <span class=\"tl-monitor-cam-led\"><\/span>\n    <\/div>\n\n    <div class=\"tl-mockup-window\" id=\"tlHeroMockup\">\n      <div class=\"tl-mockup-topbar\">\n        <div class=\"tl-mockup-dots\">\n          <span class=\"tl-dot tl-dot-red\"><\/span>\n          <span class=\"tl-dot tl-dot-yellow\"><\/span>\n          <span class=\"tl-dot tl-dot-green\"><\/span>\n        <\/div>\n        <span style=\"display:inline-flex;align-items:center;gap:6px;color:inherit;font-weight:800;\">\n          <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0284c7\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\n          Ansicht des Service-Gebers\n        <\/span>\n        <div class=\"tl-mockup-telemetry\">\n          <span class=\"tl-telemetry-timer\" id=\"tlLiveTimer\">01:24 Min.<\/span>\n          <span style=\"color: #10b981;\">\u25cf Verbunden (HD)<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"tl-mockup-screen\">\n        <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.tele-look.com\/web\/wp-content\/uploads\/2026\/10\/sim_kaffeemaschine_kantinenautomat_v3.jpg\" alt=\"Kantinen-Kaffeevollautomat mit Fehleranzeige FEHLER E04 Br\u00fcheinheit pr\u00fcfen im Live-Video-Support\" width=\"1280\" height=\"720\" loading=\"eager\" title=\"\">\n        <div class=\"tl-shutter-flash\" id=\"tlShutterFlash\"><\/div>\n        <div class=\"tl-photo-focus-box\" id=\"tlPhotoFocus\" style=\"top:64%;left:58%;width:10%;height:19%;\"><\/div>\n\n        <div class=\"tl-live-badge\">\n          <span class=\"tl-live-dot\"><\/span>\n          LIVE VIDEO &middot; KANTINEN-VOLLAUTOMAT\n        <\/div>\n\n        <div class=\"tl-photo-toast\" id=\"tlPhotoToast\">\n          <span class=\"tl-photo-toast-icon\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"\/><circle cx=\"12\" cy=\"13\" r=\"4\"\/><\/svg>\n          <\/span>\n          <div>\n            <div style=\"color:#38bdf8;font-size:9.5px;text-transform:uppercase;letter-spacing:0.05em;\">HD-Fern-Foto gespeichert<\/div>\n            <div>Kaffeevollautomat_5000S_E04.jpg<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"tl-telepunkt\" id=\"tlTelePunkt\" style=\"top:28%;left:42%;\">\n          <div class=\"tl-telepunkt-reticle\">\n            <span class=\"tl-telepunkt-ring\"><\/span>\n            <span class=\"tl-telepunkt-crosshair\"><\/span>\n            <span class=\"tl-telepunkt-core\"><\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"tl-telepunkt-tag\" id=\"tlTelePunktTag\">\n          <span id=\"tlTelePunktText\">tele-Punkt: Display meldet FEHLER E04 (Br\u00fcheinheit)<\/span>\n          <span class=\"tl-telepunkt-tag-sub\" id=\"tlTelePunktSub\">Touch-Display<\/span>\n        <\/div>\n\n        <div class=\"tl-pdf-overlay\" id=\"tlSolutionBanner\">\n          <div class=\"tl-pdf-sheet\">\n            <div class=\"tl-pdf-top\">\n              <div>\n                <div class=\"tl-pdf-title\">\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0284c7\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><\/svg>\n                  Service-Protokoll\n                  <span class=\"tl-pdf-badge-ok\">\u2713 Remote gel\u00f6st<\/span>\n                <\/div>\n                <div style=\"font-size:7.5px;color:#64748b;margin-top:2px;\">ID: Call_7731 &middot; Kantinen-Vollautomat 5000 S<\/div>\n              <\/div>\n              <div class=\"tl-pdf-meta-right\">\n                <div>Service-Geber: <strong>Werkskundendienst<\/strong><\/div>\n                <div>Service-Nehmer: <strong>Kantinenleitung vor Ort<\/strong><\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"tl-pdf-grid-4\">\n              <div>\n                <span class=\"tl-pdf-col-lbl\">Datum<\/span>\n                <span class=\"tl-pdf-col-val\">16.10.2026<\/span>\n              <\/div>\n              <div>\n                <span class=\"tl-pdf-col-lbl\">Beginn<\/span>\n                <span class=\"tl-pdf-col-val\">14:12 Uhr<\/span>\n              <\/div>\n              <div>\n                <span class=\"tl-pdf-col-lbl\">Dauer<\/span>\n                <span class=\"tl-pdf-col-val\">02:40 Min.<\/span>\n              <\/div>\n              <div>\n                <span class=\"tl-pdf-col-lbl\">Status<\/span>\n                <span class=\"tl-pdf-col-val\" style=\"color:#047857;\">Erstl\u00f6sung<\/span>\n              <\/div>\n            <\/div>\n\n            <div class=\"tl-pdf-photos\">\n              <div class=\"tl-pdf-photo-card\">\n                <img decoding=\"async\" class=\"tl-pdf-photo-thumb\" src=\"https:\/\/www.tele-look.com\/web\/wp-content\/uploads\/2026\/10\/sim_kaffeemaschine_kantinenautomat_v3.jpg\" alt=\"HD-Fern-Foto Befund\" style=\"object-position: 42% 28%;\" title=\"\">\n                <div class=\"tl-pdf-photo-caption\">\n                  <strong>HD-Fern-Foto 1 (14:12:40)<\/strong>\n                  Touch-Display FEHLER E04 & Service-Klappe\n                <\/div>\n              <\/div>\n              <div class=\"tl-pdf-photo-card\">\n                <div class=\"tl-pdf-nameplate-thumb\" aria-label=\"Nahaufnahme Typenschild\">\n                  <div class=\"tl-np-head\">\n                    <span>AUTO-BREW 5000 S<\/span>\n                    <span class=\"tl-np-ce\">CE<\/span>\n                  <\/div>\n                  <div class=\"tl-np-rows\">\n                    <div>SER: 18284907<\/div>\n                    <div>400V 3~ \u00b7 6,5 kW<\/div>\n                    <div>Art.-Nr. 03.1950.0001<\/div>\n                  <\/div>\n                  <div class=\"tl-np-barcode\"><\/div>\n                <\/div>\n                <div class=\"tl-pdf-photo-caption\">\n                  <strong>HD-Fern-Foto 2 (14:13:05)<\/strong>\n                  Nahaufnahme Typenschild &amp; Serien-Nr.\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"tl-pdf-notes\">\n              <div class=\"tl-pdf-note-item\">\n                <span><strong>Befund (14:13):<\/strong> Fehlercode E04 am Display: Br\u00fcheinheit nach Satzstau blockiert.<\/span>\n                <span style=\"color:#64748b;font-size:7.5px;white-space:nowrap;\">Notiz 1<\/span>\n              <\/div>\n              <div class=\"tl-pdf-note-item is-resolved\">\n                <span><strong>L\u00f6sung (14:14):<\/strong> Service-Klappe per tele-Punkt ge\u00f6ffnet, Br\u00fcheinheit entriegelt & gesp\u00fclt \u00b7 Vollautomat l\u00e4uft.<\/span>\n                <span style=\"color:#15803d;font-weight:800;font-size:7.5px;white-space:nowrap;\">\u2713 Gel\u00f6st<\/span>\n              <\/div>\n            <\/div>\n\n            <div class=\"tl-pdf-billing-banner\">\n              <span><strong>\u2713 Abrechenbare Leistung:<\/strong> PDF-Protokoll dient als offizieller T\u00e4tigkeitsnachweis f\u00fcr die Rechnung<\/span>\n              <span class=\"tl-pdf-saving-tag\">Rechnungsbeleg PDF<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"tl-mockup-steps\" role=\"tablist\" aria-label=\"Ablauf der visuellen Vorabdiagnose\">\n        <button type=\"button\" class=\"tl-step-tab is-active\" onclick=\"window.setTlHeroPhase && window.setTlHeroPhase(0, true); this.blur();\">\n          <span class=\"tl-step-num\">1<\/span>\n          <span>tele-Punkt setzen<\/span>\n        <\/button>\n        <button type=\"button\" class=\"tl-step-tab\" onclick=\"window.setTlHeroPhase && window.setTlHeroPhase(1, true); this.blur();\">\n          <span class=\"tl-step-num\">2<\/span>\n          <span>HD-Fern-Foto ausl\u00f6sen<\/span>\n        <\/button>\n        <button type=\"button\" class=\"tl-step-tab\" onclick=\"window.setTlHeroPhase && window.setTlHeroPhase(2, true); this.blur();\">\n          <span class=\"tl-step-num\">3<\/span>\n          <span>PDF-Protokoll &amp; Abrechnung<\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"tl-monitor-neck\" aria-hidden=\"true\"><\/div>\n  <div class=\"tl-monitor-base\" aria-hidden=\"true\"><\/div>\n  <div class=\"tl-simulation-note\">Bild mit KI generiert<\/div>\n<\/div>\n<script>\n(function initTlIndustrySim() {\n  var currentPhase = 0;\n  var subTimer = null;\n  var loopTimer = null;\n  var secCounter = 84;\n  var cfg = {\"slug\": \"kaffemaschinenhersteller\", \"topbar_title\": \"Ansicht des Service-Gebers \\u00b7 Kantinen-Vollautomat\", \"img_url\": \"https:\/\/www.tele-look.com\/web\/wp-content\/uploads\/2026\/10\/sim_kaffeemaschine_kantinenautomat_v3.jpg\", \"img_alt\": \"Kantinen-Kaffeevollautomat mit Fehleranzeige FEHLER E04 Br\\u00fcheinheit pr\\u00fcfen im Live-Video-Support\", \"p1_a\": {\"top\": \"28%\", \"left\": \"42%\", \"text\": \"tele-Punkt: Display meldet FEHLER E04 (Br\\u00fcheinheit)\", \"sub\": \"Touch-Display\"}, \"p1_b\": {\"top\": \"41%\", \"left\": \"63%\", \"text\": \"tele-Punkt: Service-Klappe am Drehgriff entriegeln\", \"sub\": \"Service Access\"}, \"p2\": {\"top\": \"74%\", \"left\": \"63%\", \"text\": \"HD-Fern-Foto: Typenschild & Serien-Nr. aufgenommen\", \"sub\": \"Aufnahme\"}, \"focus_box\": {\"top\": \"64%\", \"left\": \"58%\", \"w\": \"10%\", \"h\": \"19%\"}, \"toast_file\": \"Kaffeevollautomat_5000S_E04.jpg\", \"pdf_id\": \"Call_7731\", \"pdf_dur\": \"02:40 Min.\", \"pdf_system\": \"Kantinen-Vollautomat 5000 S\", \"pdf_geber\": \"Werkskundendienst\", \"pdf_nehmer\": \"Kantinenleitung vor Ort\", \"photo1_cap\": \"Touch-Display FEHLER E04 & Service-Klappe\", \"np_model\": \"AUTO-BREW 5000 S\", \"np_sn\": \"SER: 18284907\", \"np_elec\": \"400V 3~ \\u00b7 6,5 kW\", \"np_spec\": \"Art.-Nr. 03.1950.0001\", \"pdf_finding\": \"Fehlercode E04 am Display: Br\\u00fcheinheit nach Satzstau blockiert.\", \"pdf_action\": \"Service-Klappe per tele-Punkt ge\\u00f6ffnet, Br\\u00fcheinheit entriegelt & gesp\\u00fclt \\u00b7 Vollautomat l\\u00e4uft.\"};\n\n  function applyPhase(phaseIdx) {\n    currentPhase = phaseIdx;\n    var punkt = document.getElementById('tlTelePunkt');\n    var punktTag = document.getElementById('tlTelePunktTag');\n    var punktText = document.getElementById('tlTelePunktText');\n    var punktSub = document.getElementById('tlTelePunktSub');\n    var flash = document.getElementById('tlShutterFlash');\n    var focusBox = document.getElementById('tlPhotoFocus');\n    var photoToast = document.getElementById('tlPhotoToast');\n    var solBanner = document.getElementById('tlSolutionBanner');\n    var tabs = document.querySelectorAll('#tlHeroMockup .tl-step-tab');\n    if (!punkt || !punktText) return;\n    if (subTimer) { clearTimeout(subTimer); subTimer = null; }\n\n    for (var i = 0; i < tabs.length; i++) {\n      if (i === phaseIdx) tabs[i].classList.add('is-active');\n      else tabs[i].classList.remove('is-active');\n    }\n\n    if (phaseIdx === 0) {\n      if (focusBox) focusBox.classList.remove('is-visible');\n      if (photoToast) photoToast.classList.remove('is-visible');\n      if (solBanner) solBanner.classList.remove('is-visible');\n      punkt.style.opacity = '1';\n      if (punktTag) punktTag.style.opacity = '1';\n      punkt.style.top = cfg.p1_a.top;\n      punkt.style.left = cfg.p1_a.left;\n      punktText.textContent = cfg.p1_a.text;\n      if (punktSub) punktSub.textContent = cfg.p1_a.sub;\n\n      subTimer = setTimeout(function() {\n        if (currentPhase !== 0) return;\n        punkt.style.top = cfg.p1_b.top;\n        punkt.style.left = cfg.p1_b.left;\n        punktText.textContent = cfg.p1_b.text;\n        if (punktSub) punktSub.textContent = cfg.p1_b.sub;\n      }, 1650);\n    } else if (phaseIdx === 1) {\n      if (solBanner) solBanner.classList.remove('is-visible');\n      punkt.style.opacity = '1';\n      if (punktTag) punktTag.style.opacity = '1';\n      punkt.style.top = cfg.p2.top;\n      punkt.style.left = cfg.p2.left;\n      punktText.textContent = cfg.p2.text;\n      if (punktSub) punktSub.textContent = cfg.p2.sub;\n      if (focusBox) focusBox.classList.add('is-visible');\n\n      subTimer = setTimeout(function() {\n        if (currentPhase !== 1) return;\n        if (flash) {\n          flash.classList.add('is-flashing');\n          setTimeout(function() { flash.classList.remove('is-flashing'); }, 180);\n        }\n        if (photoToast) photoToast.classList.add('is-visible');\n      }, 450);\n    } else if (phaseIdx === 2) {\n      if (focusBox) focusBox.classList.remove('is-visible');\n      if (photoToast) photoToast.classList.remove('is-visible');\n      punkt.style.opacity = '0';\n      if (punktTag) punktTag.style.opacity = '0';\n      if (solBanner) solBanner.classList.add('is-visible');\n    }\n  }\n\n  function startAutoLoop() {\n    if (loopTimer) clearInterval(loopTimer);\n    loopTimer = setInterval(function() {\n      applyPhase((currentPhase + 1) % 3);\n    }, 3900);\n  }\n\n  window.setTlHeroPhase = function(phaseIdx, isManual) {\n    applyPhase(phaseIdx);\n    if (isManual) startAutoLoop();\n  };\n\n  setInterval(function() {\n    var timerEl = document.getElementById('tlLiveTimer');\n    if (!timerEl) return;\n    secCounter++;\n    if (secCounter > 179) secCounter = 75;\n    var m = Math.floor(secCounter \/ 60);\n    var s = secCounter % 60;\n    timerEl.textContent = (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s) + ' Min.';\n  }, 1000);\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function() { applyPhase(0); startAutoLoop(); });\n  } else {\n    applyPhase(0);\n    startAutoLoop();\n  }\n})();\n<\/script>\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\">Kaffemaschinenhersteller<\/span>\n      <\/nav>\n    <\/div>\n    \n\n\n\n    <!-- \u2500\u2500 KPI BAR \u2500\u2500 -->\n    <section id=\"kpis\" class=\"kpi-section\">\n      <div class=\"tl-container\">\n        <div class=\"kpi-grid\">\n          <div class=\"kpi-box\">\n            <div class=\"kpi-val\">-25 %<\/div>\n            <div class=\"kpi-label\">Gesamte Servicekosten<\/div>\n          <\/div>\n          <div class=\"kpi-box\">\n            <div class=\"kpi-val\">5 Min.<\/div>\n            <div class=\"kpi-label\">\u00d8 Diagnose-Dauer<\/div>\n          <\/div>\n          <div class=\"kpi-box\">\n            <div class=\"kpi-val\">3.500 \u20ac<\/div>\n            <div class=\"kpi-label\">Potenzial pro Techniker\/Monat<\/div>\n          <\/div>\n          <div class=\"kpi-box\">\n            <div class=\"kpi-val\">4,9\/5<\/div>\n            <div class=\"kpi-label\">Kunden-Zufriedenheit<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n    <!-- \u2500\u2500 TECHNOLOGIE (VORTEILE) \u2500\u2500 -->\n    <section id=\"technik\" class=\"tl-sec\">\n      <div class=\"tl-container\">\n        <div style=\"text-align:center;max-width:760px;margin:0 auto 48px;\">\n          <span class=\"tl-eyebrow\">Technologie<\/span>\n          <h2>Browserbasiert. Sicher. Pragmatisch.<\/h2>\n          <p>Wir beseitigen technische H\u00fcrden, damit Ihr Service direkt starten kann.<\/p>\n        <\/div>\n\n        <div class=\"bento-grid-3\" style=\"grid-template-columns:repeat(2, 1fr);gap:24px;\">\n          <div class=\"bento-box\">\n            <div>\n              <h3>Keine App notwendig<\/h3>\n              <p style=\"font-size:14px;color:var(--tl-text-secondary);\">Video-Support geht direkt \u00fcber den Browser \u00fcber einen sicheren Link. Weder Baristi noch B\u00fcroangestellte installieren gerne fremde Apps auf dem Handy.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"bento-box\">\n            <div>\n              <h3>DSGVO &amp; Sicherheit<\/h3>\n              <p style=\"font-size:14px;color:var(--tl-text-secondary);\">Deutsche Server, Entwicklung in Deutschland, konsequente Datensparsamkeit und automatische Datenl\u00f6schung nach 12 Monaten.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"bento-box\">\n            <div>\n              <h3>Low-Bandwidth Mode<\/h3>\n              <p style=\"font-size:14px;color:var(--tl-text-secondary);\">In Kellern oder dichten K\u00fcchengeb\u00e4uden sinkt die Bitrate oft ab. Unser Algorithmus priorisiert Stabilit\u00e4t vor 4K-Aufl\u00f6sung, damit die Verbindung h\u00e4lt.<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"bento-box\">\n            <div>\n              <h3>Remote HD-Fotos<\/h3>\n              <p style=\"font-size:14px;color:var(--tl-text-secondary);\">Selbst bei geringer Bandbreite nehmen Sie Remote-Fotos in voller Aufl\u00f6sung auf. Diese werden zur Dokumentation automatisch im Service-Protokoll gespeichert.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n    <!-- \u2500\u2500 USE CASES \u2500\u2500 -->\n    <section id=\"use-cases\" class=\"tl-sec tl-sec-alt\">\n      <div class=\"tl-container\">\n        <div style=\"text-align:center;max-width:760px;margin:0 auto 48px;\">\n          <span class=\"tl-eyebrow\">Einsatzszenarien<\/span>\n          <h2>Maximale Effizienz in jeder Phase<\/h2>\n          <p>tele-LOOK ist mehr als nur Video \u2013 es ist das digitale Auge Ihres besten Technikers beim Kunden vor Ort.<\/p>\n        <\/div>\n\n        <div class=\"usecase-grid\">\n          <div class=\"usecase-card\">\n            <span class=\"tl-eyebrow\" style=\"font-size:10px;\">Fehlbedienung beheben<\/span>\n            <h3>Vermeidung trivialer Eins\u00e4tze<\/h3>\n            <p style=\"font-size:13.5px;color:var(--tl-text-secondary);\">Oft ist es nur ein nicht eingerasteter Wassertank oder Bohnenbeh\u00e4lter. L\u00f6sen Sie <strong>40% der St\u00f6rungen per Videoanleitung<\/strong> vor der Anfahrt.<\/p>\n          <\/div>\n\n          <div class=\"usecase-card\">\n            <span class=\"tl-eyebrow\" style=\"font-size:10px;\">HD-Foto Identifikation<\/span>\n            <h3>Ersatzteil-Pr\u00e4zision<\/h3>\n            <p style=\"font-size:13.5px;color:var(--tl-text-secondary);\">Welche Br\u00fchgruppe oder Dichtung ist verbaut? Nutzen Sie die HD-Foto-Funktion f\u00fcr Seriennummern \u2013 der Techniker f\u00e4hrt nur einmal.<\/p>\n          <\/div>\n\n          <div class=\"usecase-card\">\n            <span class=\"tl-eyebrow\" style=\"font-size:10px;\">Set-up Support<\/span>\n            <h3>Remote Installation<\/h3>\n            <p style=\"font-size:13.5px;color:var(--tl-text-secondary);\">Wenn der Klempner die Maschine selbst anschlie\u00dft, unterst\u00fctzen Sie beim Anschluss der Wasserenth\u00e4rtung und Erstkonfiguration.<\/p>\n          <\/div>\n\n          <div class=\"usecase-card\">\n            <span class=\"tl-eyebrow\" style=\"font-size:10px;\">Events &amp; Messen<\/span>\n            <h3>Support f\u00fcr Miet-Flotten<\/h3>\n            <p style=\"font-size:13.5px;color:var(--tl-text-secondary);\">Bei Messen z\u00e4hlt jede Minute. Minimieren Sie Stillstandzeiten durch sofortige Diagnose f\u00fcr Kleinigkeiten, die der Kunde selbst beheben kann.<\/p>\n          <\/div>\n\n          <div class=\"usecase-card\">\n            <span class=\"tl-eyebrow\" style=\"font-size:10px;\">Mahlgrad &amp; Flow<\/span>\n            <h3>Qualit\u00e4tssicherung Remote<\/h3>\n            <p style=\"font-size:13.5px;color:var(--tl-text-secondary);\">Kaffee schmeckt nicht? Beurteilen Sie das Extraktionsverhalten live und f\u00fchren Sie das Personal durch die Mahlgradverstellung.<\/p>\n          <\/div>\n\n          <div class=\"usecase-card\">\n            <span class=\"tl-eyebrow\" style=\"font-size:10px;\">Senior zu Junior<\/span>\n            <h3>Live-Support f\u00fcrs Team<\/h3>\n            <p style=\"font-size:13.5px;color:var(--tl-text-secondary);\">Senior-Experte schaltet sich per Video dazu und gibt via tele-Punkt pr\u00e4zise Anweisungen. Wissenstransfer in Echtzeit.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n    <!-- \u2500\u2500 ROI & MONETARISIERUNG \u2500\u2500 -->\n    <section id=\"roi\" class=\"tl-sec\">\n      <div class=\"tl-container\">\n        <div style=\"background:var(--tl-dark-section);border-radius:32px;padding:48px;color:#fff;\">\n          <div style=\"display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;\">\n            <div>\n              <span class=\"tl-eyebrow\" style=\"color:#38bdf8;\">Wirtschaftlichkeit<\/span>\n              <h2 style=\"color:#fff;margin-bottom:18px;\">Machen Sie Ihren Support zum Profit-Center<\/h2>\n              <p style=\"color:rgba(255,255,255,0.8);line-height:1.7;margin-bottom:24px;\">\n                Stoppen Sie kostenlose Telefonberatung, die Ihre Experten blockiert. Mit tele-LOOK dokumentieren Sie Remote-Leistungen professionell und rechnen diese als <strong>\u201eDigitalen Service-Einsatz\u201c<\/strong> ab.\n              <\/p>\n              <ul style=\"list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px;\">\n                <li>\u2022 <strong>Paid Support:<\/strong> Video-Diagnose als buchbares Paket f\u00fcr Gastronomen &amp; B\u00fcros.<\/li>\n                <li>\u2022 <strong>Premium-Wartung:<\/strong> Garantierte 15-Minuten-Reaktionszeit via Video im SLA.<\/li>\n                <li>\u2022 <strong>Dokumentation:<\/strong> PDF-Protokoll mit Fotos als manipulationssicherer Leistungsnachweis.<\/li>\n              <\/ul>\n            <\/div>\n\n            <!-- Rechenbeispiel Box -->\n            <div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:24px;padding:28px;\">\n              <span style=\"font-size:11px;font-weight:800;text-transform:uppercase;color:#38bdf8;letter-spacing:0.1em;display:block;margin-bottom:16px;\">ROI-Kalkulation (Pro Techniker\/Monat)<\/span>\n              <div style=\"display:flex;flex-direction:column;gap:14px;\">\n                <div style=\"display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:10px;\">\n                  <span style=\"color:rgba(255,255,255,0.8);\">Vermeidbare Anfahrten<\/span>\n                  <strong style=\"color:#fff;font-size:18px;\">15<\/strong>\n                <\/div>\n                <div style=\"display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:10px;\">\n                  <span style=\"color:rgba(255,255,255,0.8);\">Kosten pro Anfahrt (\u00d8)<\/span>\n                  <strong style=\"color:#fff;font-size:18px;\">140 \u20ac<\/strong>\n                <\/div>\n                <div style=\"display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:10px;\">\n                  <span style=\"color:rgba(255,255,255,0.8);\">Abrechenbare Video-Calls<\/span>\n                  <strong style=\"color:#38bdf8;font-size:18px;\">8<\/strong>\n                <\/div>\n                <div style=\"background:var(--tl-grad-btn);border-radius:16px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin-top:6px;\">\n                  <div>\n                    <div style=\"font-weight:900;color:#fff;font-size:16px;\">Monatlicher Ertrag<\/div>\n                    <div style=\"font-size:11px;color:rgba(255,255,255,0.8);\">*Basierend auf Branchendurchschnitt<\/div>\n                  <\/div>\n                  <strong style=\"color:#fff;font-size:26px;font-family:'Montserrat',sans-serif;\">2.900 \u20ac<\/strong>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n    <!-- \u2500\u2500 FINAL CTA \u2500\u2500 -->\n    <section style=\"padding:80px 0;background:var(--tl-dark-section);position:relative;\">\n      <div class=\"tl-container\" style=\"display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;\">\n        <div>\n          <span class=\"tl-eyebrow\" style=\"color:#38bdf8;\">Individuelles Setup f\u00fcr Kaffeemaschinen-Hersteller<\/span>\n          <h2 style=\"color:#fff;margin:0 0 8px 0;\">Bereit f\u00fcr den digitalen Sprung?<\/h2>\n          <p style=\"color:rgba(255,255,255,0.7);margin:0;\">Reduzieren Sie Stress in Ihrem Team und erh\u00f6hen Sie die Marge Ihres Servicegesch\u00e4fts.<\/p>\n        <\/div>\n        <div style=\"display:flex;gap:12px;flex-wrap:wrap;\">\n          <a class=\"btn btn-primary\" href=\"\/web\/live-demo\/\" style=\"white-space:nowrap;\">14 Tage testen \u2192<\/a>\n          <a class=\"btn btn-outline\" href=\"mailto:sales@tele-look.com?subject=Individuelles%20Angebot%20Kaffeemaschinen-Service\" style=\"white-space:nowrap;\">Angebot anfragen<\/a>\n        <\/div>\n      <\/div>\n    <\/section>\n  <\/main>\n\n\n  <!-- \u2500\u2500 FOOTER \u2500\u2500 -->\n  \n\n<\/div><!-- \/tl-app -->\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Professionelle St\u00f6rungsbehebung f\u00fcr Gastronomie- &#038; Kaffeemaschinen: Fehlercodes, Mahlwerk &#038; Br\u00fcheinheit per 1-Klick-Live-Video pr\u00fcfen. Fehlfahrten halbieren.<\/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-14968","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages\/14968","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=14968"}],"version-history":[{"count":21,"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages\/14968\/revisions"}],"predecessor-version":[{"id":18786,"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/pages\/14968\/revisions\/18786"}],"wp:attachment":[{"href":"https:\/\/www.tele-look.com\/web\/wp-json\/wp\/v2\/media?parent=14968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}