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 (
-    <>
+        <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"
-            fill
-            priority
-            className="object-cover opacity-40"
-            sizes="100vw"
-          />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-3xl">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Tv className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Fernsehen</span>
-            </div>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
-              Über 200 TV-Programme in bester Qualität
                     </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
+                        Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
-              Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
+                        Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
                     </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+                    <Link href="#kontakt" className="btn btn-primary btn-lg">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                        Jetzt anschließen lassen
-                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>
-          <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
-                  className="h-5 w-5 text-[var(--color-success)]"
-                  aria-hidden="true"
-                />
-                <span>{benefit}</span>
-              </div>
-            ))}
-          </div>
-        </Container>
-      </Section>
-
-      {/* TV Options */}
-      <Section id="angebote">
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <h2>Unsere TV-Angebote</h2>
-            <p className="lead mt-[var(--spacing-md)]">
-              Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
                             </p>
-          </div>
+                            <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
-            {tvOptions.map((option) => (
+                                    📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
-              <div
+                                </li>
-                key={option.title}
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
-                className={`card relative overflow-hidden ${
+                                    💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
-                  option.popular
+                                </li>
-                    ? "border-[var(--color-primary)] border-2"
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
-                    : ""
+                                    📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
-                }`}
-              >
-                {option.popular && (
-                  <div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
-                    Beliebt
-                  </div>
-                )}
-                <div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
-                  <Image
-                    src={option.image}
-                    alt={option.title}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 1024px) 100vw, 33vw"
-                  />
-                </div>
-                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
-                  <option.icon className="h-5 w-5" aria-hidden="true" />
-                  <h3 className="heading-4">{option.title}</h3>
-                </div>
-                <div className="mb-[var(--spacing-md)]">
-                  <span className="heading-2 text-[var(--color-foreground)]">
-                    {option.price.includes("Anfrage") ? "" : "€ "}
-                    {option.price}
-                  </span>
-                  {option.period && (
-                    <span className="text-muted"> / {option.period}</span>
-                  )}
-                </div>
-                <p className="text-muted mb-[var(--spacing-lg)]">
-                  {option.description}
-                </p>
-                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
-                  {option.features.map((feature) => (
-                    <li
-                      key={feature}
-                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
-                    >
-                      <CheckCircle
-                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
-                        aria-hidden="true"
-                      />
-                      <span>{feature}</span>
                                 </li>
-                  ))}
                             </ul>
-                <Link
-                  href="/kontakt"
-                  className={`btn w-full ${
-                    option.popular ? "btn-primary" : "btn-outline"
-                  }`}
-                >
-                  {option.cta}
-                </Link>
                         </div>
-            ))}
+                        <div 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)]">
-          </div>
+                            PLACEHOLDER: TV Experience Image
-        </Container>
-      </Section>
-
-      {/* FAQ Section */}
-      <Section className="bg-[var(--color-muted)]">
-        <Container variant="narrow">
-          <div className="text-center mb-[var(--spacing-3xl)]">
-            <h2>Häufige Fragen</h2>
-          </div>
-          <div className="space-y-[var(--spacing-lg)]">
-            <div className="card">
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
-                Wie schnell ist die Installation?
-              </h3>
-              <p className="text-muted">
-                In der Regel können wir innerhalb weniger Werktage einen Installationstermin
-                vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
-              </p>
-            </div>
-            <div className="card">
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
-                Gibt es versteckte Kosten?
-              </h3>
-              <p className="text-muted">
-                Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
-                Es gibt keine Servicepauschale und keine versteckten Gebühren.
-              </p>
-            </div>
-            <div className="card">
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
-                Kann ich Pay-TV dazubuchen?
-              </h3>
-              <p className="text-muted">
-                Ja, wir bieten verschiedene Pay-TV-Optionen an. Kontaktieren Sie uns
-                und wir finden das passende Paket für Sie.
-              </p>
                         </div>
                     </div>
                 </Container>
             </Section>
 
-      {/* CTA Section */}
+            {/* Pricing / Offer */}
-      <Section className="bg-[var(--color-primary)]">
+            <Section className="bg-[var(--color-muted)] text-center">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto">
+                    <h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
-            <h2 className="text-[var(--color-background)]">
+                    <div className="card max-w-lg mx-auto bg-white">
-              Bereit für bestes Fernsehen?
+                        <h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
-            </h2>
+                        <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
-            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                            € 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
-              Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
+                        </div>
-              direkt Ihren TV-Anschluss.
+                        <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
+                            inkl. MwSt
                         </p>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+                        <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
