feat: Introduce new service pages for 'Leistungen', 'Telefonie', 'Fernsehen', and 'Internet', accompanied by new layout components and image assets.

app/fernsehen/page.tsx

@@ -0,0 +1,285 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+import { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Fernsehen",
+  description:
+    "Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
+  openGraph: {
+    title: "Fernsehen | Telenet Systems GmbH",
+    description:
+      "Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte.",
+  },
+};
+
+const tvOptions = [
+  {
+    icon: Users,
+    title: "TV Privat",
+    price: "16,47",
+    period: "Monat",
+    description:
+      "Über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in Ihr Wohnzimmer.",
+    features: [
+      "Über 200 TV-Programme",
+      "40 HDTV-Sender inklusive",
+      "Rund 40 Radiosender",
+      "Erstklassige Bildqualität",
+    ],
+    cta: "Jetzt bestellen",
+    image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
+    popular: true,
+  },
+  {
+    icon: Building2,
+    title: "TV Business",
+    price: "Auf Anfrage",
+    period: "",
+    description:
+      "Individuelle TV-Lösungen für Ihr Unternehmen. Hotels, Gaststätten, Wartezimmer – wir finden die passende Lösung.",
+    features: [
+      "Maßgeschneidertes Angebot",
+      "Persönliche Beratung",
+      "Individuelle Kanalauswahl",
+      "Professionelle Installation",
+    ],
+    cta: "Angebot anfragen",
+    image: "/images/misc/tv-business-c3bdfb94-23310090.jpg",
+    popular: false,
+  },
+  {
+    icon: Play,
+    title: "Pay TV",
+    price: "Auf Anfrage",
+    period: "",
+    description:
+      "Exklusive Filme, Serien und Sport in HD/UHD. Ergänzen Sie Ihr TV-Erlebnis mit Premium-Inhalten.",
+    features: [
+      "Premium-Sender verfügbar",
+      "HD/UHD Qualität",
+      "Sport & Filme",
+      "Flexible Pakete",
+    ],
+    cta: "Mehr erfahren",
+    image: "/images/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
+    popular: false,
+  },
+];
+
+const benefits = [
+  "Keine Servicepauschale",
+  "Persönlicher Support vor Ort",
+  "Schnelle Installation",
+  "Faire und transparente Preise",
+];
+
+export default function FernsehenPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+        <div className="absolute inset-0 z-0">
+          <Image
+            src="/images/hero/tv-header-44c1e07b.jpg"
+            alt="Familie genießt Fernsehen"
+            fill
+            priority
+            className="object-cover opacity-40"
+            sizes="100vw"
+          />
+        </div>
+        <Container className="relative z-10">
+          <div className="max-w-3xl">
+            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+              <Tv className="h-5 w-5" aria-hidden="true" />
+              <span className="font-medium">Fernsehen</span>
+            </div>
+            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+              Über 200 TV-Programme in bester Qualität
+            </h1>
+            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+              Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
+              Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
+            </p>
+            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Jetzt bestellen
+              </Link>
+              <a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+                Angebote ansehen
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Trust Bar */}
+      <Section variant="sm" className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+            {benefits.map((benefit) => (
+              <div
+                key={benefit}
+                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+              >
+                <CheckCircle
+                  className="h-5 w-5 text-[var(--color-success)]"
+                  aria-hidden="true"
+                />
+                <span>{benefit}</span>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* TV Options */}
+      <Section id="angebote">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>Unsere TV-Angebote</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
+            {tvOptions.map((option) => (
+              <div
+                key={option.title}
+                className={`card relative overflow-hidden ${
+                  option.popular
+                    ? "border-[var(--color-primary)] border-2"
+                    : ""
+                }`}
+              >
+                {option.popular && (
+                  <div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
+                    Beliebt
+                  </div>
+                )}
+                <div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                  <Image
+                    src={option.image}
+                    alt={option.title}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 1024px) 100vw, 33vw"
+                  />
+                </div>
+                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
+                  <option.icon className="h-5 w-5" aria-hidden="true" />
+                  <h3 className="heading-4">{option.title}</h3>
+                </div>
+                <div className="mb-[var(--spacing-md)]">
+                  <span className="heading-2 text-[var(--color-foreground)]">
+                    {option.price.includes("Anfrage") ? "" : "€ "}
+                    {option.price}
+                  </span>
+                  {option.period && (
+                    <span className="text-muted"> / {option.period}</span>
+                  )}
+                </div>
+                <p className="text-muted mb-[var(--spacing-lg)]">
+                  {option.description}
+                </p>
+                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                  {option.features.map((feature) => (
+                    <li
+                      key={feature}
+                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
+                    >
+                      <CheckCircle
+                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Link
+                  href="/kontakt"
+                  className={`btn w-full ${
+                    option.popular ? "btn-primary" : "btn-outline"
+                  }`}
+                >
+                  {option.cta}
+                </Link>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* FAQ Section */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container variant="narrow">
+          <div className="text-center mb-[var(--spacing-3xl)]">
+            <h2>Häufige Fragen</h2>
+          </div>
+          <div className="space-y-[var(--spacing-lg)]">
+            <div className="card">
+              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                Wie schnell ist die Installation?
+              </h3>
+              <p className="text-muted">
+                In der Regel können wir innerhalb weniger Werktage einen Installationstermin
+                vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
+              </p>
+            </div>
+            <div className="card">
+              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                Gibt es versteckte Kosten?
+              </h3>
+              <p className="text-muted">
+                Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
+                Es gibt keine Servicepauschale und keine versteckten Gebühren.
+              </p>
+            </div>
+            <div className="card">
+              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                Kann ich Pay-TV dazubuchen?
+              </h3>
+              <p className="text-muted">
+                Ja, wir bieten verschiedene Pay-TV-Optionen an. Kontaktieren Sie uns
+                und wir finden das passende Paket für Sie.
+              </p>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* CTA Section */}
+      <Section className="bg-[var(--color-primary)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto">
+            <h2 className="text-[var(--color-background)]">
+              Bereit für bestes Fernsehen?
+            </h2>
+            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+              Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
+              direkt Ihren TV-Anschluss.
+            </p>
+            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+              <Link
+                href="/kontakt"
+                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
+              >
+                Jetzt bestellen
+              </Link>
+              <a
+                href="tel:+4356725000"
+                className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
+              >
+                +43 5672 5000
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+    </>
+  );
+}

app/internet/page.tsx

@@ -0,0 +1,402 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+import { Wifi, Zap, Building2, CheckCircle, ArrowDown, ArrowUp } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Internet",
+  description:
+    "Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Flexible Tarife für Privat- und Geschäftskunden ab 14,50 € im Monat. Ohne Servicepauschale.",
+  openGraph: {
+    title: "Internet | Telenet Systems GmbH",
+    description:
+      "Highspeed-Internet über Kabel und Glasfaser im Bezirk Reutte. Ab 14,50 € im Monat.",
+  },
+};
+
+const kabelTarife = [
+  {
+    name: "telenet.hit",
+    price: "14,50",
+    download: "40",
+    upload: "6",
+    popular: false,
+  },
+  {
+    name: "telenet.eco",
+    price: "19,00",
+    download: "60",
+    upload: "8",
+    popular: false,
+  },
+  {
+    name: "telenet.fun",
+    price: "29,00",
+    download: "80",
+    upload: "12",
+    popular: true,
+  },
+  {
+    name: "telenet.pro",
+    price: "39,00",
+    download: "100",
+    upload: "14",
+    popular: false,
+  },
+  {
+    name: "telenet.mega",
+    price: "49,00",
+    download: "180",
+    upload: "22",
+    popular: false,
+  },
+];
+
+const glasfaserTarife = [
+  {
+    name: "telenet.eco",
+    price: "23,00",
+    download: "100",
+    upload: "100",
+    popular: false,
+  },
+  {
+    name: "telenet.fun",
+    price: "29,00",
+    download: "200",
+    upload: "200",
+    popular: true,
+  },
+  {
+    name: "telenet.pro",
+    price: "39,00",
+    download: "300",
+    upload: "300",
+    popular: false,
+  },
+  {
+    name: "telenet.mega",
+    price: "49,00",
+    download: "500",
+    upload: "500",
+    popular: false,
+  },
+];
+
+const benefits = [
+  "Keine Servicepauschale",
+  "Unlimitiertes Datenvolumen",
+  "IPv6 inklusive",
+  "Persönlicher Support",
+];
+
+export default function InternetPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+        <div className="absolute inset-0 z-0">
+          <Image
+            src="/images/hero/internet-header-431619ac.jpg"
+            alt="Highspeed Internet"
+            fill
+            priority
+            className="object-cover opacity-40"
+            sizes="100vw"
+          />
+        </div>
+        <Container className="relative z-10">
+          <div className="max-w-3xl">
+            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+              <Wifi className="h-5 w-5" aria-hidden="true" />
+              <span className="font-medium">Internet</span>
+            </div>
+            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+              Highspeed-Internet für Ihr Zuhause
+            </h1>
+            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+              Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
+              Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
+            </p>
+            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Jetzt bestellen
+              </Link>
+              <a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+                Tarife vergleichen
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Trust Bar */}
+      <Section variant="sm" className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+            {benefits.map((benefit) => (
+              <div
+                key={benefit}
+                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+              >
+                <CheckCircle
+                  className="h-5 w-5 text-[var(--color-success)]"
+                  aria-hidden="true"
+                />
+                <span>{benefit}</span>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* Kabel-Tarife */}
+      <Section id="tarife">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+              <Zap className="h-5 w-5" aria-hidden="true" />
+              <span className="font-medium">Kabel-Internet</span>
+            </div>
+            <h2>Tarife für Kabel-Kunden</h2>
+            <p className="text-muted mt-[var(--spacing-md)]">
+              Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
+            </p>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse">
+              <thead>
+                <tr className="border-b border-[var(--color-border)]">
+                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    Tarif
+                  </th>
+                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    <span className="flex items-center justify-center gap-1">
+                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
+                      Download
+                    </span>
+                  </th>
+                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    <span className="flex items-center justify-center gap-1">
+                      <ArrowUp className="h-4 w-4" aria-hidden="true" />
+                      Upload
+                    </span>
+                  </th>
+                  <th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    Preis / Monat
+                  </th>
+                  <th className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {kabelTarife.map((tarif) => (
+                  <tr
+                    key={tarif.name}
+                    className={`border-b border-[var(--color-border)] ${
+                      tarif.popular ? "bg-[var(--color-primary)]/5" : ""
+                    }`}
+                  >
+                    <td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
+                      <span className="font-medium">{tarif.name}</span>
+                      {tarif.popular && (
+                        <span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
+                          Beliebt
+                        </span>
+                      )}
+                    </td>
+                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
+                      {tarif.download} Mbit/s
+                    </td>
+                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
+                      {tarif.upload} Mbit/s
+                    </td>
+                    <td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                      € {tarif.price}
+                    </td>
+                    <td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
+                      <Link
+                        href="/kontakt"
+                        className="btn btn-sm btn-outline"
+                      >
+                        Bestellen
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <p className="text-sm text-muted mt-[var(--spacing-lg)]">
+            Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
+            Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
+            Einmalige Installationskosten je nach Aufwand.
+          </p>
+        </Container>
+      </Section>
+
+      {/* Glasfaser-Tarife */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+              <Zap className="h-5 w-5" aria-hidden="true" />
+              <span className="font-medium">Glasfaser-Internet</span>
+            </div>
+            <h2>Tarife für Glasfaser-Kunden</h2>
+            <p className="text-muted mt-[var(--spacing-md)]">
+              Symmetrische Bandbreite – gleich schnell hoch- wie runterladen. Tarife gültig ab 01.04.2025.
+            </p>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse bg-[var(--color-background)] rounded-[var(--radius-lg)]">
+              <thead>
+                <tr className="border-b border-[var(--color-border)]">
+                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-lg)] font-semibold">
+                    Tarif
+                  </th>
+                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    <span className="flex items-center justify-center gap-1">
+                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
+                      Download
+                    </span>
+                  </th>
+                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    <span className="flex items-center justify-center gap-1">
+                      <ArrowUp className="h-4 w-4" aria-hidden="true" />
+                      Upload
+                    </span>
+                  </th>
+                  <th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                    Preis / Monat
+                  </th>
+                  <th className="py-[var(--spacing-md)] px-[var(--spacing-lg)]"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {glasfaserTarife.map((tarif) => (
+                  <tr
+                    key={tarif.name + "-gf"}
+                    className={`border-b border-[var(--color-border)] last:border-b-0 ${
+                      tarif.popular ? "bg-[var(--color-primary)]/5" : ""
+                    }`}
+                  >
+                    <td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
+                      <span className="font-medium">{tarif.name}</span>
+                      {tarif.popular && (
+                        <span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
+                          Empfohlen
+                        </span>
+                      )}
+                    </td>
+                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
+                      {tarif.download} Mbit/s
+                    </td>
+                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
+                      {tarif.upload} Mbit/s
+                    </td>
+                    <td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                      € {tarif.price}
+                    </td>
+                    <td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
+                      <Link
+                        href="/kontakt"
+                        className="btn btn-sm btn-outline"
+                      >
+                        Bestellen
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <p className="text-sm text-muted mt-[var(--spacing-lg)]">
+            Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
+            Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
+          </p>
+        </Container>
+      </Section>
+
+      {/* Business Section */}
+      <Section>
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
+              <Image
+                src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
+                alt="Geschäftskunde im Büro"
+                fill
+                className="object-cover"
+                sizes="(max-width: 1024px) 100vw, 50vw"
+              />
+            </div>
+            <div>
+              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                <Building2 className="h-5 w-5" aria-hidden="true" />
+                <span className="font-medium">Business-Internet</span>
+              </div>
+              <h2>Maßgeschneiderte Lösungen für Ihr Unternehmen</h2>
+              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                Für Unternehmen erstellen wir individuelle Internet-Angebote
+                inklusive passendem Service-Paket.
+              </p>
+              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Dedizierte Bandbreite</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Statische IP-Adressen</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Erweiterte SLA-Optionen</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Persönliche Betreuung</span>
+                </li>
+              </ul>
+              <Link href="/kontakt" className="btn btn-primary">
+                Angebot anfragen
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* CTA Section */}
+      <Section className="bg-[var(--color-foreground)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto">
+            <h2 className="text-[var(--color-background)]">
+              Welcher Tarif passt zu Ihnen?
+            </h2>
+            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+              Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
+              Internet-Tarif für Ihre Bedürfnisse.
+            </p>
+            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Beratung anfragen
+              </Link>
+              <a
+                href="tel:+4356725000"
+                className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
+              >
+                +43 5672 5000
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+    </>
+  );
+}

app/layout.tsx

@@ -1,98 +1,69 @@
 import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
 import "@/theme/globals.css";
+import "@/theme/stylesheet.css";
 
-/**
- * Root Layout
- *
- * This layout is designed to work with the 9-category parameter system.
- * It supports:
- * - Dynamic locale (from spec.client.locale or content.defaultLanguage)
- * - Google Fonts loading (from spec.brand.fonts)
- * - Scroll behavior (from spec.interaction.scrollBehavior)
- * - Meta tags for SEO
- *
- * CUSTOMIZATION INSTRUCTIONS:
- * 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
- * 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
- * 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
- * 4. Update metadata based on spec.brand and spec.seo
- */
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
 
-// TODO: Update these values based on ProjectSpec.json
-// - title: from spec.brand.name or spec.meta.projectName
-// - description: from spec.brand.description
-// - keywords: from spec.seo.primaryKeywords
 export const metadata: Metadata = {
-  title: "Website",
-  description: "Generated website",
+  title: {
+    default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
+    template: "%s | Telenet Systems GmbH",
+  },
+  description:
+    "Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Seit 1976 verbinden wir Menschen und Technik. Persönliche Beratung, schneller Support.",
+  keywords: [
+    "Telekommunikation Tirol",
+    "IT-Dienstleister Reutte",
+    "Highspeed-Internet Österreich",
+    "Glasfaser Tirol",
+    "TeleNetSystems",
+    "regionaler IT-Service",
+    "Kabel-TV Anbieter",
+    "Telefonie Tarife Österreich",
+  ],
+  authors: [{ name: "Telenet Systems GmbH" }],
+  creator: "Telenet Systems GmbH",
+  publisher: "Telenet Systems GmbH",
   robots: {
     index: true,
     follow: true,
   },
-  // Open Graph tags - update based on spec
   openGraph: {
     type: "website",
-    locale: "de_DE",
-    // title, description, images will be set per project
+    locale: "de_AT",
+    url: "https://www.tnr.at",
+    siteName: "Telenet Systems GmbH",
+    title: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
+    description:
+      "Ihr regionaler Partner für TV, Internet, Telefonie und IT-Services im Bezirk Reutte. Persönliche Beratung, schneller Support.",
   },
 };
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  // TODO: Update themeColor from spec.brand.colors.primary or design_tokens
-  themeColor: "#ffffff",
+  themeColor: "#f39210",
 };
 
-/**
- * Font Loading
- *
- * To add Google Fonts based on spec.brand.fonts:
- *
- * 1. Import from next/font/google:
- *    import { Inter, Playfair_Display } from "next/font/google";
- *
- * 2. Configure fonts:
- *    const headingFont = Playfair_Display({
- *      subsets: ["latin"],
- *      variable: "--font-heading",
- *      display: "swap",
- *    });
- *
- *    const bodyFont = Inter({
- *      subsets: ["latin"],
- *      variable: "--font-body",
- *      display: "swap",
- *    });
- *
- * 3. Apply to html element:
- *    <html lang="de" className={`${headingFont.variable} ${bodyFont.variable}`}>
- *
- * 4. Update globals.css to use the variables:
- *    --font-sans: var(--font-body), system-ui, sans-serif;
- *    --font-heading: var(--font-heading), Georgia, serif;
- */
-
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  // TODO: Update lang attribute based on spec.client.locale
-  // Examples: "de", "de-AT", "de-CH", "en", "en-US"
-  const locale = "de";
-
   return (
-    <html lang={locale}>
-      {/*
-        Scroll Behavior:
-        - If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
-        - Or set scroll-behavior: smooth in globals.css on html element
-
-        Example with smooth scrolling:
-        <html lang={locale} className="scroll-smooth">
-      */}
-      <body>{children}</body>
+    <html lang="de-AT" className={inter.variable}>
+      <body className="flex min-h-screen flex-col">
+        <Header />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
     </html>
   );
 }

app/leistungen/page.tsx

@@ -0,0 +1,304 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+import {
+  Server,
+  Network,
+  Wrench,
+  Monitor,
+  Cable,
+  Shield,
+  Headphones,
+  Building2,
+  Users,
+  CheckCircle,
+} from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Leistungen",
+  description:
+    "Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
+  openGraph: {
+    title: "Leistungen | Telenet Systems GmbH",
+    description:
+      "Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
+  },
+};
+
+const services = [
+  {
+    icon: Network,
+    title: "Netzwerkplanung",
+    description:
+      "Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
+  },
+  {
+    icon: Server,
+    title: "Serverplanung",
+    description:
+      "Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
+  },
+  {
+    icon: Wrench,
+    title: "IT-Installation",
+    description:
+      "Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
+  },
+  {
+    icon: Monitor,
+    title: "Reparaturen",
+    description:
+      "Schnelle und zuverlässige Reparatur von IT-Geräten und Netzwerkkomponenten.",
+  },
+  {
+    icon: Headphones,
+    title: "Fernwartung",
+    description:
+      "Remote-Support für schnelle Problemlösung ohne Wartezeit auf einen Vor-Ort-Termin.",
+  },
+  {
+    icon: Cable,
+    title: "Glasfaser-Ausbau",
+    description:
+      "Planung und Umsetzung von Glasfaser-Infrastruktur für zukunftssichere Anbindungen.",
+  },
+  {
+    icon: Shield,
+    title: "Qualitätssicherung",
+    description:
+      "Kontinuierliche Überwachung und Optimierung Ihrer IT-Systeme für maximale Verfügbarkeit.",
+  },
+  {
+    icon: Building2,
+    title: "Behördliche Unterstützung",
+    description:
+      "Technisch-behördliche Unterstützung bei Netzprojekten und Genehmigungsverfahren.",
+  },
+];
+
+const targetGroups = [
+  {
+    icon: Users,
+    title: "Privatkunden",
+    description:
+      "Zuverlässige TV-, Internet- und Telefonielösungen für Ihr Zuhause. Mit persönlichem Service vor Ort.",
+    features: [
+      "TV mit über 200 Programmen",
+      "Highspeed-Internet bis 500 Mbit/s",
+      "Günstige Telefonie-Tarife",
+      "Persönliche Beratung",
+    ],
+    cta: "Zu den Tarifen",
+    href: "/internet",
+    image: "/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
+  },
+  {
+    icon: Building2,
+    title: "Geschäftskunden",
+    description:
+      "Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
+    features: [
+      "Business-Internet & Telefonie",
+      "Netzwerk- & Serverplanung",
+      "IT-Installation & Support",
+      "Fernwartung & Monitoring",
+    ],
+    cta: "Kontakt aufnehmen",
+    href: "/kontakt",
+    image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
+  },
+];
+
+export default function LeistungenPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+        <div className="absolute inset-0 z-0">
+          <Image
+            src="/images/services/tnr-leistungen-055053d5.jpg"
+            alt="Telenet Systems Mitarbeiter"
+            fill
+            priority
+            className="object-cover opacity-40"
+            sizes="100vw"
+          />
+        </div>
+        <Container className="relative z-10">
+          <div className="max-w-3xl">
+            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
+              Unser Leistungsangebot
+            </p>
+            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+              Telekommunikation und IT-Services aus einer Hand
+            </h1>
+            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+              Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
+              wir bieten alles, was Sie für moderne Kommunikation benötigen.
+            </p>
+            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Jetzt beraten lassen
+              </Link>
+              <a href="#services" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+                Leistungen entdecken
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Zielgruppen */}
+      <Section>
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>Für Privat- und Geschäftskunden</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
+            {targetGroups.map((group) => (
+              <div key={group.title} className="card overflow-hidden">
+                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                  <Image
+                    src={group.image}
+                    alt={group.title}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 1024px) 100vw, 50vw"
+                  />
+                </div>
+                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
+                  <group.icon className="h-5 w-5" aria-hidden="true" />
+                  <h3 className="heading-3">{group.title}</h3>
+                </div>
+                <p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
+                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                  {group.features.map((feature) => (
+                    <li
+                      key={feature}
+                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
+                    >
+                      <CheckCircle
+                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Link href={group.href} className="btn btn-primary">
+                  {group.cta}
+                </Link>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* IT-Services */}
+      <Section id="services" className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>IT-Services für Unternehmen</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
+              Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
+            {services.map((service) => (
+              <div key={service.title} className="card text-center">
+                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
+                  <service.icon className="h-6 w-6" aria-hidden="true" />
+                </div>
+                <h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
+                <p className="text-sm text-muted">{service.description}</p>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* Glasfaser Section */}
+      <Section>
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
+              <Image
+                src="/images/services/lwl1-40360e27.jpg"
+                alt="Glasfaser-Installation"
+                fill
+                className="object-cover"
+                sizes="(max-width: 1024px) 100vw, 50vw"
+              />
+            </div>
+            <div>
+              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                <Cable className="h-5 w-5" aria-hidden="true" />
+                <span className="font-medium">Glasfaser</span>
+              </div>
+              <h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
+              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
+                Profitieren Sie von unserer langjährigen Erfahrung.
+              </p>
+              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Glasfaser-Planung & Beratung</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Professioneller Netzausbau</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Behördliche Unterstützung</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Qualitätssicherung</span>
+                </li>
+              </ul>
+              <Link href="/kontakt" className="btn btn-primary">
+                Projekt anfragen
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* CTA Section */}
+      <Section className="bg-[var(--color-primary)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto">
+            <h2 className="text-[var(--color-background)]">
+              Haben Sie Fragen zu unseren Leistungen?
+            </h2>
+            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+              Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
+            </p>
+            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+              <Link
+                href="/kontakt"
+                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
+              >
+                Jetzt beraten lassen
+              </Link>
+              <a
+                href="tel:+4356725000"
+                className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
+              >
+                +43 5672 5000
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+    </>
+  );
+}

app/page.tsx

@@ -1,14 +1,297 @@
+import Image from "next/image";
+import Link from "next/link";
 import { Container } from "@/components/layout/Container";
 import { Section } from "@/components/layout/Section";
+import {
+  Tv,
+  Wifi,
+  Phone,
+  Users,
+  Shield,
+  Clock,
+  MapPin,
+  ArrowRight,
+  CheckCircle,
+} from "lucide-react";
 
-export default function Page() {
+const services = [
+  {
+    icon: Tv,
+    title: "Fernsehen",
+    description:
+      "Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.",
+    href: "/fernsehen",
+    image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
+  },
+  {
+    icon: Wifi,
+    title: "Internet",
+    description:
+      "Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.",
+    href: "/internet",
+    image: "/images/misc/internet-7b594a2d-793cefee.jpg",
+  },
+  {
+    icon: Phone,
+    title: "Telefonie",
+    description:
+      "Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
+    href: "/telefonie",
+    image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
+  },
+];
+
+const usps = [
+  {
+    icon: MapPin,
+    title: "Regionale Nähe",
+    description:
+      "Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.",
+  },
+  {
+    icon: Clock,
+    title: "Seit 1976",
+    description:
+      "Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
+  },
+  {
+    icon: Shield,
+    title: "Voller Service",
+    description:
+      "Von TV über Internet bis IT-Support – alles aus einer Hand. Keine Servicepauschale bei unseren Tarifen.",
+  },
+  {
+    icon: Users,
+    title: "Schneller Support",
+    description:
+      "Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.",
+  },
+];
+
+const trustItems = [
+  "Keine versteckten Kosten",
+  "Unlimitiertes Datenvolumen",
+  "Persönlicher Ansprechpartner",
+  "Regionaler Kundendienst",
+];
+
+export default function HomePage() {
   return (
-    <main>
-      <Section>
-        <Container>
-          <p>Ready</p>
+    <>
+      {/* Hero Section */}
+      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+        <div className="absolute inset-0 z-0">
+          <Image
+            src="/images/misc/firma1-8a863d8b.jpg"
+            alt="Telenet Systems Firmengebäude in Reutte"
+            fill
+            priority
+            className="object-cover opacity-40"
+            sizes="100vw"
+          />
+        </div>
+        <Container className="relative z-10">
+          <div className="max-w-3xl">
+            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
+              Ihr regionaler Partner in Tirol
+            </p>
+            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+              Telekommunikation und IT-Services aus einer Hand
+            </h1>
+            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+              Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
+              schnellem Internet und flexibler Telefonie. Persönliche Beratung,
+              ehrlicher Service – ohne komplizierte Prozesse.
+            </p>
+            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Jetzt beraten lassen
+              </Link>
+              <Link href="/leistungen" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+                Unsere Leistungen
+              </Link>
+            </div>
+          </div>
         </Container>
       </Section>
-    </main>
+
+      {/* USP Section */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>Warum Telenet Systems?</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+            {usps.map((usp) => (
+              <div key={usp.title} className="text-center">
+                <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
+                  <usp.icon className="h-6 w-6" aria-hidden="true" />
+                </div>
+                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
+                <p className="text-muted">{usp.description}</p>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* Services Section */}
+      <Section>
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>Unsere Leistungen für Sie</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Fernsehen, Internet und Telefonie – alles aus einer Hand, ohne Servicepauschale.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
+            {services.map((service) => (
+              <Link
+                key={service.title}
+                href={service.href}
+                className="card group overflow-hidden hover:shadow-[var(--shadow-lg)] transition-shadow"
+              >
+                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)] overflow-hidden">
+                  <Image
+                    src={service.image}
+                    alt={service.title}
+                    fill
+                    className="object-cover group-hover:scale-105 transition-transform duration-300"
+                    sizes="(max-width: 1024px) 100vw, 33vw"
+                  />
+                </div>
+                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
+                  <service.icon className="h-5 w-5" aria-hidden="true" />
+                  <h3 className="heading-4">{service.title}</h3>
+                </div>
+                <p className="text-muted mb-[var(--spacing-md)]">{service.description}</p>
+                <span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium group-hover:gap-[var(--spacing-sm)] transition-all">
+                  Mehr erfahren
+                  <ArrowRight className="h-4 w-4" aria-hidden="true" />
+                </span>
+              </Link>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* Trust Section */}
+      <Section className="bg-[var(--color-primary)]">
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+            <div>
+              <h2 className="text-[var(--color-background)]">
+                Transparent und fair – ohne versteckte Kosten
+              </h2>
+              <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
+                keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
+              </p>
+              <ul className="space-y-[var(--spacing-sm)]">
+                {trustItems.map((item) => (
+                  <li
+                    key={item}
+                    className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-background)]"
+                  >
+                    <CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
+              <Image
+                src="/images/services/tnr-leistungen-055053d5.jpg"
+                alt="Telenet Systems Mitarbeiter bei der Arbeit"
+                fill
+                className="object-cover"
+                sizes="(max-width: 1024px) 100vw, 50vw"
+              />
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* For Whom Section */}
+      <Section>
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>Für Privat- und Geschäftskunden</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-xl)]">
+            {/* Privatkunden */}
+            <div className="card relative overflow-hidden">
+              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                <Image
+                  src="/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg"
+                  alt="Familie vor dem Fernseher"
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                />
+              </div>
+              <h3 className="heading-3 mb-[var(--spacing-sm)]">Privatkunden</h3>
+              <p className="text-muted mb-[var(--spacing-lg)]">
+                Zuverlässiges Fernsehen, schnelles Internet und günstige Telefonie für Ihr Zuhause.
+                Flexible Tarife ohne Servicepauschale und mit persönlicher Betreuung vor Ort.
+              </p>
+              <Link href="/internet" className="btn btn-primary">
+                Tarife für Privatkunden
+              </Link>
+            </div>
+
+            {/* Geschäftskunden */}
+            <div className="card relative overflow-hidden">
+              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                <Image
+                  src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
+                  alt="Geschäftsmann im Büro"
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                />
+              </div>
+              <h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
+              <p className="text-muted mb-[var(--spacing-lg)]">
+                Maßgeschneiderte Business-Lösungen für Kommunikation und IT.
+                Von der Netzwerkplanung bis zur Fernwartung – alles aus einer Hand.
+              </p>
+              <Link href="/leistungen" className="btn btn-primary">
+                Business-Lösungen
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* CTA Section */}
+      <Section className="bg-[var(--color-foreground)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto">
+            <h2 className="text-[var(--color-background)]">
+              Haben Sie Fragen? Wir beraten Sie gerne.
+            </h2>
+            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+              Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
+              Rufen Sie uns an oder senden Sie uns eine Nachricht.
+            </p>
+            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Kontakt aufnehmen
+              </Link>
+              <a href="tel:+4356725000" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+                +43 5672 5000
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+    </>
   );
 }

app/telefonie/page.tsx

@@ -0,0 +1,302 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+import { Phone, Building2, CheckCircle, Users } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Telefonie",
+  description:
+    "Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
+  openGraph: {
+    title: "Telefonie | Telenet Systems GmbH",
+    description:
+      "Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Ab 0 € mit Telenet-Internet.",
+  },
+};
+
+const telefonieTarife = [
+  {
+    name: "telenet.zero",
+    subtitle: "ohne Internet",
+    price: "5,00",
+    minutenpreis: "2,4",
+    description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
+    features: [
+      "Festnetzanschluss",
+      "Günstiger Minutenpreis",
+      "Keine Grundgebühr bei Internet",
+    ],
+    popular: false,
+  },
+  {
+    name: "telenet.zero",
+    subtitle: "mit Internet von Telenet",
+    price: "0,00",
+    minutenpreis: "2,4",
+    description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
+    features: [
+      "Keine monatliche Grundgebühr",
+      "Günstiger Minutenpreis",
+      "Perfekt für Telenet-Kunden",
+    ],
+    popular: true,
+  },
+  {
+    name: "telenet.business",
+    subtitle: "für Unternehmen",
+    price: "8,90",
+    minutenpreis: "3,24",
+    description: "Professionelle Telefonie-Lösung für Geschäftskunden.",
+    features: [
+      "Business-Tarif",
+      "Professioneller Service",
+      "Individuelle Optionen",
+    ],
+    popular: false,
+  },
+];
+
+const benefits = [
+  "Günstige Minutenpreise",
+  "Keine versteckten Kosten",
+  "Einfache Einrichtung",
+  "Persönlicher Support",
+];
+
+export default function TelefoniePage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+        <div className="absolute inset-0 z-0">
+          <Image
+            src="/images/misc/telefonie1-ad7595f9.jpg"
+            alt="Telefonie"
+            fill
+            priority
+            className="object-cover opacity-40"
+            sizes="100vw"
+          />
+        </div>
+        <Container className="relative z-10">
+          <div className="max-w-3xl">
+            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+              <Phone className="h-5 w-5" aria-hidden="true" />
+              <span className="font-medium">Telefonie</span>
+            </div>
+            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+              Flexible Telefonie-Tarife für jeden Bedarf
+            </h1>
+            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+              Günstig ins österreichische Festnetz telefonieren.
+              Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
+            </p>
+            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Jetzt bestellen
+              </Link>
+              <a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+                Tarife ansehen
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Trust Bar */}
+      <Section variant="sm" className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+            {benefits.map((benefit) => (
+              <div
+                key={benefit}
+                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+              >
+                <CheckCircle
+                  className="h-5 w-5 text-[var(--color-success)]"
+                  aria-hidden="true"
+                />
+                <span>{benefit}</span>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* Tarife */}
+      <Section id="tarife">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <h2>Unsere Telefonie-Tarife</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Einfache Preisstruktur ohne versteckte Kosten.
+              Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
+            {telefonieTarife.map((tarif, index) => (
+              <div
+                key={`${tarif.name}-${index}`}
+                className={`card relative ${
+                  tarif.popular
+                    ? "border-[var(--color-primary)] border-2"
+                    : ""
+                }`}
+              >
+                {tarif.popular && (
+                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
+                    Empfohlen
+                  </div>
+                )}
+                <div className="text-center">
+                  <h3 className="heading-4 text-[var(--color-primary)]">
+                    {tarif.name}
+                  </h3>
+                  <p className="text-sm text-muted mb-[var(--spacing-md)]">
+                    {tarif.subtitle}
+                  </p>
+                  <div className="mb-[var(--spacing-md)]">
+                    <span className="heading-1">€ {tarif.price}</span>
+                    <span className="text-muted"> / Monat</span>
+                  </div>
+                  <p className="text-sm text-muted mb-[var(--spacing-sm)]">
+                    Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
+                  </p>
+                </div>
+                <hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
+                <p className="text-muted mb-[var(--spacing-lg)]">
+                  {tarif.description}
+                </p>
+                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                  {tarif.features.map((feature) => (
+                    <li
+                      key={feature}
+                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
+                    >
+                      <CheckCircle
+                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Link
+                  href="/kontakt"
+                  className={`btn w-full ${
+                    tarif.popular ? "btn-primary" : "btn-outline"
+                  }`}
+                >
+                  Jetzt bestellen
+                </Link>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </Section>
+
+      {/* Kombinieren Section */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+            <div>
+              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                <Users className="h-5 w-5" aria-hidden="true" />
+                <span className="font-medium">Tipp</span>
+              </div>
+              <h2>Telefonie + Internet kombinieren</h2>
+              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
+                Sie zahlen nur für die tatsächlich geführten Gespräche.
+              </p>
+              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>0 € Grundgebühr mit Telenet-Internet</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Einfache Abrechnung über eine Rechnung</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                  <span>Ein Ansprechpartner für alles</span>
+                </li>
+              </ul>
+              <Link href="/internet" className="btn btn-primary">
+                Internet-Tarife ansehen
+              </Link>
+            </div>
+            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
+              <Image
+                src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
+                alt="Person telefoniert"
+                fill
+                className="object-cover"
+                sizes="(max-width: 1024px) 100vw, 50vw"
+              />
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Business Section */}
+      <Section>
+        <Container>
+          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+              <Building2 className="h-5 w-5" aria-hidden="true" />
+              <span className="font-medium">Business</span>
+            </div>
+            <h2>Telefonie für Unternehmen</h2>
+            <p className="lead mt-[var(--spacing-md)]">
+              Professionelle Telefonielösungen für Ihr Unternehmen.
+              Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
+            </p>
+          </div>
+          <div className="card max-w-2xl mx-auto text-center">
+            <h3 className="heading-4 mb-[var(--spacing-md)]">
+              Individuelle Business-Lösungen
+            </h3>
+            <p className="text-muted mb-[var(--spacing-lg)]">
+              Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
+              Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
+              wir finden die passende Lösung für Ihre Anforderungen.
+            </p>
+            <Link href="/kontakt" className="btn btn-primary">
+              Beratung anfragen
+            </Link>
+          </div>
+        </Container>
+      </Section>
+
+      {/* CTA Section */}
+      <Section className="bg-[var(--color-foreground)]">
+        <Container>
+          <div className="text-center max-w-2xl mx-auto">
+            <h2 className="text-[var(--color-background)]">
+              Fragen zu unseren Telefonie-Tarifen?
+            </h2>
+            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+              Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
+            </p>
+            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                Kontakt aufnehmen
+              </Link>
+              <a
+                href="tel:+4356725000"
+                className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
+              >
+                +43 5672 5000
+              </a>
+            </div>
+          </div>
+        </Container>
+      </Section>
+    </>
+  );
+}