Inhaltsverzeichnis mit Iframe | LeTTo Demo<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #059669;\n --primary-hover: #047857;\n --primary-active: #065f46;\n --border-color: #e5e7eb;\n --text-primary: #1f2937;\n --text-secondary: #6b7280;\n --bg-light: #f3f4f6;\n --bg-white: #ffffff;\n --transition-duration: 200ms;\n --sidebar-width: 16rem;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background-color: var(--bg-light);\n color: var(--text-primary);\n }\n\n \/* Header *\/\n header {\n background: linear-gradient(135deg, #1f2937 0%, #111827 100%);\n color: white;\n padding: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n position: sticky;\n top: 0;\n z-index: 50;\n }\n\n header h1 {\n font-size: 1.25rem;\n font-weight: 700;\n letter-spacing: -0.5px;\n }\n\n \/* Main Layout *\/\n #main-container {\n display: flex;\n min-height: calc(100vh - 4rem); \/* 4rem = Header H\u00f6he *\/\n gap: 0;\n }\n\n \/* Sidebar Navigation *\/\n #sidebar {\n width: var(--sidebar-width);\n background-color: var(--bg-white);\n border-right: 1px solid var(--border-color);\n padding: 1.5rem;\n overflow-y: auto;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);\n transition: transform var(--transition-duration) ease;\n }\n\n #sidebar h2 {\n font-size: 1.125rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: var(--text-primary);\n }\n\n #sidebar ul {\n list-style: none;\n }\n\n #sidebar > ul > li {\n margin-bottom: 0.5rem;\n }\n\n \/* Navigation Links *\/\n .nav-link {\n display: block;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: #f9fafb;\n color: var(--text-primary);\n text-decoration: none;\n transition: all var(--transition-duration) ease;\n cursor: pointer;\n user-select: none;\n border-left: 3px solid transparent;\n font-weight: 500;\n }\n\n .nav-link:hover {\n background-color: #f0fdf4;\n border-left-color: var(--primary-color);\n transform: translateX(2px);\n }\n\n .nav-link.active {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);\n color: white;\n font-weight: 600;\n box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);\n border-left-color: #10b981;\n }\n\n \/* Sub-links *\/\n .nav-link.sub-link {\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n margin-left: 0.5rem;\n background-color: #f9fafb;\n color: var(--primary-active);\n }\n\n .nav-link.sub-link:hover {\n background-color: #f0fdf4;\n }\n\n .nav-link.sub-link.active {\n background-color: var(--primary-color);\n color: white;\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n \/* Toggle Buttons *\/\n .main-section-toggle {\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: #f9fafb;\n color: var(--text-primary);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 500;\n cursor: pointer;\n user-select: none;\n border: 1px solid transparent;\n transition: all var(--transition-duration) ease;\n width: 100%; \/* Wichtig f\u00fcr korrekte Breite *\/\n }\n\n .main-section-toggle:hover {\n background-color: #f0fdf4;\n border-color: var(--primary-color);\n }\n\n .main-section-toggle:focus-visible {\n outline: 2px solid var(--primary-color);\n outline-offset: 2px;\n }\n\n .toggle-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n transition: transform var(--transition-duration) ease;\n font-size: 1rem;\n }\n\n .main-section-toggle[aria-expanded=\"true\"] .toggle-icon {\n transform: rotate(45deg);\n }\n\n \/* Submenu *\/\n .submenu {\n list-style: none;\n border-left: 2px solid var(--primary-color);\n margin-left: 0.5rem;\n padding-left: 1rem;\n max-height: 1000px;\n opacity: 1;\n overflow: hidden;\n transition: all var(--transition-duration) ease;\n }\n\n .submenu.hidden {\n max-height: 0;\n opacity: 0;\n margin: 0;\n padding: 0;\n }\n\n .submenu li {\n margin-bottom: 0.25rem;\n }\n\n \/* Main Content Area *\/\n #content-area {\n flex: 1;\n background-color: var(--bg-light);\n padding: 2rem;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n }\n\n #content-title {\n font-size: 1.875rem;\n font-weight: 800;\n margin-bottom: 1.5rem;\n color: var(--text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n \/* Loading Spinner *\/\n .loading-spinner {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 2px solid var(--border-color);\n border-top-color: var(--primary-color);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* iframe *\/\n #content-frame {\n width: 100%;\n height: calc(100vh - 4rem - 3.5rem - 2rem); \/* Header - Title - Padding *\/\n border: none;\n border-radius: 0.5rem;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\n background-color: var(--bg-white);\n transition: box-shadow var(--transition-duration) ease;\n }\n\n #content-frame.loading {\n opacity: 0.6;\n }\n\n \/* Footer Info *\/\n .sidebar-footer {\n margin-top: 2rem;\n padding-top: 1rem;\n border-top: 1px solid var(--border-color);\n font-size: 0.875rem;\n color: var(--text-secondary);\n line-height: 1.6;\n }\n\n \/* Responsive Design Optimierung f\u00fcr Mobilger\u00e4te (unter 768px) *\/\n @media (max-width: 768px) {\n :root {\n --sidebar-width: 100%;\n }\n\n #main-container {\n flex-direction: column;\n }\n\n #sidebar {\n \/* Standardm\u00e4\u00dfig au\u00dferhalb des Bildschirms auf Mobilger\u00e4ten *\/\n position: fixed; \n top: 4rem; \/* Unterhalb des neuen Headers *\/\n left: 0;\n width: 100%;\n max-height: calc(100vh - 4rem);\n border-right: none;\n border-bottom: 1px solid var(--border-color);\n z-index: 40;\n transform: translateX(-100%); \/* Sidebar verstecken *\/\n transition: transform var(--transition-duration) ease-in-out;\n }\n\n #sidebar.open {\n transform: translateX(0); \/* Sidebar einblenden *\/\n }\n \n #sidebar-toggle {\n display: block; \/* Zeigt den Toggle-Button auf Handys *\/\n }\n\n #content-area {\n padding: 1rem;\n }\n\n #content-title {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n }\n\n #content-frame {\n height: calc(100vh - 4rem - 3.5rem - 1rem); \/* Angepasste H\u00f6he f\u00fcr Mobile *\/\n }\n\n .nav-link {\n padding: 0.625rem;\n font-size: 0.9375rem;\n }\n\n .toggle-icon {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n @media (min-width: 769px) {\n \/* Auf Desktop den Toggle-Button verstecken *\/\n #sidebar-toggle {\n display: none;\n }\n }\n\n \/* ... (media queries f\u00fcr 480px unver\u00e4ndert) *\/\n\n \/* Accessibility *\/\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid var(--primary-color);\n outline-offset: 2px;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n\n <header>\n <div class=\"flex justify-between items-center max-w-7xl mx-auto\">\n\n \n <button id=\"sidebar-toggle\" class=\"p-2 rounded-lg bg-green-700 hover:bg-green-600 focus-visible:outline-white transition\" aria-expanded=\"false\" aria-controls=\"sidebar\">\n <span class=\"sr-only\">Men\u00fc umschalten<\/span>\n <svg id=\"menu-icon-open\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <svg id=\"menu-icon-close\" class=\"w-6 h-6 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/header>\n\n <div id=\"main-container\" role=\"application\">\n\n <nav id=\"sidebar\" role=\"navigation\" aria-label=\"Hauptmen\u00fc\" aria-label=\"Inhaltsverzeichnis\">\n <h2 id=\"menu-title\">\ud83d\udcda Inhaltsverzeichnis<\/h2>\n <ul role=\"menubar\">\n \n <li role=\"none\">\n <a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3297\" class=\"nav-link\" data-name=\"Startseite\" data-section-id=\"start\" role=\"menuitem\">\n \ud83c\udfe0 Startseite\n <\/a>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-1\" aria-expanded=\"false\" aria-controls=\"submenu-1\">\n <span>\ud83d\udcd0 Mathematik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-1\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3233\" class=\"nav-link sub-link\" data-name=\"Geradengleichung\" data-section-id=\"math-1\" role=\"menuitem\">Geradengleichung<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3247\" class=\"nav-link sub-link\" data-name=\"Rechtwinkelige Dreieck\" data-section-id=\"math-2\" role=\"menuitem\">Rechtwinkelige Dreieck<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3235\" class=\"nav-link sub-link\" data-name=\"Differentialrechnung\" data-section-id=\"math-3\" role=\"menuitem\">Differentialrechnung<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3248\" class=\"nav-link sub-link\" data-name=\"Komplexe Zahlen\" data-section-id=\"math-4\" role=\"menuitem\">Komplexe Zahlen<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3234\" class=\"nav-link sub-link\" data-name=\"Vektoren\" data-section-id=\"math-5\" role=\"menuitem\">Vektoren<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-2\" aria-expanded=\"false\" aria-controls=\"submenu-2\">\n <span>\u26a1 Elektrotechnik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-2\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3249\" class=\"nav-link sub-link\" data-name=\"Gleichstromtechnik\" data-section-id=\"el-1\" role=\"menuitem\">Gleichstromtechnik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3237\" class=\"nav-link sub-link\" data-name=\"Wechselstromtechnik\" data-section-id=\"el-2\" role=\"menuitem\">Wechselstromtechnik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3252\" class=\"nav-link sub-link\" data-name=\"Drehstromtechnik\" data-section-id=\"el-3\" role=\"menuitem\">Drehstromtechnik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3239\" class=\"nav-link sub-link\" data-name=\"Antriebstechnik\" data-section-id=\"el-4\" role=\"menuitem\">Antriebstechnik<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-4\" aria-expanded=\"false\" aria-controls=\"submenu-4\">\n <span>\ud83d\udd2c Physik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-4\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3258\" class=\"nav-link sub-link\" data-name=\"Energie\" data-section-id=\"phy-1\" role=\"menuitem\">Energie<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3256\" class=\"nav-link sub-link\" data-name=\"Thermodynamik\" data-section-id=\"phy-2\" role=\"menuitem\">Thermodynamik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3259\" class=\"nav-link sub-link\" data-name=\"Optik\" data-section-id=\"phy-3\" role=\"menuitem\">Optik<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-5\" aria-expanded=\"false\" aria-controls=\"submenu-5\">\n <span>\u2699\ufe0f Maschinenbau<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-5\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3238\" class=\"nav-link sub-link\" data-name=\"Tr\u00e4gheitsmoment\" data-section-id=\"mech-1\" role=\"menuitem\">Tr\u00e4gheitsmoment<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3236\" class=\"nav-link sub-link\" data-name=\"Messschieber\" data-section-id=\"mech-2\" role=\"menuitem\">Messschieber<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3243\" class=\"nav-link sub-link\" data-name=\"Kragtr\u00e4ger\" data-section-id=\"mech-3\" role=\"menuitem\">Kragtr\u00e4ger<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-6\" aria-expanded=\"false\" aria-controls=\"submenu-6\">\n <span>\ud83d\udde3\ufe0f Englisch<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-6\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3254\" class=\"nav-link sub-link\" data-name=\"Listening\" data-section-id=\"eng-1\" role=\"menuitem\">Listening<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3261\" class=\"nav-link sub-link\" data-name=\"Business Vocabulary\" data-section-id=\"eng-2\" role=\"menuitem\">Business Vocabulary<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3260\" class=\"nav-link sub-link\" data-name=\"Technical Vocabulary\" data-section-id=\"eng-3\" role=\"menuitem\">Technical Vocabulary<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-7\" aria-expanded=\"false\" aria-controls=\"submenu-7\">\n <span>\ud83d\udcbb Informatik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-7\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3293\" class=\"nav-link sub-link\" data-name=\"Windows Basics\" data-section-id=\"inf-1\" role=\"menuitem\">Windows Basics<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3296\" class=\"nav-link sub-link\" data-name=\"OSI-Schichtmodell\" data-section-id=\"inf-2\" role=\"menuitem\">OSI-Schichtmodell<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3295\" class=\"nav-link sub-link\" data-name=\"Schnittstellen\" data-section-id=\"inf-3\" role=\"menuitem\">Schnittstellen<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-8\" aria-expanded=\"false\" aria-controls=\"submenu-8\">\n <span>\ud83d\udd0c Elektronik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-8\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3253\" class=\"nav-link sub-link\" data-name=\"Diode\" data-section-id=\"elec-1\" role=\"menuitem\">Diode<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3255\" class=\"nav-link sub-link\" data-name=\"Operationsverst\u00e4rker\" data-section-id=\"elec-2\" role=\"menuitem\">Operationsverst\u00e4rker<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3262\" class=\"nav-link sub-link\" data-name=\"Digitaltechnik\" data-section-id=\"elec-3\" role=\"menuitem\">Digitaltechnik<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-3\" aria-expanded=\"false\" aria-controls=\"submenu-3\">\n <span>\u2795 Zusatz Mathematik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-3\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3298\" class=\"nav-link sub-link\" data-name=\"Determinanten\" data-section-id=\"math2-1\" role=\"menuitem\">Determinanten<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3299\" class=\"nav-link sub-link\" data-name=\"Laplace Transformation\" data-section-id=\"math2-2\" role=\"menuitem\">Laplace Transformation<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3300\" class=\"nav-link sub-link\" data-name=\"Drallsatz\" data-section-id=\"math2-3\" role=\"menuitem\">Drallsatz<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3301\" class=\"nav-link sub-link\" data-name=\"Integralrechnung\" data-section-id=\"math2-4\" role=\"menuitem\">Integralrechnung<\/a><\/li>\n <\/ul>\n <\/li>\n \n \n <\/ul>\n <div class=\"sidebar-footer\">\n <strong>\ud83d\udca1 Hinweis:<\/strong><br> Um mehr \u00fcber die interaktiven LeTTo-Aufgaben zu erfahren, kontaktieren Sie uns bitte – pers\u00f6nlicher Kundenkontakt ist uns sehr wichtig!\n <\/div>\n <\/nav>\n\n <main id=\"content-area\" role=\"main\">\n <h2 id=\"content-title\">\n <span id=\"title-text\">\ud83c\udfaf Aktueller Inhalt: Startseite<\/span>\n <span id=\"loading-indicator\" class=\"loading-spinner\" style=\"display: none;\"><\/span>\n <\/h2>\n \n <iframe \n id=\"content-frame\" \n title=\"Hauptinhaltsbereich mit Aufgaben\" \n src=\"https:\/\/placehold.co\/600x400\/10B981\/ffffff?text=Willkommen\" \n allowfullscreen\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-presentation\">\n <\/iframe>\n <\/main>\n <\/div>\n\n <script>\n \/\/ ============================================\n \/\/ CONFIG & CONSTANTS\n \/\/ ============================================\n const CONFIG = {\n storageKey: 'letto_menu_state',\n transitionDuration: 200,\n loadingClass: 'loading'\n };\n\n \/\/ ============================================\n \/\/ STATE MANAGEMENT\n \/\/ ============================================\n class MenuStateManager {\n constructor(storageKey) {\n this.storageKey = storageKey;\n this.state = this.load();\n }\n\n load() {\n try {\n const saved = localStorage.getItem(this.storageKey);\n return saved ? JSON.parse(saved) : { activeLink: 'start', expandedMenus: [] };\n } catch (e) {\n console.warn('LocalStorage nicht verf\u00fcgbar:', e);\n return { activeLink: 'start', expandedMenus: [] };\n }\n }\n\n save() {\n try {\n localStorage.setItem(this.storageKey, JSON.stringify(this.state));\n } catch (e) {\n console.warn('LocalStorage Speicherung fehlgeschlagen:', e);\n }\n }\n\n setActiveLink(sectionId) {\n this.state.activeLink = sectionId;\n this.save();\n }\n\n toggleMenu(menuId) {\n const index = this.state.expandedMenus.indexOf(menuId);\n if (index > -1) {\n this.state.expandedMenus.splice(index, 1);\n } else {\n this.state.expandedMenus.push(menuId);\n }\n this.save();\n }\n\n isMenuExpanded(menuId) {\n return this.state.expandedMenus.includes(menuId);\n }\n\n getActiveLink() {\n return this.state.activeLink;\n }\n }\n\n \/\/ ============================================\n \/\/ DOM ELEMENTS & INITIALIZATION\n \/\/ ============================================\n const navLinks = document.querySelectorAll('.nav-link');\n const toggleButtons = document.querySelectorAll('.main-section-toggle');\n const contentFrame = document.getElementById('content-frame');\n const contentTitle = document.getElementById('content-title');\n const titleText = document.getElementById('title-text');\n const loadingIndicator = document.getElementById('loading-indicator');\n const stateManager = new MenuStateManager(CONFIG.storageKey);\n\n \/\/ NEU: Mobile Toggle Elemente\n const sidebarToggle = document.getElementById('sidebar-toggle');\n const sidebar = document.getElementById('sidebar');\n const menuIconOpen = document.getElementById('menu-icon-open');\n const menuIconClose = document.getElementById('menu-icon-close');\n\n \/\/ ============================================\n \/\/ EVENT HANDLERS\n \/\/ ============================================\n \n \/\/ NEU: Handler f\u00fcr das mobile Sidebar Toggle\n const handleMobileToggle = () => {\n const isSidebarOpen = sidebar.classList.toggle('open');\n sidebarToggle.setAttribute('aria-expanded', isSidebarOpen);\n \n \/\/ Icon-Wechsel\n menuIconOpen.classList.toggle('hidden', isSidebarOpen);\n menuIconClose.classList.toggle('hidden', !isSidebarOpen);\n };\n\n \/\/ NEU: Sidebar auf Handys schlie\u00dfen\n const closeSidebarIfMobile = (linkElement) => {\n if (window.innerWidth <= 768) {\n \/\/ Verz\u00f6gerung f\u00fcr sichtbaren Klick-Effekt vor dem Schlie\u00dfen\n setTimeout(() => {\n sidebar.classList.remove('open');\n sidebarToggle.setAttribute('aria-expanded', 'false');\n menuIconOpen.classList.remove('hidden');\n menuIconClose.classList.add('hidden');\n }, 100); \n }\n \/\/ Scroll zum aktiven Link\n linkElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n\n const handleLinkClick = (event) => {\n event.preventDefault();\n const clickedLink = event.currentTarget;\n const targetUrl = clickedLink.getAttribute('data-url');\n const linkName = clickedLink.getAttribute('data-name');\n const sectionId = clickedLink.getAttribute('data-section-id');\n\n if (targetUrl && linkName) {\n loadContent(clickedLink, targetUrl, linkName, sectionId);\n }\n };\n\n const handleToggleClick = (event) => {\n const clickedToggle = event.currentTarget;\n const targetId = clickedToggle.getAttribute('data-target');\n const submenu = document.getElementById(targetId);\n const icon = clickedToggle.querySelector('.toggle-icon');\n\n if (submenu && icon) {\n const isHidden = submenu.classList.toggle('hidden');\n clickedToggle.setAttribute('aria-expanded', !isHidden);\n stateManager.toggleMenu(targetId);\n }\n };\n\n const handleKeyPress = (event) => {\n if (event.key === 'Enter' || event.keyCode === 13) {\n \/\/ \u00dcberpr\u00fcfe, ob es sich um den Haupt-Section-Toggle handelt\n if (event.target.classList.contains('main-section-toggle')) {\n handleToggleClick({ currentTarget: event.target });\n }\n }\n };\n\n \/\/ ============================================\n \/\/ CONTENT LOADING\n \/\/ ============================================\n const loadContent = (linkElement, url, name, sectionId) => {\n \/\/ Entferne aktive Klasse von allen Links\n navLinks.forEach(link => link.classList.remove('active'));\n \n \/\/ Setze neue aktive Link\n linkElement.classList.add('active');\n \n \/\/ Update State\n stateManager.setActiveLink(sectionId);\n \n \/\/ NEU: Sidebar schlie\u00dfen und Scrollen auf Mobilger\u00e4ten\n closeSidebarIfMobile(linkElement);\n\n \/\/ Zeige Loading-Indikator\n loadingIndicator.style.display = 'inline-block';\n contentFrame.classList.add(CONFIG.loadingClass);\n \n \/\/ Update Titel\n titleText.textContent = `\ud83c\udfaf Aktueller Inhalt: ${name}`;\n\n \/\/ Lade Inhalt\n contentFrame.onload = () => {\n loadingIndicator.style.display = 'none';\n contentFrame.classList.remove(CONFIG.loadingClass);\n console.log(`\u2713 Inhalt \"${name}\" erfolgreich geladen`);\n };\n\n contentFrame.onerror = () => {\n loadingIndicator.style.display = 'none';\n contentFrame.classList.remove(CONFIG.loadingClass);\n console.error(`\u2717 Fehler beim Laden von: ${url}`);\n titleText.textContent = `\u26a0\ufe0f Fehler beim Laden: ${name}`;\n };\n\n contentFrame.src = url;\n };\n\n \/\/ ============================================\n \/\/ INITIALIZATION\n \/\/ ============================================\n const initializeApp = () => {\n \/\/ Stelle Men\u00fc-Zustand wieder her\n const expandedMenus = stateManager.state.expandedMenus;\n expandedMenus.forEach(menuId => {\n const button = document.querySelector(`[data-target=\"${menuId}\"]`);\n const submenu = document.getElementById(menuId);\n if (button && submenu) {\n submenu.classList.remove('hidden');\n button.setAttribute('aria-expanded', 'true');\n }\n });\n\n \/\/ Lade zuletzt aktiven Link\n const activeLink = document.querySelector(\n `.nav-link[data-section-id=\"${stateManager.getActiveLink()}\"]`\n );\n \n if (activeLink) {\n const url = activeLink.getAttribute('data-url');\n const name = activeLink.getAttribute('data-name');\n const sectionId = activeLink.getAttribute('data-section-id');\n \/\/ Lade den Inhalt, aber schlie\u00dfe die Sidebar auf Mobilger\u00e4ten NICHT automatisch beim Initial-Load\n \/\/ Das Schlie\u00dfen passiert nur bei Klicks \u00fcber handleLinkClick\n loadContent(activeLink, url, name, sectionId);\n \n \/\/ Wir m\u00fcssen den initialen Scroll hier manuell ausl\u00f6sen, da loadContent jetzt closeSidebarIfMobile verwendet, das eine Verz\u00f6gerung hat.\n activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n \/\/ Event Listener registrieren\n navLinks.forEach(link => {\n link.addEventListener('click', handleLinkClick);\n });\n\n toggleButtons.forEach(button => {\n button.addEventListener('click', handleToggleClick);\n button.addEventListener('keypress', handleKeyPress);\n });\n \n \/\/ Event Listener f\u00fcr den mobilen Toggle Button\n if (sidebarToggle) {\n sidebarToggle.addEventListener('click', handleMobileToggle);\n }\n\n console.log('\u2713 App erfolgreich initialisiert');\n };\n\n \/\/ Starte App wenn DOM bereit\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n } else {\n initializeApp();\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1928","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>LeTTo ausprobieren –<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LeTTo ausprobieren –\" \/>\n<meta property=\"og:description\" content=\"Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T10:31:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/index.php\\\/letto-ausprobieren\\\/\",\"url\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/index.php\\\/letto-ausprobieren\\\/\",\"name\":\"LeTTo ausprobieren –\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#website\"},\"datePublished\":\"2025-12-14T19:17:16+00:00\",\"dateModified\":\"2025-12-16T10:31:35+00:00\",\"inLanguage\":\"de-AT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/letto.at\\\/wordpress\\\/index.php\\\/letto-ausprobieren\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/\",\"name\":\"LeTTo - MINT Performer\",\"description\":\"Learning Evaluating Teaching Testing Online\",\"publisher\":{\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-AT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#organization\",\"name\":\"LeTTo\",\"url\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-AT\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/letto.at\\\/wordpress\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/cropped-logo-2.png?fit=600%2C363&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/letto.at\\\/wordpress\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/cropped-logo-2.png?fit=600%2C363&ssl=1\",\"width\":600,\"height\":363,\"caption\":\"LeTTo\"},\"image\":{\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCykp6jWvn-VCxwhgm7PZ4jw\"]}]}<\/script>\n","yoast_head_json":{"title":"LeTTo ausprobieren –","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","og_locale":"de_DE","og_type":"article","og_title":"LeTTo ausprobieren –","og_description":"Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell […]","og_url":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","article_modified_time":"2025-12-16T10:31:35+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1 Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","url":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","name":"LeTTo ausprobieren –","isPartOf":{"@id":"https:\/\/letto.at\/wordpress\/#website"},"datePublished":"2025-12-14T19:17:16+00:00","dateModified":"2025-12-16T10:31:35+00:00","inLanguage":"de-AT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/"]}]},{"@type":"WebSite","@id":"https:\/\/letto.at\/wordpress\/#website","url":"https:\/\/letto.at\/wordpress\/","name":"LeTTo - MINT Performer","description":"Learning Evaluating Teaching Testing Online","publisher":{"@id":"https:\/\/letto.at\/wordpress\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/letto.at\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-AT"},{"@type":"Organization","@id":"https:\/\/letto.at\/wordpress\/#organization","name":"LeTTo","url":"https:\/\/letto.at\/wordpress\/","logo":{"@type":"ImageObject","inLanguage":"de-AT","@id":"https:\/\/letto.at\/wordpress\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/letto.at\/wordpress\/wp-content\/uploads\/2020\/11\/cropped-logo-2.png?fit=600%2C363&ssl=1","contentUrl":"https:\/\/i0.wp.com\/letto.at\/wordpress\/wp-content\/uploads\/2020\/11\/cropped-logo-2.png?fit=600%2C363&ssl=1","width":600,"height":363,"caption":"LeTTo"},"image":{"@id":"https:\/\/letto.at\/wordpress\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/channel\/UCykp6jWvn-VCxwhgm7PZ4jw"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"wpadmin","author_link":"https:\/\/letto.at\/wordpress\/index.php\/author\/wpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell…","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/1928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1928"}],"version-history":[{"count":72,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/1928\/revisions"}],"predecessor-version":[{"id":3640,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/1928\/revisions\/3640"}],"wp:attachment":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1928,"date":"2025-12-14T19:17:16","date_gmt":"2025-12-14T19:17:16","guid":{"rendered":"https:\/\/letto.at\/wordpress\/?page_id=1928"},"modified":"2025-12-16T10:31:35","modified_gmt":"2025-12-16T10:31:35","slug":"letto-ausprobieren","status":"publish","type":"page","link":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","title":{"rendered":"LeTTo ausprobieren"},"content":{"rendered":"\n\n\n\n \n \n Inhaltsverzeichnis mit Iframe | LeTTo Demo<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #059669;\n --primary-hover: #047857;\n --primary-active: #065f46;\n --border-color: #e5e7eb;\n --text-primary: #1f2937;\n --text-secondary: #6b7280;\n --bg-light: #f3f4f6;\n --bg-white: #ffffff;\n --transition-duration: 200ms;\n --sidebar-width: 16rem;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background-color: var(--bg-light);\n color: var(--text-primary);\n }\n\n \/* Header *\/\n header {\n background: linear-gradient(135deg, #1f2937 0%, #111827 100%);\n color: white;\n padding: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n position: sticky;\n top: 0;\n z-index: 50;\n }\n\n header h1 {\n font-size: 1.25rem;\n font-weight: 700;\n letter-spacing: -0.5px;\n }\n\n \/* Main Layout *\/\n #main-container {\n display: flex;\n min-height: calc(100vh - 4rem); \/* 4rem = Header H\u00f6he *\/\n gap: 0;\n }\n\n \/* Sidebar Navigation *\/\n #sidebar {\n width: var(--sidebar-width);\n background-color: var(--bg-white);\n border-right: 1px solid var(--border-color);\n padding: 1.5rem;\n overflow-y: auto;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);\n transition: transform var(--transition-duration) ease;\n }\n\n #sidebar h2 {\n font-size: 1.125rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: var(--text-primary);\n }\n\n #sidebar ul {\n list-style: none;\n }\n\n #sidebar > ul > li {\n margin-bottom: 0.5rem;\n }\n\n \/* Navigation Links *\/\n .nav-link {\n display: block;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: #f9fafb;\n color: var(--text-primary);\n text-decoration: none;\n transition: all var(--transition-duration) ease;\n cursor: pointer;\n user-select: none;\n border-left: 3px solid transparent;\n font-weight: 500;\n }\n\n .nav-link:hover {\n background-color: #f0fdf4;\n border-left-color: var(--primary-color);\n transform: translateX(2px);\n }\n\n .nav-link.active {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);\n color: white;\n font-weight: 600;\n box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);\n border-left-color: #10b981;\n }\n\n \/* Sub-links *\/\n .nav-link.sub-link {\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n margin-left: 0.5rem;\n background-color: #f9fafb;\n color: var(--primary-active);\n }\n\n .nav-link.sub-link:hover {\n background-color: #f0fdf4;\n }\n\n .nav-link.sub-link.active {\n background-color: var(--primary-color);\n color: white;\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n \/* Toggle Buttons *\/\n .main-section-toggle {\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: #f9fafb;\n color: var(--text-primary);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 500;\n cursor: pointer;\n user-select: none;\n border: 1px solid transparent;\n transition: all var(--transition-duration) ease;\n width: 100%; \/* Wichtig f\u00fcr korrekte Breite *\/\n }\n\n .main-section-toggle:hover {\n background-color: #f0fdf4;\n border-color: var(--primary-color);\n }\n\n .main-section-toggle:focus-visible {\n outline: 2px solid var(--primary-color);\n outline-offset: 2px;\n }\n\n .toggle-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n transition: transform var(--transition-duration) ease;\n font-size: 1rem;\n }\n\n .main-section-toggle[aria-expanded=\"true\"] .toggle-icon {\n transform: rotate(45deg);\n }\n\n \/* Submenu *\/\n .submenu {\n list-style: none;\n border-left: 2px solid var(--primary-color);\n margin-left: 0.5rem;\n padding-left: 1rem;\n max-height: 1000px;\n opacity: 1;\n overflow: hidden;\n transition: all var(--transition-duration) ease;\n }\n\n .submenu.hidden {\n max-height: 0;\n opacity: 0;\n margin: 0;\n padding: 0;\n }\n\n .submenu li {\n margin-bottom: 0.25rem;\n }\n\n \/* Main Content Area *\/\n #content-area {\n flex: 1;\n background-color: var(--bg-light);\n padding: 2rem;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n }\n\n #content-title {\n font-size: 1.875rem;\n font-weight: 800;\n margin-bottom: 1.5rem;\n color: var(--text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n \/* Loading Spinner *\/\n .loading-spinner {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border: 2px solid var(--border-color);\n border-top-color: var(--primary-color);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* iframe *\/\n #content-frame {\n width: 100%;\n height: calc(100vh - 4rem - 3.5rem - 2rem); \/* Header - Title - Padding *\/\n border: none;\n border-radius: 0.5rem;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\n background-color: var(--bg-white);\n transition: box-shadow var(--transition-duration) ease;\n }\n\n #content-frame.loading {\n opacity: 0.6;\n }\n\n \/* Footer Info *\/\n .sidebar-footer {\n margin-top: 2rem;\n padding-top: 1rem;\n border-top: 1px solid var(--border-color);\n font-size: 0.875rem;\n color: var(--text-secondary);\n line-height: 1.6;\n }\n\n \/* Responsive Design Optimierung f\u00fcr Mobilger\u00e4te (unter 768px) *\/\n @media (max-width: 768px) {\n :root {\n --sidebar-width: 100%;\n }\n\n #main-container {\n flex-direction: column;\n }\n\n #sidebar {\n \/* Standardm\u00e4\u00dfig au\u00dferhalb des Bildschirms auf Mobilger\u00e4ten *\/\n position: fixed; \n top: 4rem; \/* Unterhalb des neuen Headers *\/\n left: 0;\n width: 100%;\n max-height: calc(100vh - 4rem);\n border-right: none;\n border-bottom: 1px solid var(--border-color);\n z-index: 40;\n transform: translateX(-100%); \/* Sidebar verstecken *\/\n transition: transform var(--transition-duration) ease-in-out;\n }\n\n #sidebar.open {\n transform: translateX(0); \/* Sidebar einblenden *\/\n }\n \n #sidebar-toggle {\n display: block; \/* Zeigt den Toggle-Button auf Handys *\/\n }\n\n #content-area {\n padding: 1rem;\n }\n\n #content-title {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n }\n\n #content-frame {\n height: calc(100vh - 4rem - 3.5rem - 1rem); \/* Angepasste H\u00f6he f\u00fcr Mobile *\/\n }\n\n .nav-link {\n padding: 0.625rem;\n font-size: 0.9375rem;\n }\n\n .toggle-icon {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n @media (min-width: 769px) {\n \/* Auf Desktop den Toggle-Button verstecken *\/\n #sidebar-toggle {\n display: none;\n }\n }\n\n \/* ... (media queries f\u00fcr 480px unver\u00e4ndert) *\/\n\n \/* Accessibility *\/\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid var(--primary-color);\n outline-offset: 2px;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n\n <header>\n <div class=\"flex justify-between items-center max-w-7xl mx-auto\">\n\n \n <button id=\"sidebar-toggle\" class=\"p-2 rounded-lg bg-green-700 hover:bg-green-600 focus-visible:outline-white transition\" aria-expanded=\"false\" aria-controls=\"sidebar\">\n <span class=\"sr-only\">Men\u00fc umschalten<\/span>\n <svg id=\"menu-icon-open\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <svg id=\"menu-icon-close\" class=\"w-6 h-6 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/header>\n\n <div id=\"main-container\" role=\"application\">\n\n <nav id=\"sidebar\" role=\"navigation\" aria-label=\"Hauptmen\u00fc\" aria-label=\"Inhaltsverzeichnis\">\n <h2 id=\"menu-title\">\ud83d\udcda Inhaltsverzeichnis<\/h2>\n <ul role=\"menubar\">\n \n <li role=\"none\">\n <a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3297\" class=\"nav-link\" data-name=\"Startseite\" data-section-id=\"start\" role=\"menuitem\">\n \ud83c\udfe0 Startseite\n <\/a>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-1\" aria-expanded=\"false\" aria-controls=\"submenu-1\">\n <span>\ud83d\udcd0 Mathematik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-1\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3233\" class=\"nav-link sub-link\" data-name=\"Geradengleichung\" data-section-id=\"math-1\" role=\"menuitem\">Geradengleichung<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3247\" class=\"nav-link sub-link\" data-name=\"Rechtwinkelige Dreieck\" data-section-id=\"math-2\" role=\"menuitem\">Rechtwinkelige Dreieck<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3235\" class=\"nav-link sub-link\" data-name=\"Differentialrechnung\" data-section-id=\"math-3\" role=\"menuitem\">Differentialrechnung<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3248\" class=\"nav-link sub-link\" data-name=\"Komplexe Zahlen\" data-section-id=\"math-4\" role=\"menuitem\">Komplexe Zahlen<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3234\" class=\"nav-link sub-link\" data-name=\"Vektoren\" data-section-id=\"math-5\" role=\"menuitem\">Vektoren<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-2\" aria-expanded=\"false\" aria-controls=\"submenu-2\">\n <span>\u26a1 Elektrotechnik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-2\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3249\" class=\"nav-link sub-link\" data-name=\"Gleichstromtechnik\" data-section-id=\"el-1\" role=\"menuitem\">Gleichstromtechnik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3237\" class=\"nav-link sub-link\" data-name=\"Wechselstromtechnik\" data-section-id=\"el-2\" role=\"menuitem\">Wechselstromtechnik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3252\" class=\"nav-link sub-link\" data-name=\"Drehstromtechnik\" data-section-id=\"el-3\" role=\"menuitem\">Drehstromtechnik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3239\" class=\"nav-link sub-link\" data-name=\"Antriebstechnik\" data-section-id=\"el-4\" role=\"menuitem\">Antriebstechnik<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-4\" aria-expanded=\"false\" aria-controls=\"submenu-4\">\n <span>\ud83d\udd2c Physik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-4\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3258\" class=\"nav-link sub-link\" data-name=\"Energie\" data-section-id=\"phy-1\" role=\"menuitem\">Energie<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3256\" class=\"nav-link sub-link\" data-name=\"Thermodynamik\" data-section-id=\"phy-2\" role=\"menuitem\">Thermodynamik<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3259\" class=\"nav-link sub-link\" data-name=\"Optik\" data-section-id=\"phy-3\" role=\"menuitem\">Optik<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-5\" aria-expanded=\"false\" aria-controls=\"submenu-5\">\n <span>\u2699\ufe0f Maschinenbau<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-5\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3238\" class=\"nav-link sub-link\" data-name=\"Tr\u00e4gheitsmoment\" data-section-id=\"mech-1\" role=\"menuitem\">Tr\u00e4gheitsmoment<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3236\" class=\"nav-link sub-link\" data-name=\"Messschieber\" data-section-id=\"mech-2\" role=\"menuitem\">Messschieber<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3243\" class=\"nav-link sub-link\" data-name=\"Kragtr\u00e4ger\" data-section-id=\"mech-3\" role=\"menuitem\">Kragtr\u00e4ger<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-6\" aria-expanded=\"false\" aria-controls=\"submenu-6\">\n <span>\ud83d\udde3\ufe0f Englisch<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-6\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3254\" class=\"nav-link sub-link\" data-name=\"Listening\" data-section-id=\"eng-1\" role=\"menuitem\">Listening<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3261\" class=\"nav-link sub-link\" data-name=\"Business Vocabulary\" data-section-id=\"eng-2\" role=\"menuitem\">Business Vocabulary<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3260\" class=\"nav-link sub-link\" data-name=\"Technical Vocabulary\" data-section-id=\"eng-3\" role=\"menuitem\">Technical Vocabulary<\/a><\/li>\n <\/ul>\n <\/li>\n \n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-7\" aria-expanded=\"false\" aria-controls=\"submenu-7\">\n <span>\ud83d\udcbb Informatik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-7\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3293\" class=\"nav-link sub-link\" data-name=\"Windows Basics\" data-section-id=\"inf-1\" role=\"menuitem\">Windows Basics<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3296\" class=\"nav-link sub-link\" data-name=\"OSI-Schichtmodell\" data-section-id=\"inf-2\" role=\"menuitem\">OSI-Schichtmodell<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3295\" class=\"nav-link sub-link\" data-name=\"Schnittstellen\" data-section-id=\"inf-3\" role=\"menuitem\">Schnittstellen<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-8\" aria-expanded=\"false\" aria-controls=\"submenu-8\">\n <span>\ud83d\udd0c Elektronik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-8\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3253\" class=\"nav-link sub-link\" data-name=\"Diode\" data-section-id=\"elec-1\" role=\"menuitem\">Diode<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3255\" class=\"nav-link sub-link\" data-name=\"Operationsverst\u00e4rker\" data-section-id=\"elec-2\" role=\"menuitem\">Operationsverst\u00e4rker<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3262\" class=\"nav-link sub-link\" data-name=\"Digitaltechnik\" data-section-id=\"elec-3\" role=\"menuitem\">Digitaltechnik<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li role=\"none\">\n <button class=\"main-section-toggle\" data-target=\"submenu-3\" aria-expanded=\"false\" aria-controls=\"submenu-3\">\n <span>\u2795 Zusatz Mathematik<\/span>\n <span class=\"toggle-icon\" aria-hidden=\"true\">+<\/span>\n <\/button>\n <ul id=\"submenu-3\" class=\"submenu hidden\" role=\"menu\">\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3298\" class=\"nav-link sub-link\" data-name=\"Determinanten\" data-section-id=\"math2-1\" role=\"menuitem\">Determinanten<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3299\" class=\"nav-link sub-link\" data-name=\"Laplace Transformation\" data-section-id=\"math2-2\" role=\"menuitem\">Laplace Transformation<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3300\" class=\"nav-link sub-link\" data-name=\"Drallsatz\" data-section-id=\"math2-3\" role=\"menuitem\">Drallsatz<\/a><\/li>\n <li role=\"none\"><a href=\"#\" data-url=\"https:\/\/demo.letto.at\/app\/pages\/test\/open\/demo.letto.at\/demo\/3301\" class=\"nav-link sub-link\" data-name=\"Integralrechnung\" data-section-id=\"math2-4\" role=\"menuitem\">Integralrechnung<\/a><\/li>\n <\/ul>\n <\/li>\n \n \n <\/ul>\n <div class=\"sidebar-footer\">\n <strong>\ud83d\udca1 Hinweis:<\/strong><br> Um mehr \u00fcber die interaktiven LeTTo-Aufgaben zu erfahren, kontaktieren Sie uns bitte – pers\u00f6nlicher Kundenkontakt ist uns sehr wichtig!\n <\/div>\n <\/nav>\n\n <main id=\"content-area\" role=\"main\">\n <h2 id=\"content-title\">\n <span id=\"title-text\">\ud83c\udfaf Aktueller Inhalt: Startseite<\/span>\n <span id=\"loading-indicator\" class=\"loading-spinner\" style=\"display: none;\"><\/span>\n <\/h2>\n \n <iframe \n id=\"content-frame\" \n title=\"Hauptinhaltsbereich mit Aufgaben\" \n src=\"https:\/\/placehold.co\/600x400\/10B981\/ffffff?text=Willkommen\" \n allowfullscreen\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-presentation\">\n <\/iframe>\n <\/main>\n <\/div>\n\n <script>\n \/\/ ============================================\n \/\/ CONFIG & CONSTANTS\n \/\/ ============================================\n const CONFIG = {\n storageKey: 'letto_menu_state',\n transitionDuration: 200,\n loadingClass: 'loading'\n };\n\n \/\/ ============================================\n \/\/ STATE MANAGEMENT\n \/\/ ============================================\n class MenuStateManager {\n constructor(storageKey) {\n this.storageKey = storageKey;\n this.state = this.load();\n }\n\n load() {\n try {\n const saved = localStorage.getItem(this.storageKey);\n return saved ? JSON.parse(saved) : { activeLink: 'start', expandedMenus: [] };\n } catch (e) {\n console.warn('LocalStorage nicht verf\u00fcgbar:', e);\n return { activeLink: 'start', expandedMenus: [] };\n }\n }\n\n save() {\n try {\n localStorage.setItem(this.storageKey, JSON.stringify(this.state));\n } catch (e) {\n console.warn('LocalStorage Speicherung fehlgeschlagen:', e);\n }\n }\n\n setActiveLink(sectionId) {\n this.state.activeLink = sectionId;\n this.save();\n }\n\n toggleMenu(menuId) {\n const index = this.state.expandedMenus.indexOf(menuId);\n if (index > -1) {\n this.state.expandedMenus.splice(index, 1);\n } else {\n this.state.expandedMenus.push(menuId);\n }\n this.save();\n }\n\n isMenuExpanded(menuId) {\n return this.state.expandedMenus.includes(menuId);\n }\n\n getActiveLink() {\n return this.state.activeLink;\n }\n }\n\n \/\/ ============================================\n \/\/ DOM ELEMENTS & INITIALIZATION\n \/\/ ============================================\n const navLinks = document.querySelectorAll('.nav-link');\n const toggleButtons = document.querySelectorAll('.main-section-toggle');\n const contentFrame = document.getElementById('content-frame');\n const contentTitle = document.getElementById('content-title');\n const titleText = document.getElementById('title-text');\n const loadingIndicator = document.getElementById('loading-indicator');\n const stateManager = new MenuStateManager(CONFIG.storageKey);\n\n \/\/ NEU: Mobile Toggle Elemente\n const sidebarToggle = document.getElementById('sidebar-toggle');\n const sidebar = document.getElementById('sidebar');\n const menuIconOpen = document.getElementById('menu-icon-open');\n const menuIconClose = document.getElementById('menu-icon-close');\n\n \/\/ ============================================\n \/\/ EVENT HANDLERS\n \/\/ ============================================\n \n \/\/ NEU: Handler f\u00fcr das mobile Sidebar Toggle\n const handleMobileToggle = () => {\n const isSidebarOpen = sidebar.classList.toggle('open');\n sidebarToggle.setAttribute('aria-expanded', isSidebarOpen);\n \n \/\/ Icon-Wechsel\n menuIconOpen.classList.toggle('hidden', isSidebarOpen);\n menuIconClose.classList.toggle('hidden', !isSidebarOpen);\n };\n\n \/\/ NEU: Sidebar auf Handys schlie\u00dfen\n const closeSidebarIfMobile = (linkElement) => {\n if (window.innerWidth <= 768) {\n \/\/ Verz\u00f6gerung f\u00fcr sichtbaren Klick-Effekt vor dem Schlie\u00dfen\n setTimeout(() => {\n sidebar.classList.remove('open');\n sidebarToggle.setAttribute('aria-expanded', 'false');\n menuIconOpen.classList.remove('hidden');\n menuIconClose.classList.add('hidden');\n }, 100); \n }\n \/\/ Scroll zum aktiven Link\n linkElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n\n const handleLinkClick = (event) => {\n event.preventDefault();\n const clickedLink = event.currentTarget;\n const targetUrl = clickedLink.getAttribute('data-url');\n const linkName = clickedLink.getAttribute('data-name');\n const sectionId = clickedLink.getAttribute('data-section-id');\n\n if (targetUrl && linkName) {\n loadContent(clickedLink, targetUrl, linkName, sectionId);\n }\n };\n\n const handleToggleClick = (event) => {\n const clickedToggle = event.currentTarget;\n const targetId = clickedToggle.getAttribute('data-target');\n const submenu = document.getElementById(targetId);\n const icon = clickedToggle.querySelector('.toggle-icon');\n\n if (submenu && icon) {\n const isHidden = submenu.classList.toggle('hidden');\n clickedToggle.setAttribute('aria-expanded', !isHidden);\n stateManager.toggleMenu(targetId);\n }\n };\n\n const handleKeyPress = (event) => {\n if (event.key === 'Enter' || event.keyCode === 13) {\n \/\/ \u00dcberpr\u00fcfe, ob es sich um den Haupt-Section-Toggle handelt\n if (event.target.classList.contains('main-section-toggle')) {\n handleToggleClick({ currentTarget: event.target });\n }\n }\n };\n\n \/\/ ============================================\n \/\/ CONTENT LOADING\n \/\/ ============================================\n const loadContent = (linkElement, url, name, sectionId) => {\n \/\/ Entferne aktive Klasse von allen Links\n navLinks.forEach(link => link.classList.remove('active'));\n \n \/\/ Setze neue aktive Link\n linkElement.classList.add('active');\n \n \/\/ Update State\n stateManager.setActiveLink(sectionId);\n \n \/\/ NEU: Sidebar schlie\u00dfen und Scrollen auf Mobilger\u00e4ten\n closeSidebarIfMobile(linkElement);\n\n \/\/ Zeige Loading-Indikator\n loadingIndicator.style.display = 'inline-block';\n contentFrame.classList.add(CONFIG.loadingClass);\n \n \/\/ Update Titel\n titleText.textContent = `\ud83c\udfaf Aktueller Inhalt: ${name}`;\n\n \/\/ Lade Inhalt\n contentFrame.onload = () => {\n loadingIndicator.style.display = 'none';\n contentFrame.classList.remove(CONFIG.loadingClass);\n console.log(`\u2713 Inhalt \"${name}\" erfolgreich geladen`);\n };\n\n contentFrame.onerror = () => {\n loadingIndicator.style.display = 'none';\n contentFrame.classList.remove(CONFIG.loadingClass);\n console.error(`\u2717 Fehler beim Laden von: ${url}`);\n titleText.textContent = `\u26a0\ufe0f Fehler beim Laden: ${name}`;\n };\n\n contentFrame.src = url;\n };\n\n \/\/ ============================================\n \/\/ INITIALIZATION\n \/\/ ============================================\n const initializeApp = () => {\n \/\/ Stelle Men\u00fc-Zustand wieder her\n const expandedMenus = stateManager.state.expandedMenus;\n expandedMenus.forEach(menuId => {\n const button = document.querySelector(`[data-target=\"${menuId}\"]`);\n const submenu = document.getElementById(menuId);\n if (button && submenu) {\n submenu.classList.remove('hidden');\n button.setAttribute('aria-expanded', 'true');\n }\n });\n\n \/\/ Lade zuletzt aktiven Link\n const activeLink = document.querySelector(\n `.nav-link[data-section-id=\"${stateManager.getActiveLink()}\"]`\n );\n \n if (activeLink) {\n const url = activeLink.getAttribute('data-url');\n const name = activeLink.getAttribute('data-name');\n const sectionId = activeLink.getAttribute('data-section-id');\n \/\/ Lade den Inhalt, aber schlie\u00dfe die Sidebar auf Mobilger\u00e4ten NICHT automatisch beim Initial-Load\n \/\/ Das Schlie\u00dfen passiert nur bei Klicks \u00fcber handleLinkClick\n loadContent(activeLink, url, name, sectionId);\n \n \/\/ Wir m\u00fcssen den initialen Scroll hier manuell ausl\u00f6sen, da loadContent jetzt closeSidebarIfMobile verwendet, das eine Verz\u00f6gerung hat.\n activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n\n \/\/ Event Listener registrieren\n navLinks.forEach(link => {\n link.addEventListener('click', handleLinkClick);\n });\n\n toggleButtons.forEach(button => {\n button.addEventListener('click', handleToggleClick);\n button.addEventListener('keypress', handleKeyPress);\n });\n \n \/\/ Event Listener f\u00fcr den mobilen Toggle Button\n if (sidebarToggle) {\n sidebarToggle.addEventListener('click', handleMobileToggle);\n }\n\n console.log('\u2713 App erfolgreich initialisiert');\n };\n\n \/\/ Starte App wenn DOM bereit\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n } else {\n initializeApp();\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1928","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>LeTTo ausprobieren –<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LeTTo ausprobieren –\" \/>\n<meta property=\"og:description\" content=\"Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T10:31:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/index.php\\\/letto-ausprobieren\\\/\",\"url\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/index.php\\\/letto-ausprobieren\\\/\",\"name\":\"LeTTo ausprobieren –\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#website\"},\"datePublished\":\"2025-12-14T19:17:16+00:00\",\"dateModified\":\"2025-12-16T10:31:35+00:00\",\"inLanguage\":\"de-AT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/letto.at\\\/wordpress\\\/index.php\\\/letto-ausprobieren\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/\",\"name\":\"LeTTo - MINT Performer\",\"description\":\"Learning Evaluating Teaching Testing Online\",\"publisher\":{\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-AT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#organization\",\"name\":\"LeTTo\",\"url\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-AT\",\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/letto.at\\\/wordpress\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/cropped-logo-2.png?fit=600%2C363&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/letto.at\\\/wordpress\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/cropped-logo-2.png?fit=600%2C363&ssl=1\",\"width\":600,\"height\":363,\"caption\":\"LeTTo\"},\"image\":{\"@id\":\"https:\\\/\\\/letto.at\\\/wordpress\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCykp6jWvn-VCxwhgm7PZ4jw\"]}]}<\/script>\n","yoast_head_json":{"title":"LeTTo ausprobieren –","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","og_locale":"de_DE","og_type":"article","og_title":"LeTTo ausprobieren –","og_description":"Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell […]","og_url":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","article_modified_time":"2025-12-16T10:31:35+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1 Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","url":"https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/","name":"LeTTo ausprobieren –","isPartOf":{"@id":"https:\/\/letto.at\/wordpress\/#website"},"datePublished":"2025-12-14T19:17:16+00:00","dateModified":"2025-12-16T10:31:35+00:00","inLanguage":"de-AT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/letto.at\/wordpress\/index.php\/letto-ausprobieren\/"]}]},{"@type":"WebSite","@id":"https:\/\/letto.at\/wordpress\/#website","url":"https:\/\/letto.at\/wordpress\/","name":"LeTTo - MINT Performer","description":"Learning Evaluating Teaching Testing Online","publisher":{"@id":"https:\/\/letto.at\/wordpress\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/letto.at\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-AT"},{"@type":"Organization","@id":"https:\/\/letto.at\/wordpress\/#organization","name":"LeTTo","url":"https:\/\/letto.at\/wordpress\/","logo":{"@type":"ImageObject","inLanguage":"de-AT","@id":"https:\/\/letto.at\/wordpress\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/letto.at\/wordpress\/wp-content\/uploads\/2020\/11\/cropped-logo-2.png?fit=600%2C363&ssl=1","contentUrl":"https:\/\/i0.wp.com\/letto.at\/wordpress\/wp-content\/uploads\/2020\/11\/cropped-logo-2.png?fit=600%2C363&ssl=1","width":600,"height":363,"caption":"LeTTo"},"image":{"@id":"https:\/\/letto.at\/wordpress\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/channel\/UCykp6jWvn-VCxwhgm7PZ4jw"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"wpadmin","author_link":"https:\/\/letto.at\/wordpress\/index.php\/author\/wpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Inhaltsverzeichnis mit Iframe | LeTTo Demo Men\u00fc umschalten \ud83d\udcda Inhaltsverzeichnis \ud83c\udfe0 Startseite \ud83d\udcd0 Mathematik + Geradengleichung Rechtwinkelige Dreieck Differentialrechnung Komplexe Zahlen Vektoren \u26a1 Elektrotechnik + Gleichstromtechnik Wechselstromtechnik Drehstromtechnik Antriebstechnik \ud83d\udd2c Physik + Energie Thermodynamik Optik \u2699\ufe0f Maschinenbau + Tr\u00e4gheitsmoment Messschieber Kragtr\u00e4ger \ud83d\udde3\ufe0f Englisch + Listening Business Vocabulary Technical Vocabulary \ud83d\udcbb Informatik + Windows Basics OSI-Schichtmodell…","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/1928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1928"}],"version-history":[{"count":72,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/1928\/revisions"}],"predecessor-version":[{"id":3640,"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/pages\/1928\/revisions\/3640"}],"wp:attachment":[{"href":"https:\/\/letto.at\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}