feat(blocks): data-block PascalCase identifier on every CMS block

Adds data-block="PascalName" alongside existing data-block-type
snake_case so blocks can be located via [data-block="Calendar"] etc.
in DevTools. Snake-case attribute kept for backward compat.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/lib/components/blocks/FilesBlock.svelte

@@ -106,7 +106,7 @@
   );
 </script>
 
-<div class="files-block {layoutClasses}" data-block-type="files" data-block-slug={block._slug}>
+<div class="files-block {layoutClasses}" data-block="Files" data-block-type="files" data-block-slug={block._slug}>
   {#if block.headline}
     <h3 class="mb-3 text-lg font-semibold">{block.headline}</h3>
   {/if}

src/lib/components/blocks/HeadlineBlock.svelte

@@ -15,7 +15,7 @@
   const Tag = $derived((block.tag || "h2") as "h1" | "h2" | "h3" | "h4" | "h5" | "h6");
 </script>
 
-<div class={layoutClasses} data-block-type="headline" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Headline" data-block-type="headline" data-block-slug={block._slug}>
   <svelte:element
     this={Tag}
     class={alignClass}

src/lib/components/blocks/HtmlBlock.svelte

@@ -9,7 +9,7 @@
 
 <div
   class="{layoutClasses} content-html"
-  data-block-type="html"
+  data-block="Html" data-block-type="html"
   data-block-slug={block._slug}
 >
   {@html block.html ?? ""}

src/lib/components/blocks/IframeBlock.svelte

@@ -32,7 +32,7 @@
   }
 </script>
 
-<div class={layoutClasses} data-block-type="iframe" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Iframe" data-block-type="iframe" data-block-slug={block._slug}>
   {#if src}
     <div class="relative aspect-video w-full overflow-hidden rounded-xs bg-stein-100">
       <iframe

src/lib/components/blocks/ImageBlock.svelte

@@ -40,7 +40,7 @@
   );
 </script>
 
-<div class={layoutClasses} data-block-type="image" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Image" data-block-type="image" data-block-slug={block._slug}>
   {#if rawSrc}
     <figure class="max-w-[400px]">
       <RustyImage

src/lib/components/blocks/ImageGalleryBlock.svelte

@@ -155,7 +155,7 @@
 
 <svelte:window onkeydown={onModalKey} />
 
-<div class={layoutClasses} data-block-type="image_gallery" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="ImageGallery" data-block-type="image_gallery" data-block-slug={block._slug}>
   {#if descriptionHtml}
     <div class="markdown max-w-none prose prose-zinc mb-4">
       {@html descriptionHtml}

src/lib/components/blocks/LinkListBlock.svelte

@@ -28,7 +28,7 @@
   );
 </script>
 
-<div class="link-list {layoutClasses}" data-block-type="link_list" data-block-slug={block._slug}>
+<div class="link-list {layoutClasses}" data-block="LinkList" data-block-type="link_list" data-block-slug={block._slug}>
   {#if block.headline}
     <h3 class="mb-3 text-sm font-semibold tracking-wide uppercase">{block.headline}</h3>
   {/if}

src/lib/components/blocks/MarkdownBlock.svelte

@@ -24,7 +24,7 @@
 
 <div
   class={layoutClasses}
-  data-block-type="markdown"
+  data-block="Markdown" data-block-type="markdown"
   data-markdown-id={block.name}
   data-block-slug={block._slug}
 >

src/lib/components/blocks/OpnFormBlock.svelte

@@ -82,7 +82,7 @@
 
 <div
   class="{layoutClasses} content-opnform w-[calc(100%+2rem)] max-w-none -mx-4 min-w-0 overflow-visible border border-stein-200 lg:rounded-lg px-0 py-3 md:w-[calc(100%+3rem)] md:-mx-6 md:px-4 md:py-4"
-  data-block-type="opnform"
+  data-block="OpnForm" data-block-type="opnform"
   data-block-slug={block._slug}
 >
   {#if iframeSrc}

src/lib/components/blocks/OrganisationsBlock.svelte

@@ -129,7 +129,7 @@
   </Card>
 {/snippet}
 
-<div class={layoutClasses} data-block-type="organisations" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Organisations" data-block-type="organisations" data-block-slug={block._slug}>
   {#if block.headline}
     <h3
       class={compact ? "mb-2 text-lg font-semibold text-stein-900" : "mb-4"}

src/lib/components/blocks/PostOverviewBlock.svelte

@@ -40,7 +40,7 @@
 {#if hasContent}
 <div
   class="post-overview mb-4 {layoutClasses} {className}"
-  data-block-type="post_overview"
+  data-block="PostOverview" data-block-type="post_overview"
   data-block-slug={block._slug}
 >
   {#if block.headline}

src/lib/components/blocks/QuoteBlock.svelte

@@ -39,7 +39,7 @@
 {:else}
     <div
         class={layoutClasses}
-        data-block-type="quote"
+        data-block="Quote" data-block-type="quote"
         data-block-slug={block._slug}
     >
         {@render quoteMarkup()}

src/lib/components/blocks/QuoteCarouselBlock.svelte

@@ -68,7 +68,7 @@
 
 <div
   class="quote-carousel {layoutClasses}"
-  data-block-type="quote_carousel"
+  data-block="QuoteCarousel" data-block-type="quote_carousel"
   data-block-slug={block._slug}
   onmouseenter={() => (paused = true)}
   onmouseleave={() => (paused = false)}

src/lib/components/blocks/SearchableTextBlock.svelte

@@ -160,7 +160,7 @@
 
 <div
   class="searchable-text flex flex-col gap-0 border border-stein-200 bg-stein-50 {layoutClasses} {className}"
-  data-block-type="searchable_text"
+  data-block="SearchableText" data-block-type="searchable_text"
   data-block-slug={block._slug}
 >
   <div class="p-4 md:p-6">

src/lib/components/blocks/YoutubeVideoBlock.svelte

@@ -84,7 +84,7 @@
   const hasEmbed = $derived(embedUrl != null);
 </script>
 
-<div class={layoutClasses} data-block-type="youtube_video" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="YoutubeVideo" data-block-type="youtube_video" data-block-slug={block._slug}>
   {#if hasEmbed}
     <div class="aspect-video w-full overflow-hidden rounded-xs bg-stein-100">
       <iframe

src/lib/components/blocks/YoutubeVideoGalleryBlock.svelte

@@ -145,7 +145,7 @@
 
 <div
   class={layoutClasses}
-  data-block-type="youtube_video_gallery"
+  data-block="YoutubeVideoGallery" data-block-type="youtube_video_gallery"
   data-block-slug={block._slug}
 >
   {#if block.title}