-              <Link
+                            <li>✅ 200+ TV-Sender</li>
-                href="/kontakt"
+                            <li>✅ 40+ HD-Sender</li>
-                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
+                            <li>✅ 40+ Radiosender</li>
-              >
+                            <li>✅ Keine Satellitenschüssel nötig</li>
+                            <li>✅ Beste Bild- & Tonqualität</li>
+                        </ul>
+                        <Link href="#kontakt" className="btn btn-primary w-full">
                             Jetzt bestellen
                         </Link>
-              <a
+                    </div>
-                href="tel:+4356725000"
+                </Container>
-                className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
+            </Section>
-              >
+
-                +43 5672 5000
+            {/* Business & Pay TV */}
-              </a>
+            <Section>
+                <Container>
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
+                        <div>
+                            <h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
+                            <p className="mb-[var(--spacing-md)]">
+                                Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
+                            </p>
+                            <Link href="#kontakt" className="btn btn-outline">
+                                Individuelles Angebot anfragen
+                            </Link>
+                        </div>
+                        <div>
+                            <h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
+                            <p className="mb-[var(--spacing-md)]">
+                                Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
+                            </p>
+                            <Link href="#kontakt" className="btn btn-outline">
+                                Pay-TV Optionen prüfen
+                            </Link>
                         </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)]">Interessiert?</h2>
+                    <p className="lead text-white mb-[var(--spacing-xl)]">
+                        Kontaktieren Sie uns für Ihren TV-Anschluss.
+                    </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)]">
+                            ✉️ E-Mail schreiben
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
     );
 }

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 (
-    <>
+        <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"
-            alt="Highspeed Internet"
-            fill
-            priority
-            className="object-cover opacity-40"
-            sizes="100vw"
-          />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-3xl">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Wifi className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Internet</span>
-            </div>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
-              Highspeed-Internet für Ihr Zuhause
                     </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
+                        Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
-              Flexible Tarife ohne Servicepauschale – ab 14,50 € im Monat.
                     </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                        <Link href="#kabel" className="btn btn-primary">
-                Jetzt bestellen
+                            Kabel-Tarife
                         </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)]">
