Kontaktseite: "Direkter Kontakt" & "Antwortzeit" in eigene, auffaellige Kiste gepackt

Standen bisher als freier Text neben dem Formular. Jetzt in einer eigenen Karte
mit demselben Verlaufsrand-Look wie der Rest der Seite, zusaetzlich mit einem
sanften Akzent-Glow (wie bei den Charakter-Story-Boxen) und kleinen Icons vor
den Ueberschriften, damit die wichtigen Kontaktinfos etwas mehr Aufmerksamkeit
bekommen, ohne aus dem Design zu fallen.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/pages/ch/kontakt/index.astro

@@ -43,11 +43,11 @@ const t = useTranslations(lang);
         <p class="todo-note">{t.contact.todoNote}</p>
       </form>
 
-      <div>
-        <h3>{t.contact.directTitle}</h3>
+      <div class="card contact-highlight">
+        <h3><span aria-hidden="true">💌</span> {t.contact.directTitle}</h3>
         <p class="small">E-Mail: <a href="mailto:[email protected]">[email protected]</a> <span class="small">{t.contact.emailPlaceholderNote}</span></p>
         <p class="small">{t.contact.orderNote}</p>
-        <h3>{t.contact.responseTitle}</h3>
+        <h3><span aria-hidden="true">⏱️</span> {t.contact.responseTitle}</h3>
         <p class="small">{t.contact.responseNote}</p>
       </div>
     </div>

src/pages/en/kontakt/index.astro

@@ -43,11 +43,11 @@ const t = useTranslations(lang);
         <p class="todo-note">{t.contact.todoNote}</p>
       </form>
 
-      <div>
-        <h3>{t.contact.directTitle}</h3>
+      <div class="card contact-highlight">
+        <h3><span aria-hidden="true">💌</span> {t.contact.directTitle}</h3>
         <p class="small">E-Mail: <a href="mailto:[email protected]">[email protected]</a> <span class="small">{t.contact.emailPlaceholderNote}</span></p>
         <p class="small">{t.contact.orderNote}</p>
-        <h3>{t.contact.responseTitle}</h3>
+        <h3><span aria-hidden="true">⏱️</span> {t.contact.responseTitle}</h3>
         <p class="small">{t.contact.responseNote}</p>
       </div>
     </div>

src/pages/fr/kontakt/index.astro

@@ -43,11 +43,11 @@ const t = useTranslations(lang);
         <p class="todo-note">{t.contact.todoNote}</p>
       </form>
 
-      <div>
-        <h3>{t.contact.directTitle}</h3>
+      <div class="card contact-highlight">
+        <h3><span aria-hidden="true">💌</span> {t.contact.directTitle}</h3>
         <p class="small">E-Mail: <a href="mailto:[email protected]">[email protected]</a> <span class="small">{t.contact.emailPlaceholderNote}</span></p>
         <p class="small">{t.contact.orderNote}</p>
-        <h3>{t.contact.responseTitle}</h3>
+        <h3><span aria-hidden="true">⏱️</span> {t.contact.responseTitle}</h3>
         <p class="small">{t.contact.responseNote}</p>
       </div>
     </div>

src/pages/kontakt/index.astro

@@ -43,11 +43,11 @@ const t = useTranslations(lang);
         <p class="todo-note">{t.contact.todoNote}</p>
       </form>
 
-      <div>
-        <h3>{t.contact.directTitle}</h3>
+      <div class="card contact-highlight">
+        <h3><span aria-hidden="true">💌</span> {t.contact.directTitle}</h3>
         <p class="small">E-Mail: <a href="mailto:[email protected]">[email protected]</a> <span class="small">{t.contact.emailPlaceholderNote}</span></p>
         <p class="small">{t.contact.orderNote}</p>
-        <h3>{t.contact.responseTitle}</h3>
+        <h3><span aria-hidden="true">⏱️</span> {t.contact.responseTitle}</h3>
         <p class="small">{t.contact.responseNote}</p>
       </div>
     </div>