diff --git a/attached_assets/image_1772301812509.png b/attached_assets/image_1772301812509.png
new file mode 100644
index 0000000..2e9c874
Binary files /dev/null and b/attached_assets/image_1772301812509.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 69353d8..6d80a63 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -3,219 +3,197 @@ import { Link } from "wouter";
 import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Eye, Clock } from "lucide-react";
+import { Eye, Clock, Play } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Button } from "@/components/ui/button";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import { ArticleCardAd, SidebarAd, InArticleAd } from "@/components/adsense";
+import AdSense, { ArticleCardAd } from "@/components/adsense";
 import { useState, useEffect, useCallback } from "react";
 
-function FeaturedSection({ articles }: { articles: Article[] }) {
-  const pool = articles.slice(0, 9);
-  const totalPages = Math.ceil(pool.length / 3);
-  const [page, setPage] = useState(0);
-  const [paused, setPaused] = useState(false);
-
-  const next = useCallback(() => {
-    setPage((p) => (p + 1) % totalPages);
-  }, [totalPages]);
-
-  useEffect(() => {
-    if (paused || totalPages <= 1) return;
-    const timer = setInterval(next, 8000);
-    return () => clearInterval(timer);
-  }, [paused, next, totalPages]);
-
-  if (pool.length === 0) return null;
-
-  const start = page * 3;
-  const visible = pool.slice(start, start + 3);
-  while (visible.length < 3 && pool.length >= 3) {
-    visible.push(pool[visible.length % pool.length]);
-  }
-
-  const hero = visible[0];
-  const side = visible.slice(1, 3);
-
-  return (
-    <section
-      className="mb-12"
-      data-testid="featured-carousel"
-      onMouseEnter={() => setPaused(true)}
-      onMouseLeave={() => setPaused(false)}
-    >
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
-        <Link href={`/article/${hero.slug}`} className="lg:col-span-3">
-          <div
-            className="relative group cursor-pointer rounded-md overflow-hidden h-full"
-            data-testid={`card-featured-${hero.id}`}
-          >
-            <div className="relative h-full min-h-[320px] md:min-h-[420px]">
-              <img
-                src={hero.coverImage || "/images/article-1.png"}
-                alt={hero.title}
-                className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
-                loading="lazy"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
-              <div className="absolute bottom-0 left-0 right-0 p-5 md:p-7">
-                <span className="text-white/70 text-sm">
-                  {format(new Date(hero.publishedAt), "d. MMMM yyyy", { locale: de })}
-                </span>
-                <h3 className="text-white font-bold text-xl md:text-2xl mt-2 leading-tight line-clamp-3">
-                  {hero.title}
-                </h3>
-                <p className="text-white/60 text-sm mt-2 line-clamp-2 max-w-lg">
-                  {hero.excerpt}
-                </p>
-              </div>
-            </div>
-          </div>
-        </Link>
-
-        <div className="lg:col-span-2 grid grid-cols-1 gap-5">
-          {side.map((article) => (
-            <Link key={article.id} href={`/article/${article.slug}`}>
-              <div
-                className="relative group cursor-pointer rounded-md overflow-hidden"
-                data-testid={`card-featured-${article.id}`}
-              >
-                <div className="relative min-h-[200px]">
-                  <img
-                    src={article.coverImage || "/images/article-1.png"}
-                    alt={article.title}
-                    className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
-                    loading="lazy"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
-                  <div className="absolute bottom-0 left-0 right-0 p-4 md:p-5">
-                    <span className="text-white/70 text-xs">
-                      {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
-                    </span>
-                    <h3 className="text-white font-semibold text-base mt-1 leading-snug line-clamp-2">
-                      {article.title}
-                    </h3>
-                  </div>
-                </div>
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-
-      {totalPages > 1 && (
-        <div className="flex justify-center gap-2 mt-4" data-testid="carousel-dots">
-          {Array.from({ length: totalPages }).map((_, i) => (
-            <button
-              key={i}
-              onClick={() => setPage(i)}
-              className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
-                i === page ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
-              }`}
-              data-testid={`button-carousel-dot-${i}`}
-            />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}
-
 function thumbUrl(src: string | null): string {
   if (!src) return "/images/article-1.png";
   if (src.endsWith(".webp")) return src.replace(".webp", "-thumb.webp");
   return src;
 }
 
-function ArticleCard({ article }: { article: Article }) {
+function timeAgo(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffH = Math.floor(diffMs / 3600000);
+  const diffD = Math.floor(diffMs / 86400000);
+  if (diffH < 1) return "Gerade eben";
+  if (diffH < 24) return `vor ${diffH} Std.`;
+  if (diffD < 7) return `vor ${diffD} T.`;
+  return format(date, "d. MMM yyyy", { locale: de });
+}
+
+function HeroCard({ article }: { article: Article }) {
+  const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
-      <article
-        className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
-        data-testid={`card-article-${article.id}`}
+      <div
+        className="relative group cursor-pointer rounded-lg overflow-hidden h-full"
+        data-testid={`card-hero-${article.id}`}
       >
-        <div className="relative rounded-t-md">
-          <div className="overflow-hidden rounded-t-md">
-            <img
-              src={thumbUrl(article.coverImage)}
-              alt={article.title}
-              className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
-              loading="lazy"
-            />
-          </div>
-        </div>
-        <div className="p-5 flex flex-col flex-1">
-          <div className="flex items-center gap-2 text-muted-foreground text-xs mb-3">
-            <span>{article.author}</span>
-            <span>·</span>
-            <span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
-          </div>
-          <h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors text-base leading-snug">
-            {article.title}
-          </h3>
-          <p className="text-muted-foreground text-sm line-clamp-3 mb-4 flex-1">
-            {article.excerpt}
-          </p>
-          <div className="flex items-center justify-between gap-2 mt-auto">
-            <div className="flex items-center gap-3 text-xs text-muted-foreground">
-              <span className="flex items-center gap-1">
-                <Eye className="w-3.5 h-3.5" />
-                {article.views.toLocaleString()}
+        <div className="relative h-full min-h-[300px] md:min-h-[380px]">
+          <img
+            src={article.coverImage || "/images/article-1.png"}
+            alt={article.title}
+            className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
+            loading="lazy"
+          />
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center z-10">
+              <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">
+                <Play className="w-6 h-6 text-white ml-0.5" fill="white" />
+              </div>
+            </div>
+          )}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 p-5">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-xs font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">
+                {article.category}
+              </span>
+              <span className="text-white/60 text-xs">
+                {timeAgo(new Date(article.publishedAt))}
               </span>
             </div>
-            <Button size="sm" data-testid={`button-read-${article.id}`}>
-              Weiterlesen
-            </Button>
+            <h3 className="text-white font-bold text-lg md:text-xl leading-tight line-clamp-3">
+              {article.title}
+            </h3>
+            <p className="text-white/50 text-sm mt-1.5 line-clamp-2 max-w-lg hidden md:block">
+              {article.excerpt}
+            </p>
+            <div className="flex items-center gap-2 mt-2 text-white/40 text-xs">
+              <Eye className="w-3 h-3" />
+              {article.views.toLocaleString()}
+            </div>
           </div>
         </div>
-      </article>
+      </div>
     </Link>
   );
 }
 
-function PopularSidebar({ articles }: { articles: Article[] }) {
+function MediumCard({ article }: { article: Article }) {
+  const isVideo = article.category === "Video";
   return (
-    <aside className="bg-card rounded-md border border-card-border p-5 sticky top-20" data-testid="sidebar-popular">
-      <h3 className="font-semibold text-card-foreground mb-5 text-base">
-        Beliebte Artikel
+    <Link href={`/article/${article.slug}`}>
+      <div
+        className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border"
+        data-testid={`card-medium-${article.id}`}
+      >
+        <div className="relative">
+          <div className="overflow-hidden">
+            <img
+              src={thumbUrl(article.coverImage)}
+              alt={article.title}
+              className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+              loading="lazy"
+            />
+          </div>
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-10 h-10 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
+                <Play className="w-4 h-4 text-white ml-0.5" fill="white" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="p-3.5">
+          <div className="flex items-center gap-2 mb-1.5">
+            <span className="text-[10px] font-medium text-primary">{article.author}</span>
+            <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
+          </div>
+          <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">
+            {article.title}
+          </h3>
+          <div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
+            <Eye className="w-3 h-3" />
+            {article.views.toLocaleString()}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function CompactCard({ article }: { article: Article }) {
+  const isVideo = article.category === "Video";
+  return (
+    <Link href={`/article/${article.slug}`}>
+      <div
+        className="flex gap-3 cursor-pointer group bg-card rounded-lg border border-card-border p-3 h-full"
+        data-testid={`card-compact-${article.id}`}
+      >
+        <div className="relative flex-shrink-0 w-24 h-20 rounded overflow-hidden">
+          <img
+            src={thumbUrl(article.coverImage)}
+            alt={article.title}
+            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            loading="lazy"
+          />
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-7 h-7 rounded-full bg-primary/90 flex items-center justify-center">
+                <Play className="w-3 h-3 text-white ml-px" fill="white" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="flex-1 min-w-0 flex flex-col">
+          <h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
+            {article.title}
+          </h4>
+          <div className="flex items-center gap-2 mt-auto text-[10px] text-muted-foreground">
+            <span>{article.author}</span>
+            <span>·</span>
+            <span>{timeAgo(new Date(article.publishedAt))}</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function TopStoriesList({ articles }: { articles: Article[] }) {
+  return (
+    <div className="bg-card rounded-lg border border-card-border p-4 h-full" data-testid="sidebar-top-stories">
+      <h3 className="font-bold text-card-foreground text-sm mb-3 flex items-center gap-2">
+        <span className="w-1 h-4 bg-primary rounded-full" />
+        Top-Storys
       </h3>
-      <div className="space-y-5">
-        {articles.map((article, index) => (
+      <div className="space-y-3">
+        {articles.slice(0, 5).map((article) => (
           <Link key={article.id} href={`/article/${article.slug}`}>
-            <div
-              className="flex gap-4 cursor-pointer group"
-              data-testid={`card-popular-${article.id}`}
-            >
-              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm">
-                {index + 1}
-              </div>
-              <div className="flex-1 min-w-0">
-                <h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
-                  {article.title}
-                </h4>
-                <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5">
-                  <Clock className="w-3 h-3" />
-                  {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
-                </div>
+            <div className="group cursor-pointer py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
+              <div className="flex items-center gap-1.5 mb-0.5">
+                <span className="text-[10px] font-medium text-primary">{article.category}</span>
+                <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
               </div>
+              <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
+                {article.title}
+              </h4>
             </div>
           </Link>
         ))}
       </div>
-    </aside>
+    </div>
   );
 }
 
-function ArticleCardSkeleton() {
+function BentoSkeleton() {
   return (
-    <div className="bg-card rounded-md border border-card-border">
-      <Skeleton className="w-full aspect-[16/10] rounded-t-md" />
-      <div className="p-5 space-y-3">
-        <Skeleton className="h-3 w-2/3" />
-        <Skeleton className="h-5 w-full" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-3/4" />
+    <div className="space-y-4">
+      <div className="grid grid-cols-6 gap-4">
+        <div className="col-span-6 lg:col-span-3"><Skeleton className="w-full h-[380px] rounded-lg" /></div>
+        <div className="col-span-6 lg:col-span-3 grid grid-cols-2 gap-4">
+          <Skeleton className="w-full h-[180px] rounded-lg" />
+          <Skeleton className="w-full h-[180px] rounded-lg" />
+          <Skeleton className="w-full h-[180px] rounded-lg" />
+          <Skeleton className="w-full h-[180px] rounded-lg" />
+        </div>
       </div>
     </div>
   );
@@ -226,23 +204,54 @@ export default function Home() {
     queryKey: ["/api/articles"],
   });
 
-  const { data: featured } = useQuery<Article[]>({
-    queryKey: ["/api/articles/featured"],
-  });
-
   const { data: popular } = useQuery<Article[]>({
     queryKey: ["/api/articles/popular"],
   });
 
+  if (isLoading || !articles) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <BentoSkeleton />
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
+  const all = articles;
+  const row1Hero = all[0];
+  const row1Medium = all.slice(1, 3);
+  const row2Items = all.slice(3, 6);
+  const row3Items = all.slice(6);
+
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {featured && featured.length > 0 && (
-          <FeaturedSection articles={featured} />
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
+
+        {row1Hero && (
+          <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
+            <div className="lg:col-span-3">
+              <HeroCard article={row1Hero} />
+            </div>
+
+            <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
+              {row1Medium.map((a) => (
+                <MediumCard key={a.id} article={a} />
+              ))}
+            </div>
+
+            <div className="lg:col-span-1">
+              {popular && popular.length > 0 && (
+                <TopStoriesList articles={popular} />
+              )}
+            </div>
+          </div>
         )}
 
-        <div className="mb-8 rounded-md border border-card-border bg-card overflow-hidden">
+        <div className="rounded-lg border border-card-border bg-card overflow-hidden">
           <AdSense
             slot="auto"
             format="horizontal"
@@ -250,39 +259,32 @@ export default function Home() {
           />
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          <div className="lg:col-span-2">
-            {isLoading ? (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {Array.from({ length: 4 }).map((_, i) => (
-                  <ArticleCardSkeleton key={i} />
-                ))}
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {(articles || []).flatMap((article, index) => {
-                  const items = [
-                    <ArticleCard key={article.id} article={article} />,
-                  ];
-                  if (index === 1) {
-                    items.push(<ArticleCardAd key="ad-feed-1" />);
-                  }
-                  if (index === 4) {
-                    items.push(<ArticleCardAd key="ad-feed-2" />);
-                  }
-                  return items;
-                })}
-              </div>
-            )}
+        {row2Items.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {row2Items.map((a) => (
+              <MediumCard key={a.id} article={a} />
+            ))}
+            <ArticleCardAd key="ad-row2" />
           </div>
+        )}
 
-          <div className="lg:col-span-1">
-            {popular && popular.length > 0 && (
-              <PopularSidebar articles={popular} />
-            )}
-            <SidebarAd />
+        {row3Items.length > 0 && (
+          <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
+            <div className="lg:col-span-3">
+              {row3Items[0] && <HeroCard article={row3Items[0]} />}
+            </div>
+            <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {row3Items.slice(1, 3).map((a) => (
+                <MediumCard key={a.id} article={a} />
+              ))}
+              {row3Items.slice(3).map((a) => (
+                <CompactCard key={a.id} article={a} />
+              ))}
+              <ArticleCardAd key="ad-row3" />
+            </div>
           </div>
-        </div>
+        )}
+
       </main>
       <Footer />
     </div>