+                        <Link href="#glasfaser" className="btn btn-secondary">
-                Tarife vergleichen
+                            Glasfaser-Tarife
-              </a>
-            </div>
-          </div>
-        </Container>
-      </Section>
-
-      {/* Trust Bar */}
-      <Section variant="sm" className="bg-[var(--color-muted)]">
-        <Container>
-          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
-            {benefits.map((benefit) => (
-              <div
-                key={benefit}
-                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
-              >
-                <CheckCircle
-                  className="h-5 w-5 text-[var(--color-success)]"
-                  aria-hidden="true"
-                />
-                <span>{benefit}</span>
-              </div>
-            ))}
-          </div>
-        </Container>
-      </Section>
-
-      {/* Kabel-Tarife */}
-      <Section id="tarife">
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Zap className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Kabel-Internet</span>
-            </div>
-            <h2>Tarife für Kabel-Kunden</h2>
-            <p className="text-muted mt-[var(--spacing-md)]">
-              Tarife gültig ab 01.05.2024. Alle Preise inkl. MwSt.
-            </p>
-          </div>
-
-          <div className="overflow-x-auto">
-            <table className="w-full border-collapse">
-              <thead>
-                <tr className="border-b border-[var(--color-border)]">
-                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    Tarif
-                  </th>
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    <span className="flex items-center justify-center gap-1">
-                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
-                      Download
-                    </span>
-                  </th>
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    <span className="flex items-center justify-center gap-1">
-                      <ArrowUp className="h-4 w-4" aria-hidden="true" />
-                      Upload
-                    </span>
-                  </th>
-                  <th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    Preis / Monat
-                  </th>
-                  <th className="py-[var(--spacing-md)] px-[var(--spacing-sm)]"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {kabelTarife.map((tarif) => (
-                  <tr
-                    key={tarif.name}
-                    className={`border-b border-[var(--color-border)] ${
-                      tarif.popular ? "bg-[var(--color-primary)]/5" : ""
-                    }`}
-                  >
-                    <td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
-                      <span className="font-medium">{tarif.name}</span>
-                      {tarif.popular && (
-                        <span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
-                          Beliebt
-                        </span>
-                      )}
-                    </td>
-                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
-                      {tarif.download} Mbit/s
-                    </td>
-                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
-                      {tarif.upload} Mbit/s
-                    </td>
-                    <td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                      € {tarif.price}
-                    </td>
-                    <td className="py-[var(--spacing-md)] px-[var(--spacing-sm)]">
-                      <Link
-                        href="/kontakt"
-                        className="btn btn-sm btn-outline"
-                      >
-                        Bestellen
                         </Link>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
                     </div>
-
-          <p className="text-sm text-muted mt-[var(--spacing-lg)]">
-            Alle Tarife enthalten unlimitiertes Datenvolumen und IPv6-Adressen.
-            Für die Tarife ab telenet.pro ist eine öffentliche IPv4-Adresse enthalten.
-            Einmalige Installationskosten je nach Aufwand.
-          </p>
                 </Container>
             </Section>
 
-      {/* Glasfaser-Tarife */}
+            {/* Intro Info */}
-      <Section className="bg-[var(--color-muted)]">
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Zap className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Glasfaser-Internet</span>
-            </div>
-            <h2>Tarife für Glasfaser-Kunden</h2>
-            <p className="text-muted mt-[var(--spacing-md)]">
-              Symmetrische Bandbreite – gleich schnell hoch- wie runterladen. Tarife gültig ab 01.04.2025.
-            </p>
-          </div>
-
-          <div className="overflow-x-auto">
-            <table className="w-full border-collapse bg-[var(--color-background)] rounded-[var(--radius-lg)]">
-              <thead>
-                <tr className="border-b border-[var(--color-border)]">
-                  <th className="text-left py-[var(--spacing-md)] px-[var(--spacing-lg)] font-semibold">
-                    Tarif
-                  </th>
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    <span className="flex items-center justify-center gap-1">
-                      <ArrowDown className="h-4 w-4" aria-hidden="true" />
-                      Download
-                    </span>
-                  </th>
-                  <th className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    <span className="flex items-center justify-center gap-1">
-                      <ArrowUp className="h-4 w-4" aria-hidden="true" />
-                      Upload
-                    </span>
-                  </th>
-                  <th className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                    Preis / Monat
-                  </th>
-                  <th className="py-[var(--spacing-md)] px-[var(--spacing-lg)]"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {glasfaserTarife.map((tarif) => (
-                  <tr
-                    key={tarif.name + "-gf"}
-                    className={`border-b border-[var(--color-border)] last:border-b-0 ${
-                      tarif.popular ? "bg-[var(--color-primary)]/5" : ""
-                    }`}
-                  >
-                    <td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
-                      <span className="font-medium">{tarif.name}</span>
-                      {tarif.popular && (
-                        <span className="ml-2 text-xs bg-[var(--color-primary)] text-[var(--color-background)] px-2 py-0.5 rounded-full">
-                          Empfohlen
-                        </span>
-                      )}
-                    </td>
-                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
-                      {tarif.download} Mbit/s
-                    </td>
-                    <td className="text-center py-[var(--spacing-md)] px-[var(--spacing-sm)]">
-                      {tarif.upload} Mbit/s
-                    </td>
-                    <td className="text-right py-[var(--spacing-md)] px-[var(--spacing-sm)] font-semibold">
-                      € {tarif.price}
-                    </td>
-                    <td className="py-[var(--spacing-md)] px-[var(--spacing-lg)]">
-                      <Link
-                        href="/kontakt"
-                        className="btn btn-sm btn-outline"
-                      >
-                        Bestellen
-                      </Link>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-
-          <p className="text-sm text-muted mt-[var(--spacing-lg)]">
-            Glasfaser bietet symmetrische Geschwindigkeiten – ideal für Homeoffice und Videokonferenzen.
-            Alle Tarife ohne Servicepauschale mit unlimitiertem Datenvolumen.
-          </p>
-        </Container>
-      </Section>
-
-      {/* Business Section */}
             <Section>
-        <Container>
+                <Container className="text-center max-w-3xl">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems Internet?</h2>
-            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
+                    <p>
-              <Image
+                        Wir bieten Ihnen echte Flatrates ohne Datenlimit. Keine Servicepauschale.
-                src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
+                        Ehrliche Bandbreiten und persönlicher Support direkt vor Ort in Reutte.
-                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)]">
+                </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>Dedizierte Bandbreite</span>
+            {/* Kabel Tarife */}
-                </li>
+            <Section id="kabel" className="bg-[var(--color-muted)]">
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                <Container>
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                    <h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
-                  <span>Statische IP-Adressen</span>
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
-                </li>
+                        Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                    </p>
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+
-                  <span>Erweiterte SLA-Optionen</span>
+                    <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
-                </li>
+                        {/* Hit */}
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                        <div className="card flex flex-col items-center bg-white">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
-                  <span>Persönliche Betreuung</span>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</div>
-                </li>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <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>40 Mbit/s</strong> Down</li>
+                                <li><strong>6 Mbit/s</strong> Up</li>
+                                <li>Daten: Unlimitiert</li>
                             </ul>
-              <Link href="/kontakt" className="btn btn-primary">
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                Angebot anfragen
+                        </div>
-              </Link>
+
+                        {/* Eco */}
+                        <div className="card flex flex-col items-center bg-white relative overflow-hidden">
+                            <div className="absolute top-0 right-0 bg-[var(--color-secondary)] text-white text-xs px-2 py-1">Tipp</div>
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€19,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <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>
+
+                        {/* Fun */}
+                        <div className="card flex flex-col items-center bg-white">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€29,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <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>80 Mbit/s</strong> Down</li>
+                                <li><strong>12 Mbit/s</strong> Up</li>
+                                <li>Daten: Unlimitiert</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
+                        </div>
+
+                        {/* Pro */}
+                        <div className="card flex flex-col items-center bg-white">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€39,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <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>100 Mbit/s</strong> Down</li>
+                                <li><strong>14 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>
+
+                        {/* Mega */}
+                        <div className="card flex flex-col items-center bg-white">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€49,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <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>
 
-      {/* CTA Section */}
+            {/* Glasfaser Tarife */}
-      <Section className="bg-[var(--color-foreground)]">
+            <Section id="glasfaser">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto">
+                    <h2 className="text-center mb-[var(--spacing-sm)]">Glasfaser-Internet Tarife</h2>
-            <h2 className="text-[var(--color-background)]">
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
-              Welcher Tarif passt zu Ihnen?
+                        Die Zukunft der Geschwindigkeit. (Gültig ab 01.04.2025)
-            </h2>
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
-              Wir beraten Sie gerne persönlich und finden gemeinsam den idealen
-              Internet-Tarif für Ihre Bedürfnisse.
                     </p>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                    <div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
-                Beratung anfragen
+                        {/* Eco */}
-              </Link>
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
-              <a
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
-                href="tel:+4356725000"
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,00</div>
-                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-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">
-                +43 5672 5000
+                                <li><strong>100 Mbit/s</strong> Down</li>
-              </a>
+                                <li><strong>100 Mbit/s</strong> Up</li>
+                                <li>Symmetrisch!</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                        </div>
+
+                        {/* Fun */}
+                        <div className="card flex flex-col items-center border-[color:var(--color-primary)]">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
+                            <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>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>200 Mbit/s</strong> Down</li>
+                                <li><strong>200 Mbit/s</strong> Up</li>
+                                <li>Symmetrisch!</li>
+                            </ul>
+                            <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 (
-    <>
+        <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"
-            fill
-            priority
-            className="object-cover opacity-40"
-            sizes="100vw"
-          />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-3xl">
-            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
-              Unser Leistungsangebot
-            </p>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
-              Telekommunikation und IT-Services aus einer Hand
                     </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
+                        Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
-              wir bieten alles, was Sie für moderne Kommunikation benötigen.
+                        Von der Planung bis zur Wartung.
                     </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+                    <Link href="#it-services" className="btn btn-primary btn-lg">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+                        Zu den IT-Services
-                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>
                 <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)]">
-              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
-            </p>
                     </div>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
+                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
-            {targetGroups.map((group) => (
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-              <div key={group.title} className="card overflow-hidden">
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
-                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                            <p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
-                  <Image
+                            <Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                    src={group.image}
-                    alt={group.title}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 1024px) 100vw, 50vw"
-                  />
                         </div>
-                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                  <group.icon className="h-5 w-5" aria-hidden="true" />
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
-                  <h3 className="heading-3">{group.title}</h3>
+                            <p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
+                            <Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
                         </div>
-                <p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
-                  {group.features.map((feature) => (
+                            <p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
-                    <li
+                            <Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                      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>
-          <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>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
+                                    <p>
+                                        Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
+                                        Wir sorgen für eine stabile Infrastruktur.
                                     </p>
                                 </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
-            {services.map((service) => (
-              <div key={service.title} className="card text-center">
-                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
-                  <service.icon className="h-6 w-6" aria-hidden="true" />
-                </div>
-                <h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
-                <p className="text-sm text-muted">{service.description}</p>
-              </div>
-            ))}
-          </div>
-        </Container>
-      </Section>
-
-      {/* Glasfaser Section */}
-      <Section>
-        <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-            <div className="relative h-80 lg:h-full min-h-[320px] rounded-[var(--radius-lg)] overflow-hidden">
-              <Image
-                src="/images/services/lwl1-40360e27.jpg"
-                alt="Glasfaser-Installation"
-                fill
-                className="object-cover"
-                sizes="(max-width: 1024px) 100vw, 50vw"
-              />
-            </div>
                                 <div>
-              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
-                <Cable className="h-5 w-5" aria-hidden="true" />
+                                    <p>
-                <span className="font-medium">Glasfaser</span>
+                                        Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
-              </div>
+                                        und Antivirus-Software.
-              <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)]">
+                                </div>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                <div>
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
-                  <span>Glasfaser-Planung & Beratung</span>
+                                    <p>
-                </li>
+                                        Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                        Gerne auch per Fernwartung für schnelle Hilfe.
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                                    </p>
-                  <span>Professioneller Netzausbau</span>
+                                </div>
-                </li>
+                            </div>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                        </div>
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                        <div className="flex flex-col gap-[var(--spacing-md)]">
-                  <span>Behördliche Unterstützung</span>
+                            <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)]">
-                </li>
+                                PLACEHOLDER: IT Hardware Image
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                            </div>
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                            <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)]">
-                  <span>Qualitätssicherung</span>
+                                PLACEHOLDER: Server Room Image
-                </li>
+                            </div>
-              </ul>
-              <Link href="/kontakt" className="btn btn-primary">
-                Projekt anfragen
-              </Link>
                         </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>
-          <div className="text-center max-w-2xl mx-auto">
+                    <h2 className="text-white mb-[var(--spacing-md)]">IT-Probleme? Wir helfen.</h2>
-            <h2 className="text-[var(--color-background)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              Haben Sie Fragen zu unseren Leistungen?
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-            </h2>
+                            📞 05672 / PLACEHOLDER
-            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                        </a>
-              Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-            </p>
+                            ✉️ support@tnr.at
-            <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>
-    </>
+        </main>
     );
 }

