Interaktives Tutorial: Die Mind-Mapping-Methode<\/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@400;600;700&family=Lora:wght@400;600&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8f7f4;\n color: #2d3748;\n }\n h1, h2, h3 {\n font-family: 'Lora', serif;\n }\n .nav-link {\n transition: color 0.3s, border-color 0.3s;\n border-bottom: 2px solid transparent;\n }\n .nav-link.active, .nav-link:hover {\n color: #d97706;\n border-bottom-color: #d97706;\n }\n .btn-primary {\n background-color: #36454F;\n color: #FFFFFF;\n transition: background-color 0.3s;\n }\n .btn-primary:hover {\n background-color: #2d3748;\n }\n .section-fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .section-fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .tab.active {\n border-color: #d97706;\n background-color: #d97706;\n color: white;\n }\n \/* Mind Map Simulation Styles *\/\n #mindmap-canvas {\n position: relative;\n min-height: 450px;\n border: 2px dashed #d1d5db;\n background-image: radial-gradient(#e5e7eb 1px, transparent 1px);\n background-size: 1.5rem 1.5rem;\n }\n .mindmap-node {\n position: absolute;\n padding: 0.75rem 1.25rem;\n border-radius: 9999px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border: 2px solid;\n font-weight: 600;\n transition: all 0.5s ease-in-out;\n opacity: 0;\n transform: scale(0.5);\n }\n .mindmap-node.visible {\n opacity: 1;\n transform: scale(1);\n }\n .mindmap-node.center {\n background-color: #d97706;\n color: white;\n border-color: #b45309;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.5);\n }\n .mindmap-node.center.visible {\n transform: translate(-50%, -50%) scale(1);\n }\n .branch-line {\n position: absolute;\n height: 2px;\n background-color: #9ca3af;\n transform-origin: 0 0;\n opacity: 0;\n transition: opacity 0.5s ease-in-out 0.2s, width 0.5s ease-in-out 0.2s;\n width: 0;\n z-index: -1;\n }\n .branch-line.visible {\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n <header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-4\">\n <div class=\"flex items-center justify-between h-16\">\n <span class=\"text-xl font-bold text-[#36454F]\">Mind-Mapping<\/span>\n <div class=\"hidden md:flex items-center space-x-6\">\n <a href=\"#einfuehrung\" class=\"nav-link px-2 py-1\">Einf\u00fchrung<\/a>\n <a href=\"#anleitung\" class=\"nav-link px-2 py-1\">Anleitung<\/a>\n <a href=\"#anwendung\" class=\"nav-link px-2 py-1\">MINT-Beispiele<\/a>\n <\/div>\n <div class=\"md:hidden\">\n <button id=\"mobile-menu-button\" class=\"text-gray-600 focus:outline-none\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden py-4\">\n <a href=\"#einfuehrung\" class=\"block nav-link text-center py-2\">Einf\u00fchrung<\/a>\n <a href=\"#anleitung\" class=\"block nav-link text-center py-2\">Anleitung<\/a>\n <a href=\"#anwendung\" class=\"block nav-link text-center py-2\">MINT-Beispiele<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main class=\"container mx-auto px-4 py-8 md:py-12\">\n\n <section id=\"einfuehrung\" class=\"text-center mb-16 md:mb-24 section-fade-in\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-[#d97706] mb-4\">Erstellen Sie die Landkarte Ihres Wissens<\/h1>\n <p class=\"max-w-3xl mx-auto text-lg text-gray-600 mb-8\">\n Mind-Mapping ist eine kreative und visuelle Lerntechnik, die die assoziative Arbeitsweise Ihres Gehirns nachahmt. Strukturieren Sie komplexe Themen, entdecken Sie Zusammenh\u00e4nge und entfesseln Sie Ihr volles Denkpotenzial.\n <\/p>\n <a href=\"#anleitung\" class=\"btn-primary rounded-full px-8 py-3 font-semibold inline-block\">Zur interaktiven Anleitung<\/a>\n <\/section>\n \n <section id=\"anleitung\" class=\"mb-16 md:mb-24 section-fade-in\">\n <h2 class=\"text-3xl font-bold text-center mb-2 text-[#36454F]\">Ihre erste Mind-Map: Eine Simulation<\/h2>\n <p class=\"text-center max-w-3xl mx-auto text-gray-600 mb-12\">Folgen Sie den Anweisungen, um eine einfache Mind-Map zum Thema „Thermodynamik“ Schritt f\u00fcr Schritt aufzubauen. Klicken Sie auf die Buttons, um die Map zu erweitern.<\/p>\n \n <div class=\"bg-white rounded-lg shadow-lg p-4 md:p-6\">\n <div class=\"flex flex-col lg:flex-row gap-6\">\n \n <div id=\"mindmap-canvas\" class=\"w-full lg:w-2\/3 rounded-lg overflow-hidden\">\n \n <\/div>\n \n <div id=\"mindmap-controls\" class=\"w-full lg:w-1\/3 bg-gray-50 rounded-lg p-6 flex flex-col justify-center\">\n \n <div id=\"control-initial\">\n <h3 class=\"font-bold text-lg mb-2\">Schritt 1: Das Zentrum<\/h3>\n <p class=\"mb-4\">Jede Mind-Map beginnt mit einem zentralen Thema.<\/p>\n <button data-step=\"1\" class=\"control-btn btn-primary w-full rounded-md py-2 font-semibold\">Zentrales Thema hinzuf\u00fcgen<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"anwendung\" class=\"mb-16 md:mb-24 section-fade-in\">\n <h2 class=\"text-3xl font-bold text-center mb-12 text-[#36454F]\">Anwendungsbeispiele im MINT-Studium<\/h2>\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"flex justify-center border-b-2 border-gray-200 mb-6\">\n <button data-tab=\"planung\" class=\"tab flex-1 py-2 px-4 text-center font-semibold text-gray-600 border-b-2 border-transparent transition-all duration-300\">Projektplanung<\/button>\n <button data-tab=\"brainstorming\" class=\"tab flex-1 py-2 px-4 text-center font-semibold text-gray-600 border-b-2 border-transparent transition-all duration-300\">Brainstorming<\/button>\n <button data-tab=\"lernen\" class=\"tab flex-1 py-2 px-4 text-center font-semibold text-gray-600 border-b-2 border-transparent transition-all duration-300\">Lern\u00fcbersicht<\/button>\n <\/div>\n <div id=\"tab-content\" class=\"bg-white rounded-lg shadow-md p-6 md:p-8 min-h-[250px]\">\n \n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \n \/\/ --- Responsive Navigation & Scroll Spy ---\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n mobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n const navLinks = document.querySelectorAll('.nav-link');\n mobileMenu.addEventListener('click', (e) => {\n if (e.target.tagName === 'A') {\n mobileMenu.classList.add('hidden');\n }\n });\n\n const sections = document.querySelectorAll('main section');\n const observerOptions = { root: null, rootMargin: '0px', threshold: 0.4 };\n const sectionObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').substring(1) === entry.target.id) {\n link.classList.add('active');\n }\n });\n }\n });\n }, observerOptions);\n sections.forEach(section => sectionObserver.observe(section));\n\n \/\/ --- Fade-in sections on scroll ---\n const fadeInSections = document.querySelectorAll('.section-fade-in');\n const fadeInObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n fadeInSections.forEach(section => fadeInObserver.observe(section));\n\n \/\/ --- Mind Map Simulation ---\n const canvas = document.getElementById('mindmap-canvas');\n const controls = document.getElementById('mindmap-controls');\n const nodeData = [\n { id: 'center', text: 'Thermodynamik', type: 'center', parent: null, color: 'bg-yellow-400', border: 'border-yellow-600' },\n { id: 'b1', text: 'Haupts\u00e4tze', type: 'branch', parent: 'center', angle: -45, dist: 150, color: 'bg-blue-300', border: 'border-blue-500' },\n { id: 'b2', text: 'Zustandsgr\u00f6\u00dfen', type: 'branch', parent: 'center', angle: 45, dist: 160, color: 'bg-green-300', border: 'border-green-500' },\n { id: 'b3', text: 'Prozesse', type: 'branch', parent: 'center', angle: 135, dist: 150, color: 'bg-red-300', border: 'border-red-500' },\n { id: 'b4', text: 'Anwendungen', type: 'branch', parent: 'center', angle: -135, dist: 160, color: 'bg-purple-300', border: 'border-purple-500' },\n ];\n let currentStep = 0;\n\n const controlSteps = [\n {\n title: \"Schritt 1: Das Zentrum\",\n description: \"Jede Mind-Map beginnt mit einem zentralen Thema.\",\n buttonText: \"Zentrales Thema hinzuf\u00fcgen\",\n action: () => addNode('center')\n },\n {\n title: \"Schritt 2: Haupt\u00e4ste\",\n description: \"F\u00fcgen Sie die wichtigsten Unterthemen als farbige Haupt\u00e4ste hinzu.\",\n buttonText: \"Ersten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b1')\n },\n {\n title: \"\",\n description: \"\",\n buttonText: \"Zweiten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b2')\n },\n {\n title: \"\",\n description: \"\",\n buttonText: \"Dritten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b3')\n },\n {\n title: \"\",\n description: \"\",\n buttonText: \"Vierten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b4')\n },\n {\n title: \"Geschafft!\",\n description: \"Sie haben eine einfache Mind-Map erstellt! Von hier aus k\u00f6nnten Sie nun weitere Unter\u00e4ste hinzuf\u00fcgen.\",\n buttonText: \"Simulation zur\u00fccksetzen\",\n action: () => resetSimulation()\n },\n ];\n\n controls.addEventListener('click', (e) => {\n if (e.target.matches('.control-btn')) {\n const step = parseInt(e.target.dataset.step);\n if(step === currentStep + 1) {\n controlSteps[currentStep].action();\n currentStep++;\n if(currentStep < controlSteps.length) {\n updateControls();\n }\n }\n }\n });\n\n function updateControls() {\n const step = controlSteps[currentStep];\n controls.innerHTML = `\n <div>\n <h3 class=\"font-bold text-lg mb-2\">${step.title}<\/h3>\n <p class=\"mb-4\">${step.description}<\/p>\n <button data-step=\"${currentStep + 1}\" class=\"control-btn btn-primary w-full rounded-md py-2 font-semibold\">${step.buttonText}<\/button>\n <\/div>\n `;\n }\n\n function addNode(id) {\n const data = nodeData.find(n => n.id === id);\n if (!data) return;\n\n const nodeEl = document.createElement('div');\n nodeEl.id = `node-${data.id}`;\n nodeEl.className = `mindmap-node ${data.type} ${data.color} ${data.border}`;\n nodeEl.textContent = data.text;\n canvas.appendChild(nodeEl);\n\n if (data.type === 'branch') {\n const parentEl = document.getElementById(`node-${data.parent}`);\n const parentRect = parentEl.getBoundingClientRect();\n const canvasRect = canvas.getBoundingClientRect();\n \n const parentX = parentRect.left - canvasRect.left + parentRect.width \/ 2;\n const parentY = parentRect.top - canvasRect.top + parentRect.height \/ 2;\n\n const angleRad = data.angle * (Math.PI \/ 180);\n const x = parentX + data.dist * Math.cos(angleRad);\n const y = parentY + data.dist * Math.sin(angleRad);\n \n nodeEl.style.left = `${x}px`;\n nodeEl.style.top = `${y}px`;\n \/\/ We need a slight delay for the transform to work correctly with translate\n setTimeout(() => {\n nodeEl.style.transform = `translate(-50%, -50%) scale(0.5)`;\n }, 10);\n \n \/\/ Add connecting line\n const line = document.createElement('div');\n line.className = 'branch-line';\n const distance = Math.sqrt(Math.pow(x - parentX, 2) + Math.pow(y - parentY, 2));\n const angleDeg = Math.atan2(y - parentY, x - parentX) * 180 \/ Math.PI;\n\n line.style.width = `${distance}px`;\n line.style.left = `${parentX}px`;\n line.style.top = `${parentY}px`;\n line.style.transform = `rotate(${angleDeg}deg)`;\n line.style.backgroundColor = data.color.replace('bg','border').replace('-300','-500'); \/\/ Use border color\n canvas.insertBefore(line, canvas.firstChild);\n setTimeout(() => line.classList.add('visible'), 100);\n }\n\n setTimeout(() => nodeEl.classList.add('visible'), 50);\n }\n \n function resetSimulation() {\n canvas.innerHTML = '';\n currentStep = 0;\n updateControls();\n }\n \n \/\/ --- Tabbed MINT-Beispiele ---\n const tabContainer = document.querySelector('#anwendung .flex');\n const tabContent = document.getElementById('tab-content');\n const tabData = {\n planung: {\n title: 'Planung einer Bachelorarbeit',\n content: `\n <p class=\"mb-4 text-gray-600\">Eine Mind-Map hilft, ein gro\u00dfes Projekt in \u00fcberschaubare Teile zu zerlegen.<\/p>\n <div class=\"p-4 text-left font-semibold\">\n <div class=\"text-center mb-6\"><span class=\"bg-yellow-200 px-3 py-1 rounded-full\">Bachelorarbeit<\/span><\/div>\n <ul class=\"space-y-4 list-none text-center\">\n <li><span class=\"text-blue-600\">└ Einleitung<\/span><\/li>\n <li><span class=\"text-green-600\">└ Theoretische Grundlagen<\/span><\/li>\n <li><span class=\"text-red-600\">└ Methodik<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-red-500\">├ Datenquelle<\/span><\/li>\n <li><span class=\"text-red-500\">├ Algorithmen<\/span><\/li>\n <li><span class=\"text-red-500\">└ Testumgebung<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-purple-600\">└ Fazit<\/span><\/li>\n <\/ul>\n <\/div>`\n },\n brainstorming: {\n title: 'Debugging in der Informatik',\n content: `<p class=\"mb-4 text-gray-600\">Nutzen Sie eine Mind-Map, um systematisch alle m\u00f6glichen Fehlerquellen zu erkunden.<\/p>\n <div class=\"p-4 text-left font-semibold\">\n <div class=\"text-center mb-6\"><span class=\"bg-yellow-200 px-3 py-1 rounded-full\">Bug: Login geht nicht<\/span><\/div>\n <ul class=\"space-y-4 list-none text-center\">\n <li><span class=\"text-blue-600\">└ Frontend<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-blue-500\">└ API Call fehlerhaft?<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-green-600\">└ Backend<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-green-500\">├ Passwort-Hash falsch?<\/span><\/li>\n <li><span class=\"text-green-500\">└ Session wird nicht erstellt?<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-red-600\">└ Datenbank<\/span><\/li>\n <li><span class=\"text-purple-600\">└ Netzwerk<\/span><\/li>\n <\/ul>\n <\/div>`\n },\n lernen: {\n title: 'Lern\u00fcbersicht f\u00fcr eine Klausur',\n content: `<p class=\"mb-4 text-gray-600\">Erstellen Sie f\u00fcr jedes Hauptthema eine Master-Mind-Map als \"Big Picture\"-\u00dcbersicht.<\/p>\n <div class=\"p-4 text-left font-semibold\">\n <div class=\"text-center mb-6\"><span class=\"bg-yellow-200 px-3 py-1 rounded-full\">Digitale Logik<\/span><\/div>\n <ul class=\"space-y-4 list-none text-center\">\n <li><span class=\"text-blue-600\">└ Gatter (AND, OR, NOT)<\/span><\/li>\n <li><span class=\"text-green-600\">└ Boolesche Algebra<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-green-500\">└ De Morgan'sche Regeln<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-red-600\">└ Flip-Flops (RS, JK)<\/span><\/li>\n <li><span class=\"text-purple-600\">└ Addierwerke<\/span><\/li>\n <\/ul>\n <\/div>`\n }\n };\n\n function showTab(tabName) {\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.querySelector(`.tab[data-tab=\"${tabName}\"]`).classList.add('active');\n const data = tabData[tabName];\n tabContent.innerHTML = `<h3 class=\"text-xl font-bold mb-4 text-[#36454F]\">${data.title}<\/h3>${data.content}`;\n }\n\n tabContainer.addEventListener('click', (e) => {\n if (e.target.matches('.tab')) {\n showTab(e.target.dataset.tab);\n }\n });\n \n \/\/ Initial load\n updateControls();\n showTab('planung');\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Infografik: Die Mind-Mapping-Methode<\/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@400;700&family=Lora:wght@600;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8fafc;\n }\n h1, h2, h3 {\n font-family: 'Lora', serif;\n }\n .flowchart-step {\n position: relative;\n padding-left: 50px;\n }\n .flowchart-step:not(:last-child)::before {\n content: '';\n position: absolute;\n left: 19px;\n top: 50px;\n width: 2px;\n height: 100%;\n background-color: #cbd5e1;\n border: 1px dashed #94a3b8;\n }\n .flowchart-step::after {\n content: attr(data-step);\n position: absolute;\n left: 0;\n top: 1rem;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: #FF4E50;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-family: 'Lora', serif;\n z-index: 1;\n }\n .section-fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .section-fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased text-gray-800\">\n\n <main class=\"container mx-auto px-4 py-12 md:py-20\">\n\n \n <section class=\"text-center mb-20 md:mb-28 section-fade-in\">\n <span class=\"text-sm font-bold tracking-wider uppercase text-gray-500\">Die Kunst des visuellen Lernens<\/span>\n <h1 class=\"text-4xl md:text-6xl font-bold mt-2 mb-6\" style=\"color: #FF4E50;\">Mind-Mapping<\/h1>\n <p class=\"max-w-3xl mx-auto text-lg md:text-xl text-gray-600\">\n Entfesseln Sie die Kraft Ihres Gehirns, indem Sie Informationen so organisieren, wie sie gedacht werden \u2013 vernetzt, visuell und kreativ.\n <\/p>\n <\/section>\n\n \n <section class=\"mb-20 md:mb-28 section-fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-12\">Warum ist es so effektiv?<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83e\udde0<\/span> Zwei Gehirnh\u00e4lften<\/h3>\n <p class=\"text-gray-600\">Mind-Maps aktivieren sowohl Ihre logische linke als auch Ihre kreative rechte Gehirnh\u00e4lfte f\u00fcr ganzheitliches Denken.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83d\uddbc\ufe0f<\/span> Bilder sagen mehr<\/h3>\n <p class=\"text-gray-600\">Durch den „Picture Superiority Effect“ erinnern wir uns an visuelle Informationen viel besser als an reinen Text.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83d\udca1<\/span> Kreative Assoziationen<\/h3>\n <p class=\"text-gray-600\">Die offene Struktur f\u00f6rdert das freie Assoziieren und hilft Ihnen, neue Verbindungen und Ideen zu entdecken.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83c\udf0d<\/span> Das gro\u00dfe Ganze<\/h3>\n <p class=\"text-gray-600\">Erfassen Sie ein ganzes Thema auf einer einzigen Seite und behalten Sie stets den \u00dcberblick \u00fcber die Zusammenh\u00e4nge.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"mb-20 md:mb-28 section-fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-16\">In 5 Schritten zur eigenen Mind-Map<\/h2>\n <div class=\"max-w-2xl mx-auto\">\n <div class=\"flowchart-step pb-12\" data-step=\"1\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-[#FF4E50]\">\n <h3 class=\"text-2xl font-bold mb-2\">Beginnen Sie in der Mitte<\/h3>\n <p class=\"text-gray-600\">Zeichnen Sie ein zentrales Bild oder schreiben Sie ein Schl\u00fcsselwort, das Ihr Hauptthema darstellt. Das ist Ihr Fokuspunkt.<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step pb-12\" data-step=\"2\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-[#FC913A]\">\n <h3 class=\"text-2xl font-bold mb-2\">Dicke Haupt\u00e4ste hinzuf\u00fcgen<\/h3>\n <p class=\"text-gray-600\">Zeichnen Sie von der Mitte ausgehend geschwungene, dicke Linien f\u00fcr die wichtigsten Unterthemen. Nutzen Sie verschiedene Farben!<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step pb-12\" data-step=\"3\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-[#F9D423]\">\n <h3 class=\"text-2xl font-bold mb-2\">Nur Schl\u00fcsselw\u00f6rter nutzen<\/h3>\n <p class=\"text-gray-600\">Beschriften Sie jeden Ast mit nur einem einzigen, pr\u00e4gnanten Wort. Das schafft Platz f\u00fcr Assoziationen.<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step pb-12\" data-step=\"4\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-green-400\">\n <h3 class=\"text-2xl font-bold mb-2\">Weiter verzweigen<\/h3>\n <p class=\"text-gray-600\">F\u00fcgen Sie an Ihre Haupt\u00e4ste d\u00fcnnere Unter\u00e4ste f\u00fcr Details, Fakten und weitere Ideen an.<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step\" data-step=\"5\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-blue-400\">\n <h3 class=\"text-2xl font-bold mb-2\">Mit Bildern & Symbolen anreichern<\/h3>\n <p class=\"text-gray-600\">Verwenden Sie kleine Skizzen und Symbole, um Ihre Map lebendig und noch einpr\u00e4gsamer zu machen.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section-fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-12\">Perfekt f\u00fcr den MINT-Alltag<\/h2>\n <div class=\"flex flex-col md:flex-row justify-center gap-8 max-w-5xl mx-auto\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg flex-1 text-center\">\n <div class=\"text-5xl mb-4\" style=\"color:#FF4E50\">\ud83d\udcc5<\/div>\n <h3 class=\"text-xl font-bold mb-2\">Projektplanung<\/h3>\n <p class=\"text-gray-600\">Strukturieren Sie Abschlussarbeiten oder Projekte und behalten Sie den \u00dcberblick \u00fcber alle Aufgaben.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg flex-1 text-center\">\n <div class=\"text-5xl mb-4\" style=\"color:#FC913A\">\ud83d\udd2c<\/div>\n <h3 class=\"text-xl font-bold mb-2\">Brainstorming<\/h3>\n <p class=\"text-gray-600\">Finden Sie kreative L\u00f6sungswege f\u00fcr komplexe Probleme, z. B. beim Debugging von Code.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg flex-1 text-center\">\n <div class=\"text-5xl mb-4\" style=\"color:#F9D423\">\ud83d\udcda<\/div>\n <h3 class=\"text-xl font-bold mb-2\">Lern\u00fcbersicht<\/h3>\n <p class=\"text-gray-600\">Fassen Sie ganze Vorlesungsreihen zusammen und erkennen Sie die Zusammenh\u00e4nge f\u00fcr die Klausur.<\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"text-center py-8 mt-12\">\n <p class=\"text-gray-500\">Eine visuelle Aufbereitung basierend auf dem Tutorial f\u00fcr effektives Lernen.<\/p>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n const sections = document.querySelectorAll('.section-fade-in');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.1\n });\n\n sections.forEach(section => {\n observer.observe(section);\n });\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Interaktives Tutorial: Die Mind-Mapping-Methode Mind-Mapping Einf\u00fchrung Anleitung MINT-Beispiele Einf\u00fchrung Anleitung MINT-Beispiele Erstellen Sie die Landkarte Ihres Wissens Mind-Mapping ist eine kreative und visuelle Lerntechnik, die die assoziative Arbeitsweise Ihres Gehirns nachahmt. Strukturieren Sie komplexe Themen, entdecken Sie Zusammenh\u00e4nge und entfesseln Sie Ihr volles Denkpotenzial. Zur interaktiven Anleitung Ihre erste Mind-Map: Eine Simulation Folgen Sie den Anweisungen, um eine einfache Mind-Map zum Thema „Thermodynamik“ Schritt f\u00fcr Schritt aufzubauen. Klicken Sie auf die Buttons, um die Map zu erweitern. Schritt 1: Das Zentrum Jede Mind-Map beginnt mit einem zentralen Thema. Zentrales Thema hinzuf\u00fcgen Anwendungsbeispiele im MINT-Studium Projektplanung Brainstorming Lern\u00fcbersicht Infografik: Die Mind-Mapping-Methode Die Kunst des visuellen Lernens<a class=\"more-link\" href=\"https:\/\/izldoc.hs-albsig.de\/?page_id=1397\">Read More →<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["entry","page","publish","author-malinam","post-1397"],"_links":{"self":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages\/1397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1397"}],"version-history":[{"count":1,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages\/1397\/revisions"}],"predecessor-version":[{"id":1398,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages\/1397\/revisions\/1398"}],"wp:attachment":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1397,"date":"2025-07-01T15:44:47","date_gmt":"2025-07-01T14:44:47","guid":{"rendered":"https:\/\/izldoc.hs-albsig.de\/?page_id=1397"},"modified":"2025-07-01T15:44:47","modified_gmt":"2025-07-01T14:44:47","slug":"mindmap","status":"publish","type":"page","link":"https:\/\/izldoc.hs-albsig.de\/?page_id=1397","title":{"rendered":"MindMap"},"content":{"rendered":"\n \n\n\n \n \n Interaktives Tutorial: Die Mind-Mapping-Methode<\/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@400;600;700&family=Lora:wght@400;600&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8f7f4;\n color: #2d3748;\n }\n h1, h2, h3 {\n font-family: 'Lora', serif;\n }\n .nav-link {\n transition: color 0.3s, border-color 0.3s;\n border-bottom: 2px solid transparent;\n }\n .nav-link.active, .nav-link:hover {\n color: #d97706;\n border-bottom-color: #d97706;\n }\n .btn-primary {\n background-color: #36454F;\n color: #FFFFFF;\n transition: background-color 0.3s;\n }\n .btn-primary:hover {\n background-color: #2d3748;\n }\n .section-fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .section-fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .tab.active {\n border-color: #d97706;\n background-color: #d97706;\n color: white;\n }\n \/* Mind Map Simulation Styles *\/\n #mindmap-canvas {\n position: relative;\n min-height: 450px;\n border: 2px dashed #d1d5db;\n background-image: radial-gradient(#e5e7eb 1px, transparent 1px);\n background-size: 1.5rem 1.5rem;\n }\n .mindmap-node {\n position: absolute;\n padding: 0.75rem 1.25rem;\n border-radius: 9999px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border: 2px solid;\n font-weight: 600;\n transition: all 0.5s ease-in-out;\n opacity: 0;\n transform: scale(0.5);\n }\n .mindmap-node.visible {\n opacity: 1;\n transform: scale(1);\n }\n .mindmap-node.center {\n background-color: #d97706;\n color: white;\n border-color: #b45309;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.5);\n }\n .mindmap-node.center.visible {\n transform: translate(-50%, -50%) scale(1);\n }\n .branch-line {\n position: absolute;\n height: 2px;\n background-color: #9ca3af;\n transform-origin: 0 0;\n opacity: 0;\n transition: opacity 0.5s ease-in-out 0.2s, width 0.5s ease-in-out 0.2s;\n width: 0;\n z-index: -1;\n }\n .branch-line.visible {\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n <header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-4\">\n <div class=\"flex items-center justify-between h-16\">\n <span class=\"text-xl font-bold text-[#36454F]\">Mind-Mapping<\/span>\n <div class=\"hidden md:flex items-center space-x-6\">\n <a href=\"#einfuehrung\" class=\"nav-link px-2 py-1\">Einf\u00fchrung<\/a>\n <a href=\"#anleitung\" class=\"nav-link px-2 py-1\">Anleitung<\/a>\n <a href=\"#anwendung\" class=\"nav-link px-2 py-1\">MINT-Beispiele<\/a>\n <\/div>\n <div class=\"md:hidden\">\n <button id=\"mobile-menu-button\" class=\"text-gray-600 focus:outline-none\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"mobile-menu\" class=\"hidden md:hidden py-4\">\n <a href=\"#einfuehrung\" class=\"block nav-link text-center py-2\">Einf\u00fchrung<\/a>\n <a href=\"#anleitung\" class=\"block nav-link text-center py-2\">Anleitung<\/a>\n <a href=\"#anwendung\" class=\"block nav-link text-center py-2\">MINT-Beispiele<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main class=\"container mx-auto px-4 py-8 md:py-12\">\n\n <section id=\"einfuehrung\" class=\"text-center mb-16 md:mb-24 section-fade-in\">\n <h1 class=\"text-4xl md:text-5xl font-bold text-[#d97706] mb-4\">Erstellen Sie die Landkarte Ihres Wissens<\/h1>\n <p class=\"max-w-3xl mx-auto text-lg text-gray-600 mb-8\">\n Mind-Mapping ist eine kreative und visuelle Lerntechnik, die die assoziative Arbeitsweise Ihres Gehirns nachahmt. Strukturieren Sie komplexe Themen, entdecken Sie Zusammenh\u00e4nge und entfesseln Sie Ihr volles Denkpotenzial.\n <\/p>\n <a href=\"#anleitung\" class=\"btn-primary rounded-full px-8 py-3 font-semibold inline-block\">Zur interaktiven Anleitung<\/a>\n <\/section>\n \n <section id=\"anleitung\" class=\"mb-16 md:mb-24 section-fade-in\">\n <h2 class=\"text-3xl font-bold text-center mb-2 text-[#36454F]\">Ihre erste Mind-Map: Eine Simulation<\/h2>\n <p class=\"text-center max-w-3xl mx-auto text-gray-600 mb-12\">Folgen Sie den Anweisungen, um eine einfache Mind-Map zum Thema „Thermodynamik“ Schritt f\u00fcr Schritt aufzubauen. Klicken Sie auf die Buttons, um die Map zu erweitern.<\/p>\n \n <div class=\"bg-white rounded-lg shadow-lg p-4 md:p-6\">\n <div class=\"flex flex-col lg:flex-row gap-6\">\n \n <div id=\"mindmap-canvas\" class=\"w-full lg:w-2\/3 rounded-lg overflow-hidden\">\n \n <\/div>\n \n <div id=\"mindmap-controls\" class=\"w-full lg:w-1\/3 bg-gray-50 rounded-lg p-6 flex flex-col justify-center\">\n \n <div id=\"control-initial\">\n <h3 class=\"font-bold text-lg mb-2\">Schritt 1: Das Zentrum<\/h3>\n <p class=\"mb-4\">Jede Mind-Map beginnt mit einem zentralen Thema.<\/p>\n <button data-step=\"1\" class=\"control-btn btn-primary w-full rounded-md py-2 font-semibold\">Zentrales Thema hinzuf\u00fcgen<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"anwendung\" class=\"mb-16 md:mb-24 section-fade-in\">\n <h2 class=\"text-3xl font-bold text-center mb-12 text-[#36454F]\">Anwendungsbeispiele im MINT-Studium<\/h2>\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"flex justify-center border-b-2 border-gray-200 mb-6\">\n <button data-tab=\"planung\" class=\"tab flex-1 py-2 px-4 text-center font-semibold text-gray-600 border-b-2 border-transparent transition-all duration-300\">Projektplanung<\/button>\n <button data-tab=\"brainstorming\" class=\"tab flex-1 py-2 px-4 text-center font-semibold text-gray-600 border-b-2 border-transparent transition-all duration-300\">Brainstorming<\/button>\n <button data-tab=\"lernen\" class=\"tab flex-1 py-2 px-4 text-center font-semibold text-gray-600 border-b-2 border-transparent transition-all duration-300\">Lern\u00fcbersicht<\/button>\n <\/div>\n <div id=\"tab-content\" class=\"bg-white rounded-lg shadow-md p-6 md:p-8 min-h-[250px]\">\n \n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \n \/\/ --- Responsive Navigation & Scroll Spy ---\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n mobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n const navLinks = document.querySelectorAll('.nav-link');\n mobileMenu.addEventListener('click', (e) => {\n if (e.target.tagName === 'A') {\n mobileMenu.classList.add('hidden');\n }\n });\n\n const sections = document.querySelectorAll('main section');\n const observerOptions = { root: null, rootMargin: '0px', threshold: 0.4 };\n const sectionObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').substring(1) === entry.target.id) {\n link.classList.add('active');\n }\n });\n }\n });\n }, observerOptions);\n sections.forEach(section => sectionObserver.observe(section));\n\n \/\/ --- Fade-in sections on scroll ---\n const fadeInSections = document.querySelectorAll('.section-fade-in');\n const fadeInObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n fadeInSections.forEach(section => fadeInObserver.observe(section));\n\n \/\/ --- Mind Map Simulation ---\n const canvas = document.getElementById('mindmap-canvas');\n const controls = document.getElementById('mindmap-controls');\n const nodeData = [\n { id: 'center', text: 'Thermodynamik', type: 'center', parent: null, color: 'bg-yellow-400', border: 'border-yellow-600' },\n { id: 'b1', text: 'Haupts\u00e4tze', type: 'branch', parent: 'center', angle: -45, dist: 150, color: 'bg-blue-300', border: 'border-blue-500' },\n { id: 'b2', text: 'Zustandsgr\u00f6\u00dfen', type: 'branch', parent: 'center', angle: 45, dist: 160, color: 'bg-green-300', border: 'border-green-500' },\n { id: 'b3', text: 'Prozesse', type: 'branch', parent: 'center', angle: 135, dist: 150, color: 'bg-red-300', border: 'border-red-500' },\n { id: 'b4', text: 'Anwendungen', type: 'branch', parent: 'center', angle: -135, dist: 160, color: 'bg-purple-300', border: 'border-purple-500' },\n ];\n let currentStep = 0;\n\n const controlSteps = [\n {\n title: \"Schritt 1: Das Zentrum\",\n description: \"Jede Mind-Map beginnt mit einem zentralen Thema.\",\n buttonText: \"Zentrales Thema hinzuf\u00fcgen\",\n action: () => addNode('center')\n },\n {\n title: \"Schritt 2: Haupt\u00e4ste\",\n description: \"F\u00fcgen Sie die wichtigsten Unterthemen als farbige Haupt\u00e4ste hinzu.\",\n buttonText: \"Ersten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b1')\n },\n {\n title: \"\",\n description: \"\",\n buttonText: \"Zweiten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b2')\n },\n {\n title: \"\",\n description: \"\",\n buttonText: \"Dritten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b3')\n },\n {\n title: \"\",\n description: \"\",\n buttonText: \"Vierten Hauptast hinzuf\u00fcgen\",\n action: () => addNode('b4')\n },\n {\n title: \"Geschafft!\",\n description: \"Sie haben eine einfache Mind-Map erstellt! Von hier aus k\u00f6nnten Sie nun weitere Unter\u00e4ste hinzuf\u00fcgen.\",\n buttonText: \"Simulation zur\u00fccksetzen\",\n action: () => resetSimulation()\n },\n ];\n\n controls.addEventListener('click', (e) => {\n if (e.target.matches('.control-btn')) {\n const step = parseInt(e.target.dataset.step);\n if(step === currentStep + 1) {\n controlSteps[currentStep].action();\n currentStep++;\n if(currentStep < controlSteps.length) {\n updateControls();\n }\n }\n }\n });\n\n function updateControls() {\n const step = controlSteps[currentStep];\n controls.innerHTML = `\n <div>\n <h3 class=\"font-bold text-lg mb-2\">${step.title}<\/h3>\n <p class=\"mb-4\">${step.description}<\/p>\n <button data-step=\"${currentStep + 1}\" class=\"control-btn btn-primary w-full rounded-md py-2 font-semibold\">${step.buttonText}<\/button>\n <\/div>\n `;\n }\n\n function addNode(id) {\n const data = nodeData.find(n => n.id === id);\n if (!data) return;\n\n const nodeEl = document.createElement('div');\n nodeEl.id = `node-${data.id}`;\n nodeEl.className = `mindmap-node ${data.type} ${data.color} ${data.border}`;\n nodeEl.textContent = data.text;\n canvas.appendChild(nodeEl);\n\n if (data.type === 'branch') {\n const parentEl = document.getElementById(`node-${data.parent}`);\n const parentRect = parentEl.getBoundingClientRect();\n const canvasRect = canvas.getBoundingClientRect();\n \n const parentX = parentRect.left - canvasRect.left + parentRect.width \/ 2;\n const parentY = parentRect.top - canvasRect.top + parentRect.height \/ 2;\n\n const angleRad = data.angle * (Math.PI \/ 180);\n const x = parentX + data.dist * Math.cos(angleRad);\n const y = parentY + data.dist * Math.sin(angleRad);\n \n nodeEl.style.left = `${x}px`;\n nodeEl.style.top = `${y}px`;\n \/\/ We need a slight delay for the transform to work correctly with translate\n setTimeout(() => {\n nodeEl.style.transform = `translate(-50%, -50%) scale(0.5)`;\n }, 10);\n \n \/\/ Add connecting line\n const line = document.createElement('div');\n line.className = 'branch-line';\n const distance = Math.sqrt(Math.pow(x - parentX, 2) + Math.pow(y - parentY, 2));\n const angleDeg = Math.atan2(y - parentY, x - parentX) * 180 \/ Math.PI;\n\n line.style.width = `${distance}px`;\n line.style.left = `${parentX}px`;\n line.style.top = `${parentY}px`;\n line.style.transform = `rotate(${angleDeg}deg)`;\n line.style.backgroundColor = data.color.replace('bg','border').replace('-300','-500'); \/\/ Use border color\n canvas.insertBefore(line, canvas.firstChild);\n setTimeout(() => line.classList.add('visible'), 100);\n }\n\n setTimeout(() => nodeEl.classList.add('visible'), 50);\n }\n \n function resetSimulation() {\n canvas.innerHTML = '';\n currentStep = 0;\n updateControls();\n }\n \n \/\/ --- Tabbed MINT-Beispiele ---\n const tabContainer = document.querySelector('#anwendung .flex');\n const tabContent = document.getElementById('tab-content');\n const tabData = {\n planung: {\n title: 'Planung einer Bachelorarbeit',\n content: `\n <p class=\"mb-4 text-gray-600\">Eine Mind-Map hilft, ein gro\u00dfes Projekt in \u00fcberschaubare Teile zu zerlegen.<\/p>\n <div class=\"p-4 text-left font-semibold\">\n <div class=\"text-center mb-6\"><span class=\"bg-yellow-200 px-3 py-1 rounded-full\">Bachelorarbeit<\/span><\/div>\n <ul class=\"space-y-4 list-none text-center\">\n <li><span class=\"text-blue-600\">└ Einleitung<\/span><\/li>\n <li><span class=\"text-green-600\">└ Theoretische Grundlagen<\/span><\/li>\n <li><span class=\"text-red-600\">└ Methodik<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-red-500\">├ Datenquelle<\/span><\/li>\n <li><span class=\"text-red-500\">├ Algorithmen<\/span><\/li>\n <li><span class=\"text-red-500\">└ Testumgebung<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-purple-600\">└ Fazit<\/span><\/li>\n <\/ul>\n <\/div>`\n },\n brainstorming: {\n title: 'Debugging in der Informatik',\n content: `<p class=\"mb-4 text-gray-600\">Nutzen Sie eine Mind-Map, um systematisch alle m\u00f6glichen Fehlerquellen zu erkunden.<\/p>\n <div class=\"p-4 text-left font-semibold\">\n <div class=\"text-center mb-6\"><span class=\"bg-yellow-200 px-3 py-1 rounded-full\">Bug: Login geht nicht<\/span><\/div>\n <ul class=\"space-y-4 list-none text-center\">\n <li><span class=\"text-blue-600\">└ Frontend<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-blue-500\">└ API Call fehlerhaft?<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-green-600\">└ Backend<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-green-500\">├ Passwort-Hash falsch?<\/span><\/li>\n <li><span class=\"text-green-500\">└ Session wird nicht erstellt?<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-red-600\">└ Datenbank<\/span><\/li>\n <li><span class=\"text-purple-600\">└ Netzwerk<\/span><\/li>\n <\/ul>\n <\/div>`\n },\n lernen: {\n title: 'Lern\u00fcbersicht f\u00fcr eine Klausur',\n content: `<p class=\"mb-4 text-gray-600\">Erstellen Sie f\u00fcr jedes Hauptthema eine Master-Mind-Map als \"Big Picture\"-\u00dcbersicht.<\/p>\n <div class=\"p-4 text-left font-semibold\">\n <div class=\"text-center mb-6\"><span class=\"bg-yellow-200 px-3 py-1 rounded-full\">Digitale Logik<\/span><\/div>\n <ul class=\"space-y-4 list-none text-center\">\n <li><span class=\"text-blue-600\">└ Gatter (AND, OR, NOT)<\/span><\/li>\n <li><span class=\"text-green-600\">└ Boolesche Algebra<\/span>\n <ul class=\"mt-2 space-y-2 text-sm font-normal\">\n <li><span class=\"text-green-500\">└ De Morgan'sche Regeln<\/span><\/li>\n <\/ul>\n <\/li>\n <li><span class=\"text-red-600\">└ Flip-Flops (RS, JK)<\/span><\/li>\n <li><span class=\"text-purple-600\">└ Addierwerke<\/span><\/li>\n <\/ul>\n <\/div>`\n }\n };\n\n function showTab(tabName) {\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.querySelector(`.tab[data-tab=\"${tabName}\"]`).classList.add('active');\n const data = tabData[tabName];\n tabContent.innerHTML = `<h3 class=\"text-xl font-bold mb-4 text-[#36454F]\">${data.title}<\/h3>${data.content}`;\n }\n\n tabContainer.addEventListener('click', (e) => {\n if (e.target.matches('.tab')) {\n showTab(e.target.dataset.tab);\n }\n });\n \n \/\/ Initial load\n updateControls();\n showTab('planung');\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Infografik: Die Mind-Mapping-Methode<\/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@400;700&family=Lora:wght@600;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8fafc;\n }\n h1, h2, h3 {\n font-family: 'Lora', serif;\n }\n .flowchart-step {\n position: relative;\n padding-left: 50px;\n }\n .flowchart-step:not(:last-child)::before {\n content: '';\n position: absolute;\n left: 19px;\n top: 50px;\n width: 2px;\n height: 100%;\n background-color: #cbd5e1;\n border: 1px dashed #94a3b8;\n }\n .flowchart-step::after {\n content: attr(data-step);\n position: absolute;\n left: 0;\n top: 1rem;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: #FF4E50;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-family: 'Lora', serif;\n z-index: 1;\n }\n .section-fade-in {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .section-fade-in.visible {\n opacity: 1;\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased text-gray-800\">\n\n <main class=\"container mx-auto px-4 py-12 md:py-20\">\n\n \n <section class=\"text-center mb-20 md:mb-28 section-fade-in\">\n <span class=\"text-sm font-bold tracking-wider uppercase text-gray-500\">Die Kunst des visuellen Lernens<\/span>\n <h1 class=\"text-4xl md:text-6xl font-bold mt-2 mb-6\" style=\"color: #FF4E50;\">Mind-Mapping<\/h1>\n <p class=\"max-w-3xl mx-auto text-lg md:text-xl text-gray-600\">\n Entfesseln Sie die Kraft Ihres Gehirns, indem Sie Informationen so organisieren, wie sie gedacht werden \u2013 vernetzt, visuell und kreativ.\n <\/p>\n <\/section>\n\n \n <section class=\"mb-20 md:mb-28 section-fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-12\">Warum ist es so effektiv?<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83e\udde0<\/span> Zwei Gehirnh\u00e4lften<\/h3>\n <p class=\"text-gray-600\">Mind-Maps aktivieren sowohl Ihre logische linke als auch Ihre kreative rechte Gehirnh\u00e4lfte f\u00fcr ganzheitliches Denken.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83d\uddbc\ufe0f<\/span> Bilder sagen mehr<\/h3>\n <p class=\"text-gray-600\">Durch den „Picture Superiority Effect“ erinnern wir uns an visuelle Informationen viel besser als an reinen Text.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83d\udca1<\/span> Kreative Assoziationen<\/h3>\n <p class=\"text-gray-600\">Die offene Struktur f\u00f6rdert das freie Assoziieren und hilft Ihnen, neue Verbindungen und Ideen zu entdecken.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300\">\n <h3 class=\"text-2xl font-bold mb-3 flex items-center\"><span class=\"text-3xl mr-4\" style=\"color: #FC913A;\">\ud83c\udf0d<\/span> Das gro\u00dfe Ganze<\/h3>\n <p class=\"text-gray-600\">Erfassen Sie ein ganzes Thema auf einer einzigen Seite und behalten Sie stets den \u00dcberblick \u00fcber die Zusammenh\u00e4nge.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"mb-20 md:mb-28 section-fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-16\">In 5 Schritten zur eigenen Mind-Map<\/h2>\n <div class=\"max-w-2xl mx-auto\">\n <div class=\"flowchart-step pb-12\" data-step=\"1\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-[#FF4E50]\">\n <h3 class=\"text-2xl font-bold mb-2\">Beginnen Sie in der Mitte<\/h3>\n <p class=\"text-gray-600\">Zeichnen Sie ein zentrales Bild oder schreiben Sie ein Schl\u00fcsselwort, das Ihr Hauptthema darstellt. Das ist Ihr Fokuspunkt.<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step pb-12\" data-step=\"2\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-[#FC913A]\">\n <h3 class=\"text-2xl font-bold mb-2\">Dicke Haupt\u00e4ste hinzuf\u00fcgen<\/h3>\n <p class=\"text-gray-600\">Zeichnen Sie von der Mitte ausgehend geschwungene, dicke Linien f\u00fcr die wichtigsten Unterthemen. Nutzen Sie verschiedene Farben!<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step pb-12\" data-step=\"3\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-[#F9D423]\">\n <h3 class=\"text-2xl font-bold mb-2\">Nur Schl\u00fcsselw\u00f6rter nutzen<\/h3>\n <p class=\"text-gray-600\">Beschriften Sie jeden Ast mit nur einem einzigen, pr\u00e4gnanten Wort. Das schafft Platz f\u00fcr Assoziationen.<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step pb-12\" data-step=\"4\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-green-400\">\n <h3 class=\"text-2xl font-bold mb-2\">Weiter verzweigen<\/h3>\n <p class=\"text-gray-600\">F\u00fcgen Sie an Ihre Haupt\u00e4ste d\u00fcnnere Unter\u00e4ste f\u00fcr Details, Fakten und weitere Ideen an.<\/p>\n <\/div>\n <\/div>\n <div class=\"flowchart-step\" data-step=\"5\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg border-l-4 border-blue-400\">\n <h3 class=\"text-2xl font-bold mb-2\">Mit Bildern & Symbolen anreichern<\/h3>\n <p class=\"text-gray-600\">Verwenden Sie kleine Skizzen und Symbole, um Ihre Map lebendig und noch einpr\u00e4gsamer zu machen.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"section-fade-in\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-12\">Perfekt f\u00fcr den MINT-Alltag<\/h2>\n <div class=\"flex flex-col md:flex-row justify-center gap-8 max-w-5xl mx-auto\">\n <div class=\"bg-white p-6 rounded-lg shadow-lg flex-1 text-center\">\n <div class=\"text-5xl mb-4\" style=\"color:#FF4E50\">\ud83d\udcc5<\/div>\n <h3 class=\"text-xl font-bold mb-2\">Projektplanung<\/h3>\n <p class=\"text-gray-600\">Strukturieren Sie Abschlussarbeiten oder Projekte und behalten Sie den \u00dcberblick \u00fcber alle Aufgaben.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg flex-1 text-center\">\n <div class=\"text-5xl mb-4\" style=\"color:#FC913A\">\ud83d\udd2c<\/div>\n <h3 class=\"text-xl font-bold mb-2\">Brainstorming<\/h3>\n <p class=\"text-gray-600\">Finden Sie kreative L\u00f6sungswege f\u00fcr komplexe Probleme, z. B. beim Debugging von Code.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-lg shadow-lg flex-1 text-center\">\n <div class=\"text-5xl mb-4\" style=\"color:#F9D423\">\ud83d\udcda<\/div>\n <h3 class=\"text-xl font-bold mb-2\">Lern\u00fcbersicht<\/h3>\n <p class=\"text-gray-600\">Fassen Sie ganze Vorlesungsreihen zusammen und erkennen Sie die Zusammenh\u00e4nge f\u00fcr die Klausur.<\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"text-center py-8 mt-12\">\n <p class=\"text-gray-500\">Eine visuelle Aufbereitung basierend auf dem Tutorial f\u00fcr effektives Lernen.<\/p>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n const sections = document.querySelectorAll('.section-fade-in');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.1\n });\n\n sections.forEach(section => {\n observer.observe(section);\n });\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Interaktives Tutorial: Die Mind-Mapping-Methode Mind-Mapping Einf\u00fchrung Anleitung MINT-Beispiele Einf\u00fchrung Anleitung MINT-Beispiele Erstellen Sie die Landkarte Ihres Wissens Mind-Mapping ist eine kreative und visuelle Lerntechnik, die die assoziative Arbeitsweise Ihres Gehirns nachahmt. Strukturieren Sie komplexe Themen, entdecken Sie Zusammenh\u00e4nge und entfesseln Sie Ihr volles Denkpotenzial. Zur interaktiven Anleitung Ihre erste Mind-Map: Eine Simulation Folgen Sie den Anweisungen, um eine einfache Mind-Map zum Thema „Thermodynamik“ Schritt f\u00fcr Schritt aufzubauen. Klicken Sie auf die Buttons, um die Map zu erweitern. Schritt 1: Das Zentrum Jede Mind-Map beginnt mit einem zentralen Thema. Zentrales Thema hinzuf\u00fcgen Anwendungsbeispiele im MINT-Studium Projektplanung Brainstorming Lern\u00fcbersicht Infografik: Die Mind-Mapping-Methode Die Kunst des visuellen Lernens<a class=\"more-link\" href=\"https:\/\/izldoc.hs-albsig.de\/?page_id=1397\">Read More →<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["entry","page","publish","author-malinam","post-1397"],"_links":{"self":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages\/1397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1397"}],"version-history":[{"count":1,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages\/1397\/revisions"}],"predecessor-version":[{"id":1398,"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=\/wp\/v2\/pages\/1397\/revisions\/1398"}],"wp:attachment":[{"href":"https:\/\/izldoc.hs-albsig.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}