feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.

app/datenschutz/page.tsx

@@ -0,0 +1,56 @@
+
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "Datenschutzerklärung | TeleNetSystems",
+};
+
+export default function DatenschutzPage() {
+    return (
+        <main>
+            <Section>
+                <Container className="max-w-3xl">
+                    <h1 className="mb-[var(--spacing-lg)]">Datenschutzerklärung</h1>
+
+                    <div className="prose">
+                        <h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">1. Datenschutz auf einen Blick</h2>
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Allgemeine Hinweise</h3>
+                        <p>
+                            Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
+                            wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
+                        </p>
+
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenerfassung auf dieser Website</h3>
+                        <p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
+                        <p>
+                            Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem
+                            Impressum dieser Website entnehmen.
+                        </p>
+
+                        <h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">2. Allgemeine Hinweise und Pflichtinformationen</h2>
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenschutz</h3>
+                        <p>
+                            Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
+                            vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
+                        </p>
+
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Hinweis zur verantwortlichen Stelle</h3>
+                        <p>
+                            Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:
+                        </p>
+                        <p className="mt-[var(--spacing-xs)]">
+                            PLACEHOLDER: technical.legal.datenschutz.companyName<br />
+                            PLACEHOLDER: technical.legal.datenschutz.street<br />
+                            PLACEHOLDER: technical.legal.datenschutz.postalCode PLACEHOLDER: technical.legal.datenschutz.city
+                        </p>
+                        <p className="mt-[var(--spacing-xs)]">
+                            Telefon: PLACEHOLDER: technical.legal.datenschutz.phone<br />
+                            E-Mail: PLACEHOLDER: technical.legal.datenschutz.email
+                        </p>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/fernsehen/page.tsx

@@ -1,285 +1,130 @@
-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 = {
+export const metadata = {
-  title: "Fernsehen",
+    title: "Kabelfernsehen | TeleNetSystems",
-  description:
+    description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
-    "Ü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 (
+    return (
-    <>
+        <main>
-      {/* Hero Section */}
+            {/* Hero */}
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-        <div className="absolute inset-0 z-0">
+                <Container>
-          <Image
+                    <h1 className="mb-[var(--spacing-md)]">
-            src="/images/hero/tv-header-44c1e07b.jpg"
+                        Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
-            alt="Familie genießt Fernsehen"
+                    </h1>
-            fill
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-            priority
+                        Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
-            className="object-cover opacity-40"
+                        Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
-            sizes="100vw"
+                    </p>
-          />
+                    <Link href="#kontakt" className="btn btn-primary btn-lg">
-        </div>
+                        Jetzt anschließen lassen
-        <Container className="relative z-10">
+                    </Link>
-          <div className="max-w-3xl">
+                </Container>
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+            </Section>
-              <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 */}
+            {/* Main Benefit */}
-      <Section variant="sm" className="bg-[var(--color-muted)]">
+            <Section>
-        <Container>
+                <Container>
-          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
-            {benefits.map((benefit) => (
+                        <div>
-              <div
+                            <h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
-                key={benefit}
+                            <p className="mb-[var(--spacing-lg)]">
-                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+                                Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
-              >
+                                Egal ob Spielfilme, Sport, Dokumentationen oder Kinderprogramm – hier ist für jeden etwas dabei.
-                <CheckCircle
+                            </p>
-                  className="h-5 w-5 text-[var(--color-success)]"
+                            <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
-                  aria-hidden="true"
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
-                />
+                                    📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
-                <span>{benefit}</span>
+                                </li>
-              </div>
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
-            ))}
+                                    💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
-          </div>
+                                </li>
-        </Container>
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
-      </Section>
+                                    📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] flex items-center justify-center aspect-video text-[color:var(--color-muted-foreground)] bg-[var(--color-muted)]">
+                            PLACEHOLDER: TV Experience Image
+                        </div>
+                    </div>
+                </Container>
+            </Section>
 
-      {/* TV Options */}
+            {/* Pricing / Offer */}
-      <Section id="angebote">
+            <Section className="bg-[var(--color-muted)] text-center">
-        <Container>
+                <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
-            <h2>Unsere TV-Angebote</h2>
+                    <div className="card max-w-lg mx-auto bg-white">
-            <p className="lead mt-[var(--spacing-md)]">
+                        <h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
-              Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
+                        <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
-            </p>
+                            € 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
-          </div>
+                        </div>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
+                        <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-            {tvOptions.map((option) => (
+                            inkl. MwSt
-              <div
+                        </p>
-                key={option.title}
+                        <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
-                className={`card relative overflow-hidden ${
+                            <li>✅ 200+ TV-Sender</li>
-                  option.popular
+                            <li>✅ 40+ HD-Sender</li>
-                    ? "border-[var(--color-primary)] border-2"
+                            <li>✅ 40+ Radiosender</li>
-                    : ""
+                            <li>✅ Keine Satellitenschüssel nötig</li>
-                }`}
+                            <li>✅ Beste Bild- & Tonqualität</li>
-              >
+                        </ul>
-                {option.popular && (
+                        <Link href="#kontakt" className="btn btn-primary w-full">
-                  <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">
+                            Jetzt bestellen
-                    Beliebt
+                        </Link>
-                  </div>
+                    </div>
-                )}
+                </Container>
-                <div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+            </Section>
-                  <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 */}
+            {/* Business & Pay TV */}
-      <Section className="bg-[var(--color-muted)]">
+            <Section>
-        <Container variant="narrow">
+                <Container>
-          <div className="text-center mb-[var(--spacing-3xl)]">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
-            <h2>Häufige Fragen</h2>
+                        <div>
-          </div>
+                            <h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
-          <div className="space-y-[var(--spacing-lg)]">
+                            <p className="mb-[var(--spacing-md)]">
-            <div className="card">
+                                Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                            </p>
-                Wie schnell ist die Installation?
+                            <Link href="#kontakt" className="btn btn-outline">
-              </h3>
+                                Individuelles Angebot anfragen
-              <p className="text-muted">
+                            </Link>
-                In der Regel können wir innerhalb weniger Werktage einen Installationstermin
+                        </div>
-                vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
+                        <div>
-              </p>
+                            <h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
-            </div>
+                            <p className="mb-[var(--spacing-md)]">
-            <div className="card">
+                                Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                            </p>
-                Gibt es versteckte Kosten?
+                            <Link href="#kontakt" className="btn btn-outline">
-              </h3>
+                                Pay-TV Optionen prüfen
-              <p className="text-muted">
+                            </Link>
-                Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
+                        </div>
-                Es gibt keine Servicepauschale und keine versteckten Gebühren.
+                    </div>
-              </p>
+                </Container>
-            </div>
+            </Section>
-            <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 */}
+            {/* Contact Anchor */}
-      <Section className="bg-[var(--color-primary)]">
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
-        <Container>
+                <Container>
-          <div className="text-center max-w-2xl mx-auto">
+                    <h2 className="text-white mb-[var(--spacing-md)]">Interessiert?</h2>
-            <h2 className="text-[var(--color-background)]">
+                    <p className="lead text-white mb-[var(--spacing-xl)]">
-              Bereit für bestes Fernsehen?
+                        Kontaktieren Sie uns für Ihren TV-Anschluss.
-            </h2>
+                    </p>
-            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-              direkt Ihren TV-Anschluss.
+                            📞 Anrufen
-            </p>
+                        </a>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-              <Link
+                            ✉️ E-Mail schreiben
-                href="/kontakt"
+                        </a>
-                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
+                    </div>
-              >
+                </Container>
-                Jetzt bestellen
+            </Section>
-              </Link>
+        </main>
-              <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/impressum/page.tsx

@@ -0,0 +1,54 @@
+
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "Impressum | TeleNetSystems",
+};
+
+export default function ImpressumPage() {
+    return (
+        <main>
+            <Section>
+                <Container className="max-w-3xl">
+                    <h1 className="mb-[var(--spacing-lg)]">Impressum</h1>
+
+                    <div className="prose">
+                        <p><strong>Angaben gemäß § 5 TMG:</strong></p>
+                        <p>
+                            PLACEHOLDER: technical.legal.impressum.companyName<br />
+                            PLACEHOLDER: technical.legal.impressum.street<br />
+                            PLACEHOLDER: technical.legal.impressum.postalCode PLACEHOLDER: technical.legal.impressum.city<br />
+                            PLACEHOLDER: technical.legal.impressum.country
+                        </p>
+
+                        <p className="mt-[var(--spacing-md)]"><strong>Kontakt:</strong></p>
+                        <p>
+                            Telefon: PLACEHOLDER: technical.legal.impressum.phone<br />
+                            E-Mail: PLACEHOLDER: technical.legal.impressum.email
+                        </p>
+
+                        <p className="mt-[var(--spacing-md)]"><strong>Registereintrag:</strong></p>
+                        <p>
+                            Eintragung im Handelsregister.<br />
+                            Registergericht: PLACEHOLDER<br />
+                            Registernummer: PLACEHOLDER: technical.legal.impressum.register
+                        </p>
+
+                        <p className="mt-[var(--spacing-md)]"><strong>Umsatzsteuer:</strong></p>
+                        <p>
+                            Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
+                            PLACEHOLDER: technical.legal.impressum.vatId
+                        </p>
+
+                        <p className="mt-[var(--spacing-md)]"><strong>Streitschlichtung</strong></p>
+                        <p>
+                            Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.<br />
+                            Unsere E-Mail-Adresse finden Sie oben im Impressum.
+                        </p>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/internet/page.tsx

@@ -1,402 +1,224 @@
-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 = {
+export const metadata = {
-  title: "Internet",
+    title: "Highspeed Internet | TeleNetSystems",
-  description:
+    description: "Surfen Sie mit bis zu 500 Mbit/s in Reutte. Faire Tarife für Kabel und Glasfaser für Privat und Business.",
-    "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 (
+    return (
-    <>
+        <main>
-      {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+                <Container>
-        <div className="absolute inset-0 z-0">
+                    <h1 className="mb-[var(--spacing-md)]">
-          <Image
+                        Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
-            src="/images/hero/internet-header-431619ac.jpg"
+                    </h1>
-            alt="Highspeed Internet"
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-            fill
+                        Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
-            priority
+                    </p>
-            className="object-cover opacity-40"
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-            sizes="100vw"
+                        <Link href="#kabel" className="btn btn-primary">
-          />
+                            Kabel-Tarife
-        </div>
+                        </Link>
-        <Container className="relative z-10">
+                        <Link href="#glasfaser" className="btn btn-secondary">
-          <div className="max-w-3xl">
+                            Glasfaser-Tarife
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                        </Link>
-              <Wifi className="h-5 w-5" aria-hidden="true" />
+                    </div>
-              <span className="font-medium">Internet</span>
+                </Container>
-            </div>
+            </Section>
-            <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 */}
+            {/* Intro Info */}
-      <Section variant="sm" className="bg-[var(--color-muted)]">
+            <Section>
-        <Container>
+                <Container className="text-center max-w-3xl">
-          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+                    <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems Internet?</h2>
-            {benefits.map((benefit) => (
+                    <p>
-              <div
+                        Wir bieten Ihnen echte Flatrates ohne Datenlimit. Keine Servicepauschale.
-                key={benefit}
+                        Ehrliche Bandbreiten und persönlicher Support direkt vor Ort in Reutte.
-                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+                    </p>
-              >
+                </Container>
-                <CheckCircle
+            </Section>
-                  className="h-5 w-5 text-[var(--color-success)]"
-                  aria-hidden="true"
-                />
-                <span>{benefit}</span>
-              </div>
-            ))}
-          </div>
-        </Container>
-      </Section>
 
-      {/* Kabel-Tarife */}
+            {/* Kabel Tarife */}
-      <Section id="tarife">
+            <Section id="kabel" className="bg-[var(--color-muted)]">
-        <Container>
+                <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
-              <Zap className="h-5 w-5" aria-hidden="true" />
+                        Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
-              <span className="font-medium">Kabel-Internet</span>
+                    </p>
-            </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">
+                    <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
-            <table className="w-full border-collapse">
+                        {/* Hit */}
-              <thead>
+                        <div className="card flex flex-col items-center bg-white">
-                <tr className="border-b border-[var(--color-border)]">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
-                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</div>
-                    Tarif
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                  </th>
+                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                    <span className="flex items-center justify-center gap-1">
+                                <li><strong>40 Mbit/s</strong> Down</li>
-                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
+                                <li><strong>6 Mbit/s</strong> Up</li>
-                      Download
+                                <li>Daten: Unlimitiert</li>
-                    </span>
+                            </ul>
-                  </th>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                        </div>
-                    <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)]">
+                        {/* Eco */}
-            Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
+                        <div className="card flex flex-col items-center bg-white relative overflow-hidden">
-            Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
+                            <div className="absolute top-0 right-0 bg-[var(--color-secondary)] text-white text-xs px-2 py-1">Tipp</div>
-            Einmalige Installationskosten je nach Aufwand.
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
-          </p>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€19,00</div>
-        </Container>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-      </Section>
+                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>60 Mbit/s</strong> Down</li>
+                                <li><strong>8 Mbit/s</strong> Up</li>
+                                <li>Daten: Unlimitiert</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Bestellen</Link>
+                        </div>
 
-      {/* Glasfaser-Tarife */}
+                        {/* Fun */}
-      <Section className="bg-[var(--color-muted)]">
+                        <div className="card flex flex-col items-center bg-white">
-        <Container>
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€29,00</div>
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-              <Zap className="h-5 w-5" aria-hidden="true" />
+                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-              <span className="font-medium">Glasfaser-Internet</span>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-            </div>
+                                <li><strong>80 Mbit/s</strong> Down</li>
-            <h2>Tarife für Glasfaser-Kunden</h2>
+                                <li><strong>12 Mbit/s</strong> Up</li>
-            <p className="text-muted mt-[var(--spacing-md)]">
+                                <li>Daten: Unlimitiert</li>
-              Symmetrische Bandbreite – gleich schnell hoch- wie runterladen. Tarife gültig ab 01.04.2025.
+                            </ul>
-            </p>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-          </div>
+                        </div>
 
-          <div className="overflow-x-auto">
+                        {/* Pro */}
-            <table className="w-full border-collapse bg-[var(--color-background)] rounded-[var(--radius-lg)]">
+                        <div className="card flex flex-col items-center bg-white">
-              <thead>
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
-                <tr className="border-b border-[var(--color-border)]">
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€39,00</div>
-                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-lg)] font-semibold">
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                    Tarif
+                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-                  </th>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
+                                <li><strong>100 Mbit/s</strong> Down</li>
-                    <span className="flex items-center justify-center gap-1">
+                                <li><strong>14 Mbit/s</strong> Up</li>
-                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
+                                <li>Public IPv4 Address</li>
-                      Download
+                            </ul>
-                    </span>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                  </th>
+                        </div>
-                  <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)]">
+                        {/* Mega */}
-            Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
+                        <div className="card flex flex-col items-center bg-white">
-            Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
-          </p>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€49,00</div>
-        </Container>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-      </Section>
+                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>180 Mbit/s</strong> Down</li>
+                                <li><strong>22 Mbit/s</strong> Up</li>
+                                <li>Public IPv4 Address</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
 
-      {/* Business Section */}
+            {/* Glasfaser Tarife */}
-      <Section>
+            <Section id="glasfaser">
-        <Container>
+                <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <h2 className="text-center mb-[var(--spacing-sm)]">Glasfaser-Internet Tarife</h2>
-            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
-              <Image
+                        Die Zukunft der Geschwindigkeit. (Gültig ab 01.04.2025)
-                src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
+                    </p>
-                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 */}
+                    <div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
-      <Section className="bg-[var(--color-foreground)]">
+                        {/* Eco */}
-        <Container>
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
-          <div className="text-center max-w-2xl mx-auto">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
-            <h2 className="text-[var(--color-background)]">
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,00</div>
-              Welcher Tarif passt zu Ihnen?
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-            </h2>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                                <li><strong>100 Mbit/s</strong> Down</li>
-              Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
+                                <li><strong>100 Mbit/s</strong> Up</li>
-              Internet-Tarif für Ihre Bedürfnisse.
+                                <li>Symmetrisch!</li>
-            </p>
+                            </ul>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                        </div>
-                Beratung anfragen
+
-              </Link>
+                        {/* Fun */}
-              <a
+                        <div className="card flex flex-col items-center border-[color:var(--color-primary)]">
-                href="tel:+4356725000"
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
-                className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€29,00</div>
-              >
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                +43 5672 5000
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-              </a>
+                                <li><strong>200 Mbit/s</strong> Down</li>
-            </div>
+                                <li><strong>200 Mbit/s</strong> Up</li>
-          </div>
+                                <li>Symmetrisch!</li>
-        </Container>
+                            </ul>
-      </Section>
+                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Anfragen</Link>
-    </>
+                        </div>
-  );
+
+                        {/* Pro */}
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€39,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>300 Mbit/s</strong> Down</li>
+                                <li><strong>300 Mbit/s</strong> Up</li>
+                                <li>Public IPv4 Address</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                        </div>
+
+                        {/* Mega */}
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€49,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>500 Mbit/s</strong> Down</li>
+                                <li><strong>500 Mbit/s</strong> Up</li>
+                                <li>Public IPv4 Address</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Business */}
+            <Section className="bg-[var(--color-muted)]">
+                <Container className="text-center">
+                    <h2 className="mb-[var(--spacing-md)]">Internet für Unternehmen</h2>
+                    <p className="max-w-2xl mx-auto mb-[var(--spacing-lg)]">
+                        Sie benötigen garantierte Bandbreiten, SLA oder spezielle IP-Konfigurationen?
+                        Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot.
+                    </p>
+                    <Link href="#kontakt" className="btn btn-primary">
+                        Business-Anfrage stellen
+                    </Link>
+                </Container>
+            </Section>
+
+            {/* Contact Anchor */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+                <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Internet bestellen</h2>
+                    <p className="lead text-white mb-[var(--spacing-xl)]">
+                        Wir kümmern uns um die Installation.
+                    </p>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            📞 Anrufen
+                        </a>
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            ✉️ Tarif wählen
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
 }

