{"id":37,"date":"2026-09-24T22:52:51","date_gmt":"2026-09-24T22:52:51","guid":{"rendered":"https:\/\/iptvto.com\/?page_id=37"},"modified":"2026-09-24T22:55:46","modified_gmt":"2026-09-24T22:55:46","slug":"installation-guide","status":"publish","type":"page","link":"https:\/\/iptvto.com\/index.php\/installation-guide\/","title":{"rendered":"installation-guide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"37\" class=\"elementor elementor-37\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a60a5eb e-con e-atomic-element e-flexbox-base e-default-div e-c1c5a75 \" data-id=\"a60a5eb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a60a5eb\">\n    \t\t<div class=\"elementor-element elementor-element-82b3d7f elementor-widget elementor-widget-html\" data-id=\"82b3d7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\" class=\"scroll-smooth\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n    <title>Installation Guide \u2013 IPTVTO.COM<\/title>\r\n    <meta name=\"description\" content=\"Schritt-f\u00fcr-Schritt Anleitung zur Einrichtung unterst\u00fctzter Streaming-Apps und Ger\u00e4te.\">\r\n    <meta property=\"og:title\" content=\"Installation Guide \u2013 IPTVTO.COM\">\r\n    <meta property=\"og:description\" content=\"Schritt-f\u00fcr-Schritt Anleitung zur Einrichtung unterst\u00fctzter Streaming-Apps und Ger\u00e4te.\">\r\n    <meta property=\"og:type\" content=\"website\">\r\n    <link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83d\udcfa<\/text><\/svg>\">\r\n    \r\n    <!-- Tailwind CSS CDN -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script>\r\n        tailwind.config = {\r\n            theme: {\r\n                extend: {\r\n                    colors: {\r\n                        brand: {\r\n                            cyan: '#00f2fe',\r\n                            purple: '#4facfe',\r\n                            violet: '#7f00ff',\r\n                            magenta: '#e100ff',\r\n                            darkBg: '#060911',\r\n                            cardBg: 'rgba(15, 23, 42, 0.65)',\r\n                            whatsapp: '#25D366'\r\n                        }\r\n                    },\r\n                    fontFamily: {\r\n                        sans: ['Inter', 'system-ui', 'sans-serif']\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/script>\r\n    \r\n    <!-- Google Fonts -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <!-- Font Awesome CDN -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" integrity=\"sha512-iecdLmaskl7CVkqkXNQ\/ZH\/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT\/E0iPtmFIB46ZmdtAc9eNBvH0H\/ZpiBw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n\r\n    <style>\r\n        *, ::before, ::after {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        html, body {\r\n            max-width: 100%;\r\n            overflow-x: hidden;\r\n            background-color: #060911;\r\n            color: #f3f4f6;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .glass-card {\r\n            background: rgba(15, 23, 42, 0.65);\r\n            backdrop-filter: blur(16px);\r\n            -webkit-backdrop-filter: blur(16px);\r\n            border: 1px solid rgba(255, 255, 255, 0.08);\r\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);\r\n        }\r\n\r\n        .glass-card-featured {\r\n            background: rgba(22, 30, 56, 0.85);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border: 1px solid rgba(225, 0, 255, 0.3);\r\n            box-shadow: 0 0 40px rgba(127, 0, 255, 0.25);\r\n        }\r\n\r\n        .glow-cyan {\r\n            box-shadow: 0 0 25px rgba(0, 242, 254, 0.25);\r\n        }\r\n\r\n        .glow-purple {\r\n            box-shadow: 0 0 25px rgba(127, 0, 255, 0.35);\r\n        }\r\n\r\n        .bg-gradient-primary {\r\n            background: linear-gradient(135deg, #00f2fe 0%, #7f00ff 100%);\r\n        }\r\n\r\n        .bg-gradient-btn-featured {\r\n            background: linear-gradient(135deg, #7f00ff 0%, #e100ff 100%);\r\n        }\r\n\r\n        .text-gradient {\r\n            background: linear-gradient(135deg, #00f2fe 0%, #a855f7 50%, #e100ff 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        \/* Device Filter Styling *\/\r\n        .device-card.active {\r\n            border-color: #00f2fe;\r\n            background: rgba(0, 242, 254, 0.12);\r\n            box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* FAQ Accordion Styling *\/\r\n        .faq-answer {\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);\r\n        }\r\n        .faq-item.active .faq-answer {\r\n            max-height: 500px;\r\n            transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);\r\n        }\r\n        .faq-item.active .faq-icon {\r\n            transform: rotate(180deg);\r\n        }\r\n\r\n        \/* Custom Scrollbar for horizontal app nav *\/\r\n        .no-scrollbar::-webkit-scrollbar {\r\n            display: none;\r\n        }\r\n        .no-scrollbar {\r\n            -ms-overflow-style: none;\r\n            scrollbar-width: none;\r\n        }\r\n\r\n        .app-nav-btn.active {\r\n            background: linear-gradient(135deg, #7f00ff 0%, #00f2fe 100%);\r\n            color: #ffffff;\r\n            border-color: transparent;\r\n            box-shadow: 0 0 15px rgba(127, 0, 255, 0.4);\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex flex-col justify-between selection:bg-cyan-500 selection:text-black\">\r\n\r\n    <!-- Ambient Background Glows -->\r\n    <div class=\"fixed top-0 left-1\/2 -translate-x-1\/2 w-full max-w-7xl h-96 bg-cyan-600\/10 blur-[120px] pointer-events-none -z-10 rounded-full\"><\/div>\r\n    <div class=\"fixed top-1\/3 right-0 w-96 h-96 bg-purple-600\/10 blur-[140px] pointer-events-none -z-10 rounded-full\"><\/div>\r\n\r\n    <!-- Header \/ Navigation -->\r\n    <header class=\"sticky top-0 z-40 w-full backdrop-blur-md bg-[#060911]\/80 border-b border-white\/5 transition-all\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"flex items-center justify-between h-16 md:h-20\">\r\n                <!-- Logo -->\r\n                <a href=\"#\" class=\"flex items-center gap-2 group\">\r\n                    <div class=\"w-10 h-10 rounded-xl bg-gradient-primary flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform\">\r\n                        <i class=\"fa-solid fa-play text-white text-lg ml-0.5\"><\/i>\r\n                    <\/div>\r\n                    <span class=\"text-2xl font-extrabold tracking-tight text-white\">IPTVTO<span class=\"text-cyan-400\">.COM<\/span><\/span>\r\n                <\/a>\r\n\r\n                <!-- Desktop Nav -->\r\n                <nav class=\"hidden md:flex items-center gap-8 text-sm font-medium text-gray-300\">\r\n                    <a href=\"#start\" class=\"hover:text-cyan-400 transition-colors\">Startseite<\/a>\r\n                    <a href=\"#geraete-auswahl\" class=\"hover:text-cyan-400 transition-colors\">Ger\u00e4te<\/a>\r\n                    <a href=\"#apps\" class=\"hover:text-cyan-400 transition-colors\">Anleitungen<\/a>\r\n                    <a href=\"#troubleshooting\" class=\"hover:text-cyan-400 transition-colors\">FAQ & Hilfe<\/a>\r\n                <\/nav>\r\n\r\n                <!-- Header CTA Button -->\r\n                <div class=\"hidden md:flex items-center gap-4\">\r\n                    <a href=\"https:\/\/wa.me\/212721504253\" target=\"_blank\" class=\"px-5 py-2.5 rounded-xl font-semibold text-sm bg-brand-whatsapp text-black hover:bg-emerald-400 transition-all duration-300 shadow-lg flex items-center gap-2\" rel=\"noopener\">\r\n                        <i class=\"fa-brands fa-whatsapp text-lg\"><\/i> Live Support\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <!-- Mobile Menu Button -->\r\n                <button id=\"mobile-menu-btn\" aria-label=\"Menu\" class=\"md:hidden p-2 rounded-lg bg-white\/5 border border-white\/10 text-gray-300 hover:text-white focus:outline-none\">\r\n                    <i class=\"fa-solid fa-bars text-xl\"><\/i>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Mobile Menu dropdown -->\r\n        <div id=\"mobile-menu\" class=\"hidden md:hidden bg-[#0a0f1d] border-b border-white\/10 px-4 pt-2 pb-6 space-y-3\">\r\n            <a href=\"#start\" class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-white\/5\">Startseite<\/a>\r\n            <a href=\"#geraete-auswahl\" class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-white\/5\">Ger\u00e4te<\/a>\r\n            <a href=\"#apps\" class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-white\/5\">Anleitungen<\/a>\r\n            <a href=\"#troubleshooting\" class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-white\/5\">FAQ & Hilfe<\/a>\r\n            <a href=\"https:\/\/wa.me\/212721504253\" target=\"_blank\" class=\"block text-center mt-4 w-full py-3 rounded-xl font-bold bg-brand-whatsapp text-black shadow-lg\" rel=\"noopener\">\r\n                <i class=\"fa-brands fa-whatsapp mr-2\"><\/i> WhatsApp Support\r\n            <\/a>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <main>\r\n        <!-- HERO SECTION -->\r\n        <section id=\"start\" class=\"pt-6 pb-10 md:pt-16 md:pb-16 relative overflow-hidden\">\r\n            <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n                <div class=\"text-center max-w-3xl mx-auto space-y-4\">\r\n                    \r\n                    <div class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs md:text-sm font-semibold tracking-wide\">\r\n                        <i class=\"fa-solid fa-gears text-cyan-400\"><\/i> Easy Setup Center\r\n                    <\/div>\r\n\r\n                    <h1 class=\"text-3xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight\">\r\n                        Installation & <span class=\"text-gradient\">Einrichtungsanleitung<\/span>\r\n                    <\/h1>\r\n\r\n                    <p class=\"text-base sm:text-lg text-gray-300 font-normal leading-relaxed\">\r\n                        Schritt f\u00fcr Schritt erkl\u00e4rt \u2013 so richten Sie Ihre Streaming-App auf Ihrem Ger\u00e4t ein.\r\n                    <\/p>\r\n\r\n                    <!-- AUTHORIZATION NOTICE NOTE -->\r\n                    <div class=\"mt-6 glass-card p-4 rounded-2xl border border-amber-500\/30 bg-amber-500\/5 text-left max-w-2xl mx-auto flex items-start gap-3\">\r\n                        <i class=\"fa-solid fa-triangle-exclamation text-amber-400 text-lg sm:text-xl flex-shrink-0 mt-0.5\"><\/i>\r\n                        <p class=\"text-xs sm:text-sm text-gray-300 leading-relaxed\">\r\n                            <strong class=\"text-amber-300\">Wichtiger Hinweis:<\/strong> Bitte nutzen Sie ausschlie\u00dflich Streaming-Apps, Wiedergabelisten und Inhalte, f\u00fcr deren Zugriff Sie ausdr\u00fccklich berechtigt sind. IPTVTO stellt technische Anleitungen f\u00fcr kompatible Player-Software bereit.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- DEVICE SELECTOR SECTION -->\r\n        <section id=\"geraete-auswahl\" class=\"py-8 bg-slate-950\/50 border-t border-b border-white\/5\">\r\n            <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n                <div class=\"text-center max-w-2xl mx-auto mb-6\">\r\n                    <h2 class=\"text-xl sm:text-2xl font-bold text-white\">W\u00e4hlen Sie Ihr Ger\u00e4t<\/h2>\r\n                    <p class=\"text-xs sm:text-sm text-gray-400 mt-1\">Klicken Sie auf Ihr Ger\u00e4t, um kompatible Streaming-Apps zu filtern<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4 max-w-5xl mx-auto\">\r\n                    <!-- Smart TV -->\r\n                    <button onclick=\"filterByDevice('smart-tv')\" id=\"dev-smart-tv\" class=\"device-card active glass-card p-4 rounded-2xl text-center space-y-2 border border-white\/10 hover:border-cyan-400\/50 transition-all cursor-pointer\">\r\n                        <i class=\"fa-solid fa-tv text-2xl sm:text-3xl text-cyan-400 block\"><\/i>\r\n                        <div class=\"text-xs sm:text-sm font-bold text-white\">Smart TV<\/div>\r\n                    <\/button>\r\n\r\n                    <!-- Android -->\r\n                    <button onclick=\"filterByDevice('android')\" id=\"dev-android\" class=\"device-card glass-card p-4 rounded-2xl text-center space-y-2 border border-white\/10 hover:border-cyan-400\/50 transition-all cursor-pointer\">\r\n                        <i class=\"fa-brands fa-android text-2xl sm:text-3xl text-emerald-400 block\"><\/i>\r\n                        <div class=\"text-xs sm:text-sm font-bold text-white\">Android<\/div>\r\n                    <\/button>\r\n\r\n                    <!-- Android TV \/ Google TV -->\r\n                    <button onclick=\"filterByDevice('android-tv')\" id=\"dev-android-tv\" class=\"device-card glass-card p-4 rounded-2xl text-center space-y-2 border border-white\/10 hover:border-cyan-400\/50 transition-all cursor-pointer\">\r\n                        <i class=\"fa-solid fa-box text-2xl sm:text-3xl text-purple-400 block\"><\/i>\r\n                        <div class=\"text-xs sm:text-sm font-bold text-white\">Android TV \/ Fire TV<\/div>\r\n                    <\/button>\r\n\r\n                    <!-- Windows \/ Mac -->\r\n                    <button onclick=\"filterByDevice('pc')\" id=\"dev-pc\" class=\"device-card glass-card p-4 rounded-2xl text-center space-y-2 border border-white\/10 hover:border-cyan-400\/50 transition-all cursor-pointer\">\r\n                        <i class=\"fa-solid fa-desktop text-2xl sm:text-3xl text-blue-400 block\"><\/i>\r\n                        <div class=\"text-xs sm:text-sm font-bold text-white\">Windows \/ Mac<\/div>\r\n                    <\/button>\r\n\r\n                    <!-- Apple -->\r\n                    <button onclick=\"filterByDevice('apple')\" id=\"dev-apple\" class=\"device-card glass-card p-4 rounded-2xl text-center space-y-2 border border-white\/10 hover:border-cyan-400\/50 transition-all cursor-pointer col-span-2 sm:col-span-1\">\r\n                        <i class=\"fa-brands fa-apple text-2xl sm:text-3xl text-gray-200 block\"><\/i>\r\n                        <div class=\"text-xs sm:text-sm font-bold text-white\">Apple Devices<\/div>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- INTERACTIVE APP NAVIGATION (STICKY HORIZONTAL BAR) -->\r\n        <section id=\"apps\" class=\"sticky top-16 md:top-20 z-30 bg-[#060911]\/90 backdrop-blur-md py-3 border-b border-white\/10\">\r\n            <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n                <div class=\"flex items-center justify-start md:justify-center gap-2 sm:gap-4 overflow-x-auto no-scrollbar py-1\">\r\n                    <a href=\"#ibo-player\" class=\"app-nav-btn active flex-shrink-0 px-4 py-2 rounded-xl border border-white\/10 text-xs sm:text-sm font-bold text-gray-300 hover:text-white transition-all flex items-center gap-2\">\r\n                        <i class=\"fa-solid fa-circle-play text-cyan-400\"><\/i> IBO Player\r\n                    <\/a>\r\n                    <a href=\"#tivimate\" class=\"app-nav-btn flex-shrink-0 px-4 py-2 rounded-xl border border-white\/10 text-xs sm:text-sm font-bold text-gray-300 hover:text-white transition-all flex items-center gap-2\">\r\n                        <i class=\"fa-solid fa-tv text-purple-400\"><\/i> TiviMate\r\n                    <\/a>\r\n                    <a href=\"#iptv-smarters\" class=\"app-nav-btn flex-shrink-0 px-4 py-2 rounded-xl border border-white\/10 text-xs sm:text-sm font-bold text-gray-300 hover:text-white transition-all flex items-center gap-2\">\r\n                        <i class=\"fa-solid fa-sliders text-emerald-400\"><\/i> IPTV Smarters Pro\r\n                    <\/a>\r\n                    <a href=\"#hotplayer\" class=\"app-nav-btn flex-shrink-0 px-4 py-2 rounded-xl border border-white\/10 text-xs sm:text-sm font-bold text-gray-300 hover:text-white transition-all flex items-center gap-2\">\r\n                        <i class=\"fa-solid fa-fire text-amber-400\"><\/i> HotPlayer\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <!-- APP GUIDES CONTAINER -->\r\n        <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-16\">\r\n\r\n            <!-- 1. IBO PLAYER SECTION -->\r\n            <section id=\"ibo-player\" class=\"app-guide-section scroll-mt-36\" data-devices=\"smart-tv,android-tv,apple\">\r\n                <div class=\"glass-card rounded-3xl p-6 sm:p-10 border border-cyan-500\/30 relative overflow-hidden\">\r\n                    \r\n                    <!-- App Header -->\r\n                    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-white\/10 pb-6 mb-8\">\r\n                        <div class=\"flex items-center gap-4\">\r\n                            <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white text-2xl shadow-lg glow-cyan flex-shrink-0\">\r\n                                <i class=\"fa-solid fa-circle-play\"><\/i>\r\n                            <\/div>\r\n                            <div>\r\n                                <h2 class=\"text-2xl sm:text-3xl font-extrabold text-white\">IBO Player<\/h2>\r\n                                <p class=\"text-xs sm:text-sm text-gray-400 mt-1\">Leistungsstarke Streaming-App f\u00fcr moderne Smart-TVs<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"flex flex-wrap gap-2\">\r\n                            <span class=\"px-3 py-1 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs font-semibold\">Samsung Tizen<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs font-semibold\">LG webOS<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs font-semibold\">Android TV<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs font-semibold\">Apple TV<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Steps -->\r\n                    <div class=\"space-y-8\">\r\n                        \r\n                        <!-- Schritt 1 -->\r\n                        <div class=\"flex flex-col md:flex-row gap-4 items-start\">\r\n                            <div class=\"w-8 h-8 rounded-xl bg-cyan-500\/20 text-cyan-400 font-extrabold flex items-center justify-center border border-cyan-500\/30 flex-shrink-0\">1<\/div>\r\n                            <div class=\"space-y-2 flex-grow\">\r\n                                <h3 class=\"text-lg font-bold text-white\">Schritt 1 \u2013 App installieren<\/h3>\r\n                                <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                    Suchen Sie im offiziellen App Store Ihres Smart-TVs (z.B. Samsung Content Store, LG Content Store, Google Play Store oder Apple App Store) nach <strong>\"IBO Player\"<\/strong> und installieren Sie die Anwendung auf Ihrem Ger\u00e4t.\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Schritt 2 -->\r\n                        <div class=\"flex flex-col md:flex-row gap-4 items-start\">\r\n                            <div class=\"w-8 h-8 rounded-xl bg-cyan-500\/20 text-cyan-400 font-extrabold flex items-center justify-center border border-cyan-500\/30 flex-shrink-0\">2<\/div>\r\n                            <div class=\"space-y-2 flex-grow\">\r\n                                <h3 class=\"text-lg font-bold text-white\">Schritt 2 \u2013 App \u00f6ffnen<\/h3>\r\n                                <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                    \u00d6ffnen Sie die IBO Player App. Nach dem Start zeigt Ihnen die App auf dem Bildschirm Ihre spezifischen Ger\u00e4tedaten an (<strong>MAC Address<\/strong> und <strong>Device Key<\/strong>).\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Schritt 3 -->\r\n                        <div class=\"flex flex-col md:flex-row gap-4 items-start\">\r\n                            <div class=\"w-8 h-8 rounded-xl bg-cyan-500\/20 text-cyan-400 font-extrabold flex items-center justify-center border border-cyan-500\/30 flex-shrink-0\">3<\/div>\r\n                            <div class=\"space-y-3 flex-grow w-full\">\r\n                                <h3 class=\"text-lg font-bold text-white\">Schritt 3 \u2013 Zugangsdaten eingeben<\/h3>\r\n                                <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                    Gehen Sie auf das Online-Verwaltungsportal von IBO Player und tragen Sie Ihre Autorisierungsdaten ein.\r\n                                <\/p>\r\n\r\n                                <!-- Visual Placeholder Card -->\r\n                                <div class=\"bg-slate-900\/90 rounded-2xl p-4 sm:p-5 border border-white\/10 space-y-3 font-mono text-xs sm:text-sm\">\r\n                                    <div class=\"text-gray-400 font-sans text-xs mb-2\">Beispielhafte Portal-Eingabe (Platzhalter):<\/div>\r\n                                    <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 p-2 rounded bg-white\/5\">\r\n                                        <span class=\"text-gray-400\">MAC \/ Device ID:<\/span>\r\n                                        <span class=\"text-cyan-300\">00:1A:79:XX:XX:XX<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 p-2 rounded bg-white\/5\">\r\n                                        <span class=\"text-gray-400\">Portal \/ Server URL:<\/span>\r\n                                        <span class=\"text-cyan-300\">https:\/\/beispiel-server.com:8080<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 p-2 rounded bg-white\/5\">\r\n                                        <span class=\"text-gray-400\">Username:<\/span>\r\n                                        <span class=\"text-cyan-300\">IHR_BENUTZERNAME<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-1 p-2 rounded bg-white\/5\">\r\n                                        <span class=\"text-gray-400\">Password:<\/span>\r\n                                        <span class=\"text-cyan-300\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022<\/span>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Schritt 4 -->\r\n                        <div class=\"flex flex-col md:flex-row gap-4 items-start\">\r\n                            <div class=\"w-8 h-8 rounded-xl bg-cyan-500\/20 text-cyan-400 font-extrabold flex items-center justify-center border border-cyan-500\/30 flex-shrink-0\">4<\/div>\r\n                            <div class=\"space-y-2 flex-grow\">\r\n                                <h3 class=\"text-lg font-bold text-white\">Schritt 4 \u2013 Verbindung speichern<\/h3>\r\n                                <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                    Speichern Sie die Konfiguration im Portal ab und starten Sie die IBO Player App auf Ihrem TV neu, um die verf\u00fcgbaren Inhalte zu laden.\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <!-- Troubleshooting Box for IBO Player -->\r\n                    <div class=\"mt-8 pt-6 border-t border-white\/10\">\r\n                        <h4 class=\"text-base font-bold text-white mb-3 flex items-center gap-2\">\r\n                            <i class=\"fa-solid fa-wrench text-cyan-400\"><\/i> Troubleshooting \u2013 IBO Player\r\n                        <\/h4>\r\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-gray-300\">\r\n                            <div class=\"p-3 rounded-xl bg-white\/5 border border-white\/5\">\r\n                                <strong class=\"text-white block mb-1\">App startet nicht:<\/strong>\r\n                                TV f\u00fcr 60 Sekunden vom Strom trennen und erneut versuchen.\r\n                            <\/div>\r\n                            <div class=\"p-3 rounded-xl bg-white\/5 border border-white\/5\">\r\n                                <strong class=\"text-white block mb-1\">Keine Verbindung:<\/strong>\r\n                                Pr\u00fcfen Sie die korrekte Schreibweise der Portal-URL und der MAC-Adresse.\r\n                            <\/div>\r\n                            <div class=\"p-3 rounded-xl bg-white\/5 border border-white\/5\">\r\n                                <strong class=\"text-white block mb-1\">Inhalte werden nicht geladen:<\/strong>\r\n                                App-Cache leeren oder Option \"Reload Playlist\" im Men\u00fc w\u00e4hlen.\r\n                            <\/div>\r\n                            <div class=\"p-3 rounded-xl bg-white\/5 border border-white\/5\">\r\n                                <strong class=\"text-white block mb-1\">Ger\u00e4t wird nicht erkannt:<\/strong>\r\n                                Device Key im Portal erneut eingeben und auf Gro\u00df-\/Kleinschreibung achten.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/section>\r\n\r\n\r\n            <!-- 2. TIVIMATE SECTION -->\r\n            <section id=\"tivimate\" class=\"app-guide-section scroll-mt-36\" data-devices=\"android-tv\">\r\n                <div class=\"glass-card rounded-3xl p-6 sm:p-10 border border-purple-500\/30 relative overflow-hidden\">\r\n                    \r\n                    <!-- App Header -->\r\n                    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-white\/10 pb-6 mb-8\">\r\n                        <div class=\"flex items-center gap-4\">\r\n                            <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-600 to-indigo-700 flex items-center justify-center text-white text-2xl shadow-lg glow-purple flex-shrink-0\">\r\n                                <i class=\"fa-solid fa-tv\"><\/i>\r\n                            <\/div>\r\n                            <div>\r\n                                <h2 class=\"text-2xl sm:text-3xl font-extrabold text-white\">TiviMate<\/h2>\r\n                                <p class=\"text-xs sm:text-sm text-gray-400 mt-1\">Erstklassiger IPTV Player f\u00fcr Android TV & Fire TV Devices<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"flex flex-wrap gap-2\">\r\n                            <span class=\"px-3 py-1 rounded-full bg-purple-500\/10 border border-purple-500\/30 text-purple-300 text-xs font-semibold\">Android TV<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-purple-500\/10 border border-purple-500\/30 text-purple-300 text-xs font-semibold\">Google TV<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-purple-500\/10 border border-purple-500\/30 text-purple-300 text-xs font-semibold\">Firestick<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Numbered Step Cards Grid -->\r\n                    <div class=\"grid grid-cols-2 sm:grid-cols-5 gap-3 mb-8\">\r\n                        <div class=\"p-3 rounded-2xl bg-white\/5 border border-white\/10 text-center\">\r\n                            <div class=\"text-purple-400 font-extrabold text-lg\">01<\/div>\r\n                            <div class=\"text-xs font-medium text-gray-200 mt-1\">App installieren<\/div>\r\n                        <\/div>\r\n                        <div class=\"p-3 rounded-2xl bg-white\/5 border border-white\/10 text-center\">\r\n                            <div class=\"text-purple-400 font-extrabold text-lg\">02<\/div>\r\n                            <div class=\"text-xs font-medium text-gray-200 mt-1\">Playlist hinzuf\u00fcgen<\/div>\r\n                        <\/div>\r\n                        <div class=\"p-3 rounded-2xl bg-white\/5 border border-white\/10 text-center\">\r\n                            <div class=\"text-purple-400 font-extrabold text-lg\">03<\/div>\r\n                            <div class=\"text-xs font-medium text-gray-200 mt-1\">Zugangsdaten eingeben<\/div>\r\n                        <\/div>\r\n                        <div class=\"p-3 rounded-2xl bg-white\/5 border border-white\/10 text-center\">\r\n                            <div class=\"text-purple-400 font-extrabold text-lg\">04<\/div>\r\n                            <div class=\"text-xs font-medium text-gray-200 mt-1\">Speichern<\/div>\r\n                        <\/div>\r\n                        <div class=\"p-3 rounded-2xl bg-white\/5 border border-white\/10 text-center col-span-2 sm:col-span-1\">\r\n                            <div class=\"text-purple-400 font-extrabold text-lg\">05<\/div>\r\n                            <div class=\"text-xs font-medium text-gray-200 mt-1\">Inhalte laden<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Guide Details -->\r\n                    <div class=\"space-y-6\">\r\n                        <div class=\"space-y-2\">\r\n                            <h3 class=\"text-lg font-bold text-white\">Installation<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                \u00d6ffnen Sie den <strong>Google Play Store<\/strong> auf Ihrem Android TV \/ Google TV oder nutzen Sie bei Fire TV Ger\u00e4ten die Downloader-App, um TiviMate zu installieren.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"space-y-3\">\r\n                            <h3 class=\"text-lg font-bold text-white\">Einrichtung (Xtream Codes)<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                \u00d6ffnen Sie TiviMate, w\u00e4hlen Sie <strong>\"Wiedergabeliste hinzuf\u00fcgen\"<\/strong> und entscheiden Sie sich f\u00fcr <strong>\"Xtream Codes\"<\/strong>.\r\n                            <\/p>\r\n\r\n                            <!-- Credentials Box -->\r\n                            <div class=\"bg-slate-900\/90 rounded-2xl p-4 sm:p-5 border border-white\/10 space-y-3 font-mono text-xs sm:text-sm\">\r\n                                <div class=\"text-gray-400 font-sans text-xs mb-1\">Erforderliche Eingabefelder (Platzhalter):<\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Server \/ Playlist URL:<\/label>\r\n                                    <span class=\"text-purple-300\">http:\/\/beispiel-server.com:8080<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Benutzername:<\/label>\r\n                                    <span class=\"text-purple-300\">IHR_BENUTZERNAME<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Passwort:<\/label>\r\n                                    <span class=\"text-purple-300\">IHR_PASSWORT<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Note about menu variations -->\r\n                        <div class=\"p-3.5 rounded-xl bg-purple-500\/10 border border-purple-500\/20 text-xs text-purple-200 flex items-center gap-2\">\r\n                            <i class=\"fa-solid fa-circle-info text-purple-400 text-base flex-shrink-0\"><\/i>\r\n                            Hinweis: Die genauen Men\u00fcbezeichnungen k\u00f6nnen je nach installierter TiviMate-Version leicht abweichen.\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/section>\r\n\r\n\r\n            <!-- 3. IPTV SMARTERS PRO SECTION -->\r\n            <section id=\"iptv-smarters\" class=\"app-guide-section scroll-mt-36\" data-devices=\"smart-tv,android,android-tv,pc,apple\">\r\n                <div class=\"glass-card rounded-3xl p-6 sm:p-10 border border-emerald-500\/30 relative overflow-hidden\">\r\n                    \r\n                    <!-- App Header -->\r\n                    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-white\/10 pb-6 mb-8\">\r\n                        <div class=\"flex items-center gap-4\">\r\n                            <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-700 flex items-center justify-center text-white text-2xl shadow-lg flex-shrink-0\">\r\n                                <i class=\"fa-solid fa-sliders\"><\/i>\r\n                            <\/div>\r\n                            <div>\r\n                                <h2 class=\"text-2xl sm:text-3xl font-extrabold text-white\">IPTV Smarters Pro<\/h2>\r\n                                <p class=\"text-xs sm:text-sm text-gray-400 mt-1\">Die Allround-L\u00f6sung f\u00fcr fast alle Plattformen und Betriebssysteme<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"flex flex-wrap gap-2\">\r\n                            <span class=\"px-3 py-1 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-300 text-xs font-semibold\">Android<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-300 text-xs font-semibold\">iOS \/ Apple<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-300 text-xs font-semibold\">Smart TV<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-300 text-xs font-semibold\">Windows \/ Mac<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Steps -->\r\n                    <div class=\"space-y-6\">\r\n                        \r\n                        <div>\r\n                            <h3 class=\"text-lg font-bold text-white mb-2\">1. App installieren<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                Laden Sie \"IPTV Smarters Pro\" oder \"Smarters Player Lite\" direkt aus Ihrem jeweiligen App Store (Google Play Store, Apple App Store, Samsung\/LG Store) herunter.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                        <div>\r\n                            <h3 class=\"text-lg font-bold text-white mb-3\">2. Login-Methode ausw\u00e4hlen<\/h3>\r\n                            \r\n                            <!-- 4 Setup Options Grid -->\r\n                            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4\">\r\n                                <div class=\"p-4 rounded-xl bg-white\/5 border border-emerald-500\/30 text-left space-y-1\">\r\n                                    <div class=\"text-sm font-bold text-emerald-400 flex items-center gap-2\">\r\n                                        <i class=\"fa-solid fa-code\"><\/i> Xtream Codes API\r\n                                    <\/div>\r\n                                    <p class=\"text-xs text-gray-400\">Empfohlen. Anmeldung mit Name, Benutzer, Passwort und Server URL.<\/p>\r\n                                <\/div>\r\n\r\n                                <div class=\"p-4 rounded-xl bg-white\/5 border border-white\/10 text-left space-y-1\">\r\n                                    <div class=\"text-sm font-bold text-gray-200 flex items-center gap-2\">\r\n                                        <i class=\"fa-solid fa-link\"><\/i> M3U Playlist URL\r\n                                    <\/div>\r\n                                    <p class=\"text-xs text-gray-400\">Direkte Einbindung \u00fcber einen M3U-Wiedergabelistenlink.<\/p>\r\n                                <\/div>\r\n\r\n                                <div class=\"p-4 rounded-xl bg-white\/5 border border-white\/10 text-left space-y-1\">\r\n                                    <div class=\"text-sm font-bold text-gray-200 flex items-center gap-2\">\r\n                                        <i class=\"fa-solid fa-file-arrow-up\"><\/i> M3U Datei Upload\r\n                                    <\/div>\r\n                                    <p class=\"text-xs text-gray-400\">Laden einer lokalen M3U-Spieleliste von Ihrem Ger\u00e4t.<\/p>\r\n                                <\/div>\r\n\r\n                                <div class=\"p-4 rounded-xl bg-white\/5 border border-white\/10 text-left space-y-1\">\r\n                                    <div class=\"text-sm font-bold text-gray-200 flex items-center gap-2\">\r\n                                        <i class=\"fa-solid fa-user-shield\"><\/i> Mac \/ Portal Login\r\n                                    <\/div>\r\n                                    <p class=\"text-xs text-gray-400\">Anmeldung \u00fcber MAC-Adressen-Aktivierung.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <!-- Xtream Codes Placeholder Details -->\r\n                            <div class=\"bg-slate-900\/90 rounded-2xl p-4 sm:p-5 border border-white\/10 space-y-3 font-mono text-xs sm:text-sm\">\r\n                                <div class=\"text-gray-400 font-sans text-xs mb-1\">Xtream Codes Login Formular (Beispiel\/Platzhalter):<\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Any Name:<\/label>\r\n                                    <span class=\"text-emerald-300\">Mein IPTV<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Username:<\/label>\r\n                                    <span class=\"text-emerald-300\">YOUR_USERNAME<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Password:<\/label>\r\n                                    <span class=\"text-emerald-300\">YOUR_PASSWORD<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5\">\r\n                                    <label class=\"block text-gray-400 text-[11px] font-sans\">Server URL:<\/label>\r\n                                    <span class=\"text-emerald-300\">https:\/\/example.com:8080<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div>\r\n                            <h3 class=\"text-lg font-bold text-white mb-2\">3. Login & Speichern<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                Klicken Sie auf <strong>\"ADD USER\"<\/strong> oder <strong>\"LOGIN\"<\/strong>. Die App l\u00e4dt anschlie\u00dfend automatisch Kan\u00e4le, Filme und Serien.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/section>\r\n\r\n\r\n            <!-- 4. HOTPLAYER SECTION -->\r\n            <section id=\"hotplayer\" class=\"app-guide-section scroll-mt-36\" data-devices=\"smart-tv,android-tv\">\r\n                <div class=\"glass-card rounded-3xl p-6 sm:p-10 border border-amber-500\/30 relative overflow-hidden\">\r\n                    \r\n                    <!-- App Header -->\r\n                    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-white\/10 pb-6 mb-8\">\r\n                        <div class=\"flex items-center gap-4\">\r\n                            <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-white text-2xl shadow-lg flex-shrink-0\">\r\n                                <i class=\"fa-solid fa-fire\"><\/i>\r\n                            <\/div>\r\n                            <div>\r\n                                <h2 class=\"text-2xl sm:text-3xl font-extrabold text-white\">HotPlayer<\/h2>\r\n                                <p class=\"text-xs sm:text-sm text-gray-400 mt-1\">Schneller und eleganter Player f\u00fcr Smart TVs<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"flex flex-wrap gap-2\">\r\n                            <span class=\"px-3 py-1 rounded-full bg-amber-500\/10 border border-amber-500\/30 text-amber-300 text-xs font-semibold\">Smart TV<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-amber-500\/10 border border-amber-500\/30 text-amber-300 text-xs font-semibold\">Android TV<\/span>\r\n                            <span class=\"px-3 py-1 rounded-full bg-amber-500\/10 border border-amber-500\/30 text-amber-300 text-xs font-semibold\">Fire TV<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Steps -->\r\n                    <div class=\"space-y-6\">\r\n                        <div class=\"space-y-2\">\r\n                            <h3 class=\"text-lg font-bold text-white\">1. App installieren<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                Suchen Sie im App Store Ihres Fernsehers nach <strong>HotPlayer<\/strong> und starten Sie die Installation.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"space-y-2\">\r\n                            <h3 class=\"text-lg font-bold text-white\">2. Ger\u00e4teinformationen \u00f6ffnen<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                Beim ersten \u00d6ffnen zeigt die App auf dem Bildschirm Ihre spezifische <strong>MAC Address \/ Device ID<\/strong> sowie den <strong>Device Key<\/strong> an. Kopieren Sie diese Informationen.\r\n                            <\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"space-y-3\">\r\n                            <h3 class=\"text-lg font-bold text-white\">3. Aktivierung & Konfiguration<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                Rufen Sie die offizielle HotPlayer Upload-Webseite auf und tragen Sie Ihre berechtigten Wiedergabedaten ein.\r\n                            <\/p>\r\n\r\n                            <!-- Placeholder Card -->\r\n                            <div class=\"bg-slate-900\/90 rounded-2xl p-4 sm:p-5 border border-white\/10 space-y-3 font-mono text-xs sm:text-sm\">\r\n                                <div class=\"text-gray-400 font-sans text-xs mb-1\">HotPlayer Portal Einstellungen (Platzhalter):<\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5 flex flex-col sm:flex-row sm:items-center justify-between gap-1\">\r\n                                    <span class=\"text-gray-400 font-sans\">MAC \/ Device ID:<\/span>\r\n                                    <span class=\"text-amber-300\">MAC_12:34:56:78:9A<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5 flex flex-col sm:flex-row sm:items-center justify-between gap-1\">\r\n                                    <span class=\"text-gray-400 font-sans\">Activation Key:<\/span>\r\n                                    <span class=\"text-amber-300\">KEY_98765<\/span>\r\n                                <\/div>\r\n                                <div class=\"p-2.5 rounded bg-white\/5 flex flex-col sm:flex-row sm:items-center justify-between gap-1\">\r\n                                    <span class=\"text-gray-400 font-sans\">Playlist \/ Server URL:<\/span>\r\n                                    <span class=\"text-amber-300\">http:\/\/server-beispiel.com:8080<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"space-y-2\">\r\n                            <h3 class=\"text-lg font-bold text-white\">4. Speichern & Aktualisieren<\/h3>\r\n                            <p class=\"text-sm text-gray-300 leading-relaxed\">\r\n                                Nach dem Speichern auf der Webseite starten Sie die HotPlayer App auf Ihrem TV neu oder w\u00e4hlen Sie \"Reload\", um die Inhalte zu laden.\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/section>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- TROUBLESHOOTING & FAQ SECTION -->\r\n        <section id=\"troubleshooting\" class=\"py-12 md:py-20 bg-slate-950\/60 border-t border-b border-white\/5\">\r\n            <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n                \r\n                <div class=\"text-center space-y-2 mb-10\">\r\n                    <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500\/10 text-cyan-300 text-xs font-semibold\">\r\n                        <i class=\"fa-solid fa-headset\"><\/i> Hilfe & Antworten\r\n                    <\/div>\r\n                    <h2 class=\"text-2xl sm:text-4xl font-extrabold text-white\">Probleme bei der Einrichtung?<\/h2>\r\n                    <p class=\"text-gray-400 text-xs sm:text-sm\">H\u00e4ufige Fragen und schnelle L\u00f6sungen zur Konfiguration.<\/p>\r\n                <\/div>\r\n\r\n                <!-- FAQ Accordions -->\r\n                <div class=\"space-y-3\">\r\n                    \r\n                    <div class=\"faq-item glass-card rounded-2xl overflow-hidden border border-white\/10\">\r\n                        <button onclick=\"toggleFaq(this)\" class=\"w-full text-left p-4 sm:p-5 font-semibold text-white flex justify-between items-center gap-4 text-sm sm:text-base hover:bg-white\/5 transition-colors\">\r\n                            <span>Warum funktioniert die App nicht?<\/span>\r\n                            <i class=\"faq-icon fa-solid fa-chevron-down text-cyan-400 transition-transform duration-300 flex-shrink-0\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"faq-answer px-4 sm:px-5 pb-4 text-xs sm:text-sm text-gray-400 leading-relaxed border-t border-white\/5 pt-3\">\r\n                            Stellen Sie sicher, dass Ihr TV\/Ger\u00e4t mit dem Internet verbunden ist. Starten Sie das Ger\u00e4t neu und \u00fcberpr\u00fcfen Sie, ob die neueste Version der App installiert ist.\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"faq-item glass-card rounded-2xl overflow-hidden border border-white\/10\">\r\n                        <button onclick=\"toggleFaq(this)\" class=\"w-full text-left p-4 sm:p-5 font-semibold text-white flex justify-between items-center gap-4 text-sm sm:text-base hover:bg-white\/5 transition-colors\">\r\n                            <span>Warum werden keine Inhalte geladen?<\/span>\r\n                            <i class=\"faq-icon fa-solid fa-chevron-down text-cyan-400 transition-transform duration-300 flex-shrink-0\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"faq-answer px-4 sm:px-5 pb-4 text-xs sm:text-sm text-gray-400 leading-relaxed border-t border-white\/5 pt-3\">\r\n                            \u00dcberpr\u00fcfen Sie die eingegebenen Server-Zugangsdaten auf Tippfehler (Gro\u00df-\/Kleinschreibung, Doppelpunkte, Leerzeichen).\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"faq-item glass-card rounded-2xl overflow-hidden border border-white\/10\">\r\n                        <button onclick=\"toggleFaq(this)\" class=\"w-full text-left p-4 sm:p-5 font-semibold text-white flex justify-between items-center gap-4 text-sm sm:text-base hover:bg-white\/5 transition-colors\">\r\n                            <span>Warum funktioniert meine Playlist nicht?<\/span>\r\n                            <i class=\"faq-icon fa-solid fa-chevron-down text-cyan-400 transition-transform duration-300 flex-shrink-0\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"faq-answer px-4 sm:px-5 pb-4 text-xs sm:text-sm text-gray-400 leading-relaxed border-t border-white\/5 pt-3\">\r\n                            Eventuell ist der Server vor\u00fcbergehend nicht erreichbar oder Ihre Autorisierung ist abgelaufen. Pr\u00fcfen Sie Ihren Verbindungsstatus.\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"faq-item glass-card rounded-2xl overflow-hidden border border-white\/10\">\r\n                        <button onclick=\"toggleFaq(this)\" class=\"w-full text-left p-4 sm:p-5 font-semibold text-white flex justify-between items-center gap-4 text-sm sm:text-base hover:bg-white\/5 transition-colors\">\r\n                            <span>Was soll ich machen, wenn mein Ger\u00e4t nicht erkannt wird?<\/span>\r\n                            <i class=\"faq-icon fa-solid fa-chevron-down text-cyan-400 transition-transform duration-300 flex-shrink-0\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"faq-answer px-4 sm:px-5 pb-4 text-xs sm:text-sm text-gray-400 leading-relaxed border-t border-white\/5 pt-3\">\r\n                            Pr\u00fcfen Sie Ihre MAC-Adresse in den App-Einstellungen. Achten Sie darauf, dass keine Null (0) mit dem Buchstaben O verwechselt wurde.\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"faq-item glass-card rounded-2xl overflow-hidden border border-white\/10\">\r\n                        <button onclick=\"toggleFaq(this)\" class=\"w-full text-left p-4 sm:p-5 font-semibold text-white flex justify-between items-center gap-4 text-sm sm:text-base hover:bg-white\/5 transition-colors\">\r\n                            <span>Wie aktualisiere ich die App?<\/span>\r\n                            <i class=\"faq-icon fa-solid fa-chevron-down text-cyan-400 transition-transform duration-300 flex-shrink-0\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"faq-answer px-4 sm:px-5 pb-4 text-xs sm:text-sm text-gray-400 leading-relaxed border-t border-white\/5 pt-3\">\r\n                            \u00d6ffnen Sie den App Store auf Ihrem Ger\u00e4t und w\u00e4hlen Sie \"Aktualisieren\" bei der jeweiligen Anwendung.\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"faq-item glass-card rounded-2xl overflow-hidden border border-white\/10\">\r\n                        <button onclick=\"toggleFaq(this)\" class=\"w-full text-left p-4 sm:p-5 font-semibold text-white flex justify-between items-center gap-4 text-sm sm:text-base hover:bg-white\/5 transition-colors\">\r\n                            <span>Was mache ich nach einer Neuinstallation?<\/span>\r\n                            <i class=\"faq-icon fa-solid fa-chevron-down text-cyan-400 transition-transform duration-300 flex-shrink-0\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"faq-answer px-4 sm:px-5 pb-4 text-xs sm:text-sm text-gray-400 leading-relaxed border-t border-white\/5 pt-3\">\r\n                            Geben Sie Ihre Autorisierungsdaten erneut gem\u00e4\u00df der jeweiligen Anleitung in die frisch installierte App ein.\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/section>\r\n\r\n\r\n        <!-- WHATSAPP CTA SECTION -->\r\n        <section class=\"py-12 md:py-16 relative\">\r\n            <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n                <div class=\"glass-card-featured rounded-3xl p-6 sm:p-10 text-center space-y-4 relative overflow-hidden\">\r\n                    <div class=\"w-12 h-12 rounded-full bg-brand-whatsapp\/20 text-brand-whatsapp border border-brand-whatsapp\/30 flex items-center justify-center mx-auto text-2xl\">\r\n                        <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n                    <\/div>\r\n                    <h2 class=\"text-2xl sm:text-4xl font-extrabold text-white tracking-tight\">\r\n                        Brauchen Sie Hilfe bei der Einrichtung?\r\n                    <\/h2>\r\n                    <p class=\"text-xs sm:text-base text-gray-300 max-w-xl mx-auto\">\r\n                        Unser Support hilft Ihnen gerne bei allgemeinen Installations- und Einrichtungsfragen.\r\n                    <\/p>\r\n                    <div class=\"pt-2\">\r\n                        <a href=\"https:\/\/wa.me\/212721504253\" target=\"_blank\" class=\"inline-flex items-center gap-3 px-8 py-4 rounded-xl font-bold text-sm sm:text-base bg-brand-whatsapp hover:bg-emerald-400 text-black shadow-xl hover:scale-105 transition-all\" rel=\"noopener\">\r\n                            <i class=\"fa-brands fa-whatsapp text-xl\"><\/i> WhatsApp Support\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n    <\/main>\r\n\r\n    <!-- FOOTER -->\r\n    <footer class=\"bg-black\/80 border-t border-white\/10 pt-10 pb-20 md:pb-10 text-sm text-gray-400\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8 mb-10\">\r\n                <div class=\"space-y-2\">\r\n                    <div class=\"text-xl font-extrabold text-white\">IPTVTO<span class=\"text-cyan-400\">.COM<\/span><\/div>\r\n                    <p class=\"text-xs text-gray-400\">Dein Premium Partner f\u00fcr modernes Streaming im deutschsprachigen Raum.<\/p>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h4 class=\"text-white font-semibold mb-2 text-xs sm:text-sm\">Navigation<\/h4>\r\n                    <ul class=\"space-y-1.5 text-xs\">\r\n                        <li><a href=\"#start\" class=\"hover:text-white transition-colors\">Startseite<\/a><\/li>\r\n                        <li><a href=\"#geraete-auswahl\" class=\"hover:text-white transition-colors\">Ger\u00e4te<\/a><\/li>\r\n                        <li><a href=\"#apps\" class=\"hover:text-white transition-colors\">Installation<\/a><\/li>\r\n                        <li><a href=\"#troubleshooting\" class=\"hover:text-white transition-colors\">FAQ<\/a><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h4 class=\"text-white font-semibold mb-2 text-xs sm:text-sm\">Rechtliches<\/h4>\r\n                    <ul class=\"space-y-1.5 text-xs\">\r\n                        <li><a href=\"#\" class=\"hover:text-white transition-colors\">Impressum<\/a><\/li>\r\n                        <li><a href=\"#\" class=\"hover:text-white transition-colors\">Datenschutz<\/a><\/li>\r\n                        <li><a href=\"#\" class=\"hover:text-white transition-colors\">AGB<\/a><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h4 class=\"text-white font-semibold mb-2 text-xs sm:text-sm\">Support<\/h4>\r\n                    <p class=\"text-xs text-gray-400 mb-2\">Fragen zur Einrichtung oder Anwendung?<\/p>\r\n                    <a href=\"https:\/\/wa.me\/212721504253\" target=\"_blank\" class=\"text-xs text-emerald-400 hover:underline flex items-center gap-1 font-semibold\" rel=\"noopener\">\r\n                        <i class=\"fa-brands fa-whatsapp\"><\/i> WhatsApp Live Chat &rarr;\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"border-t border-white\/5 pt-6 text-center text-xs text-gray-400\">\r\n                \u00a9 2026 IPTVTO.COM \u2013 Alle Rechte vorbehalten.\r\n            <\/div>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <!-- STICKY MOBILE WHATSAPP CONTACT BUTTON -->\r\n    <div class=\"md:hidden fixed bottom-0 left-0 right-0 z-50 p-3 bg-slate-950\/90 backdrop-blur-lg border-t border-white\/10\">\r\n        <a href=\"https:\/\/wa.me\/212721504253\" target=\"_blank\" class=\"w-full py-3 rounded-xl font-bold text-xs bg-brand-whatsapp text-black shadow-lg flex items-center justify-center gap-2\" rel=\"noopener\">\r\n            <i class=\"fa-brands fa-whatsapp text-base\"><\/i> Hilfe bei der Einrichtung anfordern\r\n        <\/a>\r\n    <\/div>\r\n\r\n    <!-- JAVASCRIPT LOGIC -->\r\n    <script>\r\n        \/\/ Mobile Menu Toggle\r\n        document.getElementById('mobile-menu-btn').addEventListener('click', function() {\r\n            const menu = document.getElementById('mobile-menu');\r\n            menu.classList.toggle('hidden');\r\n        });\r\n\r\n        \/\/ FAQ Accordion Toggle\r\n        function toggleFaq(button) {\r\n            const faqItem = button.parentElement;\r\n            const isOpen = faqItem.classList.contains('active');\r\n            \r\n            document.querySelectorAll('.faq-item').forEach(item => {\r\n                item.classList.remove('active');\r\n            });\r\n\r\n            if (!isOpen) {\r\n                faqItem.classList.add('active');\r\n            }\r\n        }\r\n\r\n        \/\/ Device Filter Functionality\r\n        function filterByDevice(deviceKey) {\r\n            \/\/ Update Active Buttons\r\n            const deviceButtons = document.querySelectorAll('.device-card');\r\n            deviceButtons.forEach(btn => btn.classList.remove('active'));\r\n            \r\n            const selectedBtn = document.getElementById(`dev-${deviceKey}`);\r\n            if(selectedBtn) selectedBtn.classList.add('active');\r\n\r\n            \/\/ Show\/Hide Sections\r\n            const appSections = document.querySelectorAll('.app-guide-section');\r\n            appSections.forEach(section => {\r\n                const supportedDevices = section.getAttribute('data-devices').split(',');\r\n                if (deviceKey === 'all' || supportedDevices.includes(deviceKey)) {\r\n                    section.style.display = 'block';\r\n                } else {\r\n                    section.style.display = 'none';\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ Highlight Active App Nav Link on Scroll\r\n        window.addEventListener('scroll', () => {\r\n            const sections = document.querySelectorAll('.app-guide-section');\r\n            const navBtns = document.querySelectorAll('.app-nav-btn');\r\n\r\n            let currentSectionId = '';\r\n\r\n            sections.forEach(section => {\r\n                if (section.style.display !== 'none') {\r\n                    const sectionTop = section.offsetTop - 180;\r\n                    if (window.scrollY >= sectionTop) {\r\n                        currentSectionId = section.getAttribute('id');\r\n                    }\r\n                }\r\n            });\r\n\r\n            navBtns.forEach(btn => {\r\n                btn.classList.remove('active');\r\n                if (btn.getAttribute('href') === `#${currentSectionId}`) {\r\n                    btn.classList.add('active');\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Installation Guide \u2013 IPTVTO.COM<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":4,"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/pages\/37\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/iptvto.com\/index.php\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}