app/page.tsx

@@ -1,297 +1,172 @@
-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">
+        <Container>
-          <Image
+          <h1 className="mb-[var(--spacing-md)]">
-            src="/images/misc/firma1-8a863d8b.jpg"
+            Ihr Partner für Telekom & IT <br />
-            alt="Telenet Systems Firmengebäude in Reutte"
+            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
-            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)]">
+          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
+            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
-              schnellem Internet und flexibler Telefonie. Persönliche Beratung,
+            Regional, persönlich und zuverlässig seit 1976.
-              ehrlicher Service – ohne komplizierte Prozesse.
           </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+            <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)]">
+            <Link href="/internet" className="btn btn-outline btn-lg">
-                Unsere Leistungen
+              Internet-Tarife prüfen
             </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)]">
-            <h2>Warum Telenet Systems?</h2>
-            <p className="lead mt-[var(--spacing-md)]">
-              Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
-            {usps.map((usp) => (
-              <div key={usp.title} className="text-center">
-                <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
-                  <usp.icon className="h-6 w-6" aria-hidden="true" />
-                </div>
-                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
-                <p className="text-muted">{usp.description}</p>
-              </div>
-            ))}
-          </div>
         </Container>
       </Section>
 
       {/* Services Section */}
       <Section>
         <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+          <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) => (
+          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
-              <Link
+            {/* Internet */}
-                key={service.title}
+            <div className="card text-center transition-transform hover:-translate-y-1">
-                href={service.href}
+              <div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
-                className="card group overflow-hidden hover:shadow-[var(--shadow-lg)] transition-shadow"
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
-              >
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)] overflow-hidden">
+                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
-                  <Image
+              </p>
-                    src={service.image}
+              <Link href="/internet" className="btn btn-secondary w-full">
-                    alt={service.title}
+                Zu den Tarifen
-                    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 */}
+            {/* Fernsehen */}
-      <Section className="bg-[var(--color-primary)]">
+            <div className="card text-center transition-transform hover:-translate-y-1">
-        <Container>
+              <div className="mb-[var(--spacing-md)] text-4xl">📺</div>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
-            <div>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-              <h2 className="text-[var(--color-background)]">
+                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
-                Transparent und fair – ohne versteckte Kosten
-              </h2>
-              <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
-                Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
-                keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
               </p>
