font sizes

components/blog/ChatBubble.tsx

@@ -41,8 +41,8 @@ export default function ChatBubble({
       {/* Message Bubble */}
       <div className={`flex flex-col max-w-[85%] ${isRight ? 'items-end' : 'items-start'}`}>
         <div className="flex items-baseline gap-2 mb-1">
-          <span className="text-sm font-bold text-text-primary">{author}</span>
-          {role && <span className="text-xs text-text-secondary">{role}</span>}
+          <span className="text-sm md:text-base font-bold text-text-primary">{author}</span>
+          {role && <span className="text-xs md:text-sm text-text-secondary">{role}</span>}
         </div>
         
         <div className={`
@@ -52,7 +52,7 @@ export default function ChatBubble({
             : 'bg-white text-text-primary rounded-tl-none border-neutral-200'
           }
         `}>
-          <div className={`prose prose-lg max-w-none ${isRight ? 'prose-invert' : ''}`}>
+          <div className={`prose prose-base md:prose-lg max-w-none ${isRight ? 'prose-invert' : ''}`}>
             {children}
           </div>
           

components/blog/HighlightBox.tsx

@@ -20,7 +20,7 @@ export default function HighlightBox({ title, children, color = 'primary' }: Hig
       <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
       
       {title && (
-        <h3 className="text-2xl font-bold text-text-primary mb-6 flex items-center gap-4 relative">
+        <h3 className="text-xl md:text-2xl font-bold text-text-primary mb-6 flex items-center gap-4 relative">
           <span className="relative">
             {title}
             {color === 'accent' && (
@@ -32,7 +32,7 @@ export default function HighlightBox({ title, children, color = 'primary' }: Hig
           </span>
         </h3>
       )}
-      <div className="prose prose-lg max-w-none relative z-10">
+      <div className="prose prose-base md:prose-lg max-w-none relative z-10">
         {children}
       </div>
     </div>

components/blog/SplitHeading.tsx

@@ -14,7 +14,7 @@ export default function SplitHeading({ children, className = '', id }: SplitHead
       id={id}
       className={className}
     >
-      <h2 className="text-2xl md:text-3xl font-bold leading-tight text-text-primary">
+      <h2 className="text-xl md:text-2xl font-bold leading-tight text-text-primary">
         {children}
       </h2>
     </div>

components/blog/TableOfContents.tsx

@@ -44,7 +44,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
   return (
     <nav className="hidden lg:block w-full ml-12">
       <div className="relative pl-6 border-l border-neutral-200">
-        <h4 className="text-xs font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
+        <h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
           {locale === 'de' ? 'Inhalt' : 'Table of Contents'}
         </h4>
         <ul className="space-y-4">
@@ -60,7 +60,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
               <a
                 href={`#${heading.id}`}
                 className={cn(
-                  "text-sm transition-all duration-300 hover:text-primary block leading-snug",
+                  "text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug",
                   activeId === heading.id
                     ? "text-primary font-bold translate-x-1"
                     : "text-text-secondary font-medium hover:translate-x-1"