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>
+      <div class="card contact-highlight">
-        <h3>{t.contact.directTitle}</h3>
+        <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>
+      <div class="card contact-highlight">
-        <h3>{t.contact.directTitle}</h3>
+        <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>
+      <div class="card contact-highlight">
-        <h3>{t.contact.directTitle}</h3>
+        <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>
+      <div class="card contact-highlight">
-        <h3>{t.contact.directTitle}</h3>
+        <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/styles/global.css

@@ -908,6 +908,46 @@ a:focus-visible, button:focus-visible {
 .character-card h3 { font-size: 1.15rem; margin: 0.1rem 0 0; }
 .character-card-desc { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; }
 
+/* Kontaktseite: "Direkter Kontakt" + "Antwortzeit" bekommen eine eigene, auffälligere Kiste
+   statt schlichtem freiem Text neben dem Formular — passend zum restlichen Verlaufsrand-/
+   Glow-Look der Seite (siehe .card, .character-story), aber ohne deren Anführungszeichen-
+   Wasserzeichen, weil es hier nicht um eine Zitat-Vorstellung geht, sondern um wichtige
+   Kontaktinfos, die etwas mehr Aufmerksamkeit verdienen. */
+.contact-highlight {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.2rem;
+  background:
+    linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
+    linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box;
+  box-shadow:
+    var(--shadow-card),
+    0 0 46px -14px color-mix(in srgb, var(--c-accent) 40%, transparent),
+    0 0 80px -22px color-mix(in srgb, var(--c-sale) 28%, transparent);
+}
+.contact-highlight:hover {
+  box-shadow:
+    var(--shadow-card-hover),
+    0 0 60px -12px color-mix(in srgb, var(--c-accent) 50%, transparent),
+    0 0 100px -18px color-mix(in srgb, var(--c-sale) 36%, transparent);
+}
+.contact-highlight h3 {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  background: linear-gradient(120deg, var(--c-text) 45%, var(--c-accent) 130%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+.contact-highlight h3:not(:first-child) { margin-top: 1.3rem; }
+.contact-highlight p { margin: 0 0 0.3rem; }
+.contact-highlight p:last-child { margin-bottom: 0; }
+
 /* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen
    Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade
    durchstöbert, fällt bewusst etwas mehr auf als die stille "Unterkategorien"-Beschriftung. */