-              <ul className="space-y-[var(--spacing-sm)]">
+              <Link href="/fernsehen" className="btn btn-secondary w-full">
-                {trustItems.map((item) => (
+                Sender entdecken
-                  <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
+            {/* Telefonie */}
-                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)]">Telefonie</h3>
-                className="object-cover"
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                sizes="(max-width: 1024px) 100vw, 50vw"
+                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>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
             </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-xl)]">
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-            {/* Privatkunden */}
+              <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
-                  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>
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-              <p className="text-muted mb-[var(--spacing-lg)]">
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
-                Zuverlässiges Fernsehen, schnelles Internet und günstige Telefonie für Ihr Zuhause.
+              <p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
-                Flexible Tarife ohne Servicepauschale und mit persönlicher Betreuung vor Ort.
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
-              </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)]">Top</div>
-            <div className="card relative overflow-hidden">
+              <p className="font-semibold text-[color:var(--color-foreground)]">Service</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)]">Persönlicher Ansprechpartner</p>
-                <Image
-                  src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
-                  alt="Geschäftsmann im Büro"
-                  fill
-                  className="object-cover"
-                  sizes="(max-width: 768px) 100vw, 50vw"
-                />
-              </div>
-              <h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
-              <p className="text-muted mb-[var(--spacing-lg)]">
-                Maßgeschneiderte Business-Lösungen für Kommunikation und IT.
-                Von der Netzwerkplanung bis zur Fernwartung – alles aus einer Hand.
-              </p>
-              <Link href="/leistungen" className="btn btn-primary">
-                Business-Lösungen
-              </Link>
             </div>
           </div>
         </Container>
       </Section>
 