app/layout.tsx

@@ -1,67 +1,105 @@
 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";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
 
-const inter = Inter({
+/**
-  subsets: ["latin"],
+ * Root Layout
-  variable: "--font-inter",
+ *
-  display: "swap",
+ * 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
+ */
 
+// 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: {
+  title: "TeleNetSystems | Telekom & IT aus Tirol",
-    default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
+  description: "TeleNetSystems - Ihr regionaler Partner für Internet, Fernsehen, Telefonie und IT-Services in Reutte und Umgebung.",
-    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_AT",
-    url: "https://www.tnr.at",
+    // title, description, images will be set per project
-    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: "#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="de-AT" className={inter.variable}>
+    <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 className="flex min-h-screen flex-col">
         <Header />
-        <main className="flex-1">{children}</main>
+        <div className="flex-1">
+          {children}
+        </div>
         <Footer />
       </body>
     </html>

app/leistungen/page.tsx

@@ -1,304 +1,114 @@
-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 = {
+export const metadata = {
-  title: "Leistungen",
+    title: "IT-Services & Leistungen | TeleNetSystems",
-  description:
+    description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
-    "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 (
+    return (
-    <>
+        <main>
-      {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+                <Container>
-        <div className="absolute inset-0 z-0">
+                    <h1 className="mb-[var(--spacing-md)]">
-          <Image
+                        Mehr als nur Kommunikation. <br />
-            src="/images/services/tnr-leistungen-055053d5.jpg"
+                        <span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
-            alt="Telenet Systems Mitarbeiter"
+                    </h1>
-            fill
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-            priority
+                        Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
-            className="object-cover opacity-40"
+                        Von der Planung bis zur Wartung.
-            sizes="100vw"
+                    </p>
-          />
+                    <Link href="#it-services" className="btn btn-primary btn-lg">
-        </div>
+                        Zu den IT-Services
-        <Container className="relative z-10">
+                    </Link>
-          <div className="max-w-3xl">
+                </Container>
-            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
+            </Section>
-              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 */}
+            {/* Overview Core Services */}
-      <Section>
+            <Section>
-        <Container>
+                <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <div className="text-center mb-[var(--spacing-2xl)]">
-            <h2>Für Privat- und Geschäftskunden</h2>
+                        <h2>Unsere Kernkompetenzen</h2>
-            <p className="lead mt-[var(--spacing-md)]">
+                    </div>
-              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
+                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
-            </p>
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-          </div>
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
+                            <p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
-            {targetGroups.map((group) => (
+                            <Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-              <div key={group.title} className="card overflow-hidden">
+                        </div>
-                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                  <Image
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
-                    src={group.image}
+                            <p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
-                    alt={group.title}
+                            <Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                    fill
+                        </div>
-                    className="object-cover"
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                    sizes="(max-width: 1024px) 100vw, 50vw"
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
-                  />
+                            <p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
-                </div>
+                            <Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
+                        </div>
-                  <group.icon className="h-5 w-5" aria-hidden="true" />
+                    </div>
-                  <h3 className="heading-3">{group.title}</h3>
+                </Container>
-                </div>
+            </Section>
-                <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 */}
+            {/* IT Services Detail */}
-      <Section id="services" className="bg-[var(--color-muted)]">
+            <Section id="it-services" className="bg-[var(--color-muted)]">
-        <Container>
+                <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
-            <h2>IT-Services für Unternehmen</h2>
+                        <div>
-            <p className="lead mt-[var(--spacing-md)]">
+                            <h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
-              Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
+                            <div className="space-y-[var(--spacing-xl)]">
-              Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
+                                <div>
-            </p>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
-          </div>
+                                    <p>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
+                                        Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
-            {services.map((service) => (
+                                        Wir sorgen für eine stabile Infrastruktur.
-              <div key={service.title} className="card text-center">
+                                    </p>
-                <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)]">
+                                </div>
-                  <service.icon className="h-6 w-6" aria-hidden="true" />
+                                <div>
-                </div>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
-                <h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
+                                    <p>
-                <p className="text-sm text-muted">{service.description}</p>
+                                        Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
-              </div>
+                                        und Antivirus-Software.
-            ))}
+                                    </p>
-          </div>
+                                </div>
-        </Container>
+                                <div>
-      </Section>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
+                                    <p>
+                                        Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
+                                        Gerne auch per Fernwartung für schnelle Hilfe.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex flex-col gap-[var(--spacing-md)]">
+                            <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
+                                PLACEHOLDER: IT Hardware Image
+                            </div>
+                            <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
+                                PLACEHOLDER: Server Room Image
+                            </div>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
 
-      {/* Glasfaser Section */}
+            {/* Contact Anchor */}
-      <Section>
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
-        <Container>
+                <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <h2 className="text-white mb-[var(--spacing-md)]">IT-Probleme? Wir helfen.</h2>
-            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              <Image
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-                src="/images/services/lwl1-40360e27.jpg"
+                            📞 05672 / PLACEHOLDER
-                alt="Glasfaser-Installation"
+                        </a>
-                fill
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-                className="object-cover"
+                            ✉️ support@tnr.at
-                sizes="(max-width: 1024px) 100vw, 50vw"
+                        </a>
-              />
+                    </div>
-            </div>
+                </Container>
-            <div>
+            </Section>
-              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+        </main>
-                <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,139 +1,29 @@
-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";
 
-const services = [
+export default function Home() {
-  {
-    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>
       {/* Hero Section */}
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+      <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-        <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>
-
-      {/* USP Section */}
-      <Section className="bg-[var(--color-muted)]">
         <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+          <h1 className="mb-[var(--spacing-md)]">
-            <h2>Warum Telenet Systems?</h2>
+            Ihr Partner für Telekom & IT <br />
-            <p className="lead mt-[var(--spacing-md)]">
+            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
-              Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
+          </h1>
-            </p>
+          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-          </div>
+            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+            Regional, persönlich und zuverlässig seit 1976.
-            {usps.map((usp) => (
+          </p>
-              <div key={usp.title} className="text-center">
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                <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)]">
+            <Link href="#kontakt" className="btn btn-primary btn-lg">
-                  <usp.icon className="h-6 w-6" aria-hidden="true" />
+              Jetzt beraten lassen
-                </div>
+            </Link>
-                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
+            <Link href="/internet" className="btn btn-outline btn-lg">
-                <p className="text-muted">{usp.description}</p>
+              Internet-Tarife prüfen
-              </div>
+            </Link>
-            ))}
           </div>
         </Container>
       </Section>
@@ -141,157 +31,142 @@ export default function HomePage() {
       {/* Services Section */}
       <Section>
         <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+          <div className="text-center mb-[var(--spacing-2xl)]">
-            <h2>Unsere Leistungen für Sie</h2>
+            <h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
-            <p className="lead mt-[var(--spacing-md)]">
+            <p className="text-[color:var(--color-muted-foreground)]">
-              Fernsehen, Internet und Telefonie – alles aus einer Hand, ohne Servicepauschale.
+              Alles, was Sie für digitale Kommunikation benötigen.
             </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 */}
+          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
-      <Section className="bg-[var(--color-primary)]">
+            {/* Internet */}
-        <Container>
+            <div className="card text-center transition-transform hover:-translate-y-1">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+              <div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
-            <div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
-              <h2 className="text-[var(--color-background)]">
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                Transparent und fair – ohne versteckte Kosten
+                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
-              </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)]">
+              <Link href="/internet" className="btn btn-secondary w-full">
-                {trustItems.map((item) => (
+                Zu den Tarifen
-                  <li
+              </Link>
-                    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
+            {/* Fernsehen */}
-                src="/images/services/tnr-leistungen-055053d5.jpg"
+            <div className="card text-center transition-transform hover:-translate-y-1">
-                alt="Telenet Systems Mitarbeiter bei der Arbeit"
+              <div className="mb-[var(--spacing-md)] text-4xl">📺</div>
-                fill
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
-                className="object-cover"
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                sizes="(max-width: 1024px) 100vw, 50vw"
+                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
-              />
+              </p>
+              <Link href="/fernsehen" className="btn btn-secondary w-full">
+                Sender entdecken
+              </Link>
+            </div>
+
+            {/* Telefonie */}
+            <div className="card text-center transition-transform hover:-translate-y-1">
+              <div className="mb-[var(--spacing-md)] text-4xl">📞</div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
+              </p>
+              <Link href="/telefonie" className="btn btn-secondary w-full">
+                Mehr erfahren
+              </Link>
             </div>
           </div>
         </Container>
       </Section>
 
-      {/* For Whom Section */}
+      {/* IT Services Teaser */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
+            <div>
+              <h2 className="mb-[var(--spacing-md)]">
+                Professionelle IT-Lösungen <br /> für Unternehmen & Privat
+              </h2>
+              <p className="mb-[var(--spacing-lg)]">
+                Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
+                Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
+              </p>
+              <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Netzwerk- und Serverplanung</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Verkauf & Reparatur von Hardware</span>
+                </li>
+              </ul>
+              <Link href="/leistungen" className="btn btn-primary">
+                Zu den IT-Services
+              </Link>
+            </div>
+            <div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
+              {/* Placeholder styled as a media frame */}
+              <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
+                <span className="text-4xl mb-2">📸</span>
+                <span className="font-medium">IT-Service vor Ort</span>
+              </div>
+              <p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
+                Symbolbild: Unser Team bei der Netzwerk-Installation
+              </p>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* USPs / Trust Section */}
       <Section>
         <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+          <h2 className="text-center mb-[var(--spacing-2xl)]">Warum TeleNetSystems?</h2>
-            <h2>Für Privat- und Geschäftskunden</h2>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
-            <p className="lead mt-[var(--spacing-md)]">
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">1976</div>
-            </p>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Gründung</p>
-          </div>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
-          <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>
-
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-            {/* Geschäftskunden */}
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">100%</div>
-            <div className="card relative overflow-hidden">
+              <p className="font-semibold text-[color:var(--color-foreground)]">Tirol</p>
-              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Regional aus Reutte</p>
-                <Image
+            </div>
-                  src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-                  alt="Geschäftsmann im Büro"
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
-                  fill
+              <p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
-                  className="object-cover"
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
-                  sizes="(max-width: 768px) 100vw, 50vw"
+            </div>
-                />
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-              </div>
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">Top</div>
-              <h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Service</p>
-              <p className="text-muted mb-[var(--spacing-lg)]">
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Persönlicher Ansprechpartner</p>
-                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 */}
+      {/* Contact CTA */}
-      <Section className="bg-[var(--color-foreground)]">
+      <Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
-        <Container>
+        <Container className="text-center">
-          <div className="text-center max-w-2xl mx-auto">
+          <h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
-            <h2 className="text-[var(--color-background)]">
+            Noch Fragen? Wir sind für Sie da.
-              Haben Sie Fragen? Wir beraten Sie gerne.
+          </h2>
-            </h2>
+          <p className="text-xl mb-[var(--spacing-xl)] opacity-90">
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+            Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
-              Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
+          </p>
-              Rufen Sie uns an oder senden Sie uns eine Nachricht.
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-            </p>
+            <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+              📞 Anrufen
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+            </a>
-                Kontakt aufnehmen
+            <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-              </Link>
+              ✉️ E-Mail schreiben
-              <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)]">
+            </a>
-                +43 5672 5000
-              </a>
-            </div>
           </div>
         </Container>
       </Section>
-    </>
+    </main>
   );
 }

app/telefonie/page.tsx

@@ -1,302 +1,133 @@
-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 = {
+export const metadata = {
-  title: "Telefonie",
+    title: "Telefonie Tarife | TeleNetSystems",
-  description:
+    description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
-    "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 (
+    return (
-    <>
+        <main>
-      {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+                <Container>
-        <div className="absolute inset-0 z-0">
+                    <h1 className="mb-[var(--spacing-md)]">
-          <Image
+                        Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
-            src="/images/misc/telefonie1-ad7595f9.jpg"
+                    </h1>
-            alt="Telefonie"
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-            fill
+                        Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
-            priority
+                        Ideal als Ergänzung zu Ihrem Internet-Paket.
-            className="object-cover opacity-40"
+                    </p>
-            sizes="100vw"
+                    <Link href="#tarife" className="btn btn-primary btn-lg">
-          />
+                        Tarife ansehen
-        </div>
+                    </Link>
-        <Container className="relative z-10">
+                </Container>
-          <div className="max-w-3xl">
+            </Section>
-            <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 id="tarife">
-      <Section variant="sm" className="bg-[var(--color-muted)]">
+                <Container>
-        <Container>
+                    <div className="text-center mb-[var(--spacing-2xl)]">
-          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+                        <h2>Unsere Telefonie-Tarife</h2>
-            {benefits.map((benefit) => (
+                        <p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
-              <div
+                    </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 */}
+                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
-      <Section id="tarife">
+                        {/* Zero (With Internet) */}
-        <Container>
+                        <div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                            <div className="bg-[var(--color-primary)] text-white text-xs py-1 px-3 rounded-full inline-block mb-[var(--spacing-sm)]">Empfehlung</div>
-            <h2>Unsere Telefonie-Tarife</h2>
+                            <h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
-            <p className="lead mt-[var(--spacing-md)]">
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
-              Einfache Preisstruktur ohne versteckte Kosten.
+                            <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
-              Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
+                                € 0,00
-            </p>
+                            </div>
-          </div>
+                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
+                                Grundgebühr pro Monat
+                            </p>
+                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
+                                <li>✅ Keine Grundgebühr!</li>
+                                <li>📞 Festnetz AT: ab 2,4 Cent/min</li>
+                                <li>🎯 Ideal für Gelegenheitsnutzer</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-primary w-full">Bestellen</Link>
+                        </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
+                        {/* Zero (Solo) */}
-            {telefonieTarife.map((tarif, index) => (
+                        <div className="card text-center">
-              <div
+                            <h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
-                key={`${tarif.name}-${index}`}
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(ohne Internet)</p>
-                className={`card relative ${
+                            <div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
-                  tarif.popular
+                                € 5,00
-                    ? "border-[var(--color-primary)] border-2"
+                            </div>
-                    : ""
+                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-                }`}
+                                Grundgebühr pro Monat
-              >
+                            </p>
-                {tarif.popular && (
+                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
-                  <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">
+                                <li>✅ Günstige Grundgebühr</li>
-                    Empfohlen
+                                <li>📞 Festnetz AT: ab 2,4 Cent/min</li>
-                  </div>
+                                <li>🔌 Nur Kabelanschluss nötig</li>
-                )}
+                            </ul>
-                <div className="text-center">
+                            <Link href="#kontakt" className="btn btn-outline w-full">Bestellen</Link>
-                  <h3 className="heading-4 text-[var(--color-primary)]">
+                        </div>
-                    {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 */}
+                        {/* Business */}
-      <Section className="bg-[var(--color-muted)]">
+                        <div className="card text-center">
-        <Container>
+                            <h3 className="heading-4 mb-[var(--spacing-xs)]">business</h3>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(für Unternehmen)</p>
-            <div>
+                            <div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
-              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                                € 8,90
-                <Users className="h-5 w-5" aria-hidden="true" />
+                            </div>
-                <span className="font-medium">Tipp</span>
+                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-              </div>
+                                Grundgebühr pro Monat
-              <h2>Telefonie + Internet kombinieren</h2>
+                            </p>
-              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
-                Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
+                                <li>✅ Professionelle Lösung</li>
-                Sie zahlen nur für die tatsächlich geführten Gespräche.
+                                <li>📞 Festnetz AT: ab 3,24 Cent/min</li>
-              </p>
+                                <li>👔 Für Firmenkunden</li>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                            </ul>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                            <Link href="#kontakt" className="btn btn-outline w-full">Anfragen</Link>
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                        </div>
-                  <span>0 € Grundgebühr mit Telenet-Internet</span>
+                    </div>
-                </li>
+                </Container>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+            </Section>
-                  <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 className="bg-[var(--color-muted)]">
-      <Section>
+                <Container>
-        <Container>
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                        <div>
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                            <h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
-              <Building2 className="h-5 w-5" aria-hidden="true" />
+                            <p className="mb-[var(--spacing-md)]">
-              <span className="font-medium">Business</span>
+                                Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
-            </div>
+                            </p>
-            <h2>Telefonie für Unternehmen</h2>
+                            <p className="text-sm text-[color:var(--color-muted-foreground)]">
-            <p className="lead mt-[var(--spacing-md)]">
+                                Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
-              Professionelle Telefonielösungen für Ihr Unternehmen.
+                            </p>
-              Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
+                        </div>
-            </p>
+                        <div className="flex justify-center">
-          </div>
+                            <div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
-          <div className="card max-w-2xl mx-auto text-center">
+                                <div className="text-6xl mb-2">☎️</div>
-            <h3 className="heading-4 mb-[var(--spacing-md)]">
+                                <div className="font-bold">Ihre Nummer</div>
-              Individuelle Business-Lösungen
+                                <div className="text-sm">bleibt gleich.</div>
-            </h3>
+                            </div>
-            <p className="text-muted mb-[var(--spacing-lg)]">
+                        </div>
-              Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
+                    </div>
-              Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
+                </Container>
-              wir finden die passende Lösung für Ihre Anforderungen.
+            </Section>
-            </p>
-            <Link href="/kontakt" className="btn btn-primary">
-              Beratung anfragen
-            </Link>
-          </div>
-        </Container>
-      </Section>
 
-      {/* CTA Section */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
-      <Section className="bg-[var(--color-foreground)]">
+                <Container>
-        <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
-          <div className="text-center max-w-2xl mx-auto">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-            <h2 className="text-[var(--color-background)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-              Fragen zu unseren Telefonie-Tarifen?
+                            📞 Anrufen
-            </h2>
+                        </a>
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-              Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
+                            ✉️ E-Mail schreiben
-            </p>
+                        </a>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+                    </div>
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                </Container>
-                Kontakt aufnehmen
+            </Section>
-              </Link>
+        </main>
-              <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/ueber-uns/page.tsx

@@ -0,0 +1,82 @@
+
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "Über uns | TeleNetSystems",
+    description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
+};
+
+export default function UeberUnsPage() {
+    return (
+        <main>
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+                <Container>
+                    <h1 className="mb-[var(--spacing-md)]">
+                        Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
+                    </h1>
+                    <p className="lead max-w-2xl mx-auto">
+                        Seit 1976 verbinden wir Menschen in der Region Reutte.
+                    </p>
+                </Container>
+            </Section>
+
+            <Section>
+                <Container>
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center mb-[var(--spacing-2xl)]">
+                        <div className="order-2 md:order-1">
+                            <div className="aspect-square bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
+                                PLACEHOLDER: Historic Image / Company Building
+                            </div>
+                        </div>
+                        <div className="order-1 md:order-2">
+                            <h2 className="mb-[var(--spacing-md)]">Unsere Geschichte</h2>
+                            <p className="mb-[var(--spacing-md)]">
+                                Die Telenet Systems GmbH blickt auf eine lange Tradition zurück. Gegründet 1976, haben wir uns von einem lokalen Anbieter für
+                                Antennen- und Kabelfernsehen zu einem modernen Full-Service-Provider entwickelt.
+                            </p>
+                            <p className="mb-[var(--spacing-md)]">
+                                In einer Zeit, in der Technologie immer komplexer wurde, war unser Ziel immer einfach: Technik verständlich und nutzbar zu machen.
+                                Heute versorgen wir Haushalte und Unternehmen im gesamten Bezirk Reutte mit Highspeed-Internet, digitalem Fernsehen und
+                                Telefonie.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
+                        <div>
+                            <h2 className="mb-[var(--spacing-md)]">Unsere Philosophie</h2>
+                            <p className="mb-[var(--spacing-md)]">
+                                Wir sind kein anonymer Konzern mit Call-Center im Ausland. Wir sind Ihre Nachbarn.
+                                Unsere Mitarbeiter leben in der Region und kennen die Anforderungen vor Ort.
+                            </p>
+                            <ul className="space-y-[var(--spacing-sm)]">
+                                <li className="flex items-center gap-[var(--spacing-sm)]">✅ Echte Ansprechpartner</li>
+                                <li className="flex items-center gap-[var(--spacing-sm)]">✅ Schnelle Reaktionszeiten</li>
+                                <li className="flex items-center gap-[var(--spacing-sm)]">✅ Handschlagqualität</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
+                                PLACEHOLDER: Team Image
+                            </div>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Contact Anchor */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+                <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">Werden Sie Teil unseres Netzes</h2>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            📞 Kontakt aufnehmen
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

assets/BilderUndLogos/manifest.json

@@ -1,758 +0,0 @@
-[
-  {
-    "originalUrl": "https://tnr.at/stream/Plansee_1.jpg",
-    "localPath": null,
-    "pageUsedOn": [
-      "https://www.tnr.at/sonstiges/livecam.html"
-    ],
-    "detectedType": "misc",
-    "width": null,
-    "height": null,
-    "fileSize": null,
-    "format": null,
-    "licensingConfidence": {
-      "level": "medium",
-      "reason": "Gleiche Root-Domain, aber andere Subdomain; Rechte sollten zusätzlich bestätigt werden."
-    },
-    "optimizedVariants": []
-  },
-  {
-    "originalUrl": "https://tnr.at/stream/Plansee_2.jpg",
-    "localPath": null,
-    "pageUsedOn": [
-      "https://www.tnr.at/sonstiges/livecam.html"
-    ],
-    "detectedType": "misc",
-    "width": null,
-    "height": null,
-    "fileSize": null,
-    "format": null,
-    "licensingConfidence": {
-      "level": "medium",
-      "reason": "Gleiche Root-Domain, aber andere Subdomain; Rechte sollten zusätzlich bestätigt werden."
-    },
-    "optimizedVariants": []
-  },
-  {
-    "originalUrl": "https://tnr.at/stream/schollenwiesenlift.jpg",
-    "localPath": null,
-    "pageUsedOn": [
-      "https://www.tnr.at/sonstiges/livecam.html"
-    ],
-    "detectedType": "misc",
-    "width": null,
-    "height": null,
-    "fileSize": null,
-    "format": null,
-    "licensingConfidence": {
-      "level": "medium",
-      "reason": "Gleiche Root-Domain, aber andere Subdomain; Rechte sollten zusätzlich bestätigt werden."
-    },
-    "optimizedVariants": []
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/0/Lukas%20Schennach-0f7160e5.jpg",
-    "localPath": "assets/originals/misc/lukas-20schennach-0f7160e5-e8152f4f.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 82845,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-480.webp",
-      "public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-480.avif",
-      "public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-768.webp",
-      "public/media/misc/lukas-20schennach-0f7160e5-e8152f4f-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/0/Mario%20Kien-f5e3602f.jpg",
-    "localPath": "assets/originals/misc/mario-20kien-f5e3602f-ddda3b58.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 99889,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/mario-20kien-f5e3602f-ddda3b58-480.webp",
-      "public/media/misc/mario-20kien-f5e3602f-ddda3b58-480.avif",
-      "public/media/misc/mario-20kien-f5e3602f-ddda3b58-768.webp",
-      "public/media/misc/mario-20kien-f5e3602f-ddda3b58-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/0/timo-224648e7.jpg",
-    "localPath": "assets/originals/misc/timo-224648e7-f0782cdb.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 702,
-    "height": 1053,
-    "fileSize": 95160,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/timo-224648e7-f0782cdb-480.webp",
-      "public/media/misc/timo-224648e7-f0782cdb-480.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/2/Franz-8b76ccff.jpg",
-    "localPath": "assets/originals/misc/franz-8b76ccff-320f42cb.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 700,
-    "height": 1050,
-    "fileSize": 92775,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/franz-8b76ccff-320f42cb-480.webp",
-      "public/media/misc/franz-8b76ccff-320f42cb-480.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/2/Ju%CC%88rgen%20Gra%CC%88ssle-8e0dfbb3.jpg",
-    "localPath": "assets/originals/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 88653,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-480.webp",
-      "public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-480.avif",
-      "public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-768.webp",
-      "public/media/misc/ju-cc-88rgen-20gra-cc-88ssle-8e0dfbb3-db96fd12-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/2/Martin%20M%C3%BCller-4422f545.jpg",
-    "localPath": "assets/originals/misc/martin-20m-c3-bcller-4422f545-ddb853b7.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 72232,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-480.webp",
-      "public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-480.avif",
-      "public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-768.webp",
-      "public/media/misc/martin-20m-c3-bcller-4422f545-ddb853b7-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/3/telefon-fa5e8c21.jpg",
-    "localPath": "assets/originals/misc/telefon-fa5e8c21-271d2135.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/"
-    ],
-    "detectedType": "misc",
-    "width": 1600,
-    "height": 900,
-    "fileSize": 127940,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/telefon-fa5e8c21-271d2135-480.webp",
-      "public/media/misc/telefon-fa5e8c21-271d2135-480.avif",
-      "public/media/misc/telefon-fa5e8c21-271d2135-768.webp",
-      "public/media/misc/telefon-fa5e8c21-271d2135-768.avif",
-      "public/media/misc/telefon-fa5e8c21-271d2135-1024.webp",
-      "public/media/misc/telefon-fa5e8c21-271d2135-1024.avif",
-      "public/media/misc/telefon-fa5e8c21-271d2135-1440.webp",
-      "public/media/misc/telefon-fa5e8c21-271d2135-1440.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/4/internet-7b594a2d.jpg",
-    "localPath": "assets/originals/misc/internet-7b594a2d-793cefee.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/"
-    ],
-    "detectedType": "misc",
-    "width": 1600,
-    "height": 900,
-    "fileSize": 160649,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/internet-7b594a2d-793cefee-480.webp",
-      "public/media/misc/internet-7b594a2d-793cefee-480.avif",
-      "public/media/misc/internet-7b594a2d-793cefee-768.webp",
-      "public/media/misc/internet-7b594a2d-793cefee-768.avif",
-      "public/media/misc/internet-7b594a2d-793cefee-1024.webp",
-      "public/media/misc/internet-7b594a2d-793cefee-1024.avif",
-      "public/media/misc/internet-7b594a2d-793cefee-1440.webp",
-      "public/media/misc/internet-7b594a2d-793cefee-1440.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/6/Firmenkunden-96736712.jpg",
-    "localPath": "assets/originals/misc/firmenkunden-96736712-5fa99704.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/leistungen.html"
-    ],
-    "detectedType": "misc",
-    "width": 1600,
-    "height": 900,
-    "fileSize": 136399,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/firmenkunden-96736712-5fa99704-480.webp",
-      "public/media/misc/firmenkunden-96736712-5fa99704-480.avif",
-      "public/media/misc/firmenkunden-96736712-5fa99704-768.webp",
-      "public/media/misc/firmenkunden-96736712-5fa99704-768.avif",
-      "public/media/misc/firmenkunden-96736712-5fa99704-1024.webp",
-      "public/media/misc/firmenkunden-96736712-5fa99704-1024.avif",
-      "public/media/misc/firmenkunden-96736712-5fa99704-1440.webp",
-      "public/media/misc/firmenkunden-96736712-5fa99704-1440.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/6/Lorena-c31636eb.jpg",
-    "localPath": "assets/originals/misc/lorena-c31636eb-2f817bb4.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 126849,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/lorena-c31636eb-2f817bb4-480.webp",
-      "public/media/misc/lorena-c31636eb-2f817bb4-480.avif",
-      "public/media/misc/lorena-c31636eb-2f817bb4-768.webp",
-      "public/media/misc/lorena-c31636eb-2f817bb4-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/8/Furkan_Demirel-4112a488.jpg",
-    "localPath": "assets/originals/misc/furkan-demirel-4112a488-f6dfc223.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 697,
-    "height": 1046,
-    "fileSize": 115769,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/furkan-demirel-4112a488-f6dfc223-480.webp",
-      "public/media/misc/furkan-demirel-4112a488-f6dfc223-480.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/8/tv_business-c3bdfb94.jpg",
-    "localPath": "assets/originals/misc/tv-business-c3bdfb94-23310090.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/fernsehen.html"
-    ],
-    "detectedType": "misc",
-    "width": 848,
-    "height": 477,
-    "fileSize": 100776,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/tv-business-c3bdfb94-23310090-480.webp",
-      "public/media/misc/tv-business-c3bdfb94-23310090-480.avif",
-      "public/media/misc/tv-business-c3bdfb94-23310090-768.webp",
-      "public/media/misc/tv-business-c3bdfb94-23310090-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/a/Julia%20Besler-f4fe1bff.jpg",
-    "localPath": "assets/originals/misc/julia-20besler-f4fe1bff-fb0f3af2.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 126290,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-480.webp",
-      "public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-480.avif",
-      "public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-768.webp",
-      "public/media/misc/julia-20besler-f4fe1bff-fb0f3af2-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/b/tv_paytv-6cbac6e4.jpg",
-    "localPath": "assets/originals/misc/tv-paytv-6cbac6e4-d140e2e4.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/fernsehen.html"
-    ],
-    "detectedType": "misc",
-    "width": 887,
-    "height": 499,
-    "fileSize": 67541,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/tv-paytv-6cbac6e4-d140e2e4-480.webp",
-      "public/media/misc/tv-paytv-6cbac6e4-d140e2e4-480.avif",
-      "public/media/misc/tv-paytv-6cbac6e4-d140e2e4-768.webp",
-      "public/media/misc/tv-paytv-6cbac6e4-d140e2e4-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/c/David%20Mu%CC%88ller-da85dab8.jpg",
-    "localPath": "assets/originals/misc/david-20mu-cc-88ller-da85dab8-046e19ba.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 106693,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-480.webp",
-      "public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-480.avif",
-      "public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-768.webp",
-      "public/media/misc/david-20mu-cc-88ller-da85dab8-046e19ba-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/c/tv_privat-76f60c7a.jpg",
-    "localPath": "assets/originals/misc/tv-privat-76f60c7a-88eafcfb.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/",
-      "https://www.tnr.at/fernsehen.html"
-    ],
-    "detectedType": "misc",
-    "width": 848,
-    "height": 477,
-    "fileSize": 56824,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/tv-privat-76f60c7a-88eafcfb-480.webp",
-      "public/media/misc/tv-privat-76f60c7a-88eafcfb-480.avif",
-      "public/media/misc/tv-privat-76f60c7a-88eafcfb-768.webp",
-      "public/media/misc/tv-privat-76f60c7a-88eafcfb-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/d/Wolfgang%20Schwaiger-3fd3136b.jpg",
-    "localPath": "assets/originals/misc/wolfgang-20schwaiger-3fd3136b-19e15245.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "misc",
-    "width": 1000,
-    "height": 1500,
-    "fileSize": 130229,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-480.webp",
-      "public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-480.avif",
-      "public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-768.webp",
-      "public/media/misc/wolfgang-20schwaiger-3fd3136b-19e15245-768.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/f/LWL1-c8928579.jpg",
-    "localPath": "assets/originals/misc/lwl1-c8928579-d408002b.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/leistungen.html"
-    ],
-    "detectedType": "misc",
-    "width": 1600,
-    "height": 900,
-    "fileSize": 126513,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/lwl1-c8928579-d408002b-480.webp",
-      "public/media/misc/lwl1-c8928579-d408002b-480.avif",
-      "public/media/misc/lwl1-c8928579-d408002b-768.webp",
-      "public/media/misc/lwl1-c8928579-d408002b-768.avif",
-      "public/media/misc/lwl1-c8928579-d408002b-1024.webp",
-      "public/media/misc/lwl1-c8928579-d408002b-1024.avif",
-      "public/media/misc/lwl1-c8928579-d408002b-1440.webp",
-      "public/media/misc/lwl1-c8928579-d408002b-1440.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/assets/images/f/Privatkunden-a54cf4d8.jpg",
-    "localPath": "assets/originals/misc/privatkunden-a54cf4d8-0018c3fa.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/leistungen.html"
-    ],
-    "detectedType": "misc",
-    "width": 1600,
-    "height": 900,
-    "fileSize": 147386,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-480.webp",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-480.avif",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-768.webp",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-768.avif",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-1024.webp",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-1024.avif",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-1440.webp",
-      "public/media/misc/privatkunden-a54cf4d8-0018c3fa-1440.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/fernsehen/tv-header.jpg",
-    "localPath": "assets/originals/hero/tv-header-44c1e07b.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/fernsehen.html"
-    ],
-    "detectedType": "hero",
-    "width": 2500,
-    "height": 1250,
-    "fileSize": 232031,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/hero/tv-header-44c1e07b-480.webp",
-      "public/media/hero/tv-header-44c1e07b-480.avif",
-      "public/media/hero/tv-header-44c1e07b-768.webp",
-      "public/media/hero/tv-header-44c1e07b-768.avif",
-      "public/media/hero/tv-header-44c1e07b-1024.webp",
-      "public/media/hero/tv-header-44c1e07b-1024.avif",
-      "public/media/hero/tv-header-44c1e07b-1440.webp",
-      "public/media/hero/tv-header-44c1e07b-1440.avif",
-      "public/media/hero/tv-header-44c1e07b-1920.webp",
-      "public/media/hero/tv-header-44c1e07b-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/slider_internet/internet-header.jpg",
-    "localPath": "assets/originals/hero/internet-header-431619ac.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/internet.html"
-    ],
-    "detectedType": "hero",
-    "width": 2500,
-    "height": 1250,
-    "fileSize": 258840,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/hero/internet-header-431619ac-480.webp",
-      "public/media/hero/internet-header-431619ac-480.avif",
-      "public/media/hero/internet-header-431619ac-768.webp",
-      "public/media/hero/internet-header-431619ac-768.avif",
-      "public/media/hero/internet-header-431619ac-1024.webp",
-      "public/media/hero/internet-header-431619ac-1024.avif",
-      "public/media/hero/internet-header-431619ac-1440.webp",
-      "public/media/hero/internet-header-431619ac-1440.avif",
-      "public/media/hero/internet-header-431619ac-1920.webp",
-      "public/media/hero/internet-header-431619ac-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/slider_leistungen/LWL1.jpg",
-    "localPath": "assets/originals/services/lwl1-40360e27.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/"
-    ],
-    "detectedType": "services",
-    "width": 2500,
-    "height": 1667,
-    "fileSize": 327162,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/services/lwl1-40360e27-480.webp",
-      "public/media/services/lwl1-40360e27-480.avif",
-      "public/media/services/lwl1-40360e27-768.webp",
-      "public/media/services/lwl1-40360e27-768.avif",
-      "public/media/services/lwl1-40360e27-1024.webp",
-      "public/media/services/lwl1-40360e27-1024.avif",
-      "public/media/services/lwl1-40360e27-1440.webp",
-      "public/media/services/lwl1-40360e27-1440.avif",
-      "public/media/services/lwl1-40360e27-1920.webp",
-      "public/media/services/lwl1-40360e27-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/slider_leistungen/tnr-leistungen.jpg",
-    "localPath": "assets/originals/services/tnr-leistungen-055053d5.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/leistungen.html"
-    ],
-    "detectedType": "services",
-    "width": 2500,
-    "height": 1667,
-    "fileSize": 699082,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/services/tnr-leistungen-055053d5-480.webp",
-      "public/media/services/tnr-leistungen-055053d5-480.avif",
-      "public/media/services/tnr-leistungen-055053d5-768.webp",
-      "public/media/services/tnr-leistungen-055053d5-768.avif",
-      "public/media/services/tnr-leistungen-055053d5-1024.webp",
-      "public/media/services/tnr-leistungen-055053d5-1024.avif",
-      "public/media/services/tnr-leistungen-055053d5-1440.webp",
-      "public/media/services/tnr-leistungen-055053d5-1440.avif",
-      "public/media/services/tnr-leistungen-055053d5-1920.webp",
-      "public/media/services/tnr-leistungen-055053d5-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/slider_telefonie/telefonie1.jpg",
-    "localPath": "assets/originals/misc/telefonie1-ad7595f9.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/telefonie.html"
-    ],
-    "detectedType": "misc",
-    "width": 2500,
-    "height": 1250,
-    "fileSize": 244570,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/telefonie1-ad7595f9-480.webp",
-      "public/media/misc/telefonie1-ad7595f9-480.avif",
-      "public/media/misc/telefonie1-ad7595f9-768.webp",
-      "public/media/misc/telefonie1-ad7595f9-768.avif",
-      "public/media/misc/telefonie1-ad7595f9-1024.webp",
-      "public/media/misc/telefonie1-ad7595f9-1024.avif",
-      "public/media/misc/telefonie1-ad7595f9-1440.webp",
-      "public/media/misc/telefonie1-ad7595f9-1440.avif",
-      "public/media/misc/telefonie1-ad7595f9-1920.webp",
-      "public/media/misc/telefonie1-ad7595f9-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/slider_ueber_uns/Firma1.jpg",
-    "localPath": "assets/originals/misc/firma1-8a863d8b.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/"
-    ],
-    "detectedType": "misc",
-    "width": 2500,
-    "height": 1250,
-    "fileSize": 1298065,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/misc/firma1-8a863d8b-480.webp",
-      "public/media/misc/firma1-8a863d8b-480.avif",
-      "public/media/misc/firma1-8a863d8b-768.webp",
-      "public/media/misc/firma1-8a863d8b-768.avif",
-      "public/media/misc/firma1-8a863d8b-1024.webp",
-      "public/media/misc/firma1-8a863d8b-1024.avif",
-      "public/media/misc/firma1-8a863d8b-1440.webp",
-      "public/media/misc/firma1-8a863d8b-1440.avif",
-      "public/media/misc/firma1-8a863d8b-1920.webp",
-      "public/media/misc/firma1-8a863d8b-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/bilder/slider_ueber_uns/Team_Telenet.jpg",
-    "localPath": "assets/originals/team/team-telenet-f9218567.jpg",
-    "pageUsedOn": [
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "team",
-    "width": 2500,
-    "height": 1042,
-    "fileSize": 281135,
-    "format": "jpg",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/team/team-telenet-f9218567-480.webp",
-      "public/media/team/team-telenet-f9218567-480.avif",
-      "public/media/team/team-telenet-f9218567-768.webp",
-      "public/media/team/team-telenet-f9218567-768.avif",
-      "public/media/team/team-telenet-f9218567-1024.webp",
-      "public/media/team/team-telenet-f9218567-1024.avif",
-      "public/media/team/team-telenet-f9218567-1440.webp",
-      "public/media/team/team-telenet-f9218567-1440.avif",
-      "public/media/team/team-telenet-f9218567-1920.webp",
-      "public/media/team/team-telenet-f9218567-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/layout/img/logo_systems.png",
-    "localPath": "assets/originals/brand/logo-systems-9fd0db14.png",
-    "pageUsedOn": [
-      "https://www.tnr.at/",
-      "https://www.tnr.at/fernsehen.html",
-      "https://www.tnr.at/internet.html",
-      "https://www.tnr.at/leistungen.html",
-      "https://www.tnr.at/sonstiges/anfrage.html",
-      "https://www.tnr.at/sonstiges/datenschutz.html",
-      "https://www.tnr.at/sonstiges/impressum.html",
-      "https://www.tnr.at/sonstiges/jugendschutzerklaerung.html",
-      "https://www.tnr.at/sonstiges/livecam.html",
-      "https://www.tnr.at/telefonie.html",
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "brand",
-    "width": 2500,
-    "height": 793,
-    "fileSize": 143798,
-    "format": "png",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/brand/logo-systems-9fd0db14-480.webp",
-      "public/media/brand/logo-systems-9fd0db14-480.avif",
-      "public/media/brand/logo-systems-9fd0db14-768.webp",
-      "public/media/brand/logo-systems-9fd0db14-768.avif",
-      "public/media/brand/logo-systems-9fd0db14-1024.webp",
-      "public/media/brand/logo-systems-9fd0db14-1024.avif",
-      "public/media/brand/logo-systems-9fd0db14-1440.webp",
-      "public/media/brand/logo-systems-9fd0db14-1440.avif",
-      "public/media/brand/logo-systems-9fd0db14-1920.webp",
-      "public/media/brand/logo-systems-9fd0db14-1920.avif"
-    ]
-  },
-  {
-    "originalUrl": "https://www.tnr.at/files/layout/img/logo_weiss.png",
-    "localPath": "assets/originals/brand/logo-weiss-ffa4cbf6.png",
-    "pageUsedOn": [
-      "https://www.tnr.at/",
-      "https://www.tnr.at/fernsehen.html",
-      "https://www.tnr.at/internet.html",
-      "https://www.tnr.at/leistungen.html",
-      "https://www.tnr.at/sonstiges/anfrage.html",
-      "https://www.tnr.at/sonstiges/datenschutz.html",
-      "https://www.tnr.at/sonstiges/impressum.html",
-      "https://www.tnr.at/sonstiges/jugendschutzerklaerung.html",
-      "https://www.tnr.at/sonstiges/livecam.html",
-      "https://www.tnr.at/telefonie.html",
-      "https://www.tnr.at/ueber-uns.html"
-    ],
-    "detectedType": "brand",
-    "width": 2500,
-    "height": 793,
-    "fileSize": 94380,
-    "format": "png",
-    "licensingConfidence": {
-      "level": "high",
-      "reason": "Gleiche Domain wie Quellseite; hohe Wahrscheinlichkeit auf Eigentum der Auftraggeber-Seite."
-    },
-    "optimizedVariants": [
-      "public/media/brand/logo-weiss-ffa4cbf6-480.webp",
-      "public/media/brand/logo-weiss-ffa4cbf6-480.avif",
-      "public/media/brand/logo-weiss-ffa4cbf6-768.webp",
-      "public/media/brand/logo-weiss-ffa4cbf6-768.avif",
-      "public/media/brand/logo-weiss-ffa4cbf6-1024.webp",
-      "public/media/brand/logo-weiss-ffa4cbf6-1024.avif",
-      "public/media/brand/logo-weiss-ffa4cbf6-1440.webp",
-      "public/media/brand/logo-weiss-ffa4cbf6-1440.avif",
-      "public/media/brand/logo-weiss-ffa4cbf6-1920.webp",
-      "public/media/brand/logo-weiss-ffa4cbf6-1920.avif"
-    ]
-  }
-]

