From 598065d740c022955af0fdf946f6bbd7972235e3 Mon Sep 17 00:00:00 2001
From: Majd Ibrahim <“3021285@stud.hs-mannheim.de”>
Date: Tue, 29 Sep 2026 16:02:23 +0000
Subject: [PATCH] Design verbessert.

---
 src/features/berater/berater-entry.js |  4 ++--
 src/features/berater/berater.css      | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/berater/berater-entry.js b/src/features/berater/berater-entry.js
index 6515854..4e78613 100644
--- a/src/features/berater/berater-entry.js
+++ b/src/features/berater/berater-entry.js
@@ -20,7 +20,7 @@ if (container) {
         container.innerHTML = berater.map((person) => `
             <article class="package-card advisor-card">
                 <h3 class="package-title">${escapeHtml(person.name)}</h3>
-                <p class="package-type">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
+                <p class="package-type advisor-role">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
                 <div class="package-details-box">
                     <div class="detail-item">
                         <h4 class="detail-title">Kurzbiografie</h4>
@@ -35,7 +35,7 @@ if (container) {
                         <ul class="detail-list">${(person.schwerpunkte || []).map((focus) => `<li>${escapeHtml(focus)}</li>`).join("")}</ul>
                     </div>
                 </div>
-                <button class="package-btn advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">Berater kontaktieren</button>
+                <button class="package-btn advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">${escapeHtml((typeof person.spitzname === "string" && person.spitzname.trim()) || person.vorname || person.name.trim().split(/\s+/)[0])} kontaktieren</button>
             </article>
         `).join("");
     }
diff --git a/src/features/berater/berater.css b/src/features/berater/berater.css
index c74360c..d421a55 100644
--- a/src/features/berater/berater.css
+++ b/src/features/berater/berater.css
@@ -116,3 +116,14 @@
         grid-column: auto;
     }
 }
+
+.advisor-card .advisor-role {
+    margin: 0 0 1rem;
+}
+
+.advisor-card .package-details-box {
+    padding: 1.5rem;
+    border: 1px solid #f8fafc1f;
+    border-radius: 1.4rem;
+    background: #ffffff0b;
+}