-      {/* CTA Section */}
+      {/* 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>
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+          <p className="text-xl mb-[var(--spacing-xl)] opacity-90">
-              Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
+            Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
-              Rufen Sie uns an oder senden Sie uns eine Nachricht.
           </p>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
+            <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-                Kontakt aufnehmen
+              📞 Anrufen
-              </Link>
+            </a>
-              <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 href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-                +43 5672 5000
+              ✉️ E-Mail schreiben
             </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 (
-    <>
+        <main>
-      {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
-        <div className="absolute inset-0 z-0">
-          <Image
-            src="/images/misc/telefonie1-ad7595f9.jpg"
-            alt="Telefonie"
-            fill
-            priority
-            className="object-cover opacity-40"
-            sizes="100vw"
-          />
-        </div>
-        <Container className="relative z-10">
-          <div className="max-w-3xl">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Phone className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Telefonie</span>
-            </div>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
-              Flexible Telefonie-Tarife für jeden Bedarf
-            </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
-              Günstig ins österreichische Festnetz telefonieren.
-              Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
-            </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
-                Jetzt bestellen
-              </Link>
-              <a href="#tarife" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
-                Tarife ansehen
-              </a>
-            </div>
-          </div>
-        </Container>
-      </Section>
-
-      {/* Trust Bar */}
-      <Section variant="sm" className="bg-[var(--color-muted)]">
                 <Container>
-          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+                    <h1 className="mb-[var(--spacing-md)]">
-            {benefits.map((benefit) => (
+                        Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
-              <div
+                    </h1>
-                key={benefit}
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+                        Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
-              >
+                        Ideal als Ergänzung zu Ihrem Internet-Paket.
-                <CheckCircle
+                    </p>
-                  className="h-5 w-5 text-[var(--color-success)]"
+                    <Link href="#tarife" className="btn btn-primary btn-lg">
-                  aria-hidden="true"
+                        Tarife ansehen
-                />
+                    </Link>
-                <span>{benefit}</span>
-              </div>
-            ))}
-          </div>
                 </Container>
             </Section>
 
-      {/* Tarife */}
             <Section id="tarife">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <div className="text-center mb-[var(--spacing-2xl)]">
                         <h2>Unsere Telefonie-Tarife</h2>
-            <p className="lead mt-[var(--spacing-md)]">
+                        <p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
-              Einfache Preisstruktur ohne versteckte Kosten.
-              Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
-            </p>
                     </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
