Match the contact section to the prototype: Barlow, map crop, card title

Side-by-side with the prototype revealed the section never set its font
family - everything except the Michroma headings fell back to the system
font, which was the biggest visual mismatch (labels, subtitle, feature
bar). The section root now sets Barlow like the handoff specifies; the
subtitle even wraps identically to the prototype again.

The maps iframe crop is rebalanced (290px shifted -60px inside the 210px
window) so the map runs flush to the "Route planen" bar with Google's
bottom attribution cut at the card edge like the prototype, instead of
showing the full attribution line with a gap. The contact card is titled
"HiFi Planet Amorbach" per the design (was "HifiPlanet Amorbach").

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

hifi-src/src/i18n/de.js

@@ -196,7 +196,7 @@ export default {
     requiredHint: '* Pflichtfelder',
     sending: 'Wird gesendet…',
     submit: 'Anfrage senden',
-    cardTitle: 'HifiPlanet Amorbach',
+    cardTitle: 'HiFi Planet Amorbach',
     address: 'Adresse',
     phone: 'Telefon',
     email: 'E-Mail',

hifi-src/src/i18n/en.js

@@ -196,7 +196,7 @@ export default {
     requiredHint: '* Required fields',
     sending: 'Sending…',
     submit: 'Send inquiry',
-    cardTitle: 'HifiPlanet Amorbach',
+    cardTitle: 'HiFi Planet Amorbach',
     address: 'Address',
     phone: 'Phone',
     email: 'Email',

hifi-src/src/pages/public/ContactPage.jsx

@@ -166,7 +166,7 @@ export default function ContactPage() {
   return (
     <div
       className="kf-page kontakt-sektion relative w-full overflow-hidden px-4 pb-10 sm:px-10"
-      style={{ color: 'var(--kf-text2)' }}
+      style={{ color: 'var(--kf-text2)', fontFamily: "'Barlow', sans-serif" }}
     >
       <div className="relative z-10 mx-auto max-w-[1280px] pt-10 sm:pt-14">
         {/* Hero */}
@@ -491,16 +491,17 @@ export default function ContactPage() {
                 </a>
               )}
               <ExternalEmbed name={t('contactPage.mapEmbedName')} className="h-[210px] w-full">
-                {/* iframe hoeher als der sichtbare Ausschnitt + negativer margin-top:
-                    schneidet Googles eigenes Overlay (oben links) weg, damit nur unser
-                    "In Maps oeffnen"-Chip zu sehen ist - wie im Prototyp. */}
+                {/* iframe hoeher als der sichtbare 210px-Ausschnitt + negativer margin-top:
+                    schneidet Googles Info-Overlay (oben links) komplett und die untere
+                    Attributionszeile bis auf den Rand an - wie im Prototyp fuellt die
+                    Karte so buendig bis zur "Route planen"-Leiste. */}
                 <div className="h-[210px] overflow-hidden">
                   <iframe
                     title="HifiPlanet Amorbach – Standort"
                     src={`https://www.google.com/maps?q=${SHOP_ADDRESS_ENCODED}&output=embed`}
                     width="100%"
-                    height="280"
-                    style={{ border: 0, display: 'block', marginTop: '-70px' }}
+                    height="290"
+                    style={{ border: 0, display: 'block', marginTop: '-60px' }}
                     loading="lazy"
                     referrerPolicy="no-referrer-when-downgrade"
                   />

hifi/index.html

@@ -43,7 +43,7 @@
         "sameAs": ["https://www.youtube.com/@hifiplanet2812"]
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-BUHP9G1k.js"></script>
+    <script type="module" crossorigin src="/assets/index-D7QmGTZX.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/lucide-icons-CnpfS6R8.js">
     <link rel="stylesheet" crossorigin href="/assets/index-9666bnLb.css">
   </head>