feat: add anchor IDs and scroll margin for award cards and sponsoring form

2026-07-13 20:27:37 +02:00
parent b372b23b0c
commit 98af6423c5
2 changed files with 21 additions and 10 deletions
--- 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' }}>
--- 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>