diff --git a/apps/web/app/about/page.tsx b/apps/web/app/about/page.tsx
index c6d0a81..3fc1ccd 100644
--- a/apps/web/app/about/page.tsx
+++ b/apps/web/app/about/page.tsx
@@ -39,16 +39,16 @@ export default function AboutPage() {
       <AbstractCircuit />
 
       {/* Hero Section */}
-      <section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50">
+      <section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50">
         <Container variant="narrow" className="relative z-10">
-          <div className="flex flex-col items-center text-center space-y-12">
+          <div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
             <Reveal>
               <div className="relative">
                 {/* Structural rings around avatar */}
-                <div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
-                <div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
+                <div className="absolute inset-0 -m-6 md:-m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
+                <div className="absolute inset-0 -m-3 md:-m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
 
-                <div className="relative w-40 h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
+                <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                   <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
                     <img
                       src={getImgproxyUrl("/marc-mintel.png", {
@@ -65,14 +65,14 @@ export default function AboutPage() {
               </div>
             </Reveal>
 
-            <div className="space-y-6 max-w-3xl">
+            <div className="space-y-3 md:space-y-6 max-w-3xl">
               <Reveal delay={0.1}>
-                <div className="flex items-center justify-center gap-4 mb-4">
-                  <div className="h-px w-8 bg-slate-900"></div>
-                  <MonoLabel className="text-slate-900">
+                <div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
+                  <div className="h-px w-6 md:w-8 bg-slate-900"></div>
+                  <MonoLabel className="text-slate-900 text-[10px] md:text-sm">
                     Digital Architect
                   </MonoLabel>
-                  <div className="h-px w-8 bg-slate-900"></div>
+                  <div className="h-px w-6 md:w-8 bg-slate-900"></div>
                 </div>
               </Reveal>
               <PageHeader
@@ -89,7 +89,7 @@ export default function AboutPage() {
         </Container>
 
         {/* Connector to first section */}
-        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" />
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-12 md:h-16 bg-gradient-to-b from-transparent to-slate-200" />
       </section>
 
       {/* Section 01: Story */}
@@ -99,17 +99,17 @@ export default function AboutPage() {
         borderTop
         illustration={<ExperienceIllustration className="w-24 h-24" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Vom Designer <br />
               <span className="text-slate-400">zum Architekten.</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
             <Reveal delay={0.1}>
-              <div className="space-y-8">
+              <div className="space-y-6 md:space-y-8">
                 <LeadText className="text-xl md:text-2xl text-slate-400">
                   Agenturen, Konzerne, Startups – ich habe die Branche von allen
                   Seiten kennengelernt. Was hängen geblieben ist:{" "}
@@ -140,7 +140,7 @@ export default function AboutPage() {
                 padding="normal"
                 className="group"
               >
-                <H4 className="text-2xl mb-6">
+                <H4 className="text-xl mb-6">
                   Heute: Direkte Zusammenarbeit ohne Reibungsverluste.
                 </H4>
                 <div className="flex flex-wrap gap-3">
@@ -170,7 +170,7 @@ export default function AboutPage() {
       >
         <div className="space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               So läuft ein Projekt <br />
               <span className="text-slate-400">bei mir ab.</span>
             </H3>
@@ -204,7 +204,7 @@ export default function AboutPage() {
               },
             ].map((item, i) => (
               <Reveal key={i} delay={0.1 + i * 0.1}>
-                <div className="flex gap-6 py-6 group">
+                <div className="flex gap-4 md:gap-6 py-2 md:py-6 group">
                   <div className="relative z-10 shrink-0">
                     <div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
                       <span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
@@ -212,9 +212,13 @@ export default function AboutPage() {
                       </span>
                     </div>
                   </div>
-                  <div className="space-y-2 pt-1">
-                    <H4 className="text-xl">{item.title}</H4>
-                    <BodyText className="text-slate-500">{item.desc}</BodyText>
+                  <div className="space-y-1 md:space-y-2 pt-1">
+                    <H4 className="text-base md:text-xl font-bold">
+                      {item.title}
+                    </H4>
+                    <BodyText className="text-slate-500 text-sm md:text-base">
+                      {item.desc}
+                    </BodyText>
                   </div>
                 </div>
               </Reveal>
@@ -225,9 +229,9 @@ export default function AboutPage() {
 
       {/* Section 03: Philosophie – what drives me */}
       <Section number="03" title="Philosophie" borderTop>
-        <div className="space-y-16">
+        <div className="space-y-12 md:space-y-16">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Ich stehe für <br />
               <span className="text-slate-400">meine Arbeit gerade.</span>
             </H3>
@@ -236,7 +240,7 @@ export default function AboutPage() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="space-y-8">
               <Reveal delay={0.1}>
-                <LeadText className="text-xl text-slate-400">
+                <LeadText className="text-lg md:text-xl text-slate-400">
                   Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
                   liegt die Verantwortung bei mir – und ich{" "}
                   <span className="text-slate-900">
@@ -244,7 +248,7 @@ export default function AboutPage() {
                   </span>
                 </LeadText>
               </Reveal>
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 {[
                   "Vollständige Transparenz",
                   "Ein Ansprechpartner",
@@ -256,7 +260,9 @@ export default function AboutPage() {
                       <div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
                         <Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
                       </div>
-                      <Label className="text-slate-900">{item}</Label>
+                      <Label className="text-slate-900 text-xs md:text-sm">
+                        {item}
+                      </Label>
                     </div>
                   </Reveal>
                 ))}
@@ -280,9 +286,9 @@ export default function AboutPage() {
         illustration={<ContactIllustration className="w-24 h-24" />}
         effects={<GradientMesh variant="metallic" className="opacity-60" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-10 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Bereit für eine <br />
               <span className="text-slate-400">Zusammenarbeit?</span>
             </H3>
@@ -291,12 +297,12 @@ export default function AboutPage() {
           <Card
             variant="glass"
             hover={false}
-            padding="large"
+            padding="normal"
             techBorder
             className="rounded-3xl shadow-xl relative overflow-hidden group"
           >
-            <div className="relative z-10 space-y-8">
-              <LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
+            <div className="relative z-10 space-y-6 md:space-y-8">
+              <LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
                 Lassen Sie uns gemeinsam etwas bauen, das{" "}
                 <span className="text-slate-900">
                   <Marker delay={0.3} color="rgba(148,163,184,0.15)">
@@ -305,8 +311,10 @@ export default function AboutPage() {
                 </span>
               </LeadText>
 
-              <div className="pt-4">
-                <Button href="/contact">Projekt anfragen</Button>
+              <div className="pt-2 md:pt-4">
+                <Button href="/contact" className="w-full md:w-auto">
+                  Projekt anfragen
+                </Button>
               </div>
             </div>
           </Card>
diff --git a/apps/web/app/blog/[slug]/page.tsx b/apps/web/app/blog/[slug]/page.tsx
index e7c446f..f3055ea 100644
--- a/apps/web/app/blog/[slug]/page.tsx
+++ b/apps/web/app/blog/[slug]/page.tsx
@@ -37,7 +37,7 @@ export default async function BlogPostPage({
   const PostContent = PostComponents[slug];
 
   return (
-    <div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
+    <div className="flex flex-col gap-8 md:gap-12 py-8 md:py-24 overflow-hidden">
       <BlogPostClient readingTime={readingTime} title={post.title} />
 
       <PageHeader
@@ -49,24 +49,26 @@ export default async function BlogPostPage({
 
       <main id="post-content">
         <Section containerVariant="wide" className="pt-0 md:pt-0">
-          <div className="max-w-5xl mx-auto">
+          <div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
             <Card
               variant="glass"
               techBorder
-              className="relative overflow-hidden"
+              className="relative overflow-hidden rounded-none sm:rounded-3xl"
             >
               {/* Decorative background grid inside the card */}
               <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
 
-              <div className="relative z-10 px-6 py-12 md:px-16 md:py-20">
-                <div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
+              <div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md:mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
                   <div className="flex items-center gap-3">
                     <span className="w-2 h-2 rounded-full bg-slate-300" />
                     <time dateTime={post.date}>{formattedDate}</time>
                   </div>
-                  <div className="flex items-center gap-4">
-                    <span>{readingTime} min Lesezeit</span>
-                    <span className="text-slate-200">|</span>
+                  <div className="flex items-center gap-4 sm:gap-6">
+                    <div className="flex items-center gap-2">
+                      <span className="text-slate-200 hidden sm:inline">|</span>
+                      <span>{readingTime} min Lesezeit</span>
+                    </div>
                     <span>
                       {slug.substring(0, 4).toUpperCase()}-
                       {Math.floor(Math.random() * 999)}
@@ -75,11 +77,11 @@ export default async function BlogPostPage({
                 </div>
 
                 {post.tags && post.tags.length > 0 && (
-                  <div className="flex flex-wrap gap-2 mb-12">
+                  <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
                     {post.tags.map((tag, index) => (
                       <span
                         key={tag}
-                        className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest"
+                        className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
                       >
                         #{tag}
                       </span>
diff --git a/apps/web/app/case-studies/klz-cables/page.tsx b/apps/web/app/case-studies/klz-cables/page.tsx
index e8bc833..dc98f67 100644
--- a/apps/web/app/case-studies/klz-cables/page.tsx
+++ b/apps/web/app/case-studies/klz-cables/page.tsx
@@ -46,7 +46,7 @@ export default function KLZCablesCaseStudy() {
       </motion.div>
 
       {/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
-      <section className="relative min-h-[40vh] py-20 overflow-hidden border-b border-slate-100 bg-white">
+      <section className="relative min-h-[30vh] md:min-h-[40vh] py-10 md:py-20 overflow-hidden border-b border-slate-100 bg-white">
         <motion.div
           style={{ y: heroY, rotate: gridRotate }}
           className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
@@ -56,7 +56,7 @@ export default function KLZCablesCaseStudy() {
           <Reveal>
             <Link
               href="/case-studies"
-              className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
+              className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
             >
               <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
               Zurück
@@ -82,23 +82,25 @@ export default function KLZCablesCaseStudy() {
               </div>
             </Reveal>
 
-            <div className="space-y-12">
+            <div className="space-y-8 md:space-y-12">
               <GlitchText
                 as="h1"
-                className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900"
+                className="text-4xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900"
               >
                 KLZ Cables
               </GlitchText>
-              <br />
-              <span className="text-slate-100">Case Study.</span>
+              <br className="hidden md:block" />
+              <span className="text-slate-100 text-3xl md:text-6xl font-bold tracking-tighter">
+                Case Study.
+              </span>
 
               <Reveal delay={0.2} direction="right" blur>
-                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
-                  <LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium">
-                    Engineering eines <br />
+                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-6 md:pl-12">
+                  <LeadText className="text-lg md:text-4xl leading-tight text-slate-900 font-medium">
+                    Engineering eines <br className="hidden md:block" />
                     <Marker delay={0.2}>B2B Commerce Systems.</Marker>
                   </LeadText>
-                  <BodyText className="mt-6 text-lg md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
+                  <BodyText className="mt-4 md:mt-6 text-base md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
                     Vom statischen Altsystem zum industriellen Standard. Ich
                     habe das KLZ-System auf das Wesentliche reduziert: Hardened
                     Infrastructure, parametrische Datenpflege und zero
@@ -109,20 +111,24 @@ export default function KLZCablesCaseStudy() {
             </div>
 
             <Reveal delay={0.4} direction="up" scale={0.98} blur>
-              <div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100">
-                <div className="space-y-2">
-                  <Label className="text-slate-400">Data Integrity</Label>
-                  <div className="flex items-center gap-3">
-                    <div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
-                    <span className="text-2xl font-bold font-mono text-slate-900 tracking-tight">
+              <div className="flex flex-wrap gap-8 md:gap-24 pt-6 md:pt-12 border-t border-slate-100">
+                <div className="space-y-1 md:space-y-2">
+                  <Label className="text-slate-400 text-[10px] md:text-xs">
+                    Data Integrity
+                  </Label>
+                  <div className="flex items-center gap-2 md:gap-3">
+                    <div className="w-2 h-2 md:w-2.5 md:h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
+                    <span className="text-base md:text-2xl font-bold font-mono text-slate-900 tracking-tight">
                       Relational Data
                     </span>
                   </div>
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-slate-400">Security Layer</Label>
-                  <div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
-                    <ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" />
+                <div className="space-y-1 md:space-y-2">
+                  <Label className="text-slate-400 text-[10px] md:text-xs">
+                    Security Layer
+                  </Label>
+                  <div className="flex items-center gap-2 md:gap-3 text-base md:text-2xl font-bold font-mono text-slate-900">
+                    <ShieldCheck className="w-5 h-5 md:w-6 md:h-6 text-[rgba(129,199,132,1)]" />
                     <span>WP + Varnish</span>
                   </div>
                 </div>
@@ -146,20 +152,20 @@ export default function KLZCablesCaseStudy() {
           ))}
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
-          <div className="md:col-span-12 mb-12">
-            <H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-24 items-start">
+          <div className="md:col-span-12 mb-4 md:mb-12">
+            <H2 className="text-3xl md:text-8xl tracking-tighter mb-4 md:mb-12">
               <GlitchText>Architektur-</GlitchText> <br />
               Refactor.
             </H2>
           </div>
-          <div className="md:col-span-7 space-y-12">
+          <div className="md:col-span-7 space-y-8 md:space-y-12">
             <Reveal delay={0.1} direction="up" blur>
-              <div className="space-y-10">
-                <BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500">
+              <div className="space-y-6 md:space-y-10">
+                <BodyText className="text-xl md:text-2xl leading-relaxed font-serif italic text-slate-500">
                   Vom statischen HTML zur zentralen Daten-Instanz.
                 </BodyText>
-                <BodyText className="text-xl text-slate-600 leading-relaxed">
+                <BodyText className="text-lg md:text-xl text-slate-600 leading-relaxed">
                   Ich habe die KLZ-Architektur radikal auf einen entkoppelten
                   High-Performance-Stack umgestellt. WordPress fungiert hier
                   nicht als CMS-Baukasten, sondern speichert alle technischen
@@ -172,16 +178,16 @@ export default function KLZCablesCaseStudy() {
               </div>
             </Reveal>
           </div>
-          <div className="md:col-span-5 relative">
+          <div className="md:col-span-5 relative mt-8 md:mt-0">
             <Reveal delay={0.3} direction="right" scale={0.98} blur>
               <motion.div
                 whileHover={{ y: -5, scale: 1.01 }}
                 transition={{ type: "spring", stiffness: 200, damping: 25 }}
-                className="p-12 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-12 relative overflow-hidden group shadow-sm text-left"
+                className="p-6 md:p-12 bg-slate-50 rounded-[2.5rem] md:rounded-[3rem] border border-slate-100 space-y-6 md:space-y-12 relative overflow-hidden group shadow-sm text-left"
               >
-                <div className="space-y-8 relative z-10">
+                <div className="space-y-6 md:space-y-8 relative z-10">
                   <Label className="text-slate-900">System Metriken</Label>
-                  <div className="space-y-8">
+                  <div className="space-y-6 md:space-y-8">
                     {[
                       {
                         label: "Edge Caching",
@@ -204,11 +210,11 @@ export default function KLZCablesCaseStudy() {
                         initial={{ x: -20, opacity: 0 }}
                         whileInView={{ x: 0, opacity: 1 }}
                         transition={{ delay: 0.5 + i * 0.1, duration: 0.5 }}
-                        className="flex gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
+                        className="flex gap-4 md:gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
                       >
                         <div className="shrink-0 mt-1">{item.icon}</div>
                         <div className="space-y-1">
-                          <MonoLabel className="text-[10px] text-slate-400">
+                          <MonoLabel className="text-[9px] md:text-[10px] text-slate-400">
                             {item.label}
                           </MonoLabel>
                           <BodyText className="text-base font-bold text-slate-900">
@@ -226,15 +232,15 @@ export default function KLZCablesCaseStudy() {
       </Section>
 
       {/* --- SHOWCASE: LANDING --- */}
-      <section className="py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
+      <section className="py-12 md:py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
         <div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
           <Reveal direction="none" blur>
-            <div className="relative mb-16 flex justify-between items-end">
+            <div className="relative mb-8 md:mb-16 flex justify-between items-end">
               <div className="space-y-6">
                 <Label className="text-slate-500">
                   Infrastructure Validation
                 </Label>
-                <H3 className="text-5xl md:text-8xl tracking-tighter">
+                <H3 className="text-3xl md:text-8xl tracking-tighter">
                   <GlitchText>Global Hub.</GlitchText>
                 </H3>
               </div>
@@ -254,7 +260,9 @@ export default function KLZCablesCaseStudy() {
             >
               <IframeSection
                 src="/showcase/klz-cables.com/index.html"
-                height="850px"
+                height="400px"
+                mobileHeight="350px"
+                desktopHeight="850px"
                 desktopWidth={1920}
                 allowScroll
                 browserFrame
@@ -273,18 +281,22 @@ export default function KLZCablesCaseStudy() {
         borderBottom
         containerVariant="wide"
       >
-        <div className="grid grid-cols-1 gap-16">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
-            <Reveal direction="left" blur>
-              <div className="space-y-6">
-                <Label className="text-slate-400">Asset Pipelines</Label>
-                <H3 className="text-4xl md:text-6xl tracking-tighter">
-                  Automated Documentation.
-                </H3>
-              </div>
-            </Reveal>
+        <div className="grid grid-cols-1 gap-8 md:gap-16">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-24 items-end">
+            <div className="md:col-span-8">
+              <Reveal direction="left" blur>
+                <div className="space-y-6 md:space-y-12">
+                  <Label className="text-slate-400 text-xs md:text-sm">
+                    Asset Pipelines
+                  </Label>
+                  <H3 className="text-2xl md:text-6xl tracking-tighter">
+                    Automated Documentation.
+                  </H3>
+                </div>
+              </Reveal>
+            </div>
             <Reveal delay={0.1} direction="right" blur>
-              <BodyText className="text-xl text-slate-500 pb-2 font-serif italic">
+              <BodyText className="text-lg md:text-xl text-slate-500 pb-2 font-serif italic leading-relaxed">
                 Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine
                 Sicherheitsanforderung. Ich habe eine automatisierte
                 Asset-Pipeline entwickelt, die technische Datenblätter
@@ -302,7 +314,9 @@ export default function KLZCablesCaseStudy() {
               <div className="relative w-full overflow-visible">
                 <IframeSection
                   src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
-                  height="1000px"
+                  height="450px"
+                  mobileHeight="400px"
+                  desktopHeight="1000px"
                   desktopWidth={1920}
                   allowScroll
                   offsetY={100}
@@ -321,9 +335,9 @@ export default function KLZCablesCaseStudy() {
         borderBottom
         containerVariant="wide"
       >
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
-          <div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
-            <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
+          <div className="lg:col-span-12 mb-4 md:mb-12 text-center lg:text-left relative z-10">
+            <H3 className="text-3xl md:text-6xl max-w-4xl tracking-tighter">
               Fokus auf <br />
               <Marker delay={0.2}>Spezifikationen.</Marker>
             </H3>
@@ -334,7 +348,7 @@ export default function KLZCablesCaseStudy() {
               <motion.div
                 whileHover={{ scale: 1.01 }}
                 transition={{ type: "spring", stiffness: 200, damping: 20 }}
-                className="relative h-[650px] w-full overflow-hidden group"
+                className="relative h-[400px] md:h-[650px] w-full overflow-hidden group"
               >
                 <IframeSection
                   src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
@@ -350,9 +364,9 @@ export default function KLZCablesCaseStudy() {
 
           <div className="lg:col-span-4 space-y-10 relative z-10">
             <Reveal delay={0.2} direction="right" blur>
-              <div className="space-y-6">
+              <div className="space-y-4 md:space-y-6">
                 <Label className="text-slate-400">Katalog-Struktur</Label>
-                <LeadText className="text-lg">
+                <LeadText className="text-base md:text-lg leading-relaxed">
                   Der Produktbereich wurde konsequent auf die Bedürfnisse
                   technischer Planer optimiert. Klare Hierarchien und der
                   Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten
@@ -360,9 +374,9 @@ export default function KLZCablesCaseStudy() {
                 </LeadText>
                 <motion.div
                   whileHover={{ x: 10 }}
-                  className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm"
+                  className="p-5 md:p-8 bg-white border border-slate-200 rounded-2xl md:rounded-3xl shadow-sm"
                 >
-                  <Layers className="w-6 h-6 text-slate-400 mb-4" />
+                  <Layers className="w-5 h-5 md:w-6 md:h-6 text-slate-400 mb-3 md:mb-4" />
                   <BodyText className="text-sm font-medium">
                     Strukturierte Aufbereitung technischer Produktdaten.
                   </BodyText>
@@ -386,7 +400,7 @@ export default function KLZCablesCaseStudy() {
             <Reveal direction="left" blur>
               <div className="space-y-6">
                 <Label className="text-slate-400">Knowledge Transfer</Label>
-                <H3 className="text-4xl md:text-6xl tracking-tighter">
+                <H3 className="text-3xl md:text-6xl tracking-tighter">
                   Insights & News.
                 </H3>
                 <BodyText className="text-xl text-slate-500 font-serif italic">
@@ -403,7 +417,7 @@ export default function KLZCablesCaseStudy() {
               <motion.div
                 whileHover={{ scale: 1.01 }}
                 transition={{ type: "spring", stiffness: 200, damping: 20 }}
-                className="relative h-[700px] w-full"
+                className="relative h-[450px] md:h-[700px] w-full"
               >
                 <IframeSection
                   src="/showcase/klz-cables.com/blog.html"
@@ -426,12 +440,12 @@ export default function KLZCablesCaseStudy() {
         borderBottom
         containerVariant="wide"
       >
-        <div className="space-y-16 text-center">
+        <div className="space-y-10 md:space-y-16 text-center">
           <Reveal direction="up" blur>
-            <H3 className="text-5xl md:text-8xl tracking-tighter">
+            <H3 className="text-3xl md:text-8xl tracking-tighter">
               System-Lifecycle.
             </H3>
-            <LeadText className="mx-auto max-w-2xl pt-6 text-xl">
+            <LeadText className="mx-auto max-w-2xl pt-2 md:pt-6 text-lg md:text-xl leading-relaxed">
               Die Migration von einer statischen Datei-Struktur zu einer
               zentralisierten Daten-Instanz eliminiert technische Schulden und
               manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie
@@ -445,7 +459,9 @@ export default function KLZCablesCaseStudy() {
               <div className="relative block w-full overflow-visible">
                 <IframeSection
                   src="/showcase/klz-cables.com/team.html"
-                  height="1100px"
+                  height="450px"
+                  mobileHeight="400px"
+                  desktopHeight="1100px"
                   desktopWidth={1440}
                   allowScroll
                   browserFrame
@@ -465,15 +481,15 @@ export default function KLZCablesCaseStudy() {
         containerVariant="wide"
         className="!pb-32"
       >
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
-          <div className="lg:col-span-5 space-y-12">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-24 items-center">
+          <div className="md:col-span-6 md:order-2">
             <Reveal direction="left" blur>
               <div className="space-y-6">
                 <Label className="text-slate-400">Interaction Layer</Label>
-                <H3 className="text-5xl md:text-7xl tracking-tighter text-slate-900">
+                <H3 className="text-3xl md:text-7xl tracking-tighter text-slate-900 leading-[1.1]">
                   Direkter Draht.
                 </H3>
-                <BodyText className="text-xl text-slate-500 font-serif italic leading-relaxed">
+                <BodyText className="text-lg md:text-xl text-slate-500 font-serif italic leading-relaxed">
                   Das Kontakt-System wurde auf maximale Reduktion getrimmt. Ein
                   deterministischer Kanal zwischen technischem Bedarf und
                   individueller Beratung – ohne Umwege, ohne Rauschen.
@@ -528,7 +544,9 @@ export default function KLZCablesCaseStudy() {
               >
                 <IframeSection
                   src="/showcase/klz-cables.com/contact.html"
-                  height="750px"
+                  height="450px"
+                  mobileHeight="400px"
+                  desktopHeight="750px"
                   desktopWidth={1200}
                   mobileWidth={390}
                   allowScroll
@@ -545,20 +563,20 @@ export default function KLZCablesCaseStudy() {
         <BackgroundGrid />
         <Container variant="normal" className="relative z-10">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
-            <div className="space-y-12">
+            <div className="space-y-8 md:space-y-12">
               <Reveal direction="left" blur>
-                <div className="space-y-4">
-                  <MonoLabel className="text-slate-400 tracking-[0.4em]">
+                <div className="space-y-3 md:space-y-6">
+                  <MonoLabel className="text-slate-400 tracking-[0.2em] md:tracking-[0.4em]">
                     CONSULTING // ENGINEERING
                   </MonoLabel>
-                  <H2 className="text-6xl md:text-8xl tracking-tighter leading-none font-bold">
+                  <H2 className="text-4xl md:text-8xl tracking-tighter leading-none font-bold">
                     Architektur <br />
                     <span className="text-slate-100">ohne Altlasten.</span>
                   </H2>
                 </div>
               </Reveal>
               <Reveal delay={0.2} direction="left" blur>
-                <BodyText className="text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
+                <BodyText className="text-xl md:text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
                   Vom Prototyp zum industriellen Standard. Ich entwickle
                   digitale Infrastrukturen, die technische Freiheit und
                   operative Stabilität garantieren – wartungsfrei und
@@ -567,13 +585,13 @@ export default function KLZCablesCaseStudy() {
               </Reveal>
             </div>
 
-            <div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-10 md:p-14 rounded-[3.5rem] space-y-12 relative group shadow-sm">
+            <div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-6 md:p-14 rounded-[3.5rem] space-y-10 md:space-y-12 relative group shadow-sm">
               <Reveal direction="right" blur>
-                <div className="inline-flex items-center gap-3 px-4 py-2 bg-white rounded-full border border-slate-200 mb-4 font-mono text-[10px] tracking-widest text-slate-500 uppercase">
+                <div className="inline-flex items-center gap-2 md:gap-3 px-3 py-1.5 md:px-4 md:py-2 bg-white rounded-full border border-slate-200 mb-4 md:mb-8 font-mono text-[9px] md:text-[10px] tracking-widest text-slate-500 uppercase">
                   <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
                   Operational Excellence
                 </div>
-                <div className="space-y-10">
+                <div className="space-y-8 md:space-y-10">
                   {[
                     {
                       title: "Hardened Infrastructure",
@@ -588,11 +606,14 @@ export default function KLZCablesCaseStudy() {
                       desc: "Plugin-freie Logik für deterministische System-Sicherheit.",
                     },
                   ].map((item, i) => (
-                    <div key={i} className="space-y-3 group/item">
-                      <MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
+                    <div
+                      key={i}
+                      className="space-y-2 md:space-y-3 group/item text-left"
+                    >
+                      <MonoLabel className="text-[9px] md:text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
                         {item.title}
                       </MonoLabel>
-                      <BodyText className="text-lg font-bold text-slate-900 leading-tight">
+                      <BodyText className="text-base md:text-lg font-bold text-slate-900 leading-tight">
                         {item.desc}
                       </BodyText>
                     </div>
@@ -604,10 +625,10 @@ export default function KLZCablesCaseStudy() {
                   href="/contact"
                   variant="outline"
                   showArrow={false}
-                  className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
+                  className="w-full py-6 md:py-8 text-base md:text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
                 >
                   Jetzt anfragen
-                  <ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
+                  <ArrowRight className="inline-block ml-3 md:ml-4 w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-4 transition-transform duration-700" />
                 </Button>
               </Reveal>
             </div>
diff --git a/apps/web/app/case-studies/page.tsx b/apps/web/app/case-studies/page.tsx
index 99f36e2..2086b05 100644
--- a/apps/web/app/case-studies/page.tsx
+++ b/apps/web/app/case-studies/page.tsx
@@ -38,29 +38,31 @@ export default function CaseStudiesPage() {
               variant="glass"
               padding="none"
               techBorder
-              className="overflow-hidden relative group min-h-[500px] flex flex-col md:flex-row"
+              className="overflow-hidden relative group min-h-[400px] md:min-h-[500px] flex flex-col md:flex-row"
             >
               {/* Brand Gradient Background */}
               <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" />
 
               {/* Left Column: Content */}
-              <div className="flex-1 p-8 md:p-12 relative z-10 flex flex-col justify-between">
-                <div className="space-y-8">
-                  <div className="flex items-center gap-4">
+              <div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
+                <div className="space-y-4 md:space-y-8">
+                  <div className="flex items-center gap-3 md:gap-4">
                     <img
                       src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
                       alt="KLZ Logo"
-                      className="h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
+                      className="h-6 md:h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
                     />
-                    <div className="h-px w-12 bg-slate-100" />
-                    <Label className="text-slate-400">Case Study 2025</Label>
+                    <div className="h-px w-8 md:w-12 bg-slate-100" />
+                    <Label className="text-slate-400 text-[9px] md:text-[10px]">
+                      Case Study 2025
+                    </Label>
                   </div>
 
-                  <div className="space-y-4">
-                    <H3 className="text-4xl md:text-6xl tracking-tighter">
+                  <div className="space-y-3 md:space-y-4">
+                    <H3 className="text-3xl md:text-6xl tracking-tighter">
                       KLZ <span className="text-slate-300">Cables</span>
                     </H3>
-                    <LeadText className="text-slate-500 text-lg md:text-xl max-w-xl leading-relaxed">
+                    <LeadText className="text-slate-500 text-base md:text-xl max-w-xl leading-relaxed">
                       Engineering eines industriellen B2B-Systems mit
                       <span className="text-slate-900 font-medium">
                         {" "}
@@ -70,12 +72,12 @@ export default function CaseStudiesPage() {
                     </LeadText>
                   </div>
 
-                  <div className="flex flex-wrap gap-2 pt-2">
+                  <div className="flex flex-wrap gap-2 pt-1 md:pt-2">
                     {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
                       (tag, i) => (
                         <span
                           key={i}
-                          className="px-2.5 py-1 border border-slate-100 bg-white/50 rounded-md text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
+                          className="px-2 py-0.5 md:px-2.5 md:py-1 border border-slate-100 bg-white/50 rounded-md text-[8px] md:text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
                         >
                           {tag}
                         </span>
@@ -84,8 +86,8 @@ export default function CaseStudiesPage() {
                   </div>
                 </div>
 
-                <div className="pt-12">
-                  <div className="inline-flex items-center gap-3 text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
+                <div className="pt-8 md:pt-12">
+                  <div className="inline-flex items-center gap-2 md:gap-3 text-[10px] md:text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
                     <span>EXPLORE PROJECT</span>
                     <ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
                   </div>
@@ -93,11 +95,11 @@ export default function CaseStudiesPage() {
               </div>
 
               {/* Right Column: Visual/Technical Decor */}
-              <div className="w-full md:w-1/3 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
-                <div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
+              <div className="w-full md:w-1/3 min-h-[150px] md:min-h-0 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
+                <div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
                   {Array.from({ length: 40 }).map((_, i) => (
                     <div key={i} className="whitespace-nowrap">
-                      {Array.from({ length: 10 })
+                      {Array.from({ length: 15 })
                         .map((_, j) => (
                           <span
                             key={j}
@@ -116,7 +118,7 @@ export default function CaseStudiesPage() {
                 </div>
 
                 {/* Abstract "Cable" lines */}
-                <div className="absolute inset-0 flex items-center justify-center p-12">
+                <div className="absolute inset-0 flex items-center justify-center p-8 md:p-12">
                   <div className="w-full h-full relative">
                     {[1, 2, 3].map((v) => (
                       <motion.div
@@ -131,7 +133,7 @@ export default function CaseStudiesPage() {
                   </div>
                 </div>
 
-                <div className="absolute bottom-8 right-8 text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
+                <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 text-[8px] md:text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
                   Industrial Grade
                 </div>
               </div>
@@ -149,12 +151,12 @@ export default function CaseStudiesPage() {
             techBorder
             className="text-center relative overflow-hidden group"
           >
-            <div className="relative z-10 space-y-6 py-8">
-              <div className="flex items-center justify-center gap-3">
+            <div className="relative z-10 space-y-4 py-4 md:py-8">
+              <div className="flex items-center justify-center gap-2 md:gap-3">
                 <div className="w-2 h-2 rounded-full bg-slate-300 animate-pulse" />
                 <Label className="text-slate-400">In Arbeit</Label>
               </div>
-              <H3 className="text-3xl text-slate-400">
+              <H3 className="text-2xl md:text-3xl text-slate-400">
                 Weitere Case Studies in Kürze.
               </H3>
               <BodyText className="text-slate-400 max-w-md mx-auto">
diff --git a/apps/web/app/contact/page.tsx b/apps/web/app/contact/page.tsx
index d7e57c7..78404c4 100644
--- a/apps/web/app/contact/page.tsx
+++ b/apps/web/app/contact/page.tsx
@@ -29,14 +29,14 @@ export default function ContactPage() {
           </>
         }
       >
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 lg:gap-24">
           {/* Form */}
-          <div className="md:col-span-7">
+          <div className="lg:col-span-7">
             <Reveal>
               <Card
                 variant="glass"
-                padding="large"
-                className="relative overflow-hidden"
+                padding="normal"
+                className="relative overflow-hidden p-5 md:p-12"
               >
                 <ContactForm />
               </Card>
@@ -44,7 +44,7 @@ export default function ContactPage() {
           </div>
 
           {/* Sidebar */}
-          <div className="md:col-span-5 space-y-8">
+          <div className="lg:col-span-5 space-y-4 md:space-y-8">
             <Reveal delay={0.2}>
               <Card
                 variant="glass"
@@ -52,12 +52,14 @@ export default function ContactPage() {
                 techBorder
                 className="group"
               >
-                <div className="space-y-4">
+                <div className="space-y-3 md:space-y-4">
                   <div className="flex items-center gap-3">
                     <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <Label className="text-slate-900">Verfügbarkeit</Label>
+                    <Label className="text-slate-900 text-xs md:text-sm">
+                      Verfügbarkeit
+                    </Label>
                   </div>
-                  <LeadText className="text-lg text-slate-400">
+                  <LeadText className="text-lg md:text-xl text-slate-400">
                     Aktuell nehme ich Projekte für{" "}
                     <span className="text-slate-900 font-bold">Q2 2026</span>{" "}
                     an.
@@ -68,11 +70,13 @@ export default function ContactPage() {
 
             <Reveal delay={0.3}>
               <Card variant="glass" padding="normal" className="group">
-                <div className="space-y-4">
-                  <Label className="text-slate-900">Direkt per E-Mail</Label>
+                <div className="space-y-3 md:space-y-4">
+                  <Label className="text-slate-900 text-xs md:text-sm">
+                    Direkt per E-Mail
+                  </Label>
                   <a
                     href="mailto:marc@mintel.me"
-                    className="block text-xl md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
+                    className="block text-lg md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
                   >
                     marc@mintel.me
                   </a>
@@ -81,9 +85,11 @@ export default function ContactPage() {
             </Reveal>
 
             <Reveal delay={0.4}>
-              <div className="p-6 space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
-                <Label className="text-slate-400">Antwortzeit</Label>
-                <H3 className="text-2xl text-slate-300">
+              <div className="p-5 md:p-6 space-y-2 md:space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
+                <Label className="text-slate-400 text-xs md:text-sm">
+                  Antwortzeit
+                </Label>
+                <H3 className="text-lg md:text-2xl text-slate-300">
                   <span className="text-slate-900">&lt; 24h</span> an Werktagen.
                 </H3>
               </div>
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 427caa6..53f0545 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -24,27 +24,27 @@
   }
 
   h1 {
-    @apply text-6xl md:text-8xl leading-[0.95] mb-12;
+    @apply text-4xl md:text-8xl leading-[1.1] md:leading-[0.95] mb-6 md:mb-12;
   }
 
   h2 {
-    @apply text-4xl md:text-6xl leading-tight mb-8 mt-16;
+    @apply text-2xl md:text-6xl leading-tight mb-4 md:mb-8 mt-12 md:mt-16;
   }
 
   h3 {
-    @apply text-3xl md:text-5xl leading-tight mb-6 mt-12;
+    @apply text-xl md:text-5xl leading-tight mb-3 md:mb-6 mt-8 md:mt-12;
   }
 
   h4 {
-    @apply text-2xl md:text-3xl leading-tight mb-4 mt-8;
+    @apply text-lg md:text-3xl leading-tight mb-3 md:mb-4 mt-6 md:mt-8;
   }
 
   p {
-    @apply mb-4 text-base leading-relaxed text-slate-700;
+    @apply mb-4 text-sm md:text-base leading-relaxed text-slate-700;
   }
 
   .lead {
-    @apply text-xl md:text-2xl text-slate-600 mb-6 leading-relaxed;
+    @apply text-base md:text-2xl text-slate-600 mb-6 leading-relaxed;
     font-weight: 400;
   }
 
@@ -66,7 +66,7 @@
   }
 
   blockquote {
-    @apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif;
+    @apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-lg md:text-2xl font-serif;
   }
 
   /* Focus states */
@@ -92,15 +92,15 @@
   }
 
   .container {
-    @apply max-w-6xl mx-auto px-6 py-12;
+    @apply max-w-6xl mx-auto px-5 md:px-6 py-8 md:py-12;
   }
 
   .wide-container {
-    @apply max-w-7xl mx-auto px-6 py-16;
+    @apply max-w-7xl mx-auto px-5 md:px-6 py-10 md:py-16;
   }
 
   .narrow-container {
-    @apply max-w-4xl mx-auto px-6 py-10;
+    @apply max-w-4xl mx-auto px-5 md:px-6 py-6 md:py-10;
   }
 
   .highlighter-tag {
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 39576f3..1f178d7 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -41,7 +41,7 @@ export default function LandingPage() {
         borderTop
         effects={<GradientMesh variant="metallic" className="opacity-70" />}
       >
-        <div className="space-y-16 relative">
+        <div className="space-y-10 md:space-y-16 relative">
           <Reveal>
             <H3 className="max-w-3xl">
               Kein Agentur-Zirkus. <br />
@@ -100,7 +100,7 @@ export default function LandingPage() {
 
       {/* Section 03: The Difference – Visual Comparison */}
       <Section number="03" title="Der Unterschied" variant="white" borderTop>
-        <div className="space-y-16 relative">
+        <div className="space-y-10 md:space-y-16 relative">
           <Reveal>
             <H3 className="max-w-3xl">
               Ich arbeite für das Ergebnis, <br />
@@ -135,23 +135,23 @@ export default function LandingPage() {
 
       {/* Section 04: Target Group */}
       <Section number="04" title="Für wen" borderTop>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 relative z-10">
           <Reveal>
             <Card variant="glass" padding="normal" techBorder className="group">
-              <div className="space-y-6 relative overflow-hidden">
-                <div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
-                  <ConceptPrice className="w-8 h-8" />
+              <div className="space-y-4 md:space-y-6 relative overflow-hidden">
+                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
+                  <ConceptPrice className="w-6 h-6 md:w-8 md:h-8" />
                 </div>
-                <H3 className="text-3xl">
+                <H3 className="text-xl md:text-3xl">
                   Unternehmer & <br />
                   Geschäftsführer
                 </H3>
-                <LeadText className="text-slate-400 text-lg">
+                <LeadText className="text-slate-400 text-base md:text-lg">
                   Sie wollen eine Website, die funktioniert – ohne sich mit
                   Technik beschäftigen zu müssen.
                 </LeadText>
               </div>
-              <div className="pt-8 border-t border-slate-50 mt-8">
+              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
                 <Label className="group-hover:text-slate-900 transition-colors">
                   Perfekt für Sie
                 </Label>
@@ -161,16 +161,20 @@ export default function LandingPage() {
           <Reveal delay={0.2}>
             <Card variant="glass" padding="normal" techBorder className="group">
               <div className="space-y-6 relative overflow-hidden">
-                <H3 className="text-3xl">
+                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
+                  {/* Icon placeholder or same as above if needed */}
+                  <ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
+                </div>
+                <H3 className="text-xl md:text-3xl">
                   Marketing & <br />
                   Vertrieb
                 </H3>
-                <LeadText className="text-slate-400 text-lg">
+                <LeadText className="text-slate-400 text-base md:text-lg">
                   Sie brauchen Landingpages und Tools, die Ergebnisse liefern.
                   Schnell und zuverlässig.
                 </LeadText>
               </div>
-              <div className="pt-8 border-t border-slate-50 mt-8">
+              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
                 <Label className="group-hover:text-slate-900 transition-colors">
                   Perfekt für Sie
                 </Label>
@@ -210,15 +214,15 @@ export default function LandingPage() {
             },
           ].map((service, i) => (
             <Reveal key={i} delay={0.1 + i * 0.15}>
-              <div className="group py-12 md:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
-                <div className="flex flex-col md:flex-row md:items-start gap-8 md:gap-16">
+              <div className="group py-8 md:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
+                <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-16">
                   {/* Number + Binary */}
-                  <div className="md:w-32 shrink-0">
-                    <span className="text-5xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
+                  <div className="shrink-0 flex md:block items-baseline gap-4">
+                    <span className="text-4xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
                       {service.num}
                     </span>
                     <span
-                      className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700"
+                      className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700 leading-none"
                       aria-hidden="true"
                     >
                       {service.binary}
@@ -226,8 +230,8 @@ export default function LandingPage() {
                   </div>
 
                   {/* Content */}
-                  <div className="flex-1 space-y-6">
-                    <H3 className="text-3xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
+                  <div className="flex-1 space-y-4 md:space-y-6">
+                    <H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
                       <GlitchText
                         trigger="inView"
                         delay={0.2 + i * 0.15}
@@ -236,7 +240,7 @@ export default function LandingPage() {
                         {service.title}
                       </GlitchText>
                     </H3>
-                    <BodyText className="text-slate-400 max-w-xl group-hover:text-slate-500 transition-colors duration-500">
+                    <BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
                       {service.text}
                     </BodyText>
                     {/* Tags */}
@@ -244,7 +248,7 @@ export default function LandingPage() {
                       {service.tags.map((tag, j) => (
                         <span
                           key={j}
-                          className="px-3 py-1 text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
+                          className="px-3 py-1 text-[8px] md:text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
                         >
                           {tag}
                         </span>
@@ -253,12 +257,13 @@ export default function LandingPage() {
                   </div>
 
                   {/* Arrow */}
-                  <div className="md:self-center shrink-0">
+                  <div className="md:self-center shrink-0 pt-4 md:pt-0">
                     <Button
                       href={service.href}
                       variant="ghost"
                       size="normal"
                       showArrow
+                      className="w-full md:w-auto"
                     >
                       Details
                     </Button>
@@ -272,36 +277,40 @@ export default function LandingPage() {
 
       {/* Section 06: Contact */}
       <Section number="06" title="Kontakt" borderTop>
-        <div className="relative py-12" id="contact">
+        <div className="relative py-4 md:py-12" id="contact">
           <Reveal>
-            <div className="space-y-16">
-              <H1 className="text-6xl md:text-8xl">
+            <div className="space-y-8 md:space-y-16">
+              <H1 className="text-3xl md:text-8xl">
                 Lassen Sie uns <br />
                 <span className="text-slate-400">starten.</span>
               </H1>
 
-              <div className="flex flex-col md:flex-row gap-16 items-start relative z-10">
-                <div className="space-y-8 flex-1">
-                  <LeadText className="text-2xl md:text-3xl text-slate-400">
+              <div className="flex flex-col md:flex-row gap-6 md:gap-16 items-start relative z-10">
+                <div className="space-y-4 md:space-y-8 flex-1">
+                  <LeadText className="text-lg md:text-3xl text-slate-400">
                     Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich{" "}
                     <span className="text-slate-900 border-b-2 border-slate-900/10">
                       <Marker color="rgba(255,235,59,0.5)">zeitnah</Marker>
                     </span>{" "}
                     bei Ihnen.
                   </LeadText>
-                  <div className="pt-4">
-                    <Button href="/contact" size="large">
+                  <div className="pt-2 md:pt-4">
+                    <Button
+                      href="/contact"
+                      size="large"
+                      className="w-full md:w-auto"
+                    >
                       Projekt anfragen
                     </Button>
                   </div>
                 </div>
 
-                <div className="w-full md:w-72 space-y-6 p-6 glass rounded-2xl">
+                <div className="w-full md:w-72 space-y-4 md:space-y-6 p-6 glass rounded-2xl border border-slate-100">
                   <div className="flex items-center gap-3">
                     <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                     <Label className="text-slate-900">Verfügbarkeit</Label>
                   </div>
-                  <BodyText className="text-base leading-snug">
+                  <BodyText className="text-sm md:text-base leading-snug">
                     Aktuell nehme ich Projekte für{" "}
                     <span className="font-bold text-slate-900">Q2 2026</span>{" "}
                     an.
diff --git a/apps/web/app/websites/page.tsx b/apps/web/app/websites/page.tsx
index 658f22b..f81743d 100644
--- a/apps/web/app/websites/page.tsx
+++ b/apps/web/app/websites/page.tsx
@@ -46,6 +46,7 @@ export default function WebsitesPage() {
         }
         description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
         backgroundSymbol="W"
+        className="px-5 md:px-0"
       />
 
       {/* 01: Architektur – WIE ich baue */}
@@ -55,9 +56,9 @@ export default function WebsitesPage() {
         borderTop
         illustration={<SystemArchitecture className="w-24 h-24" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Systeme, nicht Broschüren. <br />
               <span className="text-slate-400">
                 Jede Website ist Ingenieursarbeit.
@@ -65,7 +66,7 @@ export default function WebsitesPage() {
             </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+            <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-400">
               Ich entwickle Websites von Grund auf – mit modernen Frameworks,
               eigener Infrastruktur und einem Deployment-Prozess, der{" "}
               <span className="text-slate-900">
@@ -79,7 +80,7 @@ export default function WebsitesPage() {
 
           {/* Tech Stack Visual */}
           <Reveal delay={0.4}>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
               {[
                 { label: "Next.js", sub: "Framework" },
                 { label: "TypeScript", sub: "Sprache" },
@@ -93,11 +94,11 @@ export default function WebsitesPage() {
                   techBorder
                   className="group text-center"
                 >
-                  <div className="space-y-2">
-                    <Label className="text-slate-900 text-sm">
+                  <div className="space-y-1 md:space-y-2">
+                    <Label className="text-slate-900 text-xs md:text-sm">
                       {item.label}
                     </Label>
-                    <span className="block text-[9px] font-mono text-slate-300 uppercase tracking-widest">
+                    <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 uppercase tracking-widest">
                       {item.sub}
                     </span>
                   </div>
@@ -124,9 +125,9 @@ export default function WebsitesPage() {
         illustration={<SpeedPerformance className="w-24 h-24" />}
         effects={<GradientMesh variant="metallic" className="opacity-60" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Geschwindigkeit ist <br />
               <span className="text-slate-400">
                 <Marker delay={0.3} color="rgba(148,163,184,0.15)">
@@ -135,17 +136,17 @@ export default function WebsitesPage() {
               </span>
             </H3>
           </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
-            <div className="md:col-span-7 space-y-8">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
+            <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
               <Reveal delay={0.2}>
-                <LeadText className="text-xl text-slate-400">
+                <LeadText className="text-lg md:text-xl text-slate-400">
                   Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
                   Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
                   <span className="text-slate-900">Reproduzierbar.</span>
                 </LeadText>
               </Reveal>
               <Reveal delay={0.4}>
-                <IconList className="space-y-4">
+                <IconList className="space-y-2 md:space-y-4">
                   {[
                     "Server-Side Rendering für sofortige Inhalte",
                     "Automatische Bild-Optimierung (WebP, AVIF)",
@@ -153,7 +154,9 @@ export default function WebsitesPage() {
                     "Core Web Vitals im grünen Bereich",
                   ].map((item, i) => (
                     <IconListItem key={i} bullet>
-                      <LeadText className="text-lg md:text-xl">{item}</LeadText>
+                      <LeadText className="text-base md:text-xl">
+                        {item}
+                      </LeadText>
                     </IconListItem>
                   ))}
                 </IconList>
@@ -165,13 +168,13 @@ export default function WebsitesPage() {
                   variant="glass"
                   padding="normal"
                   techBorder
-                  className="text-center group"
+                  className="text-center group py-10 md:py-12"
                 >
-                  <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
+                  <div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
                     90+
                   </div>
                   <Label className="mt-4">Lighthouse Score</Label>
-                  <span className="block text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
+                  <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
                     PERFORMANCE · ACCESSIBILITY · SEO
                   </span>
                 </Card>
@@ -188,9 +191,9 @@ export default function WebsitesPage() {
         borderTop
         illustration={<SolidFoundation className="w-24 h-24" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Keine Plugins. <br />
               <span className="text-slate-400">Keine Abhängigkeiten.</span>
             </H3>
@@ -210,7 +213,7 @@ export default function WebsitesPage() {
               <CodeSnippet variant="git" />
             </Reveal>
             <Reveal delay={0.5}>
-              <div className="space-y-6">
+              <div className="space-y-4 md:space-y-6">
                 <Card variant="glass" padding="normal" className="group">
                   <div className="space-y-2">
                     <Label className="text-slate-900">Versionskontrolle</Label>
@@ -246,17 +249,17 @@ export default function WebsitesPage() {
         illustration={<LayerSeparation className="w-24 h-24" />}
         effects={<GradientMesh variant="subtle" className="opacity-60" />}
       >
-        <div className="space-y-12">
+        <div className="space-y-8 md:space-y-12">
           <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
+            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
               Inhalte pflegen <br />
               <span className="text-slate-400">ohne Angst.</span>
             </H3>
           </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
-            <div className="md:col-span-7">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
+            <div className="md:col-span-12 lg:col-span-7">
               <Reveal delay={0.2}>
-                <LeadText className="text-xl md:text-2xl text-slate-400">
+                <LeadText className="text-lg md:text-2xl text-slate-400">
                   Technik und Inhalt sind{" "}
                   <span className="text-slate-900">
                     <Marker color="rgba(255,235,59,0.5)">
@@ -268,7 +271,7 @@ export default function WebsitesPage() {
                 </LeadText>
               </Reveal>
             </div>
-            <div className="md:col-span-5">
+            <div className="md:col-span-12 lg:col-span-5">
               <Reveal delay={0.4}>
                 <Card
                   variant="glass"
@@ -281,7 +284,7 @@ export default function WebsitesPage() {
                       <div className="w-2 h-2 rounded-full bg-green-500"></div>
                       <Label className="text-slate-900">Sie dürfen</Label>
                     </div>
-                    <BodyText className="font-medium">
+                    <BodyText className="font-medium text-sm md:text-base">
                       Texte, Bilder und Inhalte frei bearbeiten.
                     </BodyText>
                   </div>
@@ -290,7 +293,7 @@ export default function WebsitesPage() {
                       <div className="w-2 h-2 rounded-full bg-slate-300"></div>
                       <Label>Geschützt</Label>
                     </div>
-                    <BodyText className="line-through">
+                    <BodyText className="line-through text-xs md:text-base">
                       Design, Layout, Code-Struktur.
                     </BodyText>
                   </div>
@@ -308,15 +311,15 @@ export default function WebsitesPage() {
         borderTop
         illustration={<TaskDone className="w-24 h-24" />}
       >
-        <div className="space-y-16">
+        <div className="space-y-8 md:space-y-16">
           <Reveal>
-            <H3 className="text-4xl md:text-6xl tracking-tighter">
+            <H3 className="text-2xl md:text-5xl tracking-tighter">
               Was Sie konkret <br />
               <span className="text-slate-400">bekommen.</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
             {[
               {
                 title: "Ihr Code",
@@ -332,10 +335,12 @@ export default function WebsitesPage() {
               },
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
-                <div className="space-y-4 group">
+                <div className="space-y-3 md:space-y-4 group">
                   <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
-                  <H4 className="text-2xl">{item.title}</H4>
-                  <LeadText className="text-lg text-slate-400">
+                  <H4 className="text-lg md:text-2xl font-bold">
+                    {item.title}
+                  </H4>
+                  <LeadText className="text-sm md:text-lg text-slate-400">
                     {item.desc}
                   </LeadText>
                 </div>
@@ -344,14 +349,16 @@ export default function WebsitesPage() {
           </div>
 
           <Reveal delay={0.4}>
-            <div className="pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
+            <div className="pt-10 md:pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 md:gap-8">
               <div className="space-y-2">
                 <Label>Bereit?</Label>
-                <LeadText className="text-2xl">
+                <LeadText className="text-xl md:text-2xl">
                   Lassen Sie uns über Ihr Projekt sprechen.
                 </LeadText>
               </div>
-              <Button href="/contact">Projekt anfragen</Button>
+              <Button href="/contact" className="w-full md:w-auto">
+                Projekt anfragen
+              </Button>
             </div>
           </Reveal>
         </div>
diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
index 5c2eae6..0bcba2a 100644
--- a/apps/web/src/components/Footer.tsx
+++ b/apps/web/src/components/Footer.tsx
@@ -7,7 +7,7 @@ export const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="relative py-16 mt-24 border-t border-slate-100 bg-white z-10">
+    <footer className="relative py-10 md:py-16 mt-8 md:mt-24 border-t border-slate-100 bg-white z-10">
       {/* Tech border at top */}
       <div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
         <div
@@ -20,14 +20,19 @@ export const Footer: React.FC = () => {
       </div>
 
       <div className="narrow-container">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
-          <div className="space-y-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-end">
+          <div className="space-y-6">
             <div className="flex items-center gap-3">
-              <Image src={LogoBlack} alt="Marc Mintel" height={72} />
+              <Image
+                src={LogoBlack}
+                alt="Marc Mintel"
+                height={64}
+                className="h-12 md:h-16 w-auto"
+              />
             </div>
           </div>
 
-          <div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
+          <div className="flex flex-col md:items-end gap-3 md:gap-4 text-xs md:text-sm font-mono text-slate-300 uppercase tracking-widest">
             <span>© {currentYear}</span>
             <div className="flex gap-8">
               <a
diff --git a/apps/web/src/components/Header.tsx b/apps/web/src/components/Header.tsx
index ceab444..c013a24 100644
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -10,6 +10,7 @@ import IconWhite from "../assets/logo/Icon White Transparent.svg";
 export const Header: React.FC = () => {
   const pathname = usePathname();
   const [isScrolled, setIsScrolled] = React.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
 
   React.useEffect(() => {
     const handleScroll = () => {
@@ -19,18 +20,44 @@ export const Header: React.FC = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  // Close mobile menu on pathname change and handle body scroll lock
+  React.useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [pathname]);
+
+  React.useEffect(() => {
+    if (isMobileMenuOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isMobileMenuOpen]);
+
   const isActive = (path: string) => pathname === path;
 
+  const navLinks = [
+    { href: "/about", label: "Über mich" },
+    { href: "/websites", label: "Websites" },
+    { href: "/case-studies", label: "Case Studies", prefix: true },
+    { href: "/blog", label: "Blog", prefix: true },
+  ];
+
   return (
-    <header
-      className={`sticky top-0 z-50 transition-all duration-500 ${
-        isScrolled
-          ? "bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50"
-          : "bg-white/80 backdrop-blur-md border-b border-slate-50"
-      }`}
-    >
+    <header className="sticky top-0 z-[100] w-full">
+      {/* Decoupled Background Layer - Prevents backdrop-filter parent context bugs */}
+      <div
+        className={`absolute inset-0 transition-all duration-500 -z-10 ${
+          isScrolled
+            ? "bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50"
+            : "bg-white/80 backdrop-blur-md border-b border-slate-50"
+        }`}
+      />
+
       {/* Animated tech border at bottom */}
-      <div className="absolute bottom-0 left-0 right-0 h-px overflow-hidden">
+      <div className="absolute bottom-0 left-0 right-0 h-px overflow-hidden pointer-events-none">
         <div
           className="h-full w-full"
           style={{
@@ -42,28 +69,24 @@ export const Header: React.FC = () => {
         />
       </div>
 
-      <div className="narrow-container py-4 flex items-center justify-between">
+      <div className="narrow-container py-4 flex items-center justify-between relative z-10">
         <Link href="/" className="flex items-center gap-4 group">
           <div className="flex items-center gap-3">
-            <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0 relative overflow-hidden">
+            <div className="w-10 h-10 md:w-12 md:h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0 relative overflow-hidden">
               <Image
                 src={IconWhite}
                 alt="Marc Mintel Icon"
                 width={32}
                 height={32}
-                className="w-8 h-8 relative z-10"
+                className="w-6 h-6 md:w-8 md:h-8 relative z-10"
               />
             </div>
           </div>
         </Link>
 
-        <nav className="flex items-center gap-8">
-          {[
-            { href: "/about", label: "Über mich" },
-            { href: "/websites", label: "Websites" },
-            { href: "/case-studies", label: "Case Studies", prefix: true },
-            { href: "/blog", label: "Blog", prefix: true },
-          ].map((link) => {
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center gap-8">
+          {navLinks.map((link) => {
             const active = link.prefix
               ? isActive(link.href) || pathname?.startsWith(`${link.href}/`)
               : isActive(link.href);
@@ -97,7 +120,196 @@ export const Header: React.FC = () => {
             Anfrage
           </Link>
         </nav>
+
+        {/* Mobile Toggle */}
+        <button
+          className="md:hidden relative z-[110] p-2 w-10 h-10 flex items-center justify-center rounded-xl bg-slate-900 text-white active:scale-90 transition-all duration-300 shadow-lg shadow-slate-200"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          aria-label="Toggle Menu"
+        >
+          <div className="w-5 h-3.5 relative flex flex-col justify-between">
+            <motion.span
+              animate={
+                isMobileMenuOpen ? { rotate: 45, y: 7 } : { rotate: 0, y: 0 }
+              }
+              transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
+              className="w-full h-0.5 bg-current rounded-full origin-center"
+            />
+            <motion.span
+              animate={
+                isMobileMenuOpen ? { opacity: 0, x: -10 } : { opacity: 1, x: 0 }
+              }
+              transition={{ duration: 0.2 }}
+              className="w-full h-0.5 bg-current rounded-full"
+            />
+            <motion.span
+              animate={
+                isMobileMenuOpen ? { rotate: -45, y: -7 } : { rotate: 0, y: 0 }
+              }
+              transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
+              className="w-full h-0.5 bg-current rounded-full origin-center"
+            />
+          </div>
+        </button>
       </div>
+
+      {/* Mobile Navigation - Bottom-Anchored Control Center */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <React.Fragment key="mobile-control-center">
+            {/* Dimmed Backdrop */}
+            <motion.div
+              key="cc-backdrop"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="fixed inset-0 z-[101] bg-black/30 backdrop-blur-sm md:hidden"
+            />
+
+            {/* Bottom Sheet */}
+            <motion.div
+              key="cc-sheet"
+              initial={{ y: "100%" }}
+              animate={{ y: 0 }}
+              exit={{ y: "100%" }}
+              transition={{
+                type: "spring",
+                stiffness: 350,
+                damping: 30,
+                mass: 0.8,
+              }}
+              drag="y"
+              dragConstraints={{ top: 0, bottom: 0 }}
+              dragElastic={0.15}
+              onDragEnd={(_, info) => {
+                if (info.offset.y > 80 || info.velocity.y > 300) {
+                  setIsMobileMenuOpen(false);
+                }
+              }}
+              className="fixed inset-x-0 bottom-0 z-[102] md:hidden bg-white rounded-t-[2rem] shadow-[0_-8px_40px_rgba(0,0,0,0.12)] flex flex-col max-h-[85vh] overflow-hidden"
+            >
+              {/* Grab Handle */}
+              <div className="flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing">
+                <div className="w-10 h-1 bg-slate-200 rounded-full" />
+              </div>
+
+              {/* Status Bar */}
+              <div className="px-6 py-3 flex justify-between items-center border-b border-slate-100/80">
+                <div className="flex items-center gap-2 text-[9px] font-mono font-bold tracking-[0.15em] text-slate-400 uppercase">
+                  <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+                  Online
+                </div>
+                <div className="text-[9px] font-mono font-bold tracking-widest text-slate-400 uppercase">
+                  {pathname === "/"
+                    ? "HOME"
+                    : pathname.toUpperCase().replace(/^\//, "")}
+                </div>
+              </div>
+
+              {/* Tiled Navigation Grid */}
+              <div className="px-5 pt-5 pb-3 flex-1 overflow-y-auto">
+                <div className="grid grid-cols-2 gap-2.5">
+                  {[
+                    { href: "/about", label: "Über mich", sub: "Architect" },
+                    { href: "/websites", label: "Websites", sub: "Systems" },
+                    {
+                      href: "/case-studies",
+                      label: "Cases",
+                      sub: "Solutions",
+                      prefix: true,
+                    },
+                    {
+                      href: "/blog",
+                      label: "Blog",
+                      sub: "Insights",
+                      prefix: true,
+                    },
+                  ].map((item, i) => {
+                    const active = item.prefix
+                      ? pathname?.startsWith(item.href)
+                      : pathname === item.href;
+
+                    return (
+                      <motion.div
+                        key={item.href}
+                        initial={{ opacity: 0, scale: 0.85, y: 15 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        transition={{
+                          delay: 0.05 + i * 0.04,
+                          type: "spring",
+                          stiffness: 400,
+                          damping: 25,
+                        }}
+                        whileTap={{ scale: 0.95 }}
+                      >
+                        <Link
+                          href={item.href}
+                          onClick={() => setIsMobileMenuOpen(false)}
+                          className={`relative flex flex-col justify-center p-6 h-[110px] rounded-2xl border transition-all duration-200 ${
+                            active
+                              ? "bg-slate-50 border-slate-200 ring-1 ring-slate-200"
+                              : "bg-white border-slate-100 active:bg-slate-50"
+                          }`}
+                        >
+                          <div>
+                            <span className="text-[15px] font-black tracking-tight text-slate-900 block leading-tight mb-1">
+                              {item.label}
+                            </span>
+                            <span className="text-[9px] font-mono font-bold text-slate-400 uppercase tracking-[0.2em]">
+                              {item.sub}
+                            </span>
+                          </div>
+                          {active && (
+                            <div className="absolute top-4 right-4 w-1.5 h-1.5 rounded-full bg-slate-900" />
+                          )}
+                        </Link>
+                      </motion.div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Primary CTA */}
+              <div className="px-5 pb-5 pt-2">
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.25, type: "spring", stiffness: 300 }}
+                  whileTap={{ scale: 0.97 }}
+                >
+                  <Link
+                    href="/contact"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="flex items-center justify-between w-full p-4 bg-slate-900 text-white rounded-2xl active:bg-slate-800 transition-colors"
+                  >
+                    <span className="text-[13px] font-bold uppercase tracking-[0.15em]">
+                      Projekt anfragen
+                    </span>
+                    <svg
+                      className="w-4 h-4 text-slate-400"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M14 5l7 7m0 0l-7 7m7-7H3"
+                      />
+                    </svg>
+                  </Link>
+                </motion.div>
+              </div>
+
+              {/* Safe-Area Spacer (iOS home indicator) */}
+              <div className="h-[env(safe-area-inset-bottom,0px)]" />
+            </motion.div>
+          </React.Fragment>
+        )}
+      </AnimatePresence>
     </header>
   );
 };
diff --git a/apps/web/src/components/Hero.tsx b/apps/web/src/components/Hero.tsx
index d1e227f..a6cc978 100644
--- a/apps/web/src/components/Hero.tsx
+++ b/apps/web/src/components/Hero.tsx
@@ -1,54 +1,69 @@
-import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react';
-import * as React from 'react';
+import { BookOpen, Code2, Terminal, Wrench } from "lucide-react";
+import * as React from "react";
 
 export const Hero: React.FC = () => {
   return (
-    <section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden">
+    <section className="relative bg-slate-900 text-white py-16 md:py-24 overflow-hidden text-center">
       {/* Background pattern */}
       <div className="absolute inset-0 opacity-10">
-        <div className="absolute inset-0" style={{
-          backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
-          backgroundSize: '40px 40px'
-        }} />
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
+            backgroundSize: "32px 32px",
+          }}
+        />
       </div>
-      
+
       <div className="container relative z-10">
-        <div className="max-w-4xl mx-auto text-center">
+        <div className="max-w-4xl mx-auto">
           {/* Main heading */}
-          <h1 className="text-4xl md:text-6xl font-bold mb-6 animate-slide-up">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 md:mb-6 animate-slide-up leading-tight">
             Digital Problem Solver
           </h1>
-          
-          <p className="text-xl md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in">
-            I work on Digital problems and build tools, scripts, and systems to solve them.
+
+          <p className="text-lg md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in px-4 md:px-0">
+            I work on Digital problems and build tools, scripts, and systems to
+            solve them.
           </p>
-          
+
           {/* Quick stats or focus areas */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12 animate-fade-in">
             <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
               <Code2 className="mx-auto mb-3 text-slate-400" size={28} />
-              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div>
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
+                Code
+              </div>
             </div>
             <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
               <Wrench className="mx-auto mb-3 text-slate-400" size={28} />
-              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div>
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
+                Tools
+              </div>
             </div>
             <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
               <Terminal className="mx-auto mb-3 text-slate-400" size={28} />
-              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div>
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
+                Automation
+              </div>
             </div>
             <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
               <BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
-              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div>
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
+                Learning
+              </div>
             </div>
           </div>
 
           {/* Topics */}
           <div className="mt-8 text-sm text-slate-400 animate-fade-in">
-            <span className="font-semibold text-slate-300">Topics:</span> Vibe coding with AI • Debugging • Mac tools • Automation • Small scripts • Learning notes • FOSS
+            <span className="font-semibold text-slate-300">Topics:</span> Vibe
+            coding with AI • Debugging • Mac tools • Automation • Small scripts
+            • Learning notes • FOSS
           </div>
         </div>
       </div>
     </section>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/components/HeroSection.tsx b/apps/web/src/components/HeroSection.tsx
index 31bfe45..be3f69a 100644
--- a/apps/web/src/components/HeroSection.tsx
+++ b/apps/web/src/components/HeroSection.tsx
@@ -20,17 +20,17 @@ export const HeroSection: React.FC = () => {
   const opacity = useTransform(scrollY, [0, 600], [1, 0]);
 
   return (
-    <section className="relative min-h-[100vh] flex items-center justify-center overflow-hidden bg-white">
+    <section className="relative min-h-[85dvh] md:min-h-[100dvh] flex items-center justify-center overflow-hidden bg-white px-5 md:px-0">
       {/* 1. The Binary Architecture (Background) */}
       <div className="absolute inset-0 z-0">
         <AbstractCircuit />
       </div>
 
       {/* 2. Content Layer */}
-      <div className="relative z-10 container mx-auto px-6 h-full flex flex-col justify-center items-center">
+      <div className="relative z-10 container mx-auto h-full flex flex-col justify-center items-center">
         <motion.div
           style={{ y, opacity }}
-          className="text-center relative max-w-[90vw]"
+          className="text-center relative max-w-full md:max-w-[90vw]"
         >
           {/* Architectural Coordinate Labels */}
           <div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
@@ -47,19 +47,19 @@ export const HeroSection: React.FC = () => {
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 1, delay: 0.2 }}
-            className="mb-10 inline-flex items-center gap-4 px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
+            className="mb-4 md:mb-10 inline-flex items-center gap-3 md:gap-4 px-4 md:px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
           >
             <div className="flex gap-1">
               <div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
               <div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
             </div>
-            <span className="text-[10px] font-mono font-bold tracking-[0.4em] text-slate-500 uppercase">
+            <span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase">
               Digital_Architect // v.2026
             </span>
           </motion.div>
 
           {/* Headline */}
-          <h1 className="text-7xl md:text-[11rem] font-black tracking-tighter leading-[0.8] text-slate-900 mb-12 uppercase">
+          <h1 className="text-3xl md:text-[11rem] font-black tracking-tighter leading-[0.9] md:leading-[0.8] text-slate-900 mb-6 md:mb-12 uppercase">
             <div className="block">
               <GlitchText delay={0.5} duration={1.2}>
                 Websites
@@ -80,20 +80,26 @@ export const HeroSection: React.FC = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.8 }}
-            className="flex flex-col items-center gap-12"
+            className="flex flex-col items-center gap-6 md:gap-12"
           >
-            <p className="text-xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed">
-              Ein Entwickler. Ein Ansprechpartner. <br />
+            <p className="text-base md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4">
+              Ein Entwickler. Ein Ansprechpartner.{" "}
+              <br className="hidden md:block" />
               <span className="text-slate-900 font-bold tracking-tight">
                 Systematische Architekturen für das Web.
               </span>
             </p>
 
-            <div className="flex flex-wrap items-center justify-center gap-6">
-              <Button href="/contact" size="large">
+            <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0">
+              <Button href="/contact" size="large" className="w-full md:w-auto">
                 Projekt anfragen
               </Button>
-              <Button href="/websites" variant="outline" size="large">
+              <Button
+                href="/websites"
+                variant="outline"
+                size="large"
+                className="w-full md:w-auto"
+              >
                 Prozess ansehen
               </Button>
             </div>
@@ -102,13 +108,13 @@ export const HeroSection: React.FC = () => {
       </div>
 
       {/* 3. Blueprint Frame (Decorative Borders) */}
-      <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-8 opacity-40" />
+      <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" />
       <div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
         <span className="text-[10px] font-mono tracking-widest text-slate-400">
           POS_TRANSMISSION_001
         </span>
       </div>
-      <div className="absolute bottom-8 right-8 p-4 hidden md:block opacity-20 transition-opacity hover:opacity-100">
+      <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right">
         <span className="text-[10px] font-mono tracking-widest text-slate-400">
           EST_2026 // M-ARCH
         </span>
@@ -116,10 +122,10 @@ export const HeroSection: React.FC = () => {
 
       {/* 4. Scroll Indicator */}
       <motion.div
-        className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
+        className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
         style={{ opacity }}
       >
-        <div className="w-[1px] h-12 bg-slate-200" />
+        <div className="w-[1px] h-8 md:h-12 bg-slate-200" />
         <span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
           Scroll
         </span>
diff --git a/apps/web/src/components/IframeSection.tsx b/apps/web/src/components/IframeSection.tsx
index fc6a5e7..bac698c 100644
--- a/apps/web/src/components/IframeSection.tsx
+++ b/apps/web/src/components/IframeSection.tsx
@@ -27,6 +27,8 @@ interface IframeSectionProps {
   dynamicGlow?: boolean;
   minHeight?: number;
   mobileWidth?: number;
+  mobileHeight?: string;
+  desktopHeight?: string;
 }
 
 import PropTypes from "prop-types";
@@ -129,6 +131,8 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
   dynamicGlow = true,
   minHeight = 400,
   mobileWidth = 390,
+  mobileHeight,
+  desktopHeight,
 }) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
@@ -264,7 +268,20 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
     return match ? parseFloat(match[1]) : null;
   };
 
-  const baseNumericHeight = parseNumericHeight(height);
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const activeHeight = isMobile
+    ? mobileHeight || height
+    : desktopHeight || height;
+
+  const baseNumericHeight = parseNumericHeight(activeHeight);
   const finalScaledHeight = clipHeight
     ? clipHeight * scale
     : baseNumericHeight
@@ -273,11 +290,11 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
 
   const chassisStyle = {
     height:
-      height === "100%"
+      activeHeight === "100%"
         ? "100%"
         : finalScaledHeight
           ? `${finalScaledHeight + headerHeightPx}px`
-          : `calc(${height} + ${headerHeightPx}px)`,
+          : `calc(${activeHeight} + ${headerHeightPx}px)`,
     minHeight: minHeight ? `${minHeight}px` : undefined,
   };
 
diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx
index 5fe5093..cd73876 100644
--- a/apps/web/src/components/Layout.tsx
+++ b/apps/web/src/components/Layout.tsx
@@ -44,9 +44,9 @@ export const Card: React.FC<CardProps> = ({
 
   const paddings = {
     none: "p-0",
-    small: "p-6 md:p-8",
-    normal: "p-8 md:p-10",
-    large: "p-10 md:p-12",
+    small: "p-4 md:p-8",
+    normal: "p-5 md:p-10",
+    large: "p-6 md:p-12",
   };
 
   const [hexId, setHexId] = React.useState("0x0000");
@@ -103,7 +103,13 @@ export const Container: React.FC<{
   };
 
   return (
-    <div className={cn("mx-auto px-6 w-full", variants[variant], className)}>
+    <div
+      className={cn(
+        "mx-auto px-5 md:px-6 w-full",
+        variants[variant],
+        className,
+      )}
+    >
       {children}
     </div>
   );
diff --git a/apps/web/src/components/MediumCard.tsx b/apps/web/src/components/MediumCard.tsx
index a53abf6..ef3e902 100644
--- a/apps/web/src/components/MediumCard.tsx
+++ b/apps/web/src/components/MediumCard.tsx
@@ -29,18 +29,18 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
         variant="glass"
         padding="normal"
         techBorder={false}
-        className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm"
+        className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm p-5 md:p-6"
       >
-        <div className="space-y-4">
+        <div className="space-y-3 md:space-y-4">
           <div className="flex items-center justify-between">
-            <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
+            <time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
               {formattedDate}
             </time>
-            <div className="flex gap-2">
+            <div className="flex gap-1.5 md:gap-2">
               {tags?.slice(0, 2).map((tag) => (
                 <span
                   key={tag}
-                  className="text-[9px] font-mono text-slate-300 uppercase"
+                  className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
                 >
                   #{tag}
                 </span>
@@ -48,16 +48,16 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
             </div>
           </div>
 
-          <div className="space-y-2">
-            <h3 className="text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
+          <div className="space-y-1.5 md:space-y-2">
+            <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
               {title}
             </h3>
-            <p className="text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
+            <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
               {description}
             </p>
           </div>
 
-          <div className="pt-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
+          <div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
             <span>Beitrag öffnen</span>
             <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
           </div>
diff --git a/apps/web/src/components/PageHeader.tsx b/apps/web/src/components/PageHeader.tsx
index 5da31ce..daea4df 100644
--- a/apps/web/src/components/PageHeader.tsx
+++ b/apps/web/src/components/PageHeader.tsx
@@ -23,7 +23,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   return (
     <section
       className={cn(
-        "narrow-container relative",
+        "narrow-container relative overflow-hidden md:overflow-visible",
         isBlog
           ? "pt-32 pb-12 md:pt-48 md:pb-16"
           : "pt-24 pb-16 md:pt-40 md:pb-24",
@@ -35,8 +35,8 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
           className={cn(
             "absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none",
             isBlog
-              ? "-left-8 top-12 text-[12rem] md:text-[16rem]"
-              : "-left-24 -top-12 text-[20rem] md:text-[24rem]",
+              ? "-left-4 md:-left-8 top-12 text-[10rem] md:text-[16rem]"
+              : "-left-12 md:-left-24 -top-8 md:-top-12 text-[15rem] md:text-[24rem]",
           )}
         >
           {backgroundSymbol}
@@ -51,13 +51,13 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
       )}
 
       <div
-        className={cn("space-y-6 md:space-y-8 relative", isBlog && "max-w-7xl")}
+        className={cn("space-y-4 md:space-y-8 relative", isBlog && "max-w-7xl")}
       >
         <Reveal>
           <h1
             className={cn(
               "font-bold text-slate-900 tracking-tighter leading-[1.1]",
-              isBlog ? "text-4xl md:text-6xl" : "text-5xl md:text-7xl",
+              isBlog ? "text-xl md:text-6xl" : "text-2xl md:text-7xl",
             )}
           >
             {title}
@@ -70,8 +70,8 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
               className={cn(
                 "font-serif italic text-slate-400 leading-relaxed",
                 isBlog
-                  ? "text-lg md:text-xl max-w-xl"
-                  : "text-xl md:text-2xl max-w-2xl",
+                  ? "text-sm md:text-xl max-w-xl"
+                  : "text-base md:text-2xl max-w-2xl",
               )}
             >
               {description}
diff --git a/apps/web/src/components/Section.tsx b/apps/web/src/components/Section.tsx
index e20a6f9..0f5a393 100644
--- a/apps/web/src/components/Section.tsx
+++ b/apps/web/src/components/Section.tsx
@@ -49,7 +49,7 @@ export const Section: React.FC<SectionProps> = ({
   return (
     <section
       className={cn(
-        "relative py-24 md:py-40 group overflow-hidden",
+        "relative py-6 md:py-40 group overflow-hidden",
         bgClass,
         borderTopClass,
         borderBottomClass,
@@ -81,41 +81,43 @@ export const Section: React.FC<SectionProps> = ({
       {effects}
 
       <div className={cn("relative z-10", containerClass)}>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-24">
           {/* Sidebar: Number & Title (Only if provided) */}
           {(number || title || illustration) && (
             <div className="md:col-span-3">
-              <div className="md:sticky md:top-40 space-y-8">
-                {number && (
-                  <Reveal delay={delay}>
-                    <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
-                      {number}
-                      {/* Subtle binary overlay on number */}
-                      <span
-                        className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
-                        aria-hidden="true"
-                      >
-                        {parseInt(number || "0")
-                          .toString(2)
-                          .padStart(8, "0")}
+              <div className="md:sticky md:top-40 flex flex-col gap-4 md:gap-8">
+                <div className="flex items-end md:flex-col md:items-start gap-6 md:gap-8">
+                  {number && (
+                    <Reveal delay={delay}>
+                      <span className="block text-4xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
+                        {number}
+                        {/* Subtle binary overlay on number */}
+                        <span
+                          className="absolute -top-1 md:top-1 left-0 text-[7px] md:text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
+                          aria-hidden="true"
+                        >
+                          {parseInt(number || "0")
+                            .toString(2)
+                            .padStart(8, "0")}
+                        </span>
                       </span>
-                    </span>
-                  </Reveal>
-                )}
-                {title && (
-                  <Reveal delay={delay + 0.1}>
-                    <div className="flex items-center gap-4">
-                      {/* Animated dot indicator */}
-                      <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
-                      <Label className="text-slate-900 text-[10px] tracking-[0.4em]">
-                        {title}
-                      </Label>
-                    </div>
-                  </Reveal>
-                )}
+                    </Reveal>
+                  )}
+                  {title && (
+                    <Reveal delay={delay + 0.1}>
+                      <div className="flex items-center gap-3 md:gap-4 mb-2 md:mb-0">
+                        {/* Animated dot indicator */}
+                        <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
+                        <Label className="text-slate-900 text-[9px] md:text-[10px] tracking-[0.3em] md:tracking-[0.4em]">
+                          {title}
+                        </Label>
+                      </div>
+                    </Reveal>
+                  )}
+                </div>
                 {illustration && (
                   <Reveal delay={delay + 0.2}>
-                    <div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
+                    <div className="pt-2 md:pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
                       {illustration}
                     </div>
                   </Reveal>
diff --git a/apps/web/src/components/Typography.tsx b/apps/web/src/components/Typography.tsx
index 81ad9b2..f77643c 100644
--- a/apps/web/src/components/Typography.tsx
+++ b/apps/web/src/components/Typography.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 interface TypographyProps {
   children: React.ReactNode;
@@ -6,49 +6,77 @@ interface TypographyProps {
 }
 
 export const H1: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <h1 className={`text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}>
+  <h1
+    className={`text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}
+  >
     {children}
   </h1>
 );
 
 export const H2: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <h2 className={`text-3xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}>
+  <h2
+    className={`text-xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}
+  >
     {children}
   </h2>
 );
 
 export const H3: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <h3 className={`text-2xl md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}>
+  <h3
+    className={`text-lg md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}
+  >
     {children}
   </h3>
 );
 
 export const H4: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <h4 className={`text-xl md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}>
+  <h4
+    className={`text-base md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}
+  >
     {children}
   </h4>
 );
 
-export const LeadText: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <p className={`text-lg md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}>
+export const LeadText: React.FC<TypographyProps> = ({
+  children,
+  className = "",
+}) => (
+  <p
+    className={`text-sm md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}
+  >
     {children}
   </p>
 );
 
-export const BodyText: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <p className={`text-base text-slate-500 leading-relaxed ${className}`}>
+export const BodyText: React.FC<TypographyProps> = ({
+  children,
+  className = "",
+}) => (
+  <p
+    className={`text-sm md:text-base text-slate-500 leading-relaxed ${className}`}
+  >
     {children}
   </p>
 );
 
-export const Label: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <span className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}>
+export const Label: React.FC<TypographyProps> = ({
+  children,
+  className = "",
+}) => (
+  <span
+    className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}
+  >
     {children}
   </span>
 );
 
-export const MonoLabel: React.FC<TypographyProps> = ({ children, className = "" }) => (
-  <span className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}>
+export const MonoLabel: React.FC<TypographyProps> = ({
+  children,
+  className = "",
+}) => (
+  <span
+    className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}
+  >
     {children}
   </span>
 );
diff --git a/apps/web/src/components/blog/BlogCommandBar.tsx b/apps/web/src/components/blog/BlogCommandBar.tsx
index ee89e7e..ec122e8 100644
--- a/apps/web/src/components/blog/BlogCommandBar.tsx
+++ b/apps/web/src/components/blog/BlogCommandBar.tsx
@@ -24,30 +24,30 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
   return (
     <div
       className={cn(
-        "w-full max-w-2xl mx-auto flex flex-col items-center space-y-6 px-4 md:px-0",
+        "w-full max-w-2xl mx-auto flex flex-col items-center space-y-4 md:space-y-6 px-0",
         className,
       )}
     >
       {/* Command Input Area */}
-      <div className="relative group w-full">
+      <div className="relative group w-full px-0 sm:px-4 md:px-0">
         {/* Glow Effect */}
-        <div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-30 group-hover:opacity-100 transition duration-500" />
+        <div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-20 group-hover:opacity-100 transition duration-500" />
 
-        <div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
-          <div className="pl-4 text-slate-400">
-            <Search className="w-5 h-5" />
+        <div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-1.5 md:p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
+          <div className="pl-3 md:pl-4 text-slate-400">
+            <Search className="w-4 h-4 md:w-5 md:h-5" />
           </div>
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => onSearchChange(e.target.value)}
             placeholder="Search posts..."
-            className="w-full bg-transparent px-4 py-3 text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
+            className="w-full bg-transparent px-3 md:px-4 py-2 md:py-3 text-base md:text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
           />
           {searchQuery && (
             <button
               onClick={() => onSearchChange("")}
-              className="mr-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
+              className="mr-2 px-2.5 py-1 md:px-3 md:py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[9px] md:text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
             >
               Clear
             </button>
@@ -56,7 +56,7 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
       </div>
 
       {/* Tag Command Row */}
-      <div className="flex flex-wrap items-center justify-center gap-2">
+      <div className="flex flex-wrap items-center justify-center gap-1.5 md:gap-2 px-4 md:px-0">
         {tags.map((tag) => {
           const isActive = activeTags.includes(tag);
           return (
@@ -64,7 +64,7 @@ export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
               key={tag}
               onClick={() => onTagToggle(tag)}
               className={cn(
-                "px-3 py-1.5 rounded-lg text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
+                "px-2.5 py-1 md:px-3 md:py-1.5 rounded-lg text-[9px] md:text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
                 isActive
                   ? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105"
                   : "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50",