Major refactoring: Unified result display, improved personas system, and enhanced markdown rendering

- Moved result display outside tabs for unified experience
- Fixed dropdown disappearing issue in personas
- Implemented mapping-files system in personas.yml
- Cleaned up personas.yml structure (removed unused fields)
- Updated ausbildung-value codes (AUSBILDUNG/HS/LA)
- Enhanced markdown rendering with proper link support
- Fixed path resolution for Bundeslaender content
- Improved tab persistence and content reset functionality
- Added proper marginal sidebar support for both tabs
- Streamlined HTML structure and removed duplicate elements

www/Steuerungsdateien/finder.js

@@ -16,8 +16,9 @@ async function loadFinderStructure() {
     resetFinder();
     renderBundeslandStep();
     
-    // Zeige Empfehlungsbereich beim Finder-Tab an
+    // Verstecke Persona-Empfehlungen beim Finder-Tab (nicht mehr benötigt)
-    showFinderRecommendation();
+    
+    // Zeige Empfehlungsbereich beim Finder-Tab an (nicht mehr benötigt)
   } catch (err) {
     console.error("Fehler beim Laden der structure.yml:", err);
   }
@@ -320,8 +321,25 @@ async function loadResult(code) {
   let codeFile = `Bundeslaender/${code}.md`;
 
   const resultContainer = document.getElementById('result');
-  const mainSection = resultContainer.querySelector('.main-section');
+  if (!resultContainer) {
-  mainSection.innerHTML = '';
+    console.error('Result container nicht gefunden');
+    return;
+  }
+  
+  // Zeige Result-Container an
+  resultContainer.style.display = 'block';
+  
+  // Setze Headline
+  const headlineElement = document.getElementById('finder-headline');
+  if (headlineElement) {
+    headlineElement.textContent = 'Finder Ergebnis';
+  }
+  
+  // Leere bisherigen Inhalt
+  const textContentElement = document.getElementById('finder-text-content');
+  if (textContentElement) {
+    textContentElement.innerHTML = '';
+  }
 
   // Hilfsfunktion: Markdown-Abschnitt parsen und als Article rendern
   function renderMarkdownArticle(mdText) {
@@ -352,12 +370,22 @@ async function loadResult(code) {
         textStart = 2;
       }
       
-      let text = lines.slice(textStart).join('\n');
+      let textContent = lines.slice(textStart).join('\n');
+      textContent = textContent
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        // Markdown-Links verarbeiten: [Text](URL)
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+        .replace(/\n\n/g, '</p><p>')
+        .replace(/^(?!<[h1-6])/gm, '<p>')
+        .replace(/$/gm, '</p>')
+        .replace(/<p><\/p>/g, '');
+      
       return `<article class="content-article">
         <div class="layout">
           <div class="main-content">
             <h2>${headline}</h2>
-            <div class="text-content">${marked.parse(text)}</div>
+            <div class="text-content">${textContent}</div>
           </div>
           <div class="sidebar">${marginal}</div>
         </div>
@@ -386,21 +414,26 @@ async function loadResult(code) {
         allArticles += `<article class="content-article"><div class='main-content'><h2>Datei nicht gefunden</h2><div class='text-content'>${mdFile}</div></div></article>`;
       }
     }
-    mainSection.innerHTML = allArticles;
+    
+    // Zeige alle Artikel im Text-Content-Bereich an
+    if (textContentElement) {
+      textContentElement.innerHTML = allArticles;
+    }
+    
     resultContainer.style.display = 'block';
     resultContainer.scrollIntoView({ behavior: 'smooth' });
   } catch (err) {
-    mainSection.innerHTML = `<article class="content-article"><div class='main-content'><h2>Fehler</h2><div class='text-content'>${err.message}</div></div></article>`;
+    if (textContentElement) {
+      textContentElement.innerHTML = `<article class="content-article"><div class='main-content'><h2>Fehler</h2><div class='text-content'>${err.message}</div></div></article>`;
+    }
     resultContainer.style.display = 'block';
   }
 }
 
-// Lädt und zeigt die zusätzlichen Abschnitte an
+// Lädt und zeigt die zusätzlichen Abschnitte an (nicht mehr verwendet)
 function loadAdditionalSections(sections, resultContainer) {
-  if (!resultContainer) {
+  // Funktion nicht mehr benötigt
-    console.error('[ERROR] Kein gültiger Container für zusätzliche Abschnitte');
+  return;
-    return;
-  }
   
   // Trennlinie hinzufügen vor den zusätzlichen Abschnitten
   const divider = document.createElement('hr');
@@ -465,6 +498,8 @@ function addResetButton() {
     resetBtn.onclick = () => {
       resetFinder();
       renderBundeslandStep();
+      // Stelle sicher, dass der Finder-Tab aktiv bleibt
+      ensureFinderTabActive();
       if (typeof showTab === 'function') showTab('tab2');
     };
     
@@ -472,12 +507,19 @@ function addResetButton() {
   }
 }
 
-// Zeigt den Empfehlungsbereich für den Finder-Tab an
+// Empfehlungsbereich-Funktion entfernt, da Button nicht mehr existiert
-function showFinderRecommendation() {
+
-  const recommendation = document.querySelector('.recommendation');
+// Stellt sicher, dass der Finder-Tab aktiv bleibt
-  if (recommendation) {
+function ensureFinderTabActive() {
-    recommendation.style.display = 'block';
+  // Aktiviere Finder-Tab
-  }
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.button-tab').forEach(btn => btn.classList.remove('active'));
+  
+  const finderTab = document.querySelector('.tab2');
+  const finderButton = document.querySelector('.button-tab[onclick*="tab2"]');
+  
+  if (finderTab) finderTab.classList.add('active');
+  if (finderButton) finderButton.classList.add('active');
 }
 
 // Initialisierung beim Seitenladen

www/Steuerungsdateien/personas.js

@@ -44,7 +44,12 @@ function initializePersonas() {
   if (personasData[currentPersona]) {
     updateMainPortrait(personasData[currentPersona]);
     updateBundeslandDropdown(personasData[currentPersona]);
-    updatePersonaButton(personasData[currentPersona]);
+    // updatePersonaButton entfernt
+    
+    // Lade automatisch die Texte für die initiale Persona
+    setTimeout(() => {
+      loadPersonaMarkdownContentOnly(currentPersona);
+    }, 500);
   }
 }
 
@@ -71,8 +76,12 @@ function selectPersona(personaName) {
   // Bundesland-Dropdown aktualisieren
   updateBundeslandDropdown(persona);
   
-  // Button-Text aktualisieren
+  // Button-Text aktualisieren (entfernt)
-  updatePersonaButton(persona);
+  
+  // Lade automatisch die Texte für die ausgewählte Persona
+  setTimeout(() => {
+    loadPersonaMarkdownContentOnly(currentPersona);
+  }, 200);
   
   console.log('[DEBUG] Persona gewechselt von', previousPersona, 'zu:', personaName);
 }
@@ -110,7 +119,7 @@ function updateMainPortrait(persona) {
     text = text.replace(/\{\{AUSBILDUNG_SELECT\}\}/g, persona.ausbildung);
     
     // Informatik-Placeholder ersetzen
-    text = text.replace(/\{\{INFORMATIK_SELECT\}\}/g, persona.informatik || 'Informatik');
+    // INFORMATIK_SELECT wird nicht mehr verwendet
     
     // Abschluss-Placeholder ersetzen
     text = text.replace(/\{\{ABSCHLUSS_SELECT\}\}/g, getAbschlussName(persona['abschluss-value']));
@@ -237,9 +246,13 @@ function updateBundeslandDropdown(persona) {
     // Dropdowns existieren bereits - nur Werte aktualisieren
     existingBundeslandSelect.value = persona.bundesland;
     existingAusbildungSelect.value = persona['ausbildung-value'];
+    console.log('[DEBUG] Dropdown-Werte aktualisiert:', persona.bundesland, persona['ausbildung-value']);
     return;
   }
   
+  // Dropdowns existieren nicht - erstelle sie
+  console.log('[DEBUG] Erstelle neue Dropdowns für Persona:', persona.name);
+  
   // Ersetze die Platzhalter im Text mit echten Dropdowns
   let textContent = persona.text;
   
@@ -270,12 +283,7 @@ function updateBundeslandDropdown(persona) {
       ausbildungSelectElement.addEventListener('change', handleAusbildungChange);
     }
     
-    // Button Event Listener hinzufügen
+    // Button Event Listener entfernt, da Button nicht mehr existiert
-    const empfehlungButton = document.getElementById('persona-empfehlung-button');
-    if (empfehlungButton) {
-      empfehlungButton.removeEventListener('click', handleEmpfehlungButtonClick);
-      empfehlungButton.addEventListener('click', handleEmpfehlungButtonClick);
-    }
   }, 100);
 }
 
@@ -285,8 +293,12 @@ function handleBundeslandChange() {
   if (persona) {
     persona.bundesland = this.value;
     console.log('[DEBUG] Bundesland geändert zu:', this.value);
-    // Lade nur die Texte, nicht die Dropdowns
+    // Lade nur die Texte, NICHT die Dropdowns neu erstellen
-    loadPersonaMarkdownContentOnly(currentPersona);
+    setTimeout(() => {
+      loadPersonaMarkdownContentOnly(currentPersona);
+    }, 100);
+    // Stelle sicher, dass der Personas-Tab aktiv bleibt
+    ensurePersonasTabActive();
   }
 }
 
@@ -296,23 +308,26 @@ function handleAusbildungChange() {
   if (persona) {
     persona['ausbildung-value'] = this.value;
     console.log('[DEBUG] Ausbildung geändert zu:', this.value);
-    // Lade nur die Texte, nicht die Dropdowns
+    // Lade nur die Texte, NICHT die Dropdowns neu erstellen
-    loadPersonaMarkdownContentOnly(currentPersona);
+    setTimeout(() => {
+      loadPersonaMarkdownContentOnly(currentPersona);
+    }, 100);
+    // Stelle sicher, dass der Personas-Tab aktiv bleibt
+    ensurePersonasTabActive();
   }
 }
 
-// Aktualisiert den Button-Text mit dem Persona-Namen
+// Button-Funktion entfernt, da Button nicht mehr existiert
 function updatePersonaButton(persona) {
-  const buttonNameElement = document.getElementById('persona-button-name');
+  // Funktion nicht mehr benötigt
-  if (buttonNameElement) {
-    buttonNameElement.textContent = persona.name;
-  }
 }
 
-// Event Handler für Empfehlung-Button
+// Event Handler für Empfehlung-Button (nicht mehr verwendet, da Button entfernt)
 function handleEmpfehlungButtonClick() {
   console.log('[DEBUG] Empfehlung-Button geklickt für:', currentPersona);
   loadPersonaMarkdownContent(currentPersona);
+  // Stelle sicher, dass der Personas-Tab aktiv bleibt
+  ensurePersonasTabActive();
 }
 
 // Bundesland-Namen aus Code generieren
@@ -373,9 +388,9 @@ function getAllBundeslandOptions(selectedBundesland) {
 // Alle Ausbildung-Optionen generieren
 function getAllAusbildungOptions(selectedAusbildung) {
   const ausbildungOptions = {
-    'B': 'Berufserfahrung',
+    'AUSBILDUNG': 'Berufserfahrung',
-    'H': 'Hochschulstudium',
+    'HS': 'Hochschulstudium',
-    'S': 'Lehramtsstudium'
+    'LA': 'Lehramtsstudium'
   };
   
   let options = '';
@@ -428,6 +443,19 @@ function addPersonasStyles() {
   document.head.appendChild(style);
 }
 
+// Stellt sicher, dass der Personas-Tab aktiv bleibt
+function ensurePersonasTabActive() {
+  // Aktiviere Personas-Tab
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.button-tab').forEach(btn => btn.classList.remove('active'));
+  
+  const personasTab = document.querySelector('.tab1');
+  const personasButton = document.querySelector('.button-tab[onclick*="tab1"]');
+  
+  if (personasTab) personasTab.classList.add('active');
+  if (personasButton) personasButton.classList.add('active');
+}
+
 // Initialisierung beim Laden der Seite
 document.addEventListener('DOMContentLoaded', function() {
   addPersonasStyles();
@@ -441,33 +469,21 @@ function showPersonasTab() {
     loadPersonasData();
   }
   
-  // Verstecke Empfehlungsbereich beim Wechsel zu Personas-Tab
+  // Verstecke Empfehlungsbereich beim Wechsel zu Personas-Tab (nicht mehr benötigt)
-  hideRecommendation();
+  
+  // Verstecke Finder-Ergebnisse
+  const finderResult = document.getElementById('result');
+  if (finderResult) {
+    finderResult.style.display = 'none';
+  }
 }
 
-// Globale Funktion für Finder-Tab-Wechsel
+// Globale Funktion für Finder-Tab-Wechsel (nicht mehr benötigt)
 function showFinderTabWithPersona() {
-  // Lade Markdown-Inhalte für die aktuelle Persona
+  // Funktion nicht mehr benötigt
-  if (currentPersona && Object.keys(personasData).length > 0) {
-    loadPersonaMarkdownContent(currentPersona);
-  }
 }
 
-// Versteckt den Empfehlungsbereich
+// Empfehlungsbereich-Funktionen entfernt, da Button nicht mehr existiert
-function hideRecommendation() {
-  const recommendation = document.querySelector('.recommendation');
-  if (recommendation) {
-    recommendation.style.display = 'none';
-  }
-}
-
-// Zeigt den Empfehlungsbereich an
-function showRecommendation() {
-  const recommendation = document.querySelector('.recommendation');
-  if (recommendation) {
-    recommendation.style.display = 'block';
-  }
-}
 
 // Lädt nur die Markdown-Inhalte ohne Dropdowns zu ändern
 async function loadPersonaMarkdownContentOnly(personaName) {
@@ -561,7 +577,16 @@ async function loadPersonaMarkdownContent(personaName) {
 
 // Bestimmt die richtige Markdown-Datei basierend auf Persona-Daten
 function getMarkdownFileForPersona(persona) {
-  // Bundesland-Mapping - korrigiert für die tatsächlichen Verzeichnisnamen
+  // Verwende die mapping-files aus der personas.yml, falls vorhanden
+  if (persona['mapping-files'] && persona['mapping-files'].length > 0) {
+    // Für jetzt verwende die erste Mapping-Datei
+    // TODO: Später können wir eine intelligentere Auswahl basierend auf Dropdown-Werten implementieren
+    const mappingFile = persona['mapping-files'][0];
+    console.log('[DEBUG] Verwende Mapping-Datei aus personas.yml:', mappingFile);
+    return mappingFile;
+  }
+  
+  // Fallback: Alte Logik für Personas ohne mapping-files
   const bundeslandMapping = {
     'BW': '1_BW',
     'BY': '2_BY', 
@@ -592,25 +617,17 @@ function getMarkdownFileForPersona(persona) {
   let fileName = '';
   
   // Ausbildung-basiert (Code-System)
-  if (persona['ausbildung-value'] === 'B') {
+  if (persona['ausbildung-value'] === 'AUSBILDUNG') {
     // Berufserfahrung
-    if (persona['informatik-value'] === 'J') {
+    fileName = 'HS-BA-1F.md'; // Berufserfahrung
-      fileName = 'HS-BA-1F.md'; // Informatik-Berufserfahrung
+  } else if (persona['ausbildung-value'] === 'HS') {
-    } else {
-      fileName = 'HS-BA-2F.md'; // Andere Berufserfahrung
-    }
-  } else if (persona['ausbildung-value'] === 'H') {
     // Hochschule
     if (persona['abschluss-value'] === 'B') {
       fileName = 'HS-MA-0F.md'; // Bachelor
     } else if (persona['abschluss-value'] === 'M') {
-      if (persona['informatik-value'] === 'J') {
+      fileName = 'HS-MA-1F.md'; // Master
-        fileName = 'HS-MA-1F.md'; // Master mit Informatik
-      } else {
-        fileName = 'HS-MA-2F.md'; // Master ohne Informatik (wie Birgit)
-      }
     }
-  } else if (persona['ausbildung-value'] === 'S') {
+  } else if (persona['ausbildung-value'] === 'LA') {
     // Studium/Lehramt
     fileName = 'LA-BA.md';
   }
@@ -620,7 +637,7 @@ function getMarkdownFileForPersona(persona) {
     return null;
   }
   
-  console.log(`[DEBUG] Persona ${persona.name}: Bundesland ${persona.bundesland} (${bundeslandDir}), Ausbildung ${persona['ausbildung-value']}, Abschluss ${persona['abschluss-value']}, Informatik ${persona['informatik-value']} → ${fileName}`);
+  console.log(`[DEBUG] Persona ${persona.name}: Bundesland ${persona.bundesland} (${bundeslandDir}), Ausbildung ${persona['ausbildung-value']}, Abschluss ${persona['abschluss-value']} → ${fileName}`);
   
   return `Bundeslaender/${bundeslandDir}/${fileName}`;
 }
@@ -637,18 +654,18 @@ async function loadLinkedMarkdownContent(markdownPaths) {
       // Entferne führenden Slash falls vorhanden
       const cleanPath = path.trim().startsWith('/') ? path.trim().substring(1) : path.trim();
       
-      // Füge Bundeslaender-repo/ hinzu, falls nicht bereits vorhanden
+      // Verwende den Pfad direkt, da er bereits den korrekten Präfix hat
-      const fullPath = cleanPath.startsWith('Bundeslaender-repo/') ? cleanPath : `Bundeslaender-repo/${cleanPath}`;
+      const fullPath = cleanPath;
       const response = await fetch(fullPath);
       const content = await response.text();
       
-      // Konvertiere Markdown zu HTML (vereinfacht)
+      // Konvertiere Markdown zu HTML (gleiche Struktur wie Finder)
-      const htmlContent = convertMarkdownToHtml(content);
+      const htmlContent = renderMarkdownArticle(content);
-      contentHtml += `<div class="content-section">${htmlContent}</div>`;
+      contentHtml += htmlContent;
       
     } catch (error) {
       console.error('Fehler beim Laden von:', path, error);
-      contentHtml += `<div class="content-section"><h2>Fehler</h2><p>Datei nicht gefunden: ${path}</p></div>`;
+      contentHtml += `<article class="content-article"><div class='main-content'><h2>Fehler</h2><div class='text-content'>Datei nicht gefunden: ${path}</div></div></article>`;
     }
   }
   
@@ -658,49 +675,99 @@ async function loadLinkedMarkdownContent(markdownPaths) {
   displayPersonaContent(contentHtml);
 }
 
-// Einfache Markdown-zu-HTML Konvertierung
+// Verwendet die gleiche Markdown-Rendering-Funktion wie Finder
-function convertMarkdownToHtml(markdown) {
+function renderMarkdownArticle(mdText) {
-  return markdown
+  // Splitte in Abschnitte nach ##
-    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+  const sections = mdText.split(/\n(?=## )/);
-    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+  return sections.map(section => {
-    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+    let lines = section.trim().split('\n');
-    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    if (!lines[0].startsWith('##')) return '';
-    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    let headline = lines[0].replace(/^## /, '');
-    .replace(/\n\n/g, '</p><p>')
+    let marginal = '';
-    .replace(/^(?!<[h1-6])/gm, '<p>')
+    let textStart = 1;
-    .replace(/$/gm, '</p>')
+    
-    .replace(/<p><\/p>/g, '');
+    // Prüfe zweite Zeile auf Link
+    if (lines[1] && lines[1].startsWith('http')) {
+      const linkLine = lines[1];
+      
+      // Prüfe ob es ein Markdown-Link mit Text ist: [Text](URL)
+      const markdownLinkMatch = linkLine.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+      if (markdownLinkMatch) {
+        // Markdown-Link gefunden: [Text](URL)
+        const linkText = markdownLinkMatch[1];
+        const linkUrl = markdownLinkMatch[2];
+        marginal = `<blockquote class='marginal'><a href="${linkUrl}" target="_blank">${linkText}</a></blockquote>`;
+      } else {
+        // Einfacher Link
+        marginal = `<blockquote class='marginal'><a href="${linkLine}" target="_blank">${linkLine}</a></blockquote>`;
+      }
+      textStart = 2;
+    }
+    
+    // Rest als Text verarbeiten
+    let textContent = lines.slice(textStart).join('\n');
+    
+    // Markdown-zu-HTML Konvertierung
+    textContent = textContent
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      // Markdown-Links verarbeiten: [Text](URL)
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+      .replace(/\n\n/g, '</p><p>')
+      .replace(/^(?!<[h1-6])/gm, '<p>')
+      .replace(/$/gm, '</p>')
+      .replace(/<p><\/p>/g, '');
+    
+    return `<article class="content-article">
+      <div class="layout">
+        <div class="main-content">
+          <h2>${headline}</h2>
+          <div class="text-content">${textContent}</div>
+        </div>
+        <div class="sidebar">${marginal}</div>
+      </div>
+    </article>`;
+  }).join('');
 }
 
 // Zeigt Persona-Inhalt im Empfehlungsbereich an (gleiche Struktur wie Finder)
 function displayPersonaContent(contentHtml) {
+  console.log('[DEBUG] Zeige Persona-Inhalt an:', contentHtml.substring(0, 100));
+  
   // Verwende die gleiche Struktur wie der Finder
   const resultDiv = document.getElementById('result');
-  if (resultDiv) {
+  if (!resultDiv) {
-    // Headline setzen
+    console.error('Result div nicht gefunden');
-    const headlineElement = document.getElementById('finder-headline');
+    return;
-    if (headlineElement) {
-      headlineElement.textContent = 'Empfehlung für ' + (currentPersona ? personasData[currentPersona].name : 'Persona');
-    }
-    
-    // Content setzen
-    const textContentElement = document.getElementById('finder-text-content');
-    if (textContentElement) {
-      textContentElement.innerHTML = contentHtml;
-    }
-    
-    // Tags und Marginal leeren (falls vorhanden)
-    const tagsElement = document.getElementById('finder-tags');
-    if (tagsElement) {
-      tagsElement.innerHTML = '';
-    }
-    
-    const marginalElement = document.getElementById('finder-marginal');
-    if (marginalElement) {
-      marginalElement.innerHTML = '';
-    }
-    
-    // Ergebnis-Bereich anzeigen
-    resultDiv.style.display = 'block';
   }
+  
+  // Headline setzen
+  const headlineElement = document.getElementById('finder-headline');
+  if (headlineElement) {
+    const personaName = currentPersona ? personasData[currentPersona].name : 'Persona';
+    headlineElement.textContent = 'Empfehlung für ' + personaName;
+    console.log('[DEBUG] Headline gesetzt für:', personaName);
+  }
+  
+  // Content setzen
+  const textContentElement = document.getElementById('finder-text-content');
+  if (textContentElement) {
+    textContentElement.innerHTML = contentHtml;
+    console.log('[DEBUG] Content gesetzt, Länge:', contentHtml.length);
+  }
+  
+  // Tags und Marginal leeren
+  const tagsElement = document.getElementById('finder-tags');
+  if (tagsElement) {
+    tagsElement.innerHTML = '';
+  }
+  
+  const marginalElement = document.getElementById('finder-marginal');
+  if (marginalElement) {
+    marginalElement.innerHTML = '';
+  }
+  
+  // Ergebnis-Bereich anzeigen
+  resultDiv.style.display = 'block';
+  console.log('[DEBUG] Result div angezeigt');
 }

www/Steuerungsdateien/personas.yml

@@ -7,12 +7,12 @@ birgit:
     Birgit aus {{BUNDESLAND_SELECT}} hat direkt nach ihrer Ausbildung zur Fachinformatikerin für Systemintegration angefangen zu arbeiten. Mittlerweile verfügt Birgit über langjährige {{AUSBILDUNG_SELECT}} im IT-Bereich. Schon länger spielt sie mit dem Gedanken, etwas Neues auszuprobieren - sie möchte unbedingt nochmal Erfahrungen in einem Job mit tieferem Sinn machen, etwas bewirken und ihren Wissensschatz an die junge Generation weitergeben. Sie fragt sich, ob dies noch möglich ist.
   bundesland: RP
   ausbildung: Berufserfahrung
-  ausbildung-value: B
+  ausbildung-value: AUSBILDUNG
   abschluss-value: B
-  informatik: Informatik
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: J
+  mapping-files:
-  lehramtsbezug-value: O
+    - "11_RP/HS-BA-1F.md"
-  faecher-value: 1
+    - "11_RP/HS-BA-2F.md"
   
 swantje:
   name: Swantje
@@ -23,12 +23,11 @@ swantje:
     Nach ihrem {{AUSBILDUNG_SELECT}} zur Informatikerin (Dipl.-FH) hat Swantje in {{BUNDESLAND_SELECT}} einen Job in der freien Wirtschaft angenommen. Sie ist Anfang 30 und befindet sich gerade mit ihrem zweiten Kind in der Elternzeit. Für ihren beruflichen Wiedereinstieg wünscht sie sich familienfreundliche Arbeitszeiten und die Möglichkeit, in Teilzeit zu arbeiten. Swantje hat bereits gehört, dass MV eine gut ausgebaute schulische Informatikbildung anbietet und informiert sich nun über die notwendigen Zusatzqualifikation für allgemeinbildende Schulen. 
   bundesland: MV
   ausbildung: abgeschlossenes Studium
-  ausbildung-value: H
+  ausbildung-value: HS
   abschluss-value: M
-  informatik: Informatik
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: J
+  mapping-files:
-  lehramtsbezug-value: A
+    - "8_MV/HS-MA-1F.md"
-  faecher-value: 2
   
 ecem:
   name: Ecem
@@ -39,12 +38,11 @@ ecem:
     Ecem aus {{BUNDESLAND_SELECT}} hat in der Türkei Mathematik auf {{AUSBILDUNG_SELECT}} studiert und promoviert. Dort hat sie einige Jahre Mathematik unterrichtet, bevor sie vor fünf Jahren nach Deutschland kam. Inzwischen hat sie ihr Deutsch C1-Zertifikat bestanden und will in Niedersachsen Informatik nachstudieren, da dies in Bremen nicht geht. Sie hat vom niedersächsischen Kultusministerium Mathematik anerkannt bekommen und mitgeteilt bekommen, dass sie in einer Ausgleichsmaßnahme 80 Creditpoints für das zweite Fach an einer Uni nachstudieren muss. Zur Ausgleichsmaßnahme gehört auch ein ca. 12-monatiger schulpraktischer Teil, in dessen Zeit ein Arbeitsverhältnis mit dem Land besteht und pädagogische und fachdidaktische Seminare am Studienseminar erfolgreich zu besuchen sind. 
   bundesland: HB
   ausbildung: abgeschlossenes Lehramtstudium +
-  ausbildung-value: S
+  ausbildung-value: LA
   abschluss-value: M
-  informatik: Mathematik
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: N
+  mapping-files:
-  lehramtsbezug-value: A
+    - "5_HB/LA-BA.md"
-  faecher-value: 2
 
 aminata:
   name: Aminata
@@ -55,12 +53,11 @@ aminata:
     Aminata sucht eine neue Perspektive. Sie hat ein abgeschlossenes {{AUSBILDUNG_SELECT}} und eine Promotion als Bioinformatikerin, investierte in den nachfolgenden Jahren viel Zeit in eine wissenschaftliche Karriere und nahm verschiedene befristete Projektstellen an, die ihr viel Freude gemacht haben - doch nun sucht sie eine langfristige Perspektive. Sie ist nun 38 Jahre und möchte einen Neuanfang in {{BUNDESLAND_SELECT}} machen. 
   bundesland: BE
   ausbildung: Masterstudium
-  ausbildung-value: H
+  ausbildung-value: HS
   abschluss-value: B
-  informatik: Mathematik
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: J
+  mapping-files:
-  lehramtsbezug-value: A
+    - "3_BE/HS-MA-1F.md"
-  faecher-value: 1
   
 sabrina:
   name: Sabrina
@@ -68,15 +65,14 @@ sabrina:
   titel: Lehrerin für ev. Religion und Geschichte
   bild: Steuerungsdateien/images/WIL-Vorbild_Sabrina.png
   text: >
-    Sabrina wusste schon immer, dass sie Lehrerin werden möchte, um ihre Schüler:innen auf ein anspruchsvolles Leben vorzubereiten. Deswegen entschied sie sich mit Anfang 20 für ein {{AUSBILDUNG_SELECT}}} (Sek. II) in den Fächern ev. Religion und Geschichte. Nun, mit Mitte 40, hat sich der Alltag verändert - Sabrina weiß, dass im {{BUNDESLAND_SELECT}} Informatikunterricht eingeführt werden soll und sich mit dem neuen Lehramt sich ggf. auch neue Karrierechancen und Gestaltungsmöglichkeiten innerhalb der Schule uergeben können. Sie möchte sich informieren, was sie leisten muss, um Informatik als drittes Fach hinzuzunehmen.
+    Sabrina wusste schon immer, dass sie Lehrerin werden möchte, um ihre Schüler:innen auf ein anspruchsvolles Leben vorzubereiten. Deswegen entschied sie sich mit Anfang 20 für ein {{AUSBILDUNG_SELECT}} (Sek. II) in den Fächern ev. Religion und Geschichte. Nun, mit Mitte 40, hat sich der Alltag verändert - Sabrina weiß, dass im {{BUNDESLAND_SELECT}} Informatikunterricht eingeführt werden soll und sich mit dem neuen Lehramt sich ggf. auch neue Karrierechancen und Gestaltungsmöglichkeiten innerhalb der Schule uergeben können. Sie möchte sich informieren, was sie leisten muss, um Informatik als drittes Fach hinzuzunehmen.
   bundesland: SL
   ausbildung: Lehramtstudium -
-  ausbildung-value: S
+  ausbildung-value: LA
   abschluss-value: M
-  informatik: Mathematik
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: J
+  mapping-files:
-  lehramtsbezug-value: A
+    - "12_SL/LA-BA.md"
-  faecher-value: 2
 
 mandy:  
   name: Mandy
@@ -87,12 +83,11 @@ mandy:
     Mandy studiert nach ihrem {{AUSBILDUNG_SELECT}} in Wirtschaftsinformatik momentan noch den Master in Informatik als Fernstudium, da sie aus familären Gründen mit 24 Jahren wieder zurück auf den elterlichen Hof in {{BUNDESLAND_SELECT}} gezogen ist. Sie engagiert sich viel in Vereinen und gibt Programmierkurse für Mädchen am Wochenende. Das macht ihr sehr viel Spaß und sie beschließt, dies beruflich weiterzuverfolgen.
   bundesland: BY
   ausbildung: Bachelor Informatikstudium
-  ausbildung-value: H
+  ausbildung-value: HS
   abschluss-value: B
-  informatik: Informatik
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: J
+  mapping-files:
-  lehramtsbezug-value: O
+    - "2_BY/HS-BA-1F.md"
-  faecher-value: E
   
 zoe:
   name: Zoe
@@ -103,10 +98,9 @@ zoe:
     Zoé ist 24 und ist für ihre Fachinformatikerin-Ausbildung nach {{BUNDESLAND_SELECT}} gezogen. Nach einigen {{AUSBILDUNG_SELECT}} ist sie Abteilungsleiterin, aber sie wünscht sich mehr für ihre berufliche Karriere. Da sie noch jung ist und einem zweiten Karriereweg nichts im Weg steht, überdenkt sie die Möglichkeiten mit ihrem fachlich-fundierten Hintergrund.
   bundesland: NRW
   ausbildung: Berufserfahrung
-  ausbildung-value: B
+  ausbildung-value: AUSBILDUNG
   abschluss-value: B
-  informatik: 
+  # Direkte Zuordnung zu relevanten MD-Dateien
-  informatik-value: N
+  mapping-files:
-  lehramtsbezug-value: 1
+    - "10_NW/HS-BA-1F.md"
-  faecher-value: E
   

www/index.html

@@ -9,8 +9,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="Steuerungsdateien/fonts.css"> 
     <link rel="stylesheet" href="Steuerungsdateien/styles.css">
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
 </head>
 <body>
 <div class="container">
@@ -34,7 +34,6 @@
 			</div>
 			<div class="text">
 			  <p id="persona-text">Birgit aus {{BUNDESLAND_SELECT}} hat direkt nach ihrer Ausbildung zur Fachinformatikerin für Systemintegration angefangen zu arbeiten. Mittlerweile verfügt Birgit über langjährige {{AUSBILDUNG_SELECT}} im IT-Bereich. Schon länger spielt sie mit dem Gedanken, etwas Neues auszuprobieren - sie möchte unbedingt nochmal Erfahrungen in einem Job mit tieferem Sinn machen, etwas bewirken und ihren Wissensschatz an die junge Generation weitergeben. Sie fragt sich, ob dies noch möglich ist.</p>
-			  <button id="persona-empfehlung-button" class="button">Unsere Empfehlung für <span id="persona-button-name">Birgit</span></button>
 			</div>
 		  </div>
 		</div>
@@ -49,16 +48,6 @@
 			  <div class="persona" data-name="zoe"><img src="Steuerungsdateien/images/WIL-Vorbild_Zoe.png"><span>Zoe</span></div>
 		</div>
 	  </div>
-  <div class="recommendation">
-	<span class="distinction">Unsere Empfehlung ist</span><br>
-		<div id="persona-empfehlung" class="main-content">
-			<h2 id="persona-headline"></h2>
-			<p id="persona-text-content"></p>
-			<p id="persona-tags" class="tags"></p>
-
-			
-		</div>
-  </div>
   </div>
 
   <!-- Finder Tab -->
@@ -68,39 +57,66 @@
 	</form>
   </div>
   
-  <!-- Ergebnisse außerhalb des Tab-Containers -->
+  <!-- Result-Bereich für beide Tabs (Finder + Personas) -->
-  <div id="result" style="display: none;">
+  <div id="result" class="result-container" style="display: none;">
-	<div class="main-section">
+	<div class="result-header">
-	  <h2 id="finder-headline">Empfehlung</h2>
+	  <h2 id="finder-headline">Ihre Empfehlung</h2>
-	  <div id="finder-text-content" class="text-content">...</div>
+	</div>
+	<div class="result-content">
+	  <div id="finder-text-content"></div>
 	  <div id="finder-tags" class="tags"></div>
 	  <div id="finder-marginal" class="marginal"></div>
 	</div>
-	<!-- Zusätzliche Abschnitte werden hier dynamisch eingefügt -->
   </div>
-</div>
-
-  <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
   <script src="Steuerungsdateien/personas.js"></script>
   <script src="Steuerungsdateien/finder.js"></script>
 
   <script>
 	  // Tabs anzeigen
 	  function showTab(tabId) {
+		// Alle Tabs deaktivieren
 		document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-		document.querySelector(`.${tabId}`).classList.add('active');
 		document.querySelectorAll('.button-tab').forEach(btn => btn.classList.remove('active'));
+		
+		// Aktiven Tab aktivieren
+		document.querySelector(`.${tabId}`).classList.add('active');
 		document.querySelector(`.button-tab[onclick*="${tabId}"]`).classList.add('active');
 		
+		// Texte zurücksetzen
+		resetAllContent();
+		
 		// Tab-spezifische Initialisierung
 		if (tabId === 'tab1') {
 		  showPersonasTab();
 		} else if (tabId === 'tab2') {
 		  loadFinderStructure();
-		  showFinderTabWithPersona();
 		}
 	  }
 	  
+	  // Setzt alle Inhalte zurück
+	  function resetAllContent() {
+		// Persona-Empfehlungen zurücksetzen (nicht mehr benötigt)
+		
+		// Finder-Ergebnisse zurücksetzen
+		const finderResult = document.getElementById('result');
+		if (finderResult) {
+		  finderResult.style.display = 'none';
+		}
+		
+		// Alle Inhalte leeren
+		const elementsToClear = [
+		  'persona-headline', 'persona-text-content', 'persona-tags',
+		  'finder-headline', 'finder-text-content', 'finder-tags', 'finder-marginal'
+		];
+		
+		elementsToClear.forEach(id => {
+		  const element = document.getElementById(id);
+		  if (element) {
+			element.innerHTML = '';
+		  }
+		});
+	  }
+	  
 	  // Initialisiere die Anwendung
 	  document.addEventListener('DOMContentLoaded', function() {
 		// Personas werden automatisch geladen durch personas.js

www/typosnippet.html

@@ -0,0 +1,94 @@
+<!-- CSS- und JavaScript-Imports für Typo3 -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="Steuerungsdateien/fonts.css"> 
+<link rel="stylesheet" href="Steuerungsdateien/styles.css">
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+<!-- Hauptinhalt der Anwendung -->
+<div class="container">
+  <div class="tab-buttons">
+	<button class="button-tab active" onclick="showTab('tab1')">Personas</button>
+	<button class="button-tab" onclick="showTab('tab2')">Finder</button>
+  </div>
+
+  <!-- Personas Tab -->
+  <div class="tab tab1 active">
+	<div class="personas-tableau">
+	  <div class="focus personas-portrait">
+		<div class="portrait-left">
+		  <img id="persona-image" src="" alt="Portrait">
+		</div>
+		<div class="info-right">
+		  <div class="persona-head">
+			<h2 id="persona-name"></h2>
+			<span id="persona-title" class="subline"></span>
+		  </div>
+		  <div class="text">
+			<p id="persona-text"></p>
+		  </div>
+		</div>
+	  </div>
+	  <div class="persona-list" id="persona-list"></div>
+	</div>
+	<div class="recommendation">
+	  <div class="main-content">
+		<h2 id="persona-headline"></h2>
+		<p id="persona-text-content"></p>
+		<p id="persona-tags" class="tags"></p>
+	  </div>
+	  <div class="sidebar">
+		<blockquote id="persona-marginal"></blockquote>
+	  </div>
+	</div>
+  </div>
+
+  <!-- Finder Tab -->
+  <div class="tab tab2">
+	<form id="selectionForm">
+	  <div id="dynamic-steps"></div>
+	</form>
+  </div>
+  
+  <!-- Ergebnisse außerhalb des Tab-Containers -->
+  <div id="result" style="display: none;">
+	<div class="main-section">
+	  <h2 id="finder-headline">Empfehlung</h2>
+	  <div id="finder-text-content" class="text-content">...</div>
+	  <div id="finder-tags" class="tags"></div>
+	  <div id="finder-marginal" class="marginal"></div>
+	</div>
+	<!-- Zusätzliche Abschnitte werden hier dynamisch eingefügt -->
+  </div>
+</div>
+
+<!-- JavaScript-Imports für Typo3 -->
+<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
+<script src="Steuerungsdateien/personas.js"></script>
+<script src="Steuerungsdateien/finder.js"></script>
+
+<!-- JavaScript-Funktionen -->
+<script>
+  // Tabs anzeigen
+  function showTab(tabId) {
+	document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+	document.querySelector(`.${tabId}`).classList.add('active');
+	document.querySelectorAll('.button-tab').forEach(btn => btn.classList.remove('active'));
+	document.querySelector(`.button-tab[onclick*="${tabId}"]`).classList.add('active');
+	
+	// Tab-spezifische Initialisierung
+	if (tabId === 'tab1') {
+	  showPersonasTab();
+	} else if (tabId === 'tab2') {
+	  loadFinderStructure();
+	  showFinderTabWithPersona();
+	}
+  }
+  
+  // Initialisiere die Anwendung
+  document.addEventListener('DOMContentLoaded', function() {
+	// Personas werden automatisch geladen durch personas.js
+	// Finder wird beim Tab-Wechsel geladen
+  });
+</script>