From 98af6423c546676beab4b3be38fc1e65ccb711c8 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Mon, 13 Jul 2026 20:27:37 +0200
Subject: [PATCH] feat: add anchor IDs and scroll margin for award cards and
 sponsoring form

---
 src/spa/components/AwardsGridSection.tsx | 28 +++++++++++++++++-------
 src/spa/pages/Netzwerk.tsx               |  3 +--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/spa/components/AwardsGridSection.tsx b/src/spa/components/AwardsGridSection.tsx
index 8fb1db0..7b5f159 100644
--- a/src/spa/components/AwardsGridSection.tsx
+++ b/src/spa/components/AwardsGridSection.tsx
@@ -54,6 +54,16 @@ const isGoldeneBavariaCard = (card: ResolvedAwardCard) =>
   normalizeLookupText(card.title).includes('goldene') ||
   normalizeLookupText(card.label).includes('goldene');
 
+const awardAnchorId = (card: ResolvedAwardCard) => {
+  const lookup = normalizeLookupText(`${card.title} ${card.label} ${card.articleCta?.url}`);
+
+  if (lookup.includes('goldene-bavaria') || lookup.includes('goldene')) return 'goldene-bavaria';
+  if (lookup.includes('roland-berger') || lookup.includes('roland berger')) return 'roland-berger-zukunftspreis';
+  if (lookup.includes('bavarian-future-award') || lookup.includes('bavarian future award')) return 'bavarian-future-award';
+
+  return undefined;
+};
+
 const splitFeaturedAwardCard = (cards: ResolvedAwardCard[], enabled: boolean) => {
   if (!enabled) return { featuredCard: null, supportingCards: cards };
 
@@ -81,7 +91,7 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) {
   const isContainedImage = isContainedAwardImage(imageFilename);
 
   return (
-    <article aria-label={fallbackText(card.title, 'Goldene Bavaria')} style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(320px, 1fr)', borderBottom: '1px solid rgba(3,9,58,0.1)' }}>
+    <article id={awardAnchorId(card)} aria-label={fallbackText(card.title, 'Goldene Bavaria')} style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(320px, 1fr)', borderBottom: '1px solid rgba(3,9,58,0.1)', scrollMarginTop: 80 }}>
       <div style={{ position: 'relative', height: isMobile ? 180 : 600, background: AWARD_ARTWORK_EDGE_NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
         <Image unoptimized
           src={mediaUrl(card.image, `/images/${imageFilename}`)}
@@ -99,15 +109,15 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) {
         <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(3,9,58,0.42), transparent 42%)', pointerEvents: 'none' }} />
       </div>
 
-      <div style={{ background: NAVY, color: '#fff', padding: isMobile ? '24px 24px 30px' : '34px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-        <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(239,191,4,0.86)', marginBottom: 16 }}>
+      <div style={{ background: '#fff', color: '#101828', padding: isMobile ? '24px 24px 30px' : '34px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+        <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#4A8FC9', marginBottom: 16 }}>
           {fallbackText(card.label, 'Auszeichnung 01')}
         </span>
-        <h3 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.7rem, 8vw, 2.8rem)' : 'clamp(2.1rem, 3.2vw, 3.3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.98, margin: '0 0 14px', overflowWrap: 'anywhere' }}>
+        <h3 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.7rem, 8vw, 2.8rem)' : 'clamp(2.1rem, 3.2vw, 3.3rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 0.98, margin: '0 0 14px', overflowWrap: 'anywhere' }}>
           <Lines text={fallbackText(card.title, '')} />
         </h3>
         <div style={{ width: 44, height: 2, background: GOLD, marginBottom: 18 }} />
-        <p style={{ fontFamily: FB, fontSize: isMobile ? 16 : 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.6, margin: 0, maxWidth: 560 }}>
+        <p style={{ fontFamily: FB, fontSize: isMobile ? 16 : 17, color: 'rgba(16,24,40,0.62)', lineHeight: 1.6, margin: 0, maxWidth: 560 }}>
           {fallbackText(card.description, '')}
         </p>
 
