Update public/personalisiertes-lernen.html

public/personalisiertes-lernen.html

@@ -61,29 +61,39 @@
 
 
       <article class="mb-5">
-        <h2>AVERT (Authorship Verification and Evaluation through Responsive Testing)</h2>
-
-        <div class="flex items-start mt-3 space-x-5">
-          <!-- Rechteckiges Logo links -->
-          <img src="assets/img/ap5-gehirn.png" alt="AVERT Logo" class="w-40 h-auto object-contain" />
-
-          <!-- Bullet-Liste rechts vom Logo -->
-          <ul class="space-y-2">
-            <li>
-              AVERT begegnet den Projekt­herausforderungen, indem es von einer herkömmlichen, muster­basierten Plagiats­erkennung zu einem
-              <strong>interaktiven, sokratischen Frage­ansatz</strong> übergeht.
-            </li>
-            <li>
-              Durch den Einsatz <strong>großer Sprach­modelle (LLMs)</strong> passt AVERT seine Fragen dynamisch an, um das
-              <strong>Verständnis der Studierenden</strong> für den eingereichten Code zu evaluieren.
-            </li>
-            <li>
-              Dieses Verfahren stärkt die <strong>akademische Integrität</strong> und ermöglicht zugleich
-              <strong>personalisierte Rückmeldungen</strong>, wodurch eine skalierbare und didaktisch effektive Lösung entsteht.
-            </li>
-          </ul>
-        </div>
-      </article>
+            <h2 class="text-2xl font-semibold mb-4">
+              AVERT (Authorship Verification and Evaluation through Responsive Testing)
+            </h2>
+
+            <div class="flex flex-col md:flex-row items-start gap-5 bg-gray-50 p-4 rounded-lg shadow-sm">
+              <!-- Bild (links) -->
+              <div class="flex-shrink-0">
+                <img src="assets/img/ap5-gehirn.png"
+                    alt="Denkbild für AVERT"
+                    class="w-32 md:w-40 h-auto object-contain rounded-md border border-gray-200 shadow-sm" />
+              </div>
+
+              <!-- Liste (rechts) -->
+              <ul class="space-y-3 text-gray-800 leading-relaxed">
+                <li>
+                  AVERT begegnet den Projekt­herausforderungen, indem es von einer herkömmlichen,
+                  muster­basierten Plagiats­erkennung zu einem <strong class="text-indigo-600">interaktiven,
+                  sokratischen Frage­ansatz</strong> übergeht.
+                </li>
+                <li>
+                  Durch den Einsatz <strong class="text-indigo-600">großer Sprach­modelle (LLMs)</strong>
+                  passt AVERT seine Fragen dynamisch an, um das
+                  <strong class="text-indigo-600">Verständnis der Studierenden</strong> für den eingereichten Code zu evaluieren.
+                </li>
+                <li>
+                  Dieses Verfahren stärkt die <strong class="text-indigo-600">akademische Integrität</strong> und ermöglicht zugleich
+                  <strong class="text-indigo-600">personalisierte Rückmeldungen</strong>, wodurch eine skalierbare und
+                  didaktisch effektive Lösung entsteht.
+                </li>
+              </ul>
+            </div>
+          </article>
+
 
 
     <!-- debut -->
@@ -123,7 +133,8 @@
 
                 <!-- Bildbereich -->
                 <div class="col-md-6 text-center">
-                  <div class="image-frame p-2 border rounded shadow-sm bg-light">
+                  <!-- <div class="image-frame p-2 border rounded shadow-sm bg-light">-->
+                    <div>
                     <img src="assets/img/plagiatserkennung.png"
                         alt="AVERT Prozessdarstellung"
                         class="img-fluid rounded"