fix(ui): resolve MDX paragraph line-height inheritance, implement drag-to-scroll slider, disable UI text selection

Former-commit-id: 4d03da2ca22a0119d156db12c9c1722bbba5a29e

components/blocks/CompetenceBentoGrid.tsx

@@ -93,7 +93,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             const isAccent = item.size === 'accent';
             const imgSrc = item.image?.url;
             
-            let gridClasses = "rounded-2xl overflow-hidden relative group ";
+            let gridClasses = "rounded-2xl overflow-hidden relative group select-none ";
             if (isLarge) gridClasses += "md:col-span-2 md:row-span-2";
             else if (isMedium) gridClasses += "md:col-span-2 lg:col-span-2";
             else if (isAccent) gridClasses += "md:col-span-1 bg-primary text-white p-6 md:p-8 flex flex-col justify-center border-none shadow-md";

components/blocks/ReferencesSlider.tsx

@@ -36,6 +36,9 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   const { data } = props;
   const references = props.references || [];
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [startX, setStartX] = React.useState(0);
+  const [scrollLeft, setScrollLeft] = React.useState(0);
   
   const badge = props.badge || data?.badge || 'Ausgewählte Projekte';
   const title = props.title || data?.title || 'Referenzen & Erfolge';
@@ -53,8 +56,31 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
     '/assets/photos/DSC00010.JPG',
   ];
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (!containerRef.current) return;
+    setIsDragging(true);
+    setStartX(e.pageX - containerRef.current.offsetLeft);
+    setScrollLeft(containerRef.current.scrollLeft);
+  };
+
+  const onMouseLeave = () => {
+    setIsDragging(false);
+  };
+
+  const onMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const onMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging || !containerRef.current) return;
+    e.preventDefault();
+    const x = e.pageX - containerRef.current.offsetLeft;
+    const walk = (x - startX) * 2; // Scroll-fast
+    containerRef.current.scrollLeft = scrollLeft - walk;
+  };
+
   return (
-    <section className="py-24 bg-neutral-dark text-white overflow-hidden relative">
+    <section className="py-24 bg-neutral-dark text-white overflow-hidden relative select-none">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
       <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-end gap-6">
@@ -70,7 +96,11 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
       <div className="relative z-10">
         <div 
           ref={containerRef}
-          className="flex gap-6 overflow-x-auto pb-12 pt-4 snap-x snap-mandatory px-[calc((100vw-min(100%,1280px))/2)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+          onMouseDown={onMouseDown}
+          onMouseLeave={onMouseLeave}
+          onMouseUp={onMouseUp}
+          onMouseMove={onMouseMove}
+          className={`flex gap-6 overflow-x-auto pb-12 pt-4 px-[calc((100vw-min(100%,1280px))/2)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
         >
           {references.map((ref, i) => {
             const imgSrc = (ref.image && typeof ref.image === 'object' && ref.image.url) 
@@ -84,7 +114,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                 whileInView={{ opacity: 1, x: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: i * 0.1, duration: 0.6, ease: "easeOut" }}
-                className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group cursor-pointer"
+                className="flex-shrink-0 w-[320px] md:w-[480px] snap-center group pointer-events-auto"
               >
                 <div className="relative aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl">
                   <Image
@@ -92,11 +122,11 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                     alt={ref.title}
                     fill
                     sizes="(max-width: 768px) 320px, 480px"
-                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out"
+                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
                   />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
                   
-                  <div className="absolute bottom-6 left-8 right-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
+                  <div className="absolute bottom-6 left-8 right-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none">
                     <span className="inline-block py-1.5 px-4 rounded-full bg-primary/30 backdrop-blur-md text-white text-xs font-bold uppercase tracking-widest mb-3 border border-primary/50">
                       {ref.category}
                     </span>

components/blocks/SubCompanyTiles.tsx

@@ -99,7 +99,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
               >
                 <CardWrapper 
                   {...wrapperProps}
-                  className={`group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full sm:rounded-xl ${
+                  className={`group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full sm:rounded-xl select-none ${
                     isCurrent 
                       ? 'border-2 border-primary shadow-[0_0_30px_rgba(17,124,97,0.15)] cursor-default' 
                       : 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer'

components/ui/Heading.tsx

@@ -32,8 +32,8 @@ export function Heading({
   const effectiveSize = size || String(level) as HeadingSize;
   
   const sizes: Record<string, string> = {
-    'hero': 'font-heading text-4xl md:text-5xl lg:text-6xl font-black tracking-tight leading-[0.9]',
-    'section': 'font-heading text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight leading-[0.95]',
+    'hero': 'font-heading text-4xl md:text-5xl lg:text-6xl font-black tracking-tight !leading-[0.9]',
+    'section': 'font-heading text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight !leading-[0.95]',
     'subsection': 'font-heading text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight leading-tight',
     'card': 'text-xl md:text-2xl font-bold leading-snug',
     'small': 'text-lg font-semibold leading-snug',