components/layout/Container.tsx

@@ -1,28 +1,28 @@
 import type { ElementType, ReactNode } from "react";
+import React from "react"; // Added import for React to use React.HTMLAttributes
 
-type ContainerVariant = "default" | "narrow" | "wide";
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
-
-interface ContainerProps {
   children: ReactNode;
   className?: string;
   as?: ElementType;
-  variant?: ContainerVariant;
+  variant?: "narrow" | "wide"; // Add variant support
 }
 
-const variantClasses: Record<ContainerVariant, string> = {
-  default: "container",
-  narrow: "container container--narrow",
-  wide: "container container--wide",
-};
-
 export function Container({
   children,
   className = "",
   as: Tag = "div",
-  variant = "default",
+  variant,
+  ...props
 }: ContainerProps) {
+  const variantClass = variant === "narrow" ? "container--narrow" :
+    variant === "wide" ? "container--wide" : "";
+
   return (
-    <Tag className={`${variantClasses[variant]} ${className}`.trim()}>
+    <Tag
+      className={`container ${variantClass} ${className}`.trim()}
+      {...props}
+    >
       {children}
     </Tag>
   );

components/layout/Footer.tsx

@@ -1,139 +1,54 @@
-import Link from "next/link";
-import Image from "next/image";
-import { MapPin, Phone, Mail, Clock } from "lucide-react";
 
-const navigation = {
+import Link from "next/link";
-  leistungen: [
+import { Container } from "./Container";
-    { name: "Fernsehen", href: "/fernsehen" },
-    { name: "Internet", href: "/internet" },
-    { name: "Telefonie", href: "/telefonie" },
-    { name: "IT-Services", href: "/leistungen" },
-  ],
-  unternehmen: [
-    { name: "Über uns", href: "/ueber-uns" },
-    { name: "Kontakt", href: "/kontakt" },
-  ],
-  rechtliches: [
-    { name: "Impressum", href: "/impressum" },
-    { name: "Datenschutz", href: "/datenschutz" },
-  ],
-};
 
 export function Footer() {
-  const currentYear = new Date().getFullYear();
+    const currentYear = new Date().getFullYear();
 
-  return (
+    return (
-    <footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
+        <footer className="bg-[var(--color-muted)] border-t border-[color:var(--color-border)] py-[var(--spacing-xl)] mt-auto">
-      <div className="container">
+            <Container>
-        {/* Main Footer Content */}
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
-        <div className="py-[var(--spacing-4xl)]">
+                    <div className="md:col-span-1">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
+                        <Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
-            {/* Company Info */}
+                            TeleNetSystems
-            <div className="lg:col-span-1">
+                        </Link>
-              <Image
+                        <p className="text-sm text-[color:var(--color-muted-foreground)]">
-                src="/images/brand/logo-weiss-ffa4cbf6.png"
+                            Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
-                alt="Telenet Systems GmbH"
+                        </p>
-                width={160}
+                    </div>
-                height={51}
+
-                className="h-10 w-auto mb-[var(--spacing-lg)]"
+                    <div>
-              />
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
-              <p className="text-sm text-gray-300 mb-[var(--spacing-lg)]">
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
-                Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik.
+                            <li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
-              </p>
+                            <li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
-              <div className="space-y-[var(--spacing-sm)]">
+                            <li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
-                <div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
+                        </ul>
-                  <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
+                    </div>
-                  <span>Reutte, Tirol, Österreich</span>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
+                            <li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
+                            <li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
+                            <li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
+                        </ul>
+                    </div>
                 </div>
-                <a
+
-                  href="tel:+4356725000"
+                <div className="border-t border-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
-                  className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
+                    &copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
-                >
-                  <Phone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
-                  <span>+43 5672 5000</span>
-                </a>
-                <a
-                  href="mailto:info@tnr.at"
-                  className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
-                >
-                  <Mail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
-                  <span>info@tnr.at</span>
-                </a>
-                <div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
-                  <Clock className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
-                  <span>Mo–Fr: 8:00–12:00 &amp; 13:00–17:00</span>
                 </div>
-              </div>
+            </Container>
-            </div>
+        </footer>
-
+    );
-            {/* Leistungen */}
-            <div>
-              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Leistungen</h3>
-              <ul className="space-y-[var(--spacing-sm)]">
-                {navigation.leistungen.map((item) => (
-                  <li key={item.name}>
-                    <Link
-                      href={item.href}
-                      className="text-sm text-gray-300 hover:text-white transition-colors"
-                    >
-                      {item.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Unternehmen */}
-            <div>
-              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Unternehmen</h3>
-              <ul className="space-y-[var(--spacing-sm)]">
-                {navigation.unternehmen.map((item) => (
-                  <li key={item.name}>
-                    <Link
-                      href={item.href}
-                      className="text-sm text-gray-300 hover:text-white transition-colors"
-                    >
-                      {item.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Rechtliches & CTA */}
-            <div>
-              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Rechtliches</h3>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
-                {navigation.rechtliches.map((item) => (
-                  <li key={item.name}>
-                    <Link
-                      href={item.href}
-                      className="text-sm text-gray-300 hover:text-white transition-colors"
-                    >
-                      {item.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-              <Link href="/kontakt" className="btn btn-primary">
-                Kontakt aufnehmen
-              </Link>
-            </div>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="border-t border-gray-700 py-[var(--spacing-lg)]">
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-[var(--spacing-sm)]">
-            <p className="text-sm text-gray-400">
-              © {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
-            </p>
-            <p className="text-sm text-gray-400">
-              Ihr Partner für Telekommunikation seit 1976
-            </p>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
 }

components/layout/Header.tsx

@@ -1,116 +1,41 @@
-"use client";
 
 import Link from "next/link";
-import Image from "next/image";
+import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { Container } from "./Container";
-import { Menu, X, Phone } from "lucide-react";
+import { Button } from "../ui/Button";
 
-const navigation = [
+const navLinks = [
-  { name: "Startseite", href: "/" },
+    { href: "/fernsehen", label: "Fernsehen" },
-  { name: "Fernsehen", href: "/fernsehen" },
+    { href: "/internet", label: "Internet" },
-  { name: "Internet", href: "/internet" },
+    { href: "/telefonie", label: "Telefonie" },
-  { name: "Telefonie", href: "/telefonie" },
+    { href: "/leistungen", label: "Leistungen" },
-  { name: "Leistungen", href: "/leistungen" },
+    { href: "/ueber-uns", label: "Über uns" },
-  { name: "Über uns", href: "/ueber-uns" },
-  { name: "Kontakt", href: "/kontakt" },
 ];
 
 export function Header() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    return (
-
+        <header className="border-b border-[color:var(--color-border)] sticky top-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-md">
-  return (
+            <Container className="flex h-16 items-center justify-between">
-    <header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
+                <Link href="/" className="font-heading text-xl font-bold text-[color:var(--color-primary)]">
-      <div className="container">
+                    TeleNetSystems
-        <nav className="flex items-center justify-between py-[var(--spacing-md)]">
-          {/* Logo */}
-          <Link href="/" className="flex-shrink-0">
-            <Image
-              src="/images/brand/logo-systems-9fd0db14.png"
-              alt="Telenet Systems GmbH"
-              width={180}
-              height={57}
-              priority
-              className="h-10 w-auto md:h-12"
-            />
-          </Link>
-
-          {/* Desktop Navigation */}
-          <div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]">
-            {navigation.map((item) => (
-              <Link
-                key={item.name}
-                href={item.href}
-                className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
-              >
-                {item.name}
-              </Link>
-            ))}
-          </div>
-
-          {/* CTA & Phone (Desktop) */}
-          <div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
-            <a
-              href="tel:+4356725000"
-              className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
-              aria-label="Anrufen: +43 5672 5000"
-            >
-              <Phone className="h-4 w-4" aria-hidden="true" />
-              <span>+43 5672 5000</span>
-            </a>
-            <Link href="/kontakt" className="btn btn-primary">
-              Jetzt beraten lassen
-            </Link>
-          </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            type="button"
-            className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]"
-            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            aria-expanded={mobileMenuOpen}
-            aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
-          >
-            {mobileMenuOpen ? (
-              <X className="h-6 w-6" aria-hidden="true" />
-            ) : (
-              <Menu className="h-6 w-6" aria-hidden="true" />
-            )}
-          </button>
-        </nav>
-
-        {/* Mobile Navigation */}
-        {mobileMenuOpen && (
-          <div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
-            <div className="flex flex-col gap-[var(--spacing-sm)]">
-              {navigation.map((item) => (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  {item.name}
                 </Link>
-              ))}
+                <nav className="hidden md:flex gap-6">
-              <hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
+                    {navLinks.map((link) => (
-              <a
+                        <Link
-                href="tel:+4356725000"
+                            key={link.href}
-                className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
+                            href={link.href}
-              >
+                            className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
-                <Phone className="h-5 w-5" aria-hidden="true" />
+                        >
-                <span>+43 5672 5000</span>
+                            {link.label}
-              </a>
+                        </Link>
-              <Link
+                    ))}
-                href="/kontakt"
+                </nav>
-                className="btn btn-primary mt-[var(--spacing-sm)]"
+                <div className="flex items-center gap-4">
-                onClick={() => setMobileMenuOpen(false)}
+                    <Link href="#kontakt" className="btn btn-primary btn-sm">
-              >
+                        Jetzt beraten lassen
-                Jetzt beraten lassen
+                    </Link>
-              </Link>
+                </div>
-            </div>
+            </Container>
-          </div>
+        </header>
-        )}
+    );
-      </div>
-    </header>
-  );
 }

components/layout/Section.tsx

@@ -1,32 +1,29 @@
 import type { ElementType, ReactNode } from "react";
 
-type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush";
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
-
-interface SectionProps {
   children: ReactNode;
   className?: string;
   as?: ElementType;
-  variant?: SectionVariant;
+  variant?: "sm" | "lg" | "hero" | "flush";
-  id?: string;
 }
 
-const variantClasses: Record<SectionVariant, string> = {
-  default: "section",
-  sm: "section section--sm",
-  lg: "section section--lg",
-  hero: "section section--hero",
-  flush: "section section--flush",
-};
-
 export function Section({
   children,
   className = "",
   as: Tag = "section",
-  variant = "default",
+  variant,
-  id,
+  ...props
 }: SectionProps) {
+  const variantClass = variant === "sm" ? "section--sm" :
+    variant === "lg" ? "section--lg" :
+      variant === "hero" ? "section--hero" :
+        variant === "flush" ? "section--flush" : "";
+
   return (
-    <Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
+    <Tag
+      className={`section ${variantClass} ${className}`.trim()}
+      {...props}
+    >
       {children}
     </Tag>
   );

components/ui/Button.tsx

@@ -1,42 +1,34 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 
-type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonSize = "sm" | "lg";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   variant?: ButtonVariant;
   size?: ButtonSize;
+  className?: string; // Explicitly allow className
 }
 
-const baseClasses =
-  "inline-flex items-center justify-center font-medium rounded-[var(--radius-md)] transition-all duration-[var(--duration-normal)] ease-[var(--easing-default)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)] disabled:pointer-events-none disabled:opacity-50";
-
-const variantClasses: Record<ButtonVariant, string> = {
-  primary:
-    "bg-[var(--color-primary)] text-[color:var(--color-background)] hover:opacity-90",
-  secondary:
-    "bg-[var(--color-muted)] text-[color:var(--color-foreground)] border border-[color:var(--color-border)] hover:opacity-80",
-  ghost:
-    "bg-transparent text-[color:var(--color-foreground)] hover:bg-[var(--color-muted)]",
-};
-
-const sizeClasses: Record<ButtonSize, string> = {
-  sm: "px-[var(--spacing-sm)] py-[var(--spacing-xs)] text-[length:var(--font-size-sm)]",
-  md: "px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[length:var(--font-size-base)]",
-  lg: "px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[length:var(--font-size-lg)]",
-};
-
 export function Button({
   children,
   variant = "primary",
-  size = "md",
+  size,
   className = "",
   ...props
 }: ButtonProps) {
+  // Construct class names based on stylesheet.css
+  const variantClass = variant === "primary" ? "btn-primary" :
+    variant === "secondary" ? "btn-secondary" :
+      variant === "outline" ? "btn-outline" :
+        variant === "ghost" ? "btn-ghost" : "";
+
+  const sizeClass = size === "sm" ? "btn-sm" :
+    size === "lg" ? "btn-lg" : "";
+
   return (
     <button
-      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}
+      className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
       {...props}
     >
       {children}

components/ui/Card.tsx

@@ -13,7 +13,7 @@ export function Card({
 }: CardProps) {
   return (
     <Tag
-      className={`rounded-[var(--radius-md)] border border-[color:var(--color-border)] shadow-[var(--shadow-sm)] p-[var(--spacing-lg)] ${className}`.trim()}
+      className={`card ${className}`.trim()}
     >
       {children}
     </Tag>

prompts/master_prompt.md

@@ -42,7 +42,7 @@ Die Website sollte in einem freundlichen, sachlichen und beratenden Ton kommuniz
 
 ### ✅ Was bei dieser Website BESONDERS WICHTIG ist:
 
-Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“ Außerdem soll von dem Ordner ( /Volumes/EliasExtern/Arbeit/EB-Solutions/Projekte/Testing/telenetsystems-2026-02-03-v1/assets/BilderUndLogos) das Logo und die bilder gleich passend eingebaut werden. Dass die webiste gleich die rihcitgen bilder nutzt.
+Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“
 
 ### ❌ Was AUF KEINEN FALL passieren darf:
 

theme/globals.css

@@ -7,7 +7,8 @@
 :root {
   /* ── Colors ──────────────────────────────────────── */
   --color-primary: #f39210;
-  --color-secondary: #f39210;
+  --color-secondary: #1e293b;
+  /* Slate 800 - High contrast to primary orange */
   --color-accent: #eb5c24;
   --color-neutral: #6b7280;
   --color-background: #ffffff;
@@ -92,4 +93,4 @@
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;
-}
+}

theme/stylesheet.css

@@ -15,7 +15,9 @@
 
 /* ── Base Resets ───────────────────────────────────── */
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -86,43 +88,54 @@ body {
 /*  .heading-* Klassen gestylt werden.                */
 /*  VERBOTEN: style={{ fontSize: ... }} oder harte px */
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-heading);
   font-weight: var(--font-heading-weight);
   color: var(--color-foreground);
 }
 
-h1, .heading-1 {
+h1,
+.heading-1 {
   font-size: var(--text-5xl);
   line-height: var(--text-5xl-line-height);
   letter-spacing: var(--text-5xl-letter-spacing);
 }
 
-h2, .heading-2 {
+h2,
+.heading-2 {
   font-size: var(--text-4xl);
   line-height: var(--text-4xl-line-height);
   letter-spacing: var(--text-4xl-letter-spacing);
 }
 
-h3, .heading-3 {
+h3,
+.heading-3 {
   font-size: var(--text-3xl);
   line-height: var(--text-3xl-line-height);
   letter-spacing: var(--text-3xl-letter-spacing);
 }
 
-h4, .heading-4 {
+h4,
+.heading-4 {
   font-size: var(--text-2xl);
   line-height: var(--text-2xl-line-height);
   letter-spacing: var(--text-2xl-letter-spacing);
 }
 
-h5, .heading-5 {
+h5,
+.heading-5 {
   font-size: var(--text-xl);
   line-height: var(--text-xl-line-height);
   letter-spacing: var(--text-xl-letter-spacing);
 }
 
-h6, .heading-6 {
+h6,
+.heading-6 {
   font-size: var(--text-lg);
   line-height: var(--text-lg-line-height);
   letter-spacing: var(--text-lg-letter-spacing);
@@ -130,11 +143,30 @@ h6, .heading-6 {
 
 /* ── Body Text Utilities ───────────────────────────── */
 
-.text-xs   { font-size: var(--text-xs);   line-height: var(--text-xs-line-height); }
+.text-xs {
-.text-sm   { font-size: var(--text-sm);   line-height: var(--text-sm-line-height); }
+  font-size: var(--text-xs);
-.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
+  line-height: var(--text-xs-line-height);
-.text-lg   { font-size: var(--text-lg);   line-height: var(--text-lg-line-height); }
+}
-.text-xl   { font-size: var(--text-xl);   line-height: var(--text-xl-line-height); }
+
+.text-sm {
+  font-size: var(--text-sm);
+  line-height: var(--text-sm-line-height);
+}
+
+.text-base {
+  font-size: var(--text-base);
+  line-height: var(--text-base-line-height);
+}
+
+.text-lg {
+  font-size: var(--text-lg);
+  line-height: var(--text-lg-line-height);
+}
+
+.text-xl {
+  font-size: var(--text-xl);
+  line-height: var(--text-xl-line-height);
+}
 
 .text-muted {
   color: var(--color-muted-foreground);
@@ -216,7 +248,8 @@ h6, .heading-6 {
 .btn-ghost {
   background-color: transparent;
   color: var(--color-foreground);
-  border-color: transparent;
+  border: 1px solid transparent;
+  /* Keep size consistent */
 }
 
 .btn-ghost:hover {
@@ -241,6 +274,15 @@ h6, .heading-6 {
   border-radius: var(--radius-lg);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  overflow: hidden;
+  /* For children accents */
+  position: relative;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-primary);
 }
 
 /* ── Links ───────────────────────────────────────── */
@@ -256,7 +298,9 @@ a:hover {
 
 /* ── Images ──────────────────────────────────────── */
 
-img, video, svg {
+img,
+video,
+svg {
   display: block;
   max-width: 100%;
   height: auto;
@@ -278,12 +322,29 @@ img, video, svg {
 
 /* ── Spacing Utilities ──────────────────────────── */
 
-.stack-xs > * + * { margin-top: var(--spacing-xs); }
+.stack-xs>*+* {
-.stack-sm > * + * { margin-top: var(--spacing-sm); }
+  margin-top: var(--spacing-xs);
-.stack-md > * + * { margin-top: var(--spacing-md); }
+}
-.stack-lg > * + * { margin-top: var(--spacing-lg); }
+
-.stack-xl > * + * { margin-top: var(--spacing-xl); }
+.stack-sm>*+* {
-.stack-2xl > * + * { margin-top: var(--spacing-2xl); }
+  margin-top: var(--spacing-sm);
+}
+
+.stack-md>*+* {
+  margin-top: var(--spacing-md);
+}
+
+.stack-lg>*+* {
+  margin-top: var(--spacing-lg);
+}
+
+.stack-xl>*+* {
+  margin-top: var(--spacing-xl);
+}
+
+.stack-2xl>*+* {
+  margin-top: var(--spacing-2xl);
+}
 
 /* ── Divider ───────────────────────────────────── */
 
@@ -291,4 +352,4 @@ img, video, svg {
   border: none;
   border-top: 1px solid var(--color-border);
   margin-block: var(--spacing-2xl);
-}
+}