@@ -144,8 +154,8 @@ function FeaturedAwardCard({ card }: { card: ResolvedAwardCard }) {
               alignItems: 'center',
               justifyContent: 'center',
               gap: 8,
-              color: '#fff',
-              border: '1px solid rgba(255,255,255,0.24)',
+              color: NAVY,
+              border: '1px solid rgba(3,9,58,0.18)',
               fontFamily: FF,
               fontSize: 13,
               fontWeight: 700,
@@ -190,6 +200,7 @@ function SupportingAwardCards({
         return (
           <article
             key={`${fallbackText(card.title, 'award')}-${index}`}
+            id={awardAnchorId(card)}
             style={{
               display: 'flex',
               flexDirection: 'column',
@@ -197,6 +208,7 @@ function SupportingAwardCards({
               borderRight: !isMobile && !isLast ? '1px solid rgba(3,9,58,0.1)' : 'none',
               borderBottom: isMobile && !isLast ? '1px solid rgba(3,9,58,0.1)' : 'none',
               background: isDarkCard ? NAVY : followsFeaturedCard ? '#fff' : 'rgba(255,255,255,0.72)',
+              scrollMarginTop: 80,
             }}
           >
             <div style={{ height: isMobile ? 220 : 260, background: usesGoldeneBavariaArtwork ? AWARD_ARTWORK_EDGE_NAVY : imageFilename.includes('roland-berger') ? '#DDE7E2' : NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
@@ -317,7 +329,7 @@ export default function AwardsGridSection({ content, featuredGoldeneBavaria = fa
       </section>
 
       {featuredCard && supportingCards.length > 0 ? (
-        <section aria-label="Weitere Auszeichnungen" style={{ background: '#fff', position: 'relative', overflow: 'hidden', padding: isMobile ? '40px 0 56px' : '64px 0 80px', borderTop: '1px solid rgba(17,29,85,0.08)' }}>
+        <section id="weitere-auszeichnungen" aria-label="Weitere Auszeichnungen" style={{ background: '#fff', position: 'relative', overflow: 'hidden', padding: isMobile ? '40px 0 56px' : '64px 0 80px', borderTop: '1px solid rgba(17,29,85,0.08)', scrollMarginTop: 80 }}>
           <div style={{ padding: isMobile ? '0 24px 32px' : '0 80px 48px' }}>
             <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1fr)', gap: isMobile ? 16 : 56, alignItems: 'end' }}>
               <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3.2vw, 2.7rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0, overflowWrap: 'anywhere' }}>
diff --git a/src/spa/pages/Netzwerk.tsx b/src/spa/pages/Netzwerk.tsx
index 465c73d..3778951 100644
--- a/src/spa/pages/Netzwerk.tsx
+++ b/src/spa/pages/Netzwerk.tsx
@@ -840,8 +840,7 @@ const Netzwerk: React.FC = () => {
                 </div>
               </div>
             )}
-            <div style={{ padding: isMobile ? '28px 20px' : '24px 48px 32px 40px', flex: 1, display: 'flex', flexDirection: 'column', minHeight: isMobile ? 560 : 0, position: 'relative', zIndex: 1 }}>
-              <span style={{ fontFamily: FF, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, color: 'rgba(17,29,85,0.5)', display: 'block', marginBottom: 8 }}>{fallbackText(sponsoring.formEyebrow, netzwerkContent.sponsoring.formEyebrow)}</span>
+            <div id="sponsoring-form" style={{ padding: isMobile ? '28px 20px' : '24px 48px 32px 40px', flex: 1, display: 'flex', flexDirection: 'column', minHeight: isMobile ? 560 : 0, position: 'relative', zIndex: 1, scrollMarginTop: 80 }}>
               <SponsoringForm theme="gold" content={cms.sponsoringForm} />
             </div>
           </div>