+                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
-            {telefonieTarife.map((tarif, index) => (
+                        {/* Zero (With Internet) */}
-              <div
+                        <div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
-                key={`${tarif.name}-${index}`}
+                            <div className="bg-[var(--color-primary)] text-white text-xs py-1 px-3 rounded-full inline-block mb-[var(--spacing-sm)]">Empfehlung</div>
-                className={`card relative ${
+                            <h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
-                  tarif.popular
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
-                    ? "border-[var(--color-primary)] border-2"
+                            <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
-                    : ""
+                                € 0,00
-                }`}
-              >
-                {tarif.popular && (
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
-                    Empfohlen
                             </div>
-                )}
+                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-                <div className="text-center">
+                                Grundgebühr pro Monat
-                  <h3 className="heading-4 text-[var(--color-primary)]">
-                    {tarif.name}
-                  </h3>
-                  <p className="text-sm text-muted mb-[var(--spacing-md)]">
-                    {tarif.subtitle}
                             </p>
-                  <div className="mb-[var(--spacing-md)]">
+                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
-                    <span className="heading-1">€ {tarif.price}</span>
+                                <li>✅ Keine Grundgebühr!</li>
-                    <span className="text-muted"> / Monat</span>
+                                <li>📞 Festnetz AT: ab 2,4 Cent/min</li>
-                  </div>
+                                <li>🎯 Ideal für Gelegenheitsnutzer</li>
-                  <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
+                            <Link href="#kontakt" className="btn btn-primary w-full">Bestellen</Link>
-                  href="/kontakt"
+                        </div>
-                  className={`btn w-full ${
+
-                    tarif.popular ? "btn-primary" : "btn-outline"
+                        {/* Zero (Solo) */}
-                  }`}
+                        <div className="card text-center">
-                >
+                            <h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
-                  Jetzt bestellen
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(ohne Internet)</p>
-                </Link>
+                            <div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
+                                € 5,00
+                            </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>✅ Günstige Grundgebühr</li>
+                                <li>📞 Festnetz AT: ab 2,4 Cent/min</li>
+                                <li>🔌 Nur Kabelanschluss nötig</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline w-full">Bestellen</Link>
+                        </div>
+
+                        {/* Business */}
+                        <div className="card text-center">
+                            <h3 className="heading-4 mb-[var(--spacing-xs)]">business</h3>
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(für Unternehmen)</p>
+                            <div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
+                                € 8,90
+                            </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>✅ Professionelle Lösung</li>
+                                <li>📞 Festnetz AT: ab 3,24 Cent/min</li>
+                                <li>👔 Für Firmenkunden</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline w-full">Anfragen</Link>
                         </div>
-            ))}
                     </div>
                 </Container>
             </Section>
 
-      {/* Kombinieren Section */}
             <Section className="bg-[var(--color-muted)]">
                 <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
                         <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>
-                <Users className="h-5 w-5" aria-hidden="true" />
+                            <p className="mb-[var(--spacing-md)]">
-                <span className="font-medium">Tipp</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 + Internet kombinieren</h2>
+                            <p className="text-sm text-[color:var(--color-muted-foreground)]">
-              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                                Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
-                Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
-                Sie zahlen nur für die tatsächlich geführten Gespräche.
                             </p>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
-                  <span>0 € Grundgebühr mit Telenet-Internet</span>
-                </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
-                  <span>Einfache Abrechnung über eine Rechnung</span>
-                </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
-                  <span>Ein Ansprechpartner für alles</span>
-                </li>
-              </ul>
-              <Link href="/internet" className="btn btn-primary">
-                Internet-Tarife ansehen
-              </Link>
                         </div>
-            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
+                        <div className="flex justify-center">
-              <Image
+                            <div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
-                src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
+                                <div className="text-6xl mb-2">☎️</div>
-                alt="Person telefoniert"
+                                <div className="font-bold">Ihre Nummer</div>
-                fill
+                                <div className="text-sm">bleibt gleich.</div>
-                className="object-cover"
+                            </div>
-                sizes="(max-width: 1024px) 100vw, 50vw"
-              />
                         </div>
                     </div>
                 </Container>
             </Section>
 
