change dj;

src/app/globals.css

@@ -1,3 +1,51 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@700&display=swap');
-@import "tailwindcss";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --color-flyer-yellow: #DEE213;
+  --color-flyer-black: #171512;
+  --color-flyer-cream: #FAF7EC;
+
+  --font-roboto: Roboto, sans-serif;
+  --font-stick: "Stick No Bills", sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 84px;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes photo-sway {
+  0%, 100% {
+    transform: rotate(3deg);
+  }
+  50% {
+    transform: rotate(-2deg);
+  }
+}
+
+.animate-photo-sway {
+  animation: photo-sway 5s ease-in-out infinite;
+}
+
+.bg-halftone {
+  background-image: radial-gradient(rgba(23, 21, 18, 0.12) 1.5px, transparent 1.5px);
+  background-size: 12px 12px;
+}

src/app/impressum/page.tsx

@@ -4,8 +4,8 @@ export default function ImpressumPage() {
   return (
     <>
       {/* <Header /> */}
-      <div className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Impressum</h1>
+      <div className="container mx-auto px-4 py-16 bg-flyer-cream min-h-screen">
+        <h1 className="font-stick uppercase text-4xl md:text-5xl mb-10 text-flyer-black">Impressum</h1>
 
         <h2 className="text-2xl font-semibold mb-4">Angaben gemäß § 5 E-Commerce-Gesetz (ECG) und § 25 Mediengesetz (MedienG):</h2>
         <p>
@@ -16,7 +16,7 @@ export default function ImpressumPage() {
         <p className="mt-2">
           Kommandant: HBI Ing. Bernhard Ehgartner<br />
           E-Mail: kdo.008@bfvhb.at<br />
-          Homepage: <a href="https://feuerwehr-friedberg.at" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://feuerwehr-friedberg.at</a>
+          Homepage: <a href="https://feuerwehr-friedberg.at" target="_blank" rel="noopener noreferrer" className="text-flyer-black font-bold underline decoration-flyer-yellow decoration-4 underline-offset-2 hover:decoration-black">https://feuerwehr-friedberg.at</a>
         </p>
 
         <h2 className="text-2xl font-semibold mt-8 mb-4">Rechtsform:</h2>

src/app/layout.tsx

@@ -16,16 +16,16 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Steinbruchfest 2025",
-  description: "Steinbruchfest und 150 Jahr-Feier der Freiwillige Feuerwehr Friedberg",
+  title: "Steinbruchfest 2026",
+  description: "Steinbruchfest der Freiwillige Feuerwehr Friedberg",
   openGraph: {
     images: [ { width: 512, height: 512, url: 'https://steinbruchfest.at/images/android-chrome-512x512.png', type: 'image/png' } ],
     type: "website",
     url: "https://steinbruchfest.at",
-    title: "Steinbruchfest 2025",
-    description: "Steinbruchfest und 150 Jahr-Feier der Freiwillige Feuerwehr Friedberg",
+    title: "Steinbruchfest 2026",
+    description: "Steinbruchfest der Freiwillige Feuerwehr Friedberg",
     locale: "de_AT",
-    siteName: "Steinbruchfest 2025"
+    siteName: "Steinbruchfest 2026"
     
   },
 };

src/components/CookieBanner.tsx

@@ -22,9 +22,9 @@ export default function CookieBanner() {
   }
 
   return (
-    <div className="fixed bottom-0 inset-x-0 bg-gray-800 text-white p-4 flex flex-col items-center z-50">
+    <div className="fixed bottom-0 inset-x-0 bg-flyer-black text-white border-t-4 border-flyer-yellow p-4 flex flex-col items-center z-50">
       <p className="text-center max-w-prose mx-auto">Beim Steinbruchfest gibt es dann frische Mehlspeisen. Hier leider nur technisch notwendige Cookies</p>
-      <button onClick={handleAccept} className="bg-white text-black px-4 py-2 rounded-full mt-2">Akzeptieren</button>
+      <button onClick={handleAccept} className="bg-flyer-yellow text-black font-bold px-6 py-2 rounded-full mt-3 hover:scale-105 transition-transform">Akzeptieren</button>
     </div>
   );
 }

src/components/Dirndlrocker.tsx

@@ -0,0 +1,11 @@
+
+export default function Dirndlrocker() {
+    return (
+        <svg
+            className="w-full h-full object-cover"
+            viewBox="0 0 1920 576"
+            xmlns="http://www.w3.org/2000/svg">
+            <image href="/images/dirndlrocker_black.png" width="1920" height="576" />
+        </svg>
+    )
+}

src/components/layout/Footer.tsx

@@ -1,10 +1,27 @@
+import { FaEnvelope, FaFireAlt, FaMapMarkerAlt } from "react-icons/fa";
+import Image from 'next/image';
+
 export default function Footer() {
   return (
-    <footer className="bg-gray-800 text-white py-8 min-h-fit">
+    <footer className="bg-flyer-black text-white border-t-4 border-flyer-yellow py-12">
       <div className="container mx-auto px-4 text-center">
-        <p>&copy; 2025 Freiwillige Feuerwehr Friedberg</p>
-        <p className="mt-2">Grazerstraße 355, 8240 Friedberg</p>
-        <p className="mt-2">kdo.008@bfvhb.at</p>
+        <div className="flex items-center justify-center gap-2 mb-4">
+        <Image
+          src="/images/android-chrome-512x512.png"
+          alt="FF Friedberg"
+          width={32}
+          height={32}
+          className="group-hover:scale-110 transition-transform"
+        />
+          <p className="font-stick uppercase tracking-wide">Freiwillige Feuerwehr Friedberg</p>
+        </div>
+        <p className="flex items-center justify-center gap-2 text-white/70 text-sm mt-2">
+          <FaMapMarkerAlt className="shrink-0" /> Grazerstraße 355, 8240 Friedberg
+        </p>
+        <p className="flex items-center justify-center gap-2 text-white/70 text-sm mt-2">
+          <FaEnvelope className="shrink-0" /> kdo.008@bfvhb.at
+        </p>
+        <p className="text-white/40 text-xs mt-8">&copy; 2026 Freiwillige Feuerwehr Friedberg</p>
       </div>
     </footer>
   );

src/components/layout/Header.tsx

@@ -1,9 +1,17 @@
 'use client';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { FaBars, FaTimes } from 'react-icons/fa';
 
+const NAV_LINKS = [
+  { href: '/#program', label: 'Programm' },
+  { href: '/#info', label: 'Infos' },
+  { href: '/#contact', label: 'Anfahrt' },
+  { href: '/impressum', label: 'Impressum' },
+];
+
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -12,20 +20,48 @@ export default function Header() {
   };
 
   return (
-    <header className="sticky top-0 left-0 w-full bg-white shadow-md z-50">
-      <div className="w-full px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold">FF Friedberg</Link>
-        <div className="md:hidden">
-          <button onClick={toggleMenu} className="text-2xl z-50 relative">
-            {isOpen ? <FaTimes /> : <FaBars />}
-          </button>
-        </div>
-        <nav className={`md:flex ${isOpen ? 'block' : 'hidden'} fixed md:relative top-0 left-0 w-full h-full md:w-auto md:h-auto bg-white md:bg-transparent z-40`}>
-          <ul className="flex flex-col md:flex-row items-center justify-center h-full md:space-x-4 space-y-4 md:space-y-0 p-4 md:p-0">
-            <li><Link href="/#program" className="hover:underline" onClick={toggleMenu}>Programm</Link></li>
-            <li><Link href="/#info" className="hover:underline" onClick={toggleMenu}>Infos</Link></li>
-            <li><Link href="/#contact" className="hover:underline" onClick={toggleMenu}>Kontakt</Link></li>
-            <li><Link href="/impressum" className="hover:underline" onClick={toggleMenu}>Impressum</Link></li>
+    <header className="sticky top-0 left-0 w-full z-50">
+      <div className="absolute inset-0 -z-10 bg-flyer-black [clip-path:polygon(0_0,100%_0,100%_100%,0_82%)] [filter:drop-shadow(0_4px_0_#DEE213)]" />
+
+      <div className="container mx-auto px-4 pt-3 pb-8 md:pb-10 flex justify-between items-center">
+        <Link href="/" className="flex items-center gap-2 md:gap-3 group" onClick={() => setIsOpen(false)}>
+          <Image
+            src="/images/android-chrome-512x512.png"
+            alt="FF Friedberg"
+            width={40}
+            height={40}
+            className="group-hover:scale-110 transition-transform"
+          />
+          <span className="font-stick uppercase leading-tight text-white text-[11px] sm:text-sm md:text-lg">
+            Freiwillige<br />Feuerwehr<br />Friedberg
+          </span>
+        </Link>
+
+        <button
+          onClick={toggleMenu}
+          className="md:hidden text-2xl text-white z-50 relative"
+          aria-label="Menü öffnen"
+        >
+          {isOpen ? <FaTimes /> : <FaBars />}
+        </button>
+
+        <nav
+          className={`fixed md:relative top-0 left-0 w-full h-screen md:h-auto md:w-auto bg-flyer-black md:bg-transparent z-40 transition-transform duration-300 ${
+            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+          }`}
+        >
+          <ul className="flex flex-col md:flex-row items-center justify-center h-full md:h-auto gap-8 md:gap-6 p-4 md:p-0">
+            {NAV_LINKS.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  onClick={toggleMenu}
+                  className="text-lg md:text-base font-bold uppercase tracking-wide text-white hover:text-flyer-yellow transition-colors border-b-2 border-transparent hover:border-flyer-yellow pb-1"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
           </ul>
         </nav>
       </div>

src/components/sections/Contact.tsx

@@ -1,27 +1,34 @@
+import { FaCloudRain, FaMapMarkerAlt } from "react-icons/fa";
+
 export default function Contact() {
   return (
-    <section id="contact" className="py-20 bg-white">
+    <section id="contact" className="py-20 md:py-28 bg-white">
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Kontakt & Anfahrt</h2>
-        <div className="flex flex-col md:flex-row md:space-x-8">
-          <div className="flex-1 mb-8 md:mb-0">
-            <h3 className="text-xl md:text-2xl font-bold mb-4">Adresse</h3>
-            <p>Steinbruch Friedberg</p>
-            <p className="mt-4">Steinerstraße 253, 8240 Friedberg</p>
-            <p>Bei Schlechtwetter im Sportzentrum Friedberg</p>
-          </div>
-          <div className="flex-1">
-            <div className="aspect-w-16 aspect-h-9">
-              <iframe
-                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3228.641194756047!2d16.055658899999997!3d47.448087799999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476e7d7cb5936f95%3A0xab5b000c861e595b!2sSteinbruch%20Friedberg!5e1!3m2!1sde!2sat!4v1751542474148!5m2!1sde!2sat"
-                width="100%"
-                height="100%"
-                style={{ border: 0 }}
-                allowFullScreen={true}
-                loading="lazy"
-              ></iframe>
+        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
+          Anfahrt
+        </h2>
+        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8 items-stretch">
+          <div className="bg-flyer-cream rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
+            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
+              <FaMapMarkerAlt className="text-flyer-yellow" /> Adresse
+            </h3>
+            <p className="text-lg font-bold">Steinbruch Friedberg</p>
+            <p className="mt-1 text-flyer-black/80">Steinerstraße 253, 8240 Friedberg</p>
+            <div className="mt-6 flex items-start gap-3 bg-flyer-yellow/30 rounded-lg px-4 py-3 text-sm">
+              <FaCloudRain className="mt-0.5 shrink-0" />
+              <span>Bei Schlechtwetter im Sportzentrum Friedberg</span>
             </div>
           </div>
+          <div className="rounded-2xl overflow-hidden shadow-xl border-2 border-flyer-black/10 min-h-[300px]">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3228.641194756047!2d16.055658899999997!3d47.448087799999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476e7d7cb5936f95%3A0xab5b000c861e595b!2sSteinbruch%20Friedberg!5e1!3m2!1sde!2sat!4v1751542474148!5m2!1sde!2sat"
+              width="100%"
+              height="100%"
+              style={{ border: 0, minHeight: 300 }}
+              allowFullScreen={true}
+              loading="lazy"
+            ></iframe>
+          </div>
         </div>
       </div>
     </section>

src/components/sections/Hero.tsx

@@ -1,24 +1,53 @@
-import MobileImageLandscape from "../MobileImageLandscape";
-
+import { FaCalendarAlt, FaMapMarkerAlt } from "react-icons/fa";
 
 export default function Hero() {
   return (
-    <section className="relative w-full bg-flyer-yellow flex flex-col">
-      <div className="w-full h-[25vh] mt-4 flex flex-col text-center text-black">
-        <div className="md:hidden">
-          <h1 className="text-6xl font-bold font-stick">STEIN</h1>
-          <h1 className="text-6xl font-bold font-stick">BRUCH</h1>
-          <h1 className="text-6xl font-bold font-stick">FEST</h1>
+    <section className="relative w-full bg-flyer-yellow overflow-hidden">
+      <div className="absolute inset-0 bg-halftone opacity-50 pointer-events-none" />
+
+      <div className="relative container mx-auto px-4 pt-20 pb-24 md:pt-24 md:pb-32 grid md:grid-cols-2 gap-12 items-center">
+        <div className="text-black animate-fade-in-up">
+          <h1 className="font-stick uppercase leading-[0.85] tracking-tight text-7xl sm:text-8xl lg:text-[7.5rem] [text-shadow:4px_4px_0_rgba(255,255,255,0.4)]">
+            Stein<br />Bruch<br />Fest
+          </h1>
+
+          <div className="mt-8 inline-flex flex-wrap items-center gap-3">
+            <span className="inline-flex items-center gap-2 bg-flyer-black text-flyer-yellow font-bold uppercase tracking-wide px-4 py-2 rounded-full text-sm sm:text-base">
+              <FaCalendarAlt /> 15. + 16. Aug.
+            </span>
+            <span className="inline-flex items-center gap-2 bg-black/10 text-black font-bold uppercase tracking-wide px-4 py-2 rounded-full text-sm sm:text-base border-2 border-black">
+              <FaMapMarkerAlt /> Steinbruch Friedberg
+            </span>
+          </div>
+
+          <div className="mt-10 flex flex-wrap gap-4">
+            <a
+              href="#program"
+              className="bg-transparent text-black font-bold uppercase tracking-wide px-8 py-4 rounded-full border-2 border-black hover:bg-black hover:text-white transition-colors"
+            >
+              Programm
+            </a>
+            <a
+              href="#contact"
+              className="bg-transparent text-black font-bold uppercase tracking-wide px-8 py-4 rounded-full border-2 border-black hover:bg-black hover:text-white transition-colors"
+            >
+              Anfahrt
+            </a>
+          </div>
         </div>
-        <div className="hidden md:block">
-          <h1 className="text-9xl font-bold font-stick">STEINBRUCHFEST</h1>
+
+        <div className="hidden md:flex justify-center animate-fade-in-up [animation-delay:150ms]">
+          <div className="animate-photo-sway bg-white p-4 rounded-lg shadow-2xl">
+            <img
+                src="/images/manschgerl_gelb.svg"
+                alt="150 Jahre FF Friedberg"
+                className="w-48 sm:w-64 md:w-72 h-auto shrink-0"
+              />
+          </div>
         </div>
-        <p className="text-2xl md:text-4xl mt-4">16. + 17. Aug.</p>
       </div>
-      <div className="w-full h-[50vh]">
-        <MobileImageLandscape />
-      </div>
-    
+
+      <div className="h-10 md:h-14 bg-flyer-black [clip-path:polygon(0_100%,100%_0,100%_100%)]" />
     </section>
   );
 }

src/components/sections/Info.tsx

@@ -1,24 +1,52 @@
+import { FaHandHoldingHeart, FaTicketAlt } from "react-icons/fa";
+
+const VENDORS = [
+  "Trafik Gressenbauer",
+  "Der Salon - Monika Krammer",
+  "Tapeziermeister Michäler",
+  "FF-Mitglieder",
+];
+
 export default function Info() {
   return (
-    <section id="info" className="py-20 bg-gray-100">
+    <section id="info" className="py-20 md:py-28 bg-flyer-cream">
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Infos</h2>
-        <div className="max-w-3xl mx-auto">
-          <div className="mb-8">
-            <h3 className="text-xl md:text-2xl font-bold mb-4">Karten</h3>
-            <p>VVK € 10,- / AK € 12,-</p>
-            <br />
-            <p>Erhältlich bei</p>
-            <ul className="list-disc pl-5">
-              <li>Trafik Gressenbauer</li>
-              <li>Der Salon - Monika Krammer</li>
-              <li>Tapeziermeister Michäler</li>
-              <li>FF-Mitglieder</li>
+        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
+          Infos
+        </h2>
+
+        <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
+          <div className="bg-flyer-black text-white rounded-2xl shadow-xl p-8">
+            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6">
+              <FaTicketAlt className="text-flyer-yellow" /> Karten
+            </h3>
+            <div className="flex items-baseline gap-4 mb-6">
+              <span className="font-stick text-4xl text-flyer-yellow">€ 10,-</span>
+              <span className="uppercase text-sm tracking-wide text-white/70">VVK</span>
+              <span className="text-white/40">/</span>
+              <span className="font-stick text-4xl text-flyer-yellow">€ 12,-</span>
+              <span className="uppercase text-sm tracking-wide text-white/70">AK</span>
+            </div>
+            <p className="uppercase text-sm tracking-wide text-white/70 mb-3">Erhältlich bei</p>
+            <ul className="space-y-2">
+              {VENDORS.map((vendor) => (
+                <li
+                  key={vendor}
+                  className="bg-white/10 rounded-lg px-4 py-2 text-sm md:text-base"
+                >
+                  {vendor}
+                </li>
+              ))}
             </ul>
           </div>
-          <div>
-            <h3 className="text-xl md:text-2xl font-bold mb-4">Reinerlös</h3>
-            <p>Der Reinerlös dient der Finanzierung von Fahrzeugen und Geräten der Feuerwehr.</p>
+
+          <div className="bg-white rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
+            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
+              <FaHandHoldingHeart className="text-flyer-yellow" /> Reinerlös
+            </h3>
+            <p className="text-flyer-black/80 leading-relaxed">
+              Der Reinerlös dient der Finanzierung von Fahrzeugen und Geräten der Feuerwehr.
+            </p>
           </div>
         </div>
       </div>

src/components/sections/Program.tsx

@@ -1,31 +1,66 @@
-import Lauser from "../Lauser";
+import { FaChurch, FaClock, FaMusic } from "react-icons/fa";
+import Dirndlrocker from "../Dirndlrocker";
 
 export default function Program() {
   return (
-    <section id="program" className="py-20 bg-white">
+    <section id="program" className="bg-flyer-black text-white py-20 md:py-28">
       <div className="container mx-auto px-4">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Programm</h2>
-        <div className="flex flex-col md:flex-row md:space-x-8">
-          <div className="flex-1 mb-8 md:mb-0">
-            <h3 className="text-xl md:text-2xl font-bold mb-4">Samstag</h3>
-            <p>Beginn: 19 Uhr</p>
-            <p>Ab 21 Uhr Musik</p>
-            <div className="aspect-[682/466] w-40 max-w-xs">
-            <a href="https://www.lauser.at/" target="_blank" rel="noopener noreferrer">
-              <Lauser></Lauser>
-            </a>
-            </div>
-            <div className="aspect-[682/466] w-40 max-w-xs">
-              <img src="/images/dj_baecksn.png" alt="DJ BÄCKSN" />
+        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-yellow mb-16">
+          Programm
+        </h2>
+
+        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
+            <h3 className="font-stick uppercase text-3xl mb-6">Samstag</h3>
+
+            <ul className="space-y-3 font-medium mb-8">
+              <li className="flex items-center gap-3">
+                <FaClock className="shrink-0" /> Beginn: 19 Uhr
+              </li>
+              <li className="flex items-center gap-3">
+                <FaMusic className="shrink-0" /> Ab 21 Uhr Musik
+              </li>
+            </ul>
+
+            <div className="mt-auto grid grid-cols-2 gap-4">
+              <a
+                href="https://www.dirndl-rocker.at/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-white rounded-xl p-4 flex items-center justify-center hover:scale-105 transition-transform"
+              >
+                <div className="aspect-[1920/576] w-full">
+                  <Dirndlrocker />
+                </div>
+              </a>
+              <a
+                href="https://www.instagram.com/dn.sounds/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-white rounded-xl p-4 flex items-center justify-center hover:scale-105 transition-transform"
+              >
+                <img
+                  src="/images/DN_Sounds_black_transparent.png"
+                  alt="DN Sounds"
+                  className="w-full h-auto object-contain"
+                />
+              </a>
             </div>
           </div>
-          <div className="flex-1">
-            <h3 className="text-xl md:text-2xl font-bold mb-4">Sonntag</h3>
-            <p>Ab 8.45 Uhr Hl. Messe</p>
-            <p>Musik: <span className="font-bold">MGV Wechselklang</span></p>
-            <p className="mt-4">Festakt 150 Jahre FF Friedberg</p>
-            <p className="mt-4">Präsentation der neuen Feuerwehrchronik</p>
-            <p className="mt-4">Frühschoppen mit der <span className="font-bold">Stadtkapelle Friedberg</span></p>
+
+          <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
+            <h3 className="font-stick uppercase text-3xl mb-6">Sonntag</h3>
+
+            <ul className="space-y-4 font-medium mb-8">
+              <li className="flex items-start gap-3">
+                <FaChurch className="shrink-0 mt-1" /> Ab 8.45 Uhr Hl. Messe
+              </li>
+              <li className="flex items-start gap-3">
+                <FaMusic className="shrink-0 mt-1" />
+                Frühschoppen mit der{" "}
+                <span className="font-bold">Stadtkapelle Friedberg</span>
+              </li>
+            </ul>
           </div>
         </div>
       </div>

tailwind.config.ts

@@ -1,23 +0,0 @@
-import type { Config } from 'tailwindcss'
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'flyer-yellow': '#FFD700',
-      },
-    },
-    fontFamily: {
-        roboto: ['Roboto', ...defaultTheme.fontFamily.sans],
-        stick: ['"Stick No Bills"', ...defaultTheme.fontFamily.sans],
-      },
-  },
-  plugins: [require('@tailwindcss/typography')],
-}
-export default config