design

src/components/BlogPostClient.tsx

@@ -87,9 +87,9 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
         }`}
       >
         <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
-          <button 
+          <button
             onClick={handleBack}
-            className="flex items-center gap-2 text-slate-700 hover:text-slate-900 transition-colors duration-200 group"
+            className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 group"
             aria-label="Back to home"
           >
             <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -104,7 +104,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
             </span>
             <button
               onClick={handleShare}
-              className="share-button-top flex items-center gap-1.5 px-3 py-1.5 bg-slate-50 hover:bg-slate-900 hover:text-white border border-slate-100 hover:border-slate-900 transition-all duration-200"
+              className="share-button-top flex items-center gap-1.5 px-3 py-1.5 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
               aria-label="Share this post"
             >
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -116,9 +116,9 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
       </nav>
 
       <div className="mt-16 pt-8 border-t border-slate-50 text-center">
-        <button 
+        <button
           onClick={handleBack}
-          className="inline-flex items-center gap-2 px-8 py-4 bg-white border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white transition-all duration-300 font-bold uppercase tracking-widest text-xs group"
+          className="btn btn-primary group"
         >
           <svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />

src/components/FileExample.tsx

@@ -138,7 +138,7 @@ export const FileExample: React.FC<FileExampleProps> = ({
         <div className="flex items-center gap-1 flex-shrink-0">
           <button
             type="button"
-            className={`copy-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors ${isCopied ? 'copied' : ''}`}
+            className={`copy-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${isCopied ? 'copied' : ''}`}
             onClick={handleCopy}
             title="Copy to clipboard"
             aria-label={`Copy ${filename} to clipboard`}
@@ -156,7 +156,7 @@ export const FileExample: React.FC<FileExampleProps> = ({
 
           <button
             type="button"
-            className="download-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors"
+            className="download-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
             onClick={handleDownload}
             title="Download file"
             aria-label={`Download ${filename}`}

src/components/FileExamplesList.tsx

@@ -49,7 +49,7 @@ export const FileExamplesList: React.FC<FileExamplesListProps> = ({ groups }) =>
 
               <button
                 type="button"
-                className="toggle-all-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white text-slate-500 hover:text-slate-900 transition-colors"
+                className="toggle-all-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
                 title="Toggle all"
                 onClick={() => toggleAllInGroup(group.groupId, group.files)}
               >

src/components/Header.tsx

@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
           </Link>
           <Link
             href="/contact"
-            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 transition-all duration-300"
+            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
           >
             Anfrage
           </Link>

src/components/PageHeader.tsx

@@ -28,7 +28,10 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
       )}
       
       {backLink && (
-        <Link href={backLink.href} className="inline-flex items-center gap-3 text-slate-400 hover:text-slate-900 mb-12 transition-all duration-300 font-bold text-[10px] uppercase tracking-[0.3em] group">
+        <Link
+          href={backLink.href}
+          className="inline-flex items-center gap-3 px-4 py-2 border border-slate-200 rounded-full text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 mb-12 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 font-bold text-[10px] uppercase tracking-[0.3em] group"
+        >
           <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
         </Link>
       )}

src/components/SearchBar.tsx

@@ -65,7 +65,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
         {value && (
           <button
             onClick={clearSearch}
-            className="absolute right-6 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
+            className="absolute right-4 top-1/2 -translate-y-1/2 px-3 py-1 border border-slate-200 rounded-full text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-[calc(50%+2px)] hover:shadow-lg hover:shadow-slate-100"
             aria-label="Clear search"
             type="button"
           >

src/components/Tag.tsx

@@ -11,7 +11,7 @@ export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
   return (
     <Link
       href={`/tags/${tag}`}
-      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 transition-all duration-300 ${className}`}
+      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${className}`}
     >
       {tag}
     </Link>

src/styles/global.css

@@ -178,15 +178,15 @@
 
   /* Buttons */
   .btn {
-    @apply inline-block px-4 py-2 bg-slate-900 text-white font-sans font-medium hover:bg-slate-700 transition-colors rounded;
+    @apply inline-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
   }
 
   .btn-primary {
-    @apply bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded transition-colors;
+    @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
   }
 
   .btn-secondary {
-    @apply bg-white text-slate-700 hover:bg-slate-100 border border-slate-300 px-3 py-1.5 rounded transition-colors;
+    @apply border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
   }
 
   /* Hide scrollbars */