-      {/* Business Section */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
-      <Section>
                 <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-              <Building2 className="h-5 w-5" aria-hidden="true" />
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-              <span className="font-medium">Business</span>
+                            📞 Anrufen
-            </div>
+                        </a>
-            <h2>Telefonie für Unternehmen</h2>
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-            <p className="lead mt-[var(--spacing-md)]">
+                            ✉️ E-Mail schreiben
-              Professionelle Telefonielösungen für Ihr Unternehmen.
-              Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
-            </p>
-          </div>
-          <div className="card max-w-2xl mx-auto text-center">
-            <h3 className="heading-4 mb-[var(--spacing-md)]">
-              Individuelle Business-Lösungen
-            </h3>
-            <p className="text-muted mb-[var(--spacing-lg)]">
-              Für Unternehmen bieten wir maßgeschneiderte Telefonielösungen an.
-              Von der klassischen Festnetzanbindung bis zu modernen VoIP-Systemen –
-              wir finden die passende Lösung für Ihre Anforderungen.
-            </p>
-            <Link href="/kontakt" className="btn btn-primary">
-              Beratung anfragen
-            </Link>
-          </div>
-        </Container>
-      </Section>
-
-      {/* CTA Section */}
-      <Section className="bg-[var(--color-foreground)]">
-        <Container>
-          <div className="text-center max-w-2xl mx-auto">
-            <h2 className="text-[var(--color-background)]">
-              Fragen zu unseren Telefonie-Tarifen?
-            </h2>
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
-              Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
-            </p>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
-                Kontakt aufnehmen
-              </Link>
-              <a
-                href="tel:+4356725000"
-                className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
-              >
-                +43 5672 5000
                         </a>
                     </div>
-          </div>
                 </Container>
             </Section>
-    </>
+        </main>
     );
 }

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();
 
     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"
-                width={160}
-                height={51}
-                className="h-10 w-auto mb-[var(--spacing-lg)]"
-              />
-              <p className="text-sm text-gray-300 mb-[var(--spacing-lg)]">
-                Ihr regionaler Partner für Telekommunikation und IT-Services in Tirol. Seit 1976 verbinden wir Menschen und Technik.
                         </p>
-              <div className="space-y-[var(--spacing-sm)]">
-                <div className="flex items-start gap-[var(--spacing-sm)] text-sm text-gray-300">
-                  <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
-                  <span>Reutte, Tirol, Österreich</span>
-                </div>
-                <a
-                  href="tel:+4356725000"
-                  className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
-                >
-                  <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>
                     </div>
 
-            {/* Leistungen */}
                     <div>
-              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Leistungen</h3>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
-              <ul className="space-y-[var(--spacing-sm)]">
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
-                {navigation.leistungen.map((item) => (
+                            <li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
-                  <li key={item.name}>
+                            <li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
-                    <Link
+                            <li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
-                      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>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
-              <ul className="space-y-[var(--spacing-sm)]">
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
-                {navigation.unternehmen.map((item) => (
+                            <li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
-                  <li key={item.name}>
+                            <li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
-                    <Link
+                            <li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
-                      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>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
-                {navigation.rechtliches.map((item) => (
+                            <li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
-                  <li key={item.name}>
+                            <li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
-                    <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-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
-        <div className="border-t border-gray-700 py-[var(--spacing-lg)]">
+                    &copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
-          <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>
+            </Container>
         </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="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
+        <header className="border-b border-[color:var(--color-border)] sticky top-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-md">
-      <div className="container">
+            <Container className="flex h-16 items-center justify-between">
-        <nav className="flex items-center justify-between py-[var(--spacing-md)]">
+                <Link href="/" className="font-heading text-xl font-bold text-[color:var(--color-primary)]">
-          {/* Logo */}
+                    TeleNetSystems
-          <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>
-
+                <nav className="hidden md:flex gap-6">
-          {/* Desktop Navigation */}
+                    {navLinks.map((link) => (
-          <div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]">
-            {navigation.map((item) => (
                         <Link
-                key={item.name}
+                            key={link.href}
-                href={item.href}
+                            href={link.href}
-                className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
+                            className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
                         >
-                {item.name}
+                            {link.label}
                         </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>
-
+                <div className="flex items-center gap-4">
-        {/* Mobile Navigation */}
+                    <Link href="#kontakt" className="btn btn-primary btn-sm">
-        {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>
-              ))}
-              <hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
-              <a
-                href="tel:+4356725000"
-                className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
-              >
-                <Phone className="h-5 w-5" aria-hidden="true" />
-                <span>+43 5672 5000</span>
-              </a>
-              <Link
-                href="/kontakt"
-                className="btn btn-primary mt-[var(--spacing-sm)]"
-                onClick={() => setMobileMenuOpen(false)}
-              >
                         Jetzt beraten lassen
                     </Link>
                 </div>
-          </div>
+            </Container>
-        )}
-      </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;

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 ───────────────────────────────────── */