{"id":996,"date":"2025-03-18T16:41:57","date_gmt":"2025-03-18T16:41:57","guid":{"rendered":"https:\/\/excel-erasmus.eu\/?page_id=996"},"modified":"2025-12-02T11:38:49","modified_gmt":"2025-12-02T11:38:49","slug":"training-programme","status":"publish","type":"page","link":"https:\/\/excel-erasmus.eu\/de\/budgetierung-und-finanzplanung\/","title":{"rendered":"Budgetierung und Finanzplanung"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"996\" class=\"elementor elementor-996\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f8a6d5 e-con-full e-flex e-con e-parent\" data-id=\"6f8a6d5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3040ef elementor-widget elementor-widget-html\" data-id=\"d3040ef\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Financial Literacy Training Programme<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n    <style>\r\n        :root {\r\n            --white: #ffffff;\r\n            --black: #000000;\r\n            --yellow: #ffde59;\r\n            --pink: #ff8bd2;\r\n            --blue: #5ce1e6;\r\n        }\r\n\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n        }\r\n\r\n        html, body {\r\n            width: 100%;\r\n            overflow-x: hidden;\r\n            margin: 0;\r\n            padding: 0;\r\n            background-color: #f5f5f5;\r\n            min-height: 100vh;\r\n            display: flex;\r\n            flex-direction: column;\r\n            scroll-behavior: smooth;\r\n        }\r\n\r\n        body {\r\n            color: var(--black);\r\n            position: relative;\r\n        }\r\n\r\n        .container {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 2rem;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 3rem;\r\n        }\r\n\r\n        .page-title {\r\n            text-align: center;\r\n            color: var(--black);\r\n            font-size: 2.5rem;\r\n            padding: 2rem;\r\n            background: var(--yellow);\r\n            border-radius: 15px;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n            margin: 0;\r\n        }\r\n\r\n        .page-subtitle {\r\n            text-align: center;\r\n            color: var(--black);\r\n            font-size: 1.2rem;\r\n            padding: 1rem;\r\n            background: rgba(255,255,255,0.9);\r\n            border-radius: 10px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n            margin: 0;\r\n        }\r\n\r\n        .video-section {\r\n            width: 100%;\r\n            margin-bottom: 3rem;\r\n            background: rgba(255,255,255,0.95);\r\n            border-radius: 15px;\r\n            padding: 2rem;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .video-card {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 2rem;\r\n        }\r\n\r\n        .video-player-container {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .video-player-container video {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            border-radius: 15px;\r\n        }\r\n\r\n        .video-description {\r\n            text-align: center;\r\n            padding: 1rem;\r\n            color: var(--black);\r\n            font-size: 1.1rem;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .video-controls {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .video-controls button {\r\n            padding: 0.8rem 1.5rem;\r\n            border: none;\r\n            border-radius: 25px;\r\n            background: var(--blue);\r\n            color: var(--white);\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        .video-controls button:hover {\r\n            background: var(--pink);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .resources-section {\r\n            width: 100%;\r\n        }\r\n\r\n        .features-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 3rem;\r\n            width: 100%;\r\n            margin: 0;\r\n        }\r\n\r\n        .features-grid:last-child {\r\n            grid-template-columns: repeat(2, 1fr);\r\n            margin-bottom: 0;\r\n            width: 100%;\r\n        }\r\n\r\n        .features-grid:last-child .feature-card {\r\n            width: 100%;\r\n            margin: 0;\r\n        }\r\n\r\n        .video-card {\r\n            grid-column: 1 \/ -1;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .feature-card {\r\n            background-color: rgba(255,255,255,0.95);\r\n            border: 2px solid var(--yellow);\r\n            border-radius: 15px;\r\n            padding: 2rem;\r\n            text-align: center;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 2rem;\r\n            height: 100%;\r\n        }\r\n\r\n        .feature-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 5px;\r\n            background: linear-gradient(90deg, var(--yellow), var(--pink));\r\n        }\r\n\r\n        .feature-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        .feature-card .content {\r\n            flex: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 1rem;\r\n        }\r\n\r\n        .feature-card i {\r\n            font-size: 3rem;\r\n            color: var(--pink);\r\n            margin-bottom: 1rem;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .feature-card:hover i {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        .feature-card h3 {\r\n            color: var(--black);\r\n            margin-bottom: 1rem;\r\n            font-size: 1.4rem;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .feature-card p {\r\n            color: var(--black);\r\n            line-height: 1.6;\r\n            font-size: 1rem;\r\n            margin-bottom: 1.5rem;\r\n            flex-grow: 1;\r\n        }\r\n\r\n        .feature-card img {\r\n            width: 100%;\r\n            max-width: 180px;\r\n            height: auto;\r\n            margin: 1rem 0;\r\n            border-radius: 10px;\r\n            object-fit: cover;\r\n        }\r\n\r\n        .download-btn {\r\n            background: var(--blue);\r\n            color: var(--white);\r\n            padding: 1rem 2rem;\r\n            border: none;\r\n            border-radius: 25px;\r\n            cursor: pointer;\r\n            font-size: 1.1rem;\r\n            transition: all 0.3s ease;\r\n            width: auto;\r\n            max-width: 100%;\r\n            box-sizing: border-box;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            font-weight: bold;\r\n        }\r\n\r\n        .download-btn i {\r\n            color: var(--white);\r\n        }\r\n\r\n        .download-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(0,0,0,0.15);\r\n            background: var(--yellow);\r\n        }\r\n\r\n        .quiz-container {\r\n            background: rgba(255,255,255,0.95);\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            margin: 2rem auto;\r\n            max-width: 800px;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .quiz-question {\r\n            margin-bottom: 2rem;\r\n            padding: 1.5rem;\r\n            background: white;\r\n            border-radius: 10px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        .quiz-options {\r\n            display: grid;\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .quiz-option {\r\n            padding: 1rem;\r\n            border: 2px solid var(--yellow);\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .quiz-option::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: var(--yellow);\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            z-index: -1;\r\n        }\r\n\r\n        .quiz-option:hover::after {\r\n            opacity: 0.2;\r\n        }\r\n\r\n        .quiz-option.correct {\r\n            background: #4CAF50;\r\n            color: white;\r\n            border-color: #4CAF50;\r\n        }\r\n\r\n        .quiz-option.incorrect {\r\n            background: #f44336;\r\n            color: white;\r\n            border-color: #f44336;\r\n        }\r\n\r\n        .escape-room-container {\r\n            background: rgba(255,255,255,0.95);\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            margin: 2rem auto;\r\n            max-width: 800px;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .puzzle {\r\n            background: white;\r\n            padding: 1.5rem;\r\n            border-radius: 10px;\r\n            margin-bottom: 1.5rem;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        .puzzle-input {\r\n            width: 100%;\r\n            max-width: 400px;\r\n            padding: 1rem;\r\n            margin: 1rem auto;\r\n            border: 2px solid var(--yellow);\r\n            border-radius: 8px;\r\n            font-size: 1.1rem;\r\n            transition: all 0.3s ease;\r\n            display: block;\r\n            text-align: center;\r\n        }\r\n\r\n        .puzzle-input:focus {\r\n            border-color: var(--pink);\r\n            outline: none;\r\n            box-shadow: 0 0 5px rgba(255,139,210,0.3);\r\n        }\r\n\r\n        .puzzle-input option {\r\n            padding: 0.5rem;\r\n            font-size: 1rem;\r\n            line-height: 1.4;\r\n            word-wrap: break-word;\r\n            white-space: normal;\r\n        }\r\n\r\n        .puzzle-options {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n            margin: 1rem 0;\r\n        }\r\n\r\n        .puzzle-option-btn {\r\n            padding: 1rem 1.5rem;\r\n            border: 2px solid var(--yellow);\r\n            border-radius: 8px;\r\n            background: white;\r\n            color: var(--black);\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            font-size: 1rem;\r\n            text-align: left;\r\n            line-height: 1.4;\r\n            word-wrap: break-word;\r\n            white-space: normal;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .puzzle-option-btn::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: var(--yellow);\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            z-index: -1;\r\n        }\r\n\r\n        .puzzle-option-btn:hover::after {\r\n            opacity: 0.2;\r\n        }\r\n\r\n        .puzzle-option-btn.selected {\r\n            background: var(--yellow);\r\n            color: var(--black);\r\n            border-color: var(--pink);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .puzzle-option-btn.correct {\r\n            background: #4CAF50;\r\n            color: white;\r\n            border-color: #4CAF50;\r\n        }\r\n\r\n        .puzzle-option-btn.incorrect {\r\n            background: #f44336;\r\n            color: white;\r\n            border-color: #f44336;\r\n        }\r\n\r\n\r\n\r\n        .puzzle-input.correct {\r\n            border-color: #4CAF50;\r\n            background: #E8F5E9;\r\n        }\r\n\r\n        .puzzle-input.incorrect {\r\n            border-color: #f44336;\r\n            background: #FFEBEE;\r\n        }\r\n\r\n        .progress-bar {\r\n            width: 100%;\r\n            height: 20px;\r\n            background: #eee;\r\n            border-radius: 10px;\r\n            margin: 1rem 0;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .progress {\r\n            width: 0%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, var(--yellow), var(--pink));\r\n            transition: width 0.3s ease;\r\n        }\r\n\r\n        .modal {\r\n            display: none;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.8);\r\n            z-index: 1000;\r\n            justify-content: center;\r\n            align-items: center;\r\n        }\r\n\r\n        .modal-content {\r\n            background: white;\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            max-width: 1000px;\r\n            width: 95%;\r\n            text-align: center;\r\n            max-height: 90vh;\r\n            overflow-y: auto;\r\n            position: relative;\r\n            margin: 2rem auto;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .close-modal {\r\n            position: absolute;\r\n            top: 1rem;\r\n            right: 1rem;\r\n            font-size: 1.5rem;\r\n            cursor: pointer;\r\n            color: var(--black);\r\n        }\r\n\r\n        @media (max-width: 1024px) {\r\n            .container {\r\n                padding: 1rem;\r\n            }\r\n\r\n            .features-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .container {\r\n                padding: 1rem;\r\n            }\r\n            \r\n            .modal-content {\r\n                width: 98%;\r\n                padding: 0.8rem;\r\n                margin: 0.5rem auto;\r\n                max-height: 98vh;\r\n            }\r\n\r\n            .page-title {\r\n                font-size: 2rem;\r\n                padding: 1.5rem;\r\n            }\r\n\r\n            .video-section {\r\n                margin-bottom: 2rem;\r\n            }\r\n\r\n            .video-card {\r\n                max-width: 100%;\r\n                padding: 1.5rem;\r\n            }\r\n\r\n            .features-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .features-grid:last-child {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .video-card {\r\n                max-width: 100%;\r\n            }\r\n\r\n            .feature-card {\r\n                padding: 1.5rem;\r\n            }\r\n\r\n            .feature-card i {\r\n                font-size: 2.5rem;\r\n            }\r\n\r\n            .feature-card h3 {\r\n                font-size: 1.2rem;\r\n            }\r\n\r\n            .feature-card p {\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .feature-card img {\r\n                max-width: 150px;\r\n            }\r\n\r\n            .download-btn {\r\n                padding: 0.8rem 1.5rem;\r\n                font-size: 0.9rem;\r\n            }\r\n\r\n            .modal-content {\r\n                width: 95%;\r\n                padding: 1rem;\r\n                margin: 1rem auto;\r\n                max-height: 95vh;\r\n            }\r\n\r\n            .story-section {\r\n                padding: 1rem;\r\n                gap: 1rem;\r\n                max-width: 100%;\r\n                box-sizing: border-box;\r\n            }\r\n\r\n            .story-text, .challenge {\r\n                padding: 1rem;\r\n            }\r\n\r\n            .story-text h3, .challenge h4 {\r\n                font-size: 1.3rem;\r\n            }\r\n\r\n            .story-text p, .challenge p, .challenge li {\r\n                font-size: 1rem;\r\n                word-wrap: break-word;\r\n                overflow-wrap: break-word;\r\n            }\r\n\r\n            .puzzle-input {\r\n                max-width: 100%;\r\n                min-width: 200px;\r\n                font-size: 1rem;\r\n                padding: 0.8rem;\r\n            }\r\n            \r\n            .puzzle-input option {\r\n                font-size: 0.9rem;\r\n                padding: 0.3rem;\r\n                line-height: 1.3;\r\n                max-width: 100%;\r\n                word-wrap: break-word;\r\n                white-space: normal;\r\n                text-align: left;\r\n            }\r\n\r\n            .puzzle-options {\r\n                gap: 0.8rem;\r\n                margin: 0.8rem 0;\r\n            }\r\n\r\n            .puzzle-option-btn {\r\n                padding: 0.8rem 1.2rem;\r\n                font-size: 0.9rem;\r\n                line-height: 1.3;\r\n            }\r\n            \r\n            .selected-answer {\r\n                font-size: 0.9rem;\r\n                padding: 0.8rem;\r\n                margin: 0.8rem 0;\r\n            }\r\n        }\r\n\r\n        .quiz-section, .escape-room {\r\n            background: rgba(255,255,255,0.95);\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1.5rem;\r\n            align-items: center;\r\n            margin: 4rem 0;\r\n        }\r\n\r\n        .quiz-section h2, .escape-room h2 {\r\n            color: var(--black);\r\n            margin-bottom: 1rem;\r\n            font-size: 1.8rem;\r\n        }\r\n\r\n        .quiz-section p, .escape-room p {\r\n            color: var(--black);\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.1rem;\r\n        }\r\n\r\n        .progress-indicator {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: var(--white);\r\n            z-index: 1000;\r\n        }\r\n\r\n        .progress-bar {\r\n            height: 100%;\r\n            background: linear-gradient(90deg, var(--yellow), var(--pink));\r\n            width: 0%;\r\n            transition: width 0.3s ease;\r\n        }\r\n\r\n        .feature-card {\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .feature-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n        }\r\n\r\n        .feature-card:hover::after {\r\n            opacity: 1;\r\n        }\r\n\r\n        .feature-card .content {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .feature-card img {\r\n            transition: transform 0.5s ease;\r\n        }\r\n\r\n        .feature-card:hover img {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .interactive-tooltip {\r\n            position: absolute;\r\n            background: var(--white);\r\n            padding: 0.5rem 1rem;\r\n            border-radius: 8px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n            font-size: 0.9rem;\r\n            opacity: 0;\r\n            transform: translateY(10px);\r\n            transition: all 0.3s ease;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .feature-card:hover .interactive-tooltip {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .achievement-badge {\r\n            position: absolute;\r\n            top: 1rem;\r\n            right: 1rem;\r\n            background: var(--yellow);\r\n            color: var(--black);\r\n            padding: 0.5rem;\r\n            border-radius: 50%;\r\n            width: 40px;\r\n            height: 40px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.2rem;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .feature-card:hover .achievement-badge {\r\n            transform: rotate(360deg);\r\n            transition: transform 0.5s ease;\r\n        }\r\n\r\n        .interactive-button {\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .interactive-button::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            background: rgba(255,255,255,0.2);\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.6s ease, height 0.6s ease;\r\n        }\r\n\r\n        .interactive-button:hover::before {\r\n            width: 300px;\r\n            height: 300px;\r\n        }\r\n\r\n        .feature-card .content {\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .feature-card .content::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -10px;\r\n            left: -10px;\r\n            right: -10px;\r\n            bottom: -10px;\r\n            border: 2px solid transparent;\r\n            border-radius: 15px;\r\n            transition: border-color 0.3s ease;\r\n        }\r\n\r\n        .feature-card:hover .content::before {\r\n            border-color: var(--pink);\r\n        }\r\n\r\n        .tools-section {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 3rem;\r\n            width: 100%;\r\n            margin: 4rem 0;\r\n        }\r\n\r\n        .tool-card {\r\n            background: rgba(255,255,255,0.95);\r\n            border-radius: 15px;\r\n            padding: 2rem;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .tool-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        .notes-container {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1.5rem;\r\n            margin-top: 1.5rem;\r\n        }\r\n\r\n        .notes-input {\r\n            width: 100%;\r\n            min-height: 200px;\r\n            padding: 1rem;\r\n            border: 2px solid var(--yellow);\r\n            border-radius: 8px;\r\n            font-size: 1.1rem;\r\n            resize: vertical;\r\n            margin-bottom: 1rem;\r\n        }\r\n\r\n        .notes-actions {\r\n            display: flex;\r\n            gap: 1rem;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .notes-btn {\r\n            padding: 0.8rem 1.5rem;\r\n            border: none;\r\n            border-radius: 8px;\r\n            background: var(--blue);\r\n            color: var(--white);\r\n            font-size: 1rem;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        .notes-btn:hover {\r\n            background: var(--pink);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .notes-list {\r\n            margin-top: 1rem;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        .note-item {\r\n            background: rgba(255,255,255,0.8);\r\n            padding: 1rem;\r\n            border-radius: 8px;\r\n            border: 1px solid var(--yellow);\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        .note-item:hover {\r\n            background: rgba(255,255,255,0.95);\r\n        }\r\n\r\n        .note-date {\r\n            font-size: 0.9rem;\r\n            color: var(--black);\r\n            opacity: 0.7;\r\n        }\r\n\r\n        .timeline {\r\n            position: relative;\r\n            padding: 3rem 0;\r\n        }\r\n\r\n        .timeline::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 2px;\r\n            height: 100%;\r\n            background: var(--yellow);\r\n        }\r\n\r\n        .timeline-item {\r\n            position: relative;\r\n            margin-bottom: 3rem;\r\n            width: 50%;\r\n            padding-right: 2rem;\r\n        }\r\n\r\n        .timeline-item:nth-child(even) {\r\n            margin-left: 50%;\r\n            padding-right: 0;\r\n            padding-left: 2rem;\r\n        }\r\n\r\n        .timeline-content {\r\n            background: var(--white);\r\n            padding: 1rem;\r\n            border-radius: 8px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .timeline-item::before {\r\n            content: '';\r\n            position: absolute;\r\n            right: -6px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 12px;\r\n            height: 12px;\r\n            background: var(--pink);\r\n            border-radius: 50%;\r\n        }\r\n\r\n        .timeline-item:nth-child(even)::before {\r\n            right: auto;\r\n            left: -6px;\r\n        }\r\n\r\n        .achievements-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n            gap: 1rem;\r\n            margin-top: 1rem;\r\n        }\r\n\r\n        .achievement-item {\r\n            background: var(--white);\r\n            padding: 1rem;\r\n            border-radius: 8px;\r\n            text-align: center;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .achievement-item.locked {\r\n            opacity: 0.5;\r\n        }\r\n\r\n        .achievement-item i {\r\n            font-size: 2rem;\r\n            color: var(--pink);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        .achievement-item.unlocked i {\r\n            color: var(--yellow);\r\n        }\r\n\r\n        .story-section {\r\n            margin-bottom: 4rem;\r\n            padding: 2rem;\r\n            background: white;\r\n            border-radius: 10px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n            display: grid;\r\n            grid-template-columns: 1fr;\r\n            gap: 3rem;\r\n        }\r\n\r\n        .story-text {\r\n            background: rgba(255,255,255,0.9);\r\n            padding: 2rem;\r\n            border-radius: 8px;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n            text-align: left;\r\n        }\r\n\r\n        .story-text h3 {\r\n            color: var(--pink);\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.8rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .story-text p {\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.2rem;\r\n            color: var(--black);\r\n            line-height: 1.8;\r\n        }\r\n\r\n        .challenge {\r\n            background: rgba(255,255,255,0.9);\r\n            padding: 2rem;\r\n            border-radius: 10px;\r\n            border: 2px solid var(--yellow);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1.5rem;\r\n            max-width: 100%;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .challenge h4 {\r\n            color: var(--black);\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.6rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .challenge p {\r\n            margin-bottom: 1.5rem;\r\n            text-align: left;\r\n            font-size: 1.2rem;\r\n            line-height: 1.8;\r\n            word-wrap: break-word;\r\n            overflow-wrap: break-word;\r\n            max-width: 100%;\r\n        }\r\n\r\n        .challenge ul {\r\n            list-style-type: none;\r\n            margin: 1.5rem 0;\r\n            padding: 1.5rem;\r\n            text-align: left;\r\n            background: rgba(255,255,255,0.8);\r\n            border-radius: 8px;\r\n        }\r\n\r\n        .challenge li {\r\n            margin: 1.2rem 0;\r\n            padding-left: 2rem;\r\n            position: relative;\r\n            font-size: 1.2rem;\r\n            line-height: 1.8;\r\n            word-wrap: break-word;\r\n            overflow-wrap: break-word;\r\n        }\r\n\r\n        .challenge li:before {\r\n            content: \"\u2022\";\r\n            color: var(--pink);\r\n            position: absolute;\r\n            left: 0;\r\n            font-size: 1.4rem;\r\n        }\r\n\r\n        .puzzle-input {\r\n            width: 100%;\r\n            max-width: 500px;\r\n            min-width: 250px;\r\n            padding: 1rem;\r\n            margin: 1rem auto;\r\n            border: 2px solid var(--yellow);\r\n            border-radius: 8px;\r\n            font-size: 1.1rem;\r\n            transition: all 0.3s ease;\r\n            display: block;\r\n            text-align: center;\r\n            box-sizing: border-box;\r\n            word-wrap: break-word;\r\n            overflow-wrap: break-word;\r\n        }\r\n\r\n        .encouragement-message {\r\n            margin-top: 1rem;\r\n            padding: 1.5rem;\r\n            background: rgba(92,225,230,0.1);\r\n            border-radius: 8px;\r\n            animation: fadeIn 0.5s ease;\r\n            width: 100%;\r\n            max-width: 500px;\r\n            margin: 1rem auto;\r\n        }\r\n\r\n        .encouragement-content {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 1rem;\r\n            text-align: left;\r\n        }\r\n\r\n        .encouragement-content i {\r\n            color: var(--yellow);\r\n            font-size: 1.8rem;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .encouragement-content p {\r\n            font-size: 1.2rem;\r\n            line-height: 1.6;\r\n            margin: 0;\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; transform: translateY(10px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        .feature-image {\r\n            width: 100%;\r\n            height: 150px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background: rgba(255,255,255,0.8);\r\n            border-radius: 10px;\r\n            margin: 1rem 0;\r\n            gap: 0.5rem;\r\n        }\r\n\r\n        .feature-image i {\r\n            color: var(--pink);\r\n            font-size: 3rem;\r\n        }\r\n\r\n        .icon-label {\r\n            color: var(--black);\r\n            font-size: 0.9rem;\r\n            text-align: center;\r\n            margin-top: 0.5rem;\r\n            font-weight: 500;\r\n        }\r\n\r\n        \/* Adicionando estilos para o flipbook *\/\r\n        .flipbook-container {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.9);\r\n            z-index: 1000;\r\n            display: none;\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 20px;\r\n        }\r\n\r\n        .flipbook-viewer {\r\n            width: 95%;\r\n            height: 95%;\r\n            background: white;\r\n            border-radius: 10px;\r\n            padding: 20px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        #pdfViewer {\r\n            width: 100%;\r\n            height: 100%;\r\n            border: none;\r\n            background: white;\r\n        }\r\n\r\n        .flipbook-button {\r\n            padding: 10px 20px;\r\n            border: none;\r\n            border-radius: 5px;\r\n            background: var(--blue);\r\n            color: white;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            z-index: 1001;\r\n        }\r\n\r\n        .flipbook-button:hover {\r\n            background: var(--pink);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .flipbook-pages {\r\n            flex: 1;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            gap: 20px;\r\n            margin: 20px 0;\r\n            overflow: auto;\r\n        }\r\n\r\n        .flipbook-page {\r\n            box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n            border-radius: 5px;\r\n            background: white;\r\n        }\r\n\r\n        .flipbook-page canvas {\r\n            border-radius: 5px;\r\n        }\r\n\r\n        .page-number {\r\n            text-align: center;\r\n            color: white;\r\n            margin-top: 10px;\r\n            font-size: 1.2rem;\r\n        }\r\n\r\n        .loading-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.8);\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            color: white;\r\n            font-size: 1.2rem;\r\n        }\r\n\r\n        .video-container, .infographic-container {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.9);\r\n            z-index: 1000;\r\n            display: none;\r\n            justify-content: center;\r\n            align-items: center;\r\n            padding: 20px;\r\n        }\r\n\r\n        .video-viewer, .infographic-viewer {\r\n            width: 95%;\r\n            height: 95%;\r\n            background: white;\r\n            border-radius: 10px;\r\n            padding: 20px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        #videoFrame {\r\n            width: 100%;\r\n            height: 100%;\r\n            border: none;\r\n            background: white;\r\n        }\r\n\r\n        #infographicImage {\r\n            max-width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .learning-contents-section {\r\n            width: 100%;\r\n            margin-bottom: 3rem;\r\n            background: rgba(255,255,255,0.95);\r\n            border-radius: 15px;\r\n            padding: 2rem;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .learning-contents-card {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1.5rem;\r\n        }\r\n\r\n        .learning-contents-image {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 300px;\r\n            margin: 0 auto;\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n            transition: transform 0.3s ease;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n        }\r\n\r\n        .learning-contents-image img {\r\n            width: auto;\r\n            max-width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            border-radius: 15px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .learning-contents-description {\r\n            text-align: center;\r\n            padding: 1rem;\r\n            color: var(--black);\r\n            font-size: 1.1rem;\r\n            line-height: 1.6;\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .learning-contents-button {\r\n            padding: 1rem 2rem;\r\n            border: none;\r\n            border-radius: 25px;\r\n            background: var(--blue);\r\n            color: var(--white);\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 0.5rem;\r\n            margin-top: 1rem;\r\n            text-decoration: none;\r\n            width: auto;\r\n            min-width: 200px;\r\n            justify-content: center;\r\n            pointer-events: auto;\r\n            position: relative;\r\n            z-index: 10;\r\n        }\r\n\r\n        .learning-contents-button:hover {\r\n            background: var(--pink);\r\n            transform: translateY(-2px);\r\n        }\r\n    <\/style>\r\n    <!-- Adicionar scripts necess\u00e1rios -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.11.338\/pdf.min.js\"><\/script>\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/turn.js\/4.1.0\/turn.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n    <div class=\"progress-indicator\">\r\n        <div class=\"progress-bar\" id=\"pageProgress\"><\/div>\r\n    <\/div>\r\n\r\n\r\n        <!-- Container do V\u00eddeo -->\r\n        <div class=\"video-section\">\r\n            <div class=\"video-card\">\r\n                <div class=\"content\">\r\n                    <i class=\"fas fa-video\"><\/i>\r\n                    <h3>Video-Ressource<\/h3>\r\n                    <p>Willkommen zum Modul \"Budgetierung und Finanzplanung\", in dem Sie lernen werden, wie Sie mithilfe digitaler Tools effektive Budgets erstellen und verwalten k\u00f6nnen, um sicherzustellen, dass Ihr Unternehmen finanziell nachhaltig und anpassungsf\u00e4hig bleibt.<\/p>\r\n                    <div class=\"video-player-container\">\r\n                        <video id=\"mainVideo\" controls>\r\n                            <source src=\"https:\/\/excel-erasmus.eu\/Videos\/DE\/EXCEL_WP2_A2.3_M1_Video_DE.mp4\" type=\"video\/mp4\">\r\n                            Ihr Browser unterst\u00fctzt das Videoelement nicht.\r\n                        <\/video>\r\n                    <\/div>\r\n                    <div class=\"video-controls\">\r\n                        <button onclick=\"document.getElementById('mainVideo').play()\">\r\n                            <i class=\"fas fa-play\"><\/i> Abspielen\r\n                        <\/button>\r\n                        <button onclick=\"document.getElementById('mainVideo').pause()\">\r\n                            <i class=\"fas fa-pause\"><\/i> Pause\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Container dos Recursos -->\r\n        <div class=\"resources-section\">\r\n            <div class=\"features-grid\">\r\n                <div class=\"feature-card\">\r\n                    <div class=\"content\">\r\n                        <i class=\"fas fa-book\"><\/i>\r\n                        <h3>Lerninhalte, Aktivit\u00e4ten und Ressourcen<\/h3>\r\n                        <p>Beginnen Sie damit, diese umfassende PDF-Datei durchzugehen, um sich mit dem Modul vertraut zu machen, Ihr Verst\u00e4ndnis zu vertiefen und das erworbene Wissen anzuwenden.<\/p>\r\n                        <div class=\"learning-contents-section\">\r\n                            <div class=\"learning-contents-card\">\r\n                                <div class=\"content\">\r\n                                    <div class=\"learning-contents-image\">\r\n                                        <a href=\"https:\/\/excel-erasmus.eu\/Flipbooks\/M1_Budgeting and financial planning_DE\/index.html\" target=\"_blank\" rel=\"noopener\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/excel-erasmus.eu\/wp-content\/uploads\/2025\/10\/EXCEL_WP2_M1-flipbook_DE.png\" alt=\"Learning Contents and Resources\" style=\"width: 100%; height: auto;\">\r\n                                        <\/a>\r\n                                    <\/div>\r\n                                    <a href=\"https:\/\/excel-erasmus.eu\/Flipbooks\/M1_Budgeting and financial planning_DE\/index.html\" class=\"learning-contents-button\" target=\"_blank\" rel=\"noopener\">\r\n                                        Zugang zu den Lernmaterialien\r\n                                    <\/a>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"feature-card\">\r\n                    <div class=\"content\">\r\n                        <i class=\"fas fa-chart-bar\"><\/i>\r\n                        <h3>Praktische Infografik<\/h3>\r\n                        <p>Ergreifen Sie Ma\u00dfnahmen f\u00fcr eine verantwortungsvolle Budgetierung\/finanzielle Entscheidungen zur Unterst\u00fctzung Ihrer unternehmerischen Reise<\/p>\r\n                        <div class=\"learning-contents-section\">\r\n                            <div class=\"learning-contents-card\">\r\n                                <div class=\"content\">\r\n                                    <div class=\"learning-contents-image\">\r\n                                        <a href=\"https:\/\/excel-erasmus.eu\/wp-content\/uploads\/2025\/10\/EXCEL_WP2_A2.3_M1_Infographic_DE.pdf\" target=\"_blank\" rel=\"noopener\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/excel-erasmus.eu\/wp-content\/uploads\/2025\/10\/EXCEL_WP2_M1-Infographic_DE-e1761850151960.png\" alt=\"Hands-on Infographic\" style=\"width: 100%; height: auto;\">\r\n                                        <\/a>\r\n                                    <\/div>\r\n                                    <a href=\"https:\/\/excel-erasmus.eu\/wp-content\/uploads\/2025\/10\/EXCEL_WP2_A2.3_M1_Infographic_DE.pdf\" class=\"learning-contents-button\" target=\"_blank\" rel=\"noopener\">\r\n                                        Infografik ansehen\r\n                                    <\/a>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Container para o flipbook -->\r\n        <div class=\"flipbook-container\" id=\"flipbookContainer\">\r\n            <div class=\"flipbook-viewer\" id=\"flipbookViewer\">\r\n                <iframe id=\"pdfFrame\" style=\"width: 100%; height: 100%; border: none;\"><\/iframe>\r\n            <\/div>\r\n            <button class=\"flipbook-button\" onclick=\"closeFlipbook()\" style=\"position: absolute; top: 20px; right: 20px;\">Schlie\u00dfen<\/button>\r\n        <\/div>\r\n\r\n        <!-- Modal para V\u00eddeo -->\r\n        <div class=\"video-container\" id=\"videoContainer\">\r\n            <div class=\"video-viewer\" id=\"videoViewer\">\r\n                <iframe id=\"videoFrame\" style=\"width: 100%; height: 100%; border: none;\"><\/iframe>\r\n            <\/div>\r\n            <button class=\"flipbook-button\" onclick=\"closeVideo()\" style=\"position: absolute; top: 20px; right: 20px;\">Schlie\u00dfen<\/button>\r\n        <\/div>\r\n\r\n        <!-- Modal para Infogr\u00e1fico -->\r\n        <div class=\"infographic-container\" id=\"infographicContainer\">\r\n            <div class=\"infographic-viewer\" id=\"infographicViewer\">\r\n                <img id=\"infographicImage\" style=\"max-width: 100%; height: auto;\">\r\n            <\/div>\r\n            <button class=\"flipbook-button\" onclick=\"closeInfographic()\" style=\"position: absolute; top: 20px; right: 20px;\">Schlie\u00dfen<\/button>\r\n        <\/div>\r\n\r\n        <!-- Escape Room Section -->\r\n        <div id=\"escapeRoomModal\" class=\"modal\">\r\n            <div class=\"modal-content\">\r\n                <span class=\"close-modal\" onclick=\"closeEscapeRoom()\">&times;<\/span>\r\n                <h2>M\u00f6ge die Vorhersage mit Ihnen sein (und m\u00f6ge sie genau sein)<\/h2>\r\n                <div class=\"progress-bar\">\r\n                    <div class=\"progress\" id=\"escapeProgress\"><\/div>\r\n                <\/div>\r\n                <div id=\"escapeContent\">\r\n                    <div class=\"story-section\">\r\n                        <div class=\"story-text\">\r\n                            <p>Sara ist die Besitzerin eines Catering-Unternehmens in ihrer Stadt. Sie ist seit zwei Jahren auf dem Markt und wendet sich mit ihren Dienstleistungen haupts\u00e4chlich an Menschen. Da die Zahl ihrer Kund*innen stetig w\u00e4chst, beschlie\u00dft sie, ihr Catering-Angebot auch an Unternehmen zu richten. Dazu muss sie mehr Geld in ihr Catering-Unternehmen investieren, neue Mitarbeiter*innen einstellen und in gr\u00f6\u00dfere R\u00e4umlichkeiten umziehen. K\u00f6nnen Sie Sara bei der Vorhersage der Umsatzerl\u00f6se helfen?<\/p>\r\n                        <\/div>\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 1: Budgetierung f\u00fcr Nachhaltigkeit<\/h4>\r\n                            <p>Sara m\u00f6chte eine Umsatzprognose f\u00fcr die Expansion ihres Unternehmens erstellen. Was sollte der erste Schritt sein? <\/p>\r\n                            <div class=\"puzzle-options\" id=\"puzzle1Options\">\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(1, 1, this)\">Vorstellungsgespr\u00e4ch und Einstellung neuer Mitarbeiter*innen<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(1, 2, this)\">Finanzielle Ziele und Zeitrahmen festlegen<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(1, 3, this)\">Fokus auf Marketing<\/button>\r\n                            <\/div>\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(1)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 2: Erfassen relevanter interner Daten<\/h4>\r\n                            <p>Sara bereitet sich darauf vor, alle notwendigen internen Daten zu sammeln, die sie f\u00fcr ihre Absatz- und Umsatzprognosen ben\u00f6tigt. Was kann Sara aus der Analyse vergangener Einnahmen lernen?<\/p>\r\n                            <div class=\"puzzle-options\" id=\"puzzle2Options\">\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(2, 1, this)\">Kosten f\u00fcr Kunststoffverpackungen<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(2, 2, this)\">Kosten f\u00fcr Mitarbeiter*innen und Sozialversicherung<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(2, 3, this)\">Sie kann Muster, Saisonalit\u00e4t und Wachstumsraten erkennen <\/button>\r\n                            <\/div>\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(2)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 3: Externe Faktoren, die f\u00fcr die Umsatzprognose wichtig sind<\/h4>\r\n                            <p>Im n\u00e4chsten Schritt bereitet sich Sara darauf vor, die externen Daten zu sammeln, die sie f\u00fcr ihre Absatz- und Umsatzprognosen ben\u00f6tigt. K\u00f6nnen Sie ihr helfen, die besten Informationsquellen auszuw\u00e4hlen? <\/p>\r\n                            <div class=\"puzzle-options\" id=\"puzzle3Options\">\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(3, 1, this)\">Wirtschaftliche Fluktuation<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(3, 2, this)\">Branchentrends, Marktanalyse und Konkurrenzanalyse<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(3, 3, this)\">Alle der oben genannten Punkte sind richtig<\/button>\r\n                            <\/div>\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(3)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 4: Verkaufsmethoden<\/h4>\r\n                            <p>Sara entscheidet auf der Grundlage von Marktuntersuchungen zum Wettbewerb \u00fcber Investitionen in Bereichen mit dem h\u00f6chsten Wachstums- und Rentabilit\u00e4tspotenzial. Sie untersucht die Bed\u00fcrfnisse, Vorlieben und Ziele ihrer Kund*innen und bietet ihnen L\u00f6sungen an, die ihren Erwartungen entsprechen oder sie sogar \u00fcbertreffen. Welche Methoden kann sie anwenden?<\/p>\r\n                            <div class=\"puzzle-options\" id=\"puzzle4Options\">\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(4, 1, this)\">Anbieten einer neuen Speisekarte<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(4, 2, this)\">Cross-Selling und Up-Selling<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(4, 3, this)\">Geschlechtervielfalt in ihrem Team<\/button>\r\n                            <\/div>\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(4)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 5: Upselling<\/h4>\r\n                            <p>Upselling ist ein ............. , bei dem es darum geht, Ihre Kund*innen zu ermutigen, auf eine teurere oder h\u00f6herwertige Version dessen, was sie urspr\u00fcnglich wollten, umzusteigen.<\/p>\r\n                            <input type=\"text\" class=\"puzzle-input\" id=\"puzzle5Answer\" placeholder=\"Geben Sie Ihre Antwort ein\">\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(5)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 6: Cross-Selling-Vorteile<\/h4>\r\n                            <p>Um der Konkurrenz einen Schritt voraus zu sein, plant Sara auch den Einsatz von Cross-Selling-Methoden. K\u00f6nnen Sie ihr helfen, die Vorteile zu erkennen?<\/p>\r\n                            <div class=\"puzzle-options\" id=\"puzzle6Options\">\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(6, 1, this)\">Cross-Selling kann ihr helfen, ihr Verkaufsvolumen zu steigern.<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(6, 2, this)\">Sie kann ihr Catering-Angebot pr\u00e4sentieren und ihren Kund*innen einen h\u00f6heren Mehrwert bieten.<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(6, 3, this)\">Alle oben genannten Punkte sind richtig<\/button>\r\n                            <\/div>\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(6)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 7: Gewinn mit Zweck<\/h4>\r\n                            <p>Cross-Selling ist, wenn Sie Ihren Kund*innen vorschlagen, zus\u00e4tzliche\/teurere Produkte oder Dienstleistungen zu kaufen.<\/p>\r\n                            <input type=\"text\" class=\"puzzle-input\" id=\"puzzle7Answer\" placeholder=\"Geben Sie Ihre Antwort ein\">\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(7)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"story-section\" style=\"display: none;\">\r\n                        <div class=\"challenge\">\r\n                            <h4>HERAUSFORDERUNG 8: Zeit f\u00fcr die Planung der Marketingstrategie?<\/h4>\r\n                            <p>Sara plant ihre Marketingstrategie. Welcher der folgenden Punkte ist der wichtigste Aspekt des Marketings?<\/p>\r\n                            <div class=\"puzzle-options\" id=\"puzzle8Options\">\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(8, 1, this)\">Gewinnprognose<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(8, 2, this)\">Absatzprognose<\/button>\r\n                                <button class=\"puzzle-option-btn\" onclick=\"selectPuzzleOption(8, 3, this)\">Ausrichtung auf den Markt<\/button>\r\n                            <\/div>\r\n                            <button class=\"download-btn\" onclick=\"checkPuzzle(8)\">Antwort \u00fcberpr\u00fcfen<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"escape-room\">\r\n            <h2>Escape Room<\/h2>\r\n            <p>Fordern Sie sich selbst und Ihr Verst\u00e4ndnis mit unserem digitalen Escape Room heraus, indem Sie Ihr vorheriges Modulwissen und Ihre Erfahrung testen.<\/p>\r\n            <button class=\"download-btn\" onclick=\"enterEscapeRoom()\">\r\n                <i class=\"fas fa-door-open\"><\/i> Escape Room betreten\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"quiz-section\">\r\n            <h2>Testen Sie Ihr Wissen<\/h2>\r\n            <button class=\"download-btn\" onclick=\"startQuiz()\">\r\n                <i class=\"fas fa-play\"><\/i> Quiz starten\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <!-- Quiz Section -->\r\n        <div id=\"quizModal\" class=\"modal\">\r\n            <div class=\"modal-content\">\r\n                <span class=\"close-modal\" onclick=\"closeQuiz()\">&times;<\/span>\r\n                <h2>Trainingsprogramm \u2013 Interaktives Quiz<\/h2>\r\n                <div class=\"progress-bar\">\r\n                    <div class=\"progress\" id=\"quizProgress\"><\/div>\r\n                <\/div>\r\n                <div id=\"quizContent\">\r\n                    <div class=\"quiz-question\">\r\n                        <h3>Welche Rolle spielt die Budgetierung in Unternehmen?<\/h3>\r\n                        <div class=\"quiz-options\">\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(1, 1)\">Sie hilft Unternehmen, Ressourcen zuzuweisen, Kosten zu kontrollieren und fundierte Entscheidungen zu treffen, um ihre strategischen Ziele zu erreichen.<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(1, 2)\">Die Budgetierung hindert Menschen daran, neue Ideen zu haben und kreativ zu sein.<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(1, 3)\">Ein Budget ist ein Dokument, das immer gleich ist und nicht ge\u00e4ndert werden muss.<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(1, 4)\">Der Akt der Budgetierung beruht auf der Begrenzung der Ausgaben<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"quiz-question\" style=\"display: none;\">\r\n                        <h3>Was sind die wichtigsten Bestandteile der strategischen Finanzplanung?<\/h3>\r\n                        <div class=\"quiz-options\">\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(2, 1)\">Kurzfristiger Budgetplan<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(2, 2)\">Auftrag des Unternehmens und Branding<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(2, 3)\">Zielsetzung, Risikobewertung, Investitionsplanung, Budgetierung und Entwicklung eines strategischen Plans<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(2, 4)\">SWOT-Analyse<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"quiz-question\" style=\"display: none;\">\r\n                        <h3>Was ist ein Hauptmerkmal einer guten Finanzplanungs-App?<\/h3>\r\n                        <div class=\"quiz-options\">\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(3, 1)\">Die F\u00e4higkeit, k\u00fcnftige Einnahmen mit Sicherheit vorherzusagen<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(3, 2)\">Automatische Zahlungserinnerungen an Rechnungen und Kategorisierung von Ausgaben<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(3, 3)\">Automatische Erstellung von Steuererkl\u00e4rungen<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(3, 4)\">Die F\u00e4higkeit, genau vorherzusagen, wie viel man in Zukunft ausgeben wird<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"quiz-question\" style=\"display: none;\">\r\n                        <h3>Um Finanzpl\u00e4ne als Reaktion auf unvorhersehbare Ver\u00e4nderungen im Unternehmensumfeld anzupassen, muss ein Unternehmenseigent\u00fcmer: <\/h3>\r\n                        <div class=\"quiz-options\">\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(4, 1)\">einen flexiblen, proaktiven und kontinuierlich \u00fcberwachten Ansatz umsetzen<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(4, 2)\">Die Kosten senken<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(4, 3)\">Alle Investitionen begrenzen<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(4, 4)\">Einen Bankkredit aufnehmen<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"quiz-question\" style=\"display: none;\">\r\n                        <h3>Wie k\u00f6nnen Sie den Budgetierungsprozess in einem Kontext entwickeln und verwalten, der Anpassungsf\u00e4higkeit und strategische \u00dcberarbeitung erfordert?<\/h3>\r\n                        <div class=\"quiz-options\">\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(5, 1)\">Regelm\u00e4\u00dfige Evaluierung des Budgetierungsprozesses selbst, um Bereiche mit Verbesserungsbedarf zu ermitteln und notwendige \u00c4nderungen vorzunehmen<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(5, 2)\">Priorisierung von Projekten und Initiativen, die den gr\u00f6\u00dften Nutzen f\u00fcr die Organisation bringen<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(5, 3)\">Verschiedene Szenarien entwickeln und analysieren, um potenzielle Herausforderungen und Chancen zu antizipieren<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(5, 4)\">Alle der oben genannten Aussagen sind richtig<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"quiz-question\" style=\"display: none;\">\r\n                        <h3>Eine effektive Finanzplanung ist sowohl f\u00fcr den Erfolg des einzelnen Menschen als auch f\u00fcr den des Teams entscheidend, weil:<\/h3>\r\n                        <div class=\"quiz-options\">\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(6, 1)\">Die Finanzplanung hilft den Teams zu verstehen, wie viel Geld ihnen zur Verf\u00fcgung steht, und l\u00e4sst sie sorgf\u00e4ltig dar\u00fcber nachdenken, wie sie dieses Geld f\u00fcr verschiedene Projekte und Ideen ausgeben k\u00f6nnen.<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(6, 2)\">Verringert die Motivation und Loyalit\u00e4t<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(6, 3)\">Verringert das Gef\u00fchl der Bef\u00e4higung<\/div>\r\n                            <div class=\"quiz-option\" onclick=\"checkAnswer(6, 4)\">Bessere Vereinbarkeit von Beruf und Privatleben f\u00fcr den Menschen<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n         <div class=\"tools-section\">\r\n            <div class=\"tool-card\">\r\n            <h3><i class=\"fas fa-sticky-note\"><\/i> Pers\u00f6nliche Notizen<\/h3>\r\n            <p>Machen Sie sich Notizen w\u00e4hrend Ihrer Lernreise<\/p>\r\n                <div class=\"notes-container\">\r\n                    <textarea class=\"notes-input\" id=\"notesInput\" placeholder=\"Write your notes here...\"><\/textarea>\r\n                    <div class=\"notes-actions\">\r\n                        <button class=\"notes-btn\" onclick=\"saveNote()\">\r\n                            <i class=\"fas fa-save\"><\/i> Notizen speichern\r\n                        <\/button>\r\n                        <button class=\"notes-btn\" onclick=\"downloadNotes()\">\r\n                            <i class=\"fas fa-download\"><\/i> Notizen herunterladen\r\n                        <\/button>\r\n                    <\/div>\r\n                    <div class=\"notes-list\" id=\"notesList\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tool-card\">\r\n            <h3><i class=\"fas fa-road\"><\/i> Setzen Sie Ihre Lernreise fort<\/h3>\r\n            <p>Was ist der n\u00e4chste Schritt auf Ihrer Reise? W\u00e4hlen Sie ein neues Modul<\/p>\r\n                <div class=\"timeline\">\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-content\">                            \r\n                        <p><a href=\"https:\/\/excel-erasmus.eu\/de\/budgetierung-und-finanzplanung\/\" target=\"_blank\" rel=\"noopener\">Budgetierung und Finanzplanung<\/a><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-content\">\r\n                            <p><a href=\"https:\/\/excel-erasmus.eu\/de\/verstandnis-von-jahresabschlussen\/\" target=\"_blank\" rel=\"noopener\">Verst\u00e4ndnis von Jahresabschl\u00fcssen<\/a><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-content\">\r\n                            <p><a href=\"https:\/\/excel-erasmus.eu\/de\/investitionswissen\/\" target=\"_blank\" rel=\"noopener\">Investitionswissen<\/a><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-content\">\r\n                            <p><a href=\"https:\/\/excel-erasmus.eu\/de\/schulden-und-risikomanagement\/\" target=\"_blank\" rel=\"noopener\">Schulden und Risikomanagement<\/a><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-content\">\r\n                             <p><a href=\"https:\/\/excel-erasmus.eu\/de\/nachhaltige-finanzen-fur-strategische-finanzentscheidungen\/\" target=\"_blank\" rel=\"noopener\">Nachhaltige Finanzen f\u00fcr strategische Finanzentscheidungen<\/a><\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        let currentQuestion = 1;\r\n        let score = 0;\r\n        let currentPuzzle = 1;\r\n        let escapeProgress = 0;\r\n        const totalQuestions = 6;\r\n        const totalPuzzles = 8;\r\n        let selectedAnswers = {}; \/\/ Para armazenar as respostas selecionadas\r\n\r\n        function startQuiz() {\r\n            document.getElementById('quizModal').style.display = 'flex';\r\n            showQuestion(1);\r\n            updateQuizProgress();\r\n        }\r\n\r\n        function showQuestion(number) {\r\n            document.querySelectorAll('.quiz-question').forEach(q => q.style.display = 'none');\r\n            document.querySelector(`.quiz-question:nth-child(${number})`).style.display = 'block';\r\n        }\r\n\r\n        function checkAnswer(question, answer) {\r\n            const options = document.querySelectorAll(`.quiz-question:nth-child(${question}) .quiz-option`);\r\n            options.forEach(option => option.style.pointerEvents = 'none');\r\n\r\n            const correctAnswers = {\r\n                1: 1, \/\/ Richtig\r\n                2: 3, \/\/ Richtig\r\n                3: 2, \/\/ Richtig\r\n                4: 1, \/\/ Richtig\r\n                5: 4, \/\/ Richtig\r\n                6: 1  \/\/ Richtig\r\n            };\r\n\r\n            if (answer === correctAnswers[question]) {\r\n                score++;\r\n                options[answer - 1].classList.add('correct');\r\n            } else {\r\n                options[answer - 1].classList.add('incorrect');\r\n                \/\/ Highlight the correct answer in green when answer is wrong\r\n                options[correctAnswers[question] - 1].classList.add('correct');\r\n            }\r\n\r\n            setTimeout(() => {\r\n                \/\/ Always advance to next question regardless of answer\r\n                if (currentQuestion < totalQuestions) {\r\n                    currentQuestion++;\r\n                    showQuestion(currentQuestion);\r\n                    options.forEach(option => {\r\n                        option.classList.remove('correct', 'incorrect');\r\n                        option.style.pointerEvents = 'auto';\r\n                    });\r\n                } else {\r\n                    showQuizResults();\r\n                }\r\n                updateQuizProgress();\r\n            }, 1500);\r\n        }\r\n\r\n        function updateQuizProgress() {\r\n            const progress = ((currentQuestion - 1) \/ totalQuestions) * 100;\r\n            document.getElementById('quizProgress').style.width = `${progress}%`;\r\n        }\r\n\r\n        function showQuizResults() {\r\n            const quizContent = document.getElementById('quizContent');\r\n            quizContent.innerHTML = `\r\n                <h3>Quiz abgeschlossen!<\/h3>\r\n                <p>Ihr Ergebnis: ${score}\/${totalQuestions}<\/p>\r\n                <button class=\"download-btn\" onclick=\"closeQuiz()\">Quiz schlie\u00dfen<\/button>\r\n            `;\r\n        }\r\n\r\n        function enterEscapeRoom() {\r\n            document.getElementById('escapeRoomModal').style.display = 'flex';\r\n            showPuzzle(1);\r\n            updateEscapeProgress();\r\n        }\r\n\r\n        function showPuzzle(number) {\r\n            document.querySelectorAll('.story-section').forEach(section => section.style.display = 'none');\r\n            document.querySelector(`.story-section:nth-child(${number})`).style.display = 'block';\r\n        }\r\n\r\n        function selectPuzzleOption(puzzleId, optionValue, buttonElement) {\r\n            \/\/ Remove selected class from all buttons in this puzzle\r\n            const puzzleOptions = document.getElementById(`puzzle${puzzleId}Options`);\r\n            const allButtons = puzzleOptions.querySelectorAll('.puzzle-option-btn');\r\n            allButtons.forEach(btn => btn.classList.remove('selected'));\r\n            \r\n            \/\/ Add selected class to clicked button\r\n            buttonElement.classList.add('selected');\r\n            \r\n            \/\/ Store the selected answer\r\n            selectedAnswers[puzzleId] = optionValue;\r\n        }\r\n\r\n        function checkPuzzle(puzzle) {\r\n            let answer;\r\n            let inputElement;\r\n            \r\n            \/\/ Check if it's a text input puzzle or button-based puzzle\r\n            if (puzzle === 5 || puzzle === 7) {\r\n                \/\/ Text input puzzles\r\n                inputElement = document.getElementById(`puzzle${puzzle}Answer`);\r\n                if (!inputElement) return;\r\n                answer = inputElement.value;\r\n            } else {\r\n                \/\/ Button-based puzzles\r\n                if (!selectedAnswers[puzzle]) {\r\n                    alert('Bitte w\u00e4hlen Sie zuerst eine Option aus!');\r\n                    return;\r\n                }\r\n                answer = selectedAnswers[puzzle].toString();\r\n                inputElement = document.getElementById(`puzzle${puzzle}Options`);\r\n            }\r\n            \r\n\r\n            \r\n            const correctAnswers = {\r\n                1: '2',    \/\/ Finanzielle Ziele und Zeitrahmen festlegen\r\n                2: '3',    \/\/ Sie kann Muster, Saisonalit\u00e4t und Wachstumsraten erkennen\r\n                3: '3',    \/\/ Alle der oben genannten Punkte sind richtig\r\n                4: '2',    \/\/ Cross-Selling und Up-Selling\r\n                5: 'verkaufstechnik', \/\/ Verkaufstechnik\r\n                6: '3',    \/\/ Alle oben genannten Punkte sind richtig\r\n                7: 'zus\u00e4tzlich', \/\/ zus\u00e4tzlich\r\n                8: '2'     \/\/ Absatzprognose\r\n            };\r\n            \r\n            \/\/ Remove old messages\r\n            const oldMsg = inputElement.parentNode.querySelector('.encouragement-message');\r\n            if (oldMsg) oldMsg.remove();\r\n\r\n            \/\/ For text inputs, check if the answer contains the correct keywords\r\n            let isCorrect = false;\r\n            if (puzzle === 5 || puzzle === 7) {\r\n                let userAnswer = answer.toLowerCase().trim();\r\n                \/\/ normalizar umlaut para facilitar acerto\r\n                const normalized = userAnswer.replace('\u00e4','a').replace('\u00f6','o').replace('\u00fc','u').replace('\u00df','ss');\r\n                const correctAnswer = correctAnswers[puzzle].toLowerCase();\r\n\r\n                if (userAnswer === correctAnswer ||\r\n                    (puzzle === 5 && (normalized.includes('verkauf') && normalized.includes('technik'))) ||\r\n                    (puzzle === 7 && (userAnswer === 'zus\u00e4tzlich' || normalized === 'zusatzlich'))) {\r\n                    isCorrect = true;\r\n                }\r\n            } else {\r\n                isCorrect = (answer === correctAnswers[puzzle]);\r\n            }\r\n            \r\n            if (isCorrect) {\r\n                if (puzzle === 5 || puzzle === 7) {\r\n                    \/\/ Text input\r\n                    inputElement.classList.add('correct');\r\n                    inputElement.disabled = true;\r\n                } else {\r\n                    \/\/ Button-based puzzle\r\n                    const allButtons = inputElement.querySelectorAll('.puzzle-option-btn');\r\n                    allButtons.forEach(btn => btn.style.pointerEvents = 'none');\r\n                    \r\n                    \/\/ Highlight correct button\r\n                    const correctButton = inputElement.querySelector(`[onclick*=\"selectPuzzleOption(${puzzle}, ${correctAnswers[puzzle]}, this)\"]`);\r\n                    if (correctButton) {\r\n                        correctButton.classList.add('correct');\r\n                    }\r\n                }\r\n                \r\n                const encouragements = {\r\n                    1: \"Gute Arbeit! Der Prozess der Umsatzprognose sollte mit einer klaren Definition der Ziele beginnen. Was wollen Sie erreichen? Wollen Sie das Umsatzpotenzial ermitteln, ein Budget zuweisen oder Verkaufsziele festlegen? Ihre Ziele werden den Prognoseprozess leiten.\",\r\n                    2: \"Ausgezeichnet! Historische Umsatzdaten dienen als wertvolle Grundlage f\u00fcr den Beginn des Prognoseprozesses.\",\r\n                    3: \"Ausgezeichnet! Genaue Umsatzprognosen k\u00f6nnen einem Unternehmen helfen, bessere Entscheidungen \u00fcber Gesch\u00e4ftsausgaben zu treffen, angemessene langfristige Ziele zu setzen und das Vertrauen potenzieller Investoren zu gewinnen.\",\r\n                    4: \"Ganz genau! Diese Methoden erh\u00f6hen den Umsatz und die Rentabilit\u00e4t, bauen die Marke Sara und ihren Ruf auf, st\u00e4rken die Kundenbeziehungen und die Loyalit\u00e4t und erweitern ihren Markt und ihre M\u00f6glichkeiten.\",\r\n                    5: \"Das ist richtig! Upselling ist eine Verkaufstechnik, mit der Kund*innen dazu gebracht werden, sich f\u00fcr eine teurere Option als ihre urspr\u00fcngliche Wahl zu entscheiden.\",\r\n                    6: \"Gute Wahl! Diese Verkaufstechnik kann Sara helfen, ihr Gesch\u00e4ft auszubauen und die Erwartungen ihrer Kund*innen zu \u00fcbertreffen.\",\r\n                    7: \"Ganz genau! Cross-Selling ist die Kunst, zus\u00e4tzliche\/erg\u00e4nzende Produkte zu verkaufen.\",\r\n                    8: \"Sehr gut! Absatzprognosen erm\u00f6glichen fundierte Marketingentscheidungen. Potenzielle Chancen und Herausforderungen k\u00f6nnen von Unternehmen identifiziert, Marketingstrategien entwickelt und Marketingma\u00dfnahmen optimiert werden, um den Umsatz und die Rentabilit\u00e4t zu maximieren.\"\r\n                };\r\n                const encouragementDiv = document.createElement('div');\r\n                encouragementDiv.className = 'encouragement-message';\r\n                encouragementDiv.style.fontSize = '1.25rem';\r\n                encouragementDiv.style.marginBottom = '1rem';\r\n                encouragementDiv.style.background = '#e8f5e9';\r\n                encouragementDiv.style.color = '#222';\r\n                encouragementDiv.innerHTML = `\r\n                    <div class=\"encouragement-content\">\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <p><b><\/b> ${encouragements[puzzle]}<\/p>\r\n                    <\/div>\r\n                `;\r\n                \/\/ Display above the button\r\n                inputElement.parentNode.insertBefore(encouragementDiv, inputElement.nextSibling);\r\n                if (currentPuzzle < totalPuzzles) {\r\n                    currentPuzzle++;\r\n                    setTimeout(() => {\r\n                        showPuzzle(currentPuzzle);\r\n                    }, 2500);\r\n                } else {\r\n                    setTimeout(() => {\r\n                        showEscapeResults();\r\n                    }, 2500);\r\n                }\r\n                escapeProgress = (currentPuzzle \/ totalPuzzles) * 100;\r\n                updateEscapeProgress();\r\n            } else {\r\n                if (puzzle === 5 || puzzle === 7) {\r\n                    \/\/ Text input\r\n                    inputElement.classList.add('incorrect');\r\n                } else {\r\n                    \/\/ Button-based puzzle\r\n                    const allButtons = inputElement.querySelectorAll('.puzzle-option-btn');\r\n                    allButtons.forEach(btn => btn.style.pointerEvents = 'none');\r\n                    \r\n                    \/\/ Highlight incorrect button\r\n                    const selectedButton = inputElement.querySelector('.puzzle-option-btn.selected');\r\n                    if (selectedButton) {\r\n                        selectedButton.classList.add('incorrect');\r\n                    }\r\n                }\r\n                \r\n                const tryAgainMessages = {\r\n                    1: \"Nicht ganz - die Einstellung neuer Mitarbeiter*innen und das Marketing sind zwar wichtig, aber die Festlegung von Zielen und deren Verfolgung ist der wichtigste Punkt. Da Sara ihre Produkte Angebote und ihre Marktreichweite weiter ausbaut, ist das Verst\u00e4ndnis der kommenden Umsatztrends entscheidend f\u00fcr fundierte Investitionen und die Zuweisung von Ressourcen.\",\r\n                    2: \"Versuchen Sie es noch einmal! Wir analysieren historische Umsatz- und Ertragsdaten, um zu verstehen, wie sie sich im Laufe der Zeit ver\u00e4ndert haben.\",\r\n                    3: \"Versuchen Sie es noch einmal! Die Einbeziehung all dieser externen Faktoren in die Umsatzprognose hilft, eine realistischere und umfassendere Umsatzprognose zu erstellen.\",\r\n                    4: \"Nicht ganz! Die Kund*innen k\u00f6nnen von einer h\u00f6heren Qualit\u00e4t und Vielfalt von Speisen und Getr\u00e4nken sowie von professionellen Dienstleistungen profitieren, aber Sie brauchen effektive Methoden, um Ihr Angebot zu verkaufen.\",\r\n                    5: \"Fast richtig! Upselling ist ein sehr wichtiges Tool im Verkauf.\",\r\n                    6: \"Versuchen Sie es noch einmal! Die Cross-Selling-Methode hat mehrere Vorteile f\u00fcr die Steigerung des Umsatzes.\",\r\n                    7: \"Versuchen Sie es noch einmal - das Anbieten von h\u00f6herwertigen oder teuren Produkten oder Dienstleistungen ist Up-Selling.\",\r\n                    8: \"Versuchen Sie es noch einmal! Durch die Untersuchung der Vergangenheit, aktueller Markttrends und des Kundenverhaltens hilft die Absatzprognose den Unternehmen, ihre k\u00fcnftigen Absatzzahlen vorherzusagen, Absatzziele festzulegen, ihre Ressourcen gut zu nutzen und intelligente Marketingentscheidungen zu treffen.\"\r\n                };\r\n                const encouragementDiv = document.createElement('div');\r\n                encouragementDiv.className = 'encouragement-message';\r\n                encouragementDiv.style.background = 'rgba(255,139,210,0.1)';\r\n                encouragementDiv.style.fontSize = '1.1rem';\r\n                encouragementDiv.innerHTML = `\r\n                    <div class=\"encouragement-content\">\r\n                        <i class=\"fas fa-heart\"><\/i>\r\n                        <p>${tryAgainMessages[puzzle]}<\/p>\r\n                    <\/div>\r\n                `;\r\n                inputElement.parentNode.insertBefore(encouragementDiv, inputElement.nextSibling);\r\n                \r\n                \/\/ Reset after 4 seconds to allow retry\r\n                setTimeout(() => {\r\n                    if (puzzle === 5 || puzzle === 7) {\r\n                        inputElement.classList.remove('incorrect');\r\n                        inputElement.value = ''; \/\/ Clear the input\r\n                    } else {\r\n                        const allButtons = inputElement.querySelectorAll('.puzzle-option-btn');\r\n                        allButtons.forEach(btn => {\r\n                            btn.classList.remove('correct', 'incorrect', 'selected');\r\n                            btn.style.pointerEvents = 'auto';\r\n                        });\r\n                        \/\/ Clear selected answer\r\n                        selectedAnswers[puzzle] = null;\r\n                    }\r\n                    encouragementDiv.remove();\r\n                }, 4000);\r\n            }\r\n        }\r\n\r\n        function updateEscapeProgress() {\r\n            document.getElementById('escapeProgress').style.width = `${escapeProgress}%`;\r\n        }\r\n\r\n        function showEscapeResults() {\r\n            const escapeContent = document.getElementById('escapeContent');\r\n            escapeContent.innerHTML = `\r\n                <div class=\"story-section\">\r\n                    <div class=\"story-text\">\r\n                        <h3>Gut gemacht! Sie haben Sara geholfen, ihre ersten Schritte in Richtung Umsatzprognose zu machen. Mit Ihrer Unterst\u00fctzung hat sie begonnen, ihre Ziele zu definieren und die richtigen Methoden zur Prognose und Kostenoptimierung auszuw\u00e4hlen. Ihre eigene Reise hat gerade erst begonnen - erforschen Sie weiter, wie Nachhaltigkeit einen finanziellen und sozialen Mehrwert schaffen kann. Denken Sie daran: Jede fundierte Entscheidung bringt Ihr Unternehmen und Ihre Gemeinschaft voran.<\/h3>\r\n                        <div class=\"achievement-badge\">\r\n                            <i class=\"fas fa-trophy\"><\/i>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <button class=\"download-btn\" onclick=\"closeEscapeRoom()\">Abenteuer schlie\u00dfen<\/button>\r\n            `;\r\n        }\r\n\r\n        function closeEscapeRoom() {\r\n            document.getElementById('escapeRoomModal').style.display = 'none';\r\n            currentPuzzle = 1;\r\n            escapeProgress = 0;\r\n            updateEscapeProgress();\r\n            selectedAnswers = {};\r\n            \r\n            \/\/ Reset button options\r\n            document.querySelectorAll('.puzzle-option-btn').forEach(btn => {\r\n                btn.classList.remove('selected', 'correct', 'incorrect');\r\n                btn.style.pointerEvents = 'auto';\r\n            });\r\n            \r\n            \/\/ Reset text inputs\r\n            document.querySelectorAll('.puzzle-input').forEach(input => {\r\n                input.value = '';\r\n                input.disabled = false;\r\n                input.classList.remove('correct', 'incorrect');\r\n            });\r\n            \r\n\r\n        }\r\n\r\n        function closeQuiz() {\r\n            document.getElementById('quizModal').style.display = 'none';\r\n            currentQuestion = 1;\r\n            score = 0;\r\n            updateQuizProgress();\r\n            document.querySelectorAll('.quiz-option').forEach(option => {\r\n                option.classList.remove('correct', 'incorrect');\r\n                option.style.pointerEvents = 'auto';\r\n            });\r\n        }\r\n\r\n        \/\/ Existing animations and event listeners\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.style.opacity = 1;\r\n                        entry.target.style.transform = 'translateY(0)';\r\n                    }\r\n                });\r\n            });\r\n\r\n            document.querySelectorAll('.feature-card').forEach(card => {\r\n                card.style.opacity = 0;\r\n                card.style.transform = 'translateY(20px)';\r\n                card.style.transition = 'all 0.5s ease-out';\r\n                observer.observe(card);\r\n            });\r\n        });\r\n\r\n        \/\/ Add to existing script\r\n        window.addEventListener('scroll', function() {\r\n            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;\r\n            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\r\n            const scrolled = (winScroll \/ height) * 100;\r\n            document.getElementById('pageProgress').style.width = scrolled + '%';\r\n        });\r\n\r\n        \/\/ Entry animation for cards\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const cards = document.querySelectorAll('.feature-card');\r\n            cards.forEach((card, index) => {\r\n                card.style.opacity = '0';\r\n                card.style.transform = 'translateY(20px)';\r\n                setTimeout(() => {\r\n                    card.style.transition = 'all 0.5s ease';\r\n                    card.style.opacity = '1';\r\n                    card.style.transform = 'translateY(0)';\r\n                }, index * 200);\r\n            });\r\n        });\r\n\r\n        \/\/ Adicionar ao script existente\r\n        function appendToCalc(value) {\r\n            document.getElementById('calcDisplay').value += value;\r\n        }\r\n\r\n        function clearCalc() {\r\n            document.getElementById('calcDisplay').value = '';\r\n        }\r\n\r\n        function calculate() {\r\n            const display = document.getElementById('calcDisplay');\r\n            try {\r\n                display.value = eval(display.value);\r\n            } catch (error) {\r\n                display.value = 'Error';\r\n            }\r\n        }\r\n\r\n        \/\/ Adicionar ao script existente\r\n        let notes = [];\r\n\r\n        function saveNote() {\r\n            const noteText = document.getElementById('notesInput').value.trim();\r\n            if (noteText) {\r\n                const note = {\r\n                    text: noteText,\r\n                    date: new Date().toLocaleString(),\r\n                    id: Date.now()\r\n                };\r\n                notes.push(note);\r\n                updateNotesList();\r\n                document.getElementById('notesInput').value = '';\r\n            }\r\n        }\r\n\r\n        function updateNotesList() {\r\n            const notesList = document.getElementById('notesList');\r\n            notesList.innerHTML = notes.map(note => `\r\n                <div class=\"note-item\">\r\n                    <div>\r\n                        <div class=\"note-text\">${note.text}<\/div>\r\n                        <div class=\"note-date\">${note.date}<\/div>\r\n                    <\/div>\r\n                    <button class=\"notes-btn\" onclick=\"deleteNote(${note.id})\">\r\n                        <i class=\"fas fa-trash\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            `).join('');\r\n        }\r\n\r\n        function deleteNote(id) {\r\n            notes = notes.filter(note => note.id !== id);\r\n            updateNotesList();\r\n        }\r\n\r\n        function downloadNotes() {\r\n            if (notes.length === 0) {\r\n                alert('No notes to download!');\r\n                return;\r\n            }\r\n\r\n            const content = notes.map(note => \r\n                `Note: ${note.text}\\nDate: ${note.date}\\n\\n`\r\n            ).join('---\\n');\r\n\r\n            const blob = new Blob([content], { type: 'text\/plain' });\r\n            const url = window.URL.createObjectURL(blob);\r\n            const a = document.createElement('a');\r\n            a.href = url;\r\n            a.download = 'financial-literacy-notes.txt';\r\n            document.body.appendChild(a);\r\n            a.click();\r\n            window.URL.revokeObjectURL(url);\r\n            document.body.removeChild(a);\r\n        }\r\n\r\n        \/\/ Configura\u00e7\u00e3o do PDF.js\r\n        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.11.338\/pdf.worker.min.js';\r\n\r\n        function loadPDFFlipbook() {\r\n            \/\/ Abrir o PDF em uma nova aba\r\n            window.open('https:\/\/excel-erasmus.eu\/wp-content\/uploads\/2025\/03\/EXCEL_Flyer_EN.pdf', '_blank');\r\n        }\r\n\r\n        function loadVideo(videoUrl) {\r\n            const video = document.getElementById('mainVideo');\r\n            video.src = videoUrl;\r\n            video.play();\r\n        }\r\n\r\n        function loadInfographic(imageUrl) {\r\n            const container = document.getElementById('infographicContainer');\r\n            const image = document.getElementById('infographicImage');\r\n            image.src = imageUrl;\r\n            container.style.display = 'flex';\r\n        }\r\n\r\n        function closeFlipbook() {\r\n            const container = document.getElementById('flipbookContainer');\r\n            container.style.display = 'none';\r\n        }\r\n\r\n        function closeVideo() {\r\n            const video = document.getElementById('mainVideo');\r\n            video.pause();\r\n            video.currentTime = 0;\r\n        }\r\n\r\n        function closeInfographic() {\r\n            const container = document.getElementById('infographicContainer');\r\n            container.style.display = 'none';\r\n        }\r\n\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html> \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>Financial Literacy Training Programme Video Resource Welcome to module &#8222;Budgeting and financial planning&#8220; where you will learn how to create and manage effective budgets using digital tools to ensure your business stays financially sustainable and adaptable. Your browser does not support the video element. Play Pause Learning contents, activities and resources Start by going through [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-996","page","type-page","status-publish","hentry","entry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/pages\/996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/comments?post=996"}],"version-history":[{"count":659,"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/pages\/996\/revisions"}],"predecessor-version":[{"id":4427,"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/pages\/996\/revisions\/4427"}],"wp:attachment":[{"href":"https:\/\/excel-erasmus.eu\/de\/wp-json\/wp\/v2\/media?parent=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}