feat: Add new image assets and update components to use them, replacing the footer text logo with an image.

app/datenschutz/page.tsx

@@ -0,0 +1,93 @@
+import { Metadata } from "next";
+import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
+
+export const metadata: Metadata = {
+    title: "Datenschutz",
+    description: "Datenschutzerklärung der Telenet Systems GmbH",
+};
+
+export default function DatenschutzPage() {
+    return (
+        <main>
+            <Section variant="hero" className="bg-[var(--color-muted)]">
+                <Container variant="narrow">
+                    <h1>Datenschutzerklärung</h1>
+                </Container>
+            </Section>
+
+            <Section>
+                <Container variant="narrow">
+                    <div className="prose max-w-none">
+                        <div className="card mb-[var(--spacing-xl)]">
+                            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
+                                ⚠️ PLATZHALTER – Bitte durch vollständige Datenschutzerklärung ersetzen
+                            </p>
+                            <p className="text-muted text-sm">
+                                Die folgende Datenschutzerklärung ist ein Platzhalter und muss durch eine
+                                rechtlich geprüfte, vollständige Datenschutzerklärung ersetzt werden.
+                            </p>
+                        </div>
+
+                        <h2 className="heading-3">1. Verantwortlicher</h2>
+                        <p className="text-muted">
+                            Telenet Systems GmbH<br />
+                            PLACEHOLDER: Adresse<br />
+                            6600 Reutte, Österreich<br />
+                            E-Mail: PLACEHOLDER: E-Mail-Adresse
+                        </p>
+
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">2. Erhebung und Speicherung personenbezogener Daten</h2>
+                        <p className="text-muted">
+                            Beim Besuch unserer Website werden automatisch folgende Daten erhoben:
+                        </p>
+                        <ul className="stack-sm text-muted">
+                            <li>IP-Adresse des anfragenden Rechners</li>
+                            <li>Datum und Uhrzeit des Zugriffs</li>
+                            <li>Name und URL der abgerufenen Datei</li>
+                            <li>Website, von der aus der Zugriff erfolgt (Referrer-URL)</li>
+                            <li>Verwendeter Browser und ggf. das Betriebssystem Ihres Rechners</li>
+                        </ul>
+
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">3. Kontaktformular</h2>
+                        <p className="text-muted">
+                            Wenn Sie uns über das Kontaktformular kontaktieren, werden die von Ihnen
+                            mitgeteilten Daten (Name, E-Mail-Adresse, Nachricht) zur Bearbeitung Ihrer
+                            Anfrage gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
+                        </p>
+
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">4. Ihre Rechte</h2>
+                        <p className="text-muted">
+                            Sie haben das Recht:
+                        </p>
+                        <ul className="stack-sm text-muted">
+                            <li>Auskunft über Ihre bei uns gespeicherten Daten zu erhalten</li>
+                            <li>Berichtigung unrichtiger Daten zu verlangen</li>
+                            <li>Löschung Ihrer Daten zu verlangen</li>
+                            <li>Die Verarbeitung einzuschränken</li>
+                            <li>Der Verarbeitung zu widersprechen</li>
+                            <li>Datenübertragbarkeit zu verlangen</li>
+                        </ul>
+
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">5. Cookies</h2>
+                        <p className="text-muted">
+                            Diese Website verwendet technisch notwendige Cookies, die für den Betrieb
+                            der Website erforderlich sind. Eine weitergehende Nutzung von Cookies erfolgt
+                            nur mit Ihrer ausdrücklichen Einwilligung.
+                        </p>
+
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">6. Änderung dieser Datenschutzerklärung</h2>
+                        <p className="text-muted">
+                            Wir behalten uns vor, diese Datenschutzerklärung bei Bedarf anzupassen,
+                            damit sie stets den aktuellen rechtlichen Anforderungen entspricht.
+                        </p>
+
+                        <p className="text-sm text-muted mt-[var(--spacing-2xl)]">
+                            Stand: Februar 2026
+                        </p>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/fernsehen/page.tsx

@@ -1,253 +1,153 @@
-import type { Metadata } from "next";
+import { Metadata } from "next";
-import Image from "next/image";
 import Link from "next/link";
-import { Container } from "@/components/layout/Container";
+import Image from "next/image";
 import { Section } from "@/components/layout/Section";
-import { Tv, Users, Building2, Play, CheckCircle, ArrowRight } from "lucide-react";
+import { Container } from "@/components/layout/Container";
+import { Tv, Check, Phone, ArrowRight } from "lucide-react";
 
 export const metadata: Metadata = {
     title: "Fernsehen",
     description:
-    "Über 200 TV-Programme inkl. 40 HDTV-Sendern. Kabel-TV für Privat- und Geschäftskunden im Bezirk Reutte. Ab 16,47 € im Monat.",
+        "Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
-  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 = [
+const tvFeatures = [
-  {
+    "Über 200 Programme",
-    icon: Users,
+    "40 HDTV-Sender",
-    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",
+    "Kristallklare 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",
+    "Regionale Sender inklusive",
-  "Schnelle Installation",
-  "Faire und transparente Preise",
 ];
 
 export default function FernsehenPage() {
     return (
-    <>
+        <main>
             {/* Hero Section */}
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+            <Section variant="hero" className="bg-[var(--color-muted)]">
-        <div className="absolute inset-0 z-0">
+                <Container>
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                        <div className="max-w-xl">
+                            <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
+                                <Tv size={32} className="text-[var(--color-background)]" />
+                            </div>
+                            <h1 className="mb-[var(--spacing-lg)]">
+                                Fernsehen in
+                                <span className="text-[var(--color-primary)]"> bester Qualität</span>
+                            </h1>
+                            <p className="lead mb-[var(--spacing-2xl)]">
+                                Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
+                                direkt über das Kabelnetz von TeleNetSystems.
+                            </p>
+                            <Link href="/kontakt" className="btn btn-primary btn-lg">
+                                Jetzt beraten lassen
+                            </Link>
+                        </div>
+                        <div className="relative">
                             <Image
                                 src="/images/hero/tv-header-44c1e07b.jpg"
-            alt="Familie genießt Fernsehen"
+                                alt="Familie schaut gemütlich fern"
-            fill
+                                width={800}
+                                height={600}
+                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
                                 priority
-            className="object-cover opacity-40"
-            sizes="100vw"
                             />
                         </div>
-        <Container className="relative z-10">
-          <div className="max-w-3xl">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Tv className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Fernsehen</span>
-            </div>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
-              Über 200 TV-Programme in bester Qualität
-            </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
-              Erstklassige Unterhaltung für Ihr Zuhause oder Unternehmen.
-              Mit 40 HDTV-Sendern und rund 40 Radiosendern – ab nur 16,47 € im Monat.
-            </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
-              <Link href="/kontakt" className="btn btn-primary btn-lg">
-                Jetzt bestellen
-              </Link>
-              <a href="#angebote" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
-                Angebote ansehen
-              </a>
-            </div>
                     </div>
                 </Container>
             </Section>
 
-      {/* Trust Bar */}
+            {/* Trust Elements */}
-      <Section variant="sm" className="bg-[var(--color-muted)]">
+            <Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
                 <Container>
-          <div className="flex flex-wrap justify-center gap-x-[var(--spacing-2xl)] gap-y-[var(--spacing-md)]">
+                    <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
-            {benefits.map((benefit) => (
+                        {tvFeatures.slice(0, 4).map((feature) => (
-              <div
+                            <div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
-                key={benefit}
+                                <Check size={18} className="text-[var(--color-primary)]" />
-                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+                                <span className="text-sm font-medium">{feature}</span>
-              >
-                <CheckCircle
-                  className="h-5 w-5 text-[var(--color-success)]"
-                  aria-hidden="true"
-                />
-                <span>{benefit}</span>
                             </div>
                         ))}
                     </div>
                 </Container>
             </Section>
 
-      {/* TV Options */}
+            {/* TV Privat Section */}
-      <Section id="angebote">
+            <Section id="privat">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-            <h2>Unsere TV-Angebote</h2>
+                        <div>
-            <p className="lead mt-[var(--spacing-md)]">
+                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-              Ob für Ihr Zuhause oder Ihr Unternehmen – wir haben das passende Angebot.
+                                Für Privatkunden
-            </p>
-          </div>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
-            {tvOptions.map((option) => (
-              <div
-                key={option.title}
-                className={`card relative overflow-hidden ${
-                  option.popular
-                    ? "border-[var(--color-primary)] border-2"
-                    : ""
-                }`}
-              >
-                {option.popular && (
-                  <div className="absolute top-4 right-4 bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-semibold px-3 py-1 rounded-full">
-                    Beliebt
-                  </div>
-                )}
-                <div className="relative h-40 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
-                  <Image
-                    src={option.image}
-                    alt={option.title}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 1024px) 100vw, 33vw"
-                  />
-                </div>
-                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
-                  <option.icon className="h-5 w-5" aria-hidden="true" />
-                  <h3 className="heading-4">{option.title}</h3>
-                </div>
-                <div className="mb-[var(--spacing-md)]">
-                  <span className="heading-2 text-[var(--color-foreground)]">
-                    {option.price.includes("Anfrage") ? "" : "€ "}
-                    {option.price}
                             </span>
-                  {option.period && (
+                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-                    <span className="text-muted"> / {option.period}</span>
+                                TV Privat
-                  )}
+                            </h2>
-                </div>
                             <p className="text-muted mb-[var(--spacing-lg)]">
-                  {option.description}
+                                Holen Sie sich über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern
+                                direkt in Ihr Wohnzimmer. Genießen Sie beste Unterhaltung für die ganze Familie.
                             </p>
-                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                            <ul className="stack-sm mb-[var(--spacing-xl)]">
-                  {option.features.map((feature) => (
+                                {tvFeatures.map((feature) => (
-                    <li
+                                    <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
-                      key={feature}
+                                        <Check size={18} className="text-[var(--color-primary)] shrink-0" />
-                      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
+                        </div>
-                  href="/kontakt"
+                        <div className="card text-center">
-                  className={`btn w-full ${
+                            <p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
-                    option.popular ? "btn-primary" : "btn-outline"
+                                TV Privat
-                  }`}
+                            </p>
-                >
+                            <p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
-                  {option.cta}
+                                € 16,47
+                            </p>
+                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                pro Monat inkl. MwSt.
+                            </p>
+                            <Link href="/kontakt" className="btn btn-primary w-full">
+                                Jetzt anfragen
                             </Link>
                         </div>
-            ))}
                     </div>
                 </Container>
             </Section>
 
-      {/* FAQ Section */}
+            {/* TV Business Section */}
             <Section className="bg-[var(--color-muted)]">
-        <Container variant="narrow">
+                <Container>
-          <div className="text-center mb-[var(--spacing-3xl)]">
+                    <div className="max-w-3xl mx-auto text-center">
-            <h2>Häufige Fragen</h2>
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-          </div>
+                            Für Geschäftskunden
-          <div className="space-y-[var(--spacing-lg)]">
+                        </span>
-            <div className="card">
+                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                            TV Business
-                Wie schnell ist die Installation?
+                        </h2>
-              </h3>
+                        <p className="text-muted mb-[var(--spacing-xl)]">
-              <p className="text-muted">
+                            Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
-                In der Regel können wir innerhalb weniger Werktage einen Installationstermin
+                            Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
-                vereinbaren. Unser Techniker kommt zu Ihnen und richtet alles ein.
                         </p>
+                        <Link href="/kontakt" className="btn btn-primary">
+                            Individuelle Lösung anfragen
+                            <ArrowRight size={18} />
+                        </Link>
                     </div>
-            <div className="card">
+                </Container>
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+            </Section>
-                Gibt es versteckte Kosten?
+
-              </h3>
+            {/* Pay TV Section */}
-              <p className="text-muted">
+            <Section>
-                Nein. Der angezeigte Preis ist der Endpreis inklusive Mehrwertsteuer.
+                <Container>
-                Es gibt keine Servicepauschale und keine versteckten Gebühren.
+                    <div className="max-w-3xl mx-auto text-center">
+                        <h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
+                        <p className="text-muted mb-[var(--spacing-xl)]">
+                            Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
+                            Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
+                            Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
                         </p>
-            </div>
+                        <Link href="/kontakt" className="btn btn-outline">
-            <div className="card">
+                            Pay-TV anfragen
-              <h3 className="heading-5 mb-[var(--spacing-sm)]">
+                        </Link>
-                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>
@@ -255,31 +155,31 @@ export default function FernsehenPage() {
             {/* CTA Section */}
             <Section className="bg-[var(--color-primary)]">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto">
+                    <div className="text-center text-[var(--color-background)]">
-            <h2 className="text-[var(--color-background)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-              Bereit für bestes Fernsehen?
+                            Interesse an unserem TV-Angebot?
                         </h2>
-            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Kontaktieren Sie uns für eine persönliche Beratung oder bestellen Sie
+                            Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
-              direkt Ihren TV-Anschluss.
                         </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-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
+                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
                             >
-                Jetzt bestellen
+                                Jetzt beraten lassen
                             </Link>
                             <a
-                href="tel:+4356725000"
+                                href="tel:+43567612345"
-                className="btn btn-lg btn-outline text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-primary)]"
+                                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
                             >
-                +43 5672 5000
+                                <Phone size={18} />
+                                PLACEHOLDER: Telefon
                             </a>
                         </div>
                     </div>
                 </Container>
             </Section>
-    </>
+        </main>
     );
 }

app/impressum/page.tsx

@@ -0,0 +1,110 @@
+import { Metadata } from "next";
+import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
+
+export const metadata: Metadata = {
+    title: "Impressum",
+    description: "Impressum der Telenet Systems GmbH",
+};
+
+export default function ImpressumPage() {
+    return (
+        <main>
+            <Section variant="hero" className="bg-[var(--color-muted)]">
+                <Container variant="narrow">
+                    <h1>Impressum</h1>
+                </Container>
+            </Section>
+
+            <Section>
+                <Container variant="narrow">
+                    <div className="prose max-w-none">
+                        <h2 className="heading-3">Angaben gemäß § 5 ECG</h2>
+
+                        <div className="card mb-[var(--spacing-xl)]">
+                            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
+                                ⚠️ PLATZHALTER – Bitte durch echte Daten ersetzen
+                            </p>
+                            <p className="text-muted text-sm">
+                                Die folgenden Angaben sind Platzhalter und müssen durch die korrekten
+                                Unternehmensdaten ersetzt werden.
+                            </p>
+                        </div>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensbezeichnung</h3>
+                        <p className="text-muted">
+                            Telenet Systems GmbH<br />
+                            PLACEHOLDER: Straße und Hausnummer<br />
+                            6600 Reutte<br />
+                            Österreich
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Kontakt</h3>
+                        <p className="text-muted">
+                            Telefon: PLACEHOLDER: Telefonnummer<br />
+                            E-Mail: PLACEHOLDER: E-Mail-Adresse<br />
+                            Website: https://www.tnr.at
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensgegenstand</h3>
+                        <p className="text-muted">
+                            Telekommunikationsdienstleistungen und IT-Services
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchnummer</h3>
+                        <p className="text-muted">
+                            PLACEHOLDER: FN XXXXXX x
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchgericht</h3>
+                        <p className="text-muted">
+                            PLACEHOLDER: Landesgericht Innsbruck
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">UID-Nummer</h3>
+                        <p className="text-muted">
+                            PLACEHOLDER: ATU XXXXXXXX
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Geschäftsführung</h3>
+                        <p className="text-muted">
+                            PLACEHOLDER: Name des/der Geschäftsführer(s)
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Aufsichtsbehörde</h3>
+                        <p className="text-muted">
+                            Bezirkshauptmannschaft Reutte
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Berufsrecht</h3>
+                        <p className="text-muted">
+                            Gewerbeordnung: www.ris.bka.gv.at
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Streitbeilegung</h3>
+                        <p className="text-muted">
+                            Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit,
+                            die Sie unter{" "}
+                            <a
+                                href="https://ec.europa.eu/consumers/odr"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-[var(--color-primary)]"
+                            >
+                                ec.europa.eu/consumers/odr
+                            </a>{" "}
+                            finden.
+                        </p>
+
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Haftungsausschluss</h3>
+                        <p className="text-muted">
+                            Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die
+                            Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich
+                            deren Betreiber verantwortlich.
+                        </p>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/internet/page.tsx

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

app/layout.tsx

@@ -13,11 +13,11 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: {
-    default: "Telenet Systems GmbH | Telekommunikation & IT-Services in Tirol",
+    default: "TeleNetSystems | Telekom & IT aus Tirol",
-    template: "%s | Telenet Systems GmbH",
+    template: "%s | TeleNetSystems",
   },
   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.",
+    "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
   keywords: [
     "Telekommunikation Tirol",
     "IT-Dienstleister Reutte",
@@ -26,11 +26,7 @@ export const metadata: Metadata = {
     "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,
@@ -38,11 +34,10 @@ export const metadata: Metadata = {
   openGraph: {
     type: "website",
     locale: "de_AT",
-    url: "https://www.tnr.at",
+    siteName: "TeleNetSystems",
-    siteName: "Telenet Systems GmbH",
+    title: "TeleNetSystems | Telekom & IT aus Tirol",
-    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.",
+      "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services.",
   },
 };
 
@@ -59,9 +54,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="de-AT" className={inter.variable}>
-      <body className="flex min-h-screen flex-col">
+      <body>
         <Header />
-        <main className="flex-1">{children}</main>
+        {children}
         <Footer />
       </body>
     </html>

app/leistungen/page.tsx

@@ -1,273 +1,213 @@
-import type { Metadata } from "next";
+import { 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 { Container } from "@/components/layout/Container";
 import {
+    Tv,
+    Wifi,
+    Phone,
     Server,
-  Network,
     Wrench,
-  Monitor,
+    MonitorSmartphone,
     Cable,
     Shield,
-  Headphones,
+    ArrowRight
-  Building2,
-  Users,
-  CheckCircle,
 } from "lucide-react";
 
 export const metadata: Metadata = {
     title: "Leistungen",
     description:
-    "Umfassende Telekom- und IT-Services im Bezirk Reutte. Von Netzwerkplanung über IT-Installation bis Fernwartung – alles aus einer Hand.",
+        "Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
-  openGraph: {
-    title: "Leistungen | Telenet Systems GmbH",
-    description:
-      "Umfassende Telekom- und IT-Services im Bezirk Reutte. Netzwerkplanung, IT-Installation, Fernwartung.",
-  },
 };
 
-const services = [
+const mainServices = [
     {
-    icon: Network,
+        title: "Fernsehen",
-    title: "Netzwerkplanung",
+        description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
-    description:
+        icon: Tv,
-      "Professionelle Planung und Konzeption von Netzwerkinfrastrukturen für Unternehmen jeder Größe.",
+        href: "/fernsehen",
     },
     {
-    icon: Server,
+        title: "Internet",
-    title: "Serverplanung",
+        description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
-    description:
+        icon: Wifi,
-      "Beratung und Planung von Serverlösungen – von der Hardware bis zur Software-Konfiguration.",
+        href: "/internet",
     },
     {
-    icon: Wrench,
+        title: "Telefonie",
-    title: "IT-Installation",
+        description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
-    description:
+        icon: Phone,
-      "Fachgerechte Installation von IT-Komponenten, Netzwerken und Kommunikationssystemen.",
+        href: "/telefonie",
-  },
-  {
-    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 = [
+const itServices = [
     {
-    icon: Users,
+        title: "Netzwerk- & Serverplanung",
-    title: "Privatkunden",
+        description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
-    description:
+        icon: Server,
-      "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: "IT-Installation",
-    title: "Geschäftskunden",
+        description: "Fachgerechte Installation von Hard- und Software vor Ort.",
-    description:
+        icon: MonitorSmartphone,
-      "Professionelle IT- und Kommunikationslösungen für Ihr Unternehmen. Maßgeschneidert und zuverlässig.",
+    },
-    features: [
+    {
-      "Business-Internet & Telefonie",
+        title: "Reparatur & Wartung",
-      "Netzwerk- & Serverplanung",
+        description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
-      "IT-Installation & Support",
+        icon: Wrench,
-      "Fernwartung & Monitoring",
+    },
-    ],
+    {
-    cta: "Kontakt aufnehmen",
+        title: "Fernwartung",
-    href: "/kontakt",
+        description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
-    image: "/images/misc/firmenkunden-96736712-5fa99704.jpg",
+        icon: Shield,
+    },
+    {
+        title: "Glasfaser-Planung & -Ausbau",
+        description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
+        icon: Cable,
     },
 ];
 
 export default function LeistungenPage() {
     return (
-    <>
+        <main>
             {/* Hero Section */}
-      <Section variant="hero" className="relative overflow-hidden bg-[var(--color-foreground)]">
+            <Section variant="hero" className="bg-[var(--color-muted)]">
-        <div className="absolute inset-0 z-0">
+                <Container>
-          <Image
-            src="/images/services/tnr-leistungen-055053d5.jpg"
-            alt="Telenet Systems Mitarbeiter"
-            fill
-            priority
-            className="object-cover opacity-40"
-            sizes="100vw"
-          />
-        </div>
-        <Container className="relative z-10">
                     <div className="max-w-3xl">
-            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
+                        <h1 className="mb-[var(--spacing-lg)]">
-              Unser Leistungsangebot
+                            Alle Leistungen
-            </p>
+                            <span className="text-[var(--color-primary)]"> im Überblick</span>
-            <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-2xl)]">
-              Von TV und Internet über Telefonie bis zu professionellen IT-Dienstleistungen –
+                            Von Fernsehen über Internet bis zu IT-Services –
-              wir bieten alles, was Sie für moderne Kommunikation benötigen.
+                            wir bieten Ihnen umfassende Lösungen aus einer Hand.
                         </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
                         <Link href="/kontakt" className="btn btn-primary btn-lg">
                             Jetzt beraten lassen
                         </Link>
-              <a href="#services" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
-                Leistungen entdecken
-              </a>
-            </div>
                     </div>
                 </Container>
             </Section>
 
-      {/* Zielgruppen */}
+            {/* Telekom Services */}
             <Section>
                 <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <div className="text-center mb-[var(--spacing-3xl)]">
-            <h2>Für Privat- und Geschäftskunden</h2>
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-            <p className="lead mt-[var(--spacing-md)]">
+                            Telekommunikation
-              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
+                        </span>
-            </p>
+                        <h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
                     </div>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-xl)]">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
-            {targetGroups.map((group) => (
+                        {mainServices.map((service) => (
-              <div key={group.title} className="card overflow-hidden">
+                            <Link
-                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
+                                key={service.title}
-                  <Image
+                                href={service.href}
-                    src={group.image}
+                                className="card group hover:shadow-lg transition-shadow hover:no-underline"
-                    alt={group.title}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 1024px) 100vw, 50vw"
-                  />
-                </div>
-                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
-                  <group.icon className="h-5 w-5" aria-hidden="true" />
-                  <h3 className="heading-3">{group.title}</h3>
-                </div>
-                <p className="text-muted mb-[var(--spacing-lg)]">{group.description}</p>
-                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
-                  {group.features.map((feature) => (
-                    <li
-                      key={feature}
-                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
                             >
-                      <CheckCircle
+                                <div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)] group-hover:bg-[var(--color-primary)] transition-colors">
-                        className="h-4 w-4 text-[var(--color-success)] flex-shrink-0"
+                                    <service.icon
-                        aria-hidden="true"
+                                        size={24}
+                                        className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
                                     />
-                      <span>{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-                <Link href={group.href} className="btn btn-primary">
-                  {group.cta}
-                </Link>
                                 </div>
+                                <h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
+                                    {service.title}
+                                </h3>
+                                <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">
+                                    Mehr erfahren
+                                    <ArrowRight size={16} />
+                                </span>
+                            </Link>
                         ))}
                     </div>
                 </Container>
             </Section>
 
-      {/* IT-Services */}
+            {/* IT Services */}
-      <Section id="services" className="bg-[var(--color-muted)]">
+            <Section className="bg-[var(--color-muted)]">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
+                    <div className="text-center mb-[var(--spacing-3xl)]">
-            <h2>IT-Services für Unternehmen</h2>
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-            <p className="lead mt-[var(--spacing-md)]">
+                            IT-Dienstleistungen
-              Professionelle IT-Dienstleistungen von der Planung bis zur Wartung.
+                        </span>
-              Alles aus einer Hand, mit persönlichem Ansprechpartner vor Ort.
+                        <h2 className="mt-[var(--spacing-sm)]">IT-Services & Support</h2>
+                        <p className="lead max-w-2xl mx-auto mt-[var(--spacing-md)]">
+                            Professionelle IT-Lösungen für Unternehmen und Privatkunden.
                         </p>
                     </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-lg)]">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-lg)]">
-            {services.map((service) => (
+                        {itServices.map((service) => (
-              <div key={service.title} className="card text-center">
+                            <div key={service.title} className="card">
-                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] mb-[var(--spacing-md)]">
+                                <div className="w-10 h-10 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-md)]">
-                  <service.icon className="h-6 w-6" aria-hidden="true" />
+                                    <service.icon size={20} className="text-[var(--color-primary)]" />
                                 </div>
                                 <h3 className="heading-5 mb-[var(--spacing-sm)]">{service.title}</h3>
                                 <p className="text-sm text-muted">{service.description}</p>
                             </div>
                         ))}
                     </div>
+                    <div className="text-center mt-[var(--spacing-2xl)]">
+                        <Link href="/kontakt" className="btn btn-primary">
+                            IT-Beratung anfragen
+                            <ArrowRight size={18} />
+                        </Link>
+                    </div>
                 </Container>
             </Section>
 
-      {/* Glasfaser Section */}
+            {/* Business Section */}
             <Section>
                 <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <div className="grid 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)]">
+                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-                <Cable className="h-5 w-5" aria-hidden="true" />
+                                Für Unternehmen
-                <span className="font-medium">Glasfaser</span>
+                            </span>
-              </div>
+                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-              <h2>Zukunftssichere Glasfaser-Infrastruktur</h2>
+                                Maßgeschneiderte Lösungen
-              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                            </h2>
-                Wir planen und bauen Glasfasernetze für Gemeinden und Unternehmen.
+                            <p className="text-muted mb-[var(--spacing-lg)]">
-                Profitieren Sie von unserer langjährigen Erfahrung.
+                                Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
+                                Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
+                                von der Telekommunikation bis zur kompletten IT-Infrastruktur.
                             </p>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
+                            <ul className="stack-sm mb-[var(--spacing-xl)]">
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">1</span>
-                  <span>Glasfaser-Planung & Beratung</span>
+                                    <span>Bedarfsanalyse vor Ort</span>
                                 </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">2</span>
-                  <span>Professioneller Netzausbau</span>
+                                    <span>Individuelles Angebot</span>
                                 </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">3</span>
-                  <span>Behördliche Unterstützung</span>
+                                    <span>Professionelle Umsetzung</span>
                                 </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
+                                    <span className="w-6 h-6 rounded-full bg-[var(--color-primary)] text-[var(--color-background)] flex items-center justify-center text-sm font-medium shrink-0">4</span>
-                  <span>Qualitätssicherung</span>
+                                    <span>Laufender Support</span>
                                 </li>
                             </ul>
                             <Link href="/kontakt" className="btn btn-primary">
-                Projekt anfragen
+                                Beratungstermin vereinbaren
                             </Link>
                         </div>
+                        <div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
+                            <p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                                50
+                            </p>
+                            <p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
+                            <p className="text-muted">
+                                Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
+                            </p>
+                        </div>
                     </div>
                 </Container>
             </Section>
@@ -275,30 +215,23 @@ export default function LeistungenPage() {
             {/* CTA Section */}
             <Section className="bg-[var(--color-primary)]">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto">
+                    <div className="text-center text-[var(--color-background)]">
-            <h2 className="text-[var(--color-background)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
                             Haben Sie Fragen zu unseren Leistungen?
                         </h2>
-            <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Wir beraten Sie gerne persönlich und finden die optimale Lösung für Ihre Anforderungen.
+                            Kontaktieren Sie uns für eine unverbindliche Beratung.
+                            Wir finden gemeinsam die passende Lösung.
                         </p>
-            <div className="flex flex-wrap justify-center gap-[var(--spacing-md)]">
                         <Link
                             href="/kontakt"
-                className="btn btn-lg bg-[var(--color-background)] text-[var(--color-foreground)] hover:opacity-90"
+                            className="btn bg-[var(--color-background)] text-[var(--color-primary)] 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,224 @@
-import Image from "next/image";
+import { Metadata } from "next";
 import Link from "next/link";
-import { Container } from "@/components/layout/Container";
+import Image from "next/image";
 import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
 import {
   Tv,
   Wifi,
   Phone,
+  MapPin,
+  Clock,
   Users,
   Shield,
-  Clock,
+  Award,
-  MapPin,
+  ArrowRight
-  ArrowRight,
-  CheckCircle,
 } from "lucide-react";
 
+export const metadata: Metadata = {
+  title: "TeleNetSystems | Telekom & IT aus Tirol",
+  description:
+    "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
+};
+
 const services = [
   {
-    icon: Tv,
     title: "Fernsehen",
     description:
-      "Über 200 Programme inkl. 40 HDTV-Sendern. Erstklassige Unterhaltung für Ihr Zuhause – ab 16,47 € im Monat.",
+      "Über 200 Programme inkl. 40 HDTV-Sender – für Privat- und Geschäftskunden.",
+    icon: Tv,
     href: "/fernsehen",
-    image: "/images/misc/tv-privat-76f60c7a-88eafcfb.jpg",
+    price: "ab € 16,47/Monat",
   },
   {
-    icon: Wifi,
     title: "Internet",
     description:
-      "Highspeed-Internet über Kabel und Glasfaser. Flexible Tarife für Privat- und Geschäftskunden – ab 14,50 € im Monat.",
+      "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert.",
+    icon: Wifi,
     href: "/internet",
-    image: "/images/misc/internet-7b594a2d-793cefee.jpg",
+    price: "ab € 14,50/Monat",
   },
   {
-    icon: Phone,
     title: "Telefonie",
     description:
-      "Günstige Telefonie-Tarife fürs Festnetz. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
+      "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar.",
+    icon: Phone,
     href: "/telefonie",
-    image: "/images/misc/telefon-fa5e8c21-271d2135.jpg",
+    price: "ab € 0,00/Monat",
   },
 ];
 
 const usps = [
   {
     icon: MapPin,
-    title: "Regionale Nähe",
+    title: "Regional & Persönlich",
     description:
-      "Persönlicher Service direkt vor Ort im Bezirk Reutte. Bei uns kennt man sich noch persönlich.",
+      "Wir sind vor Ort in Reutte. Bei Fragen oder Problemen erreichen Sie echte Ansprechpartner aus der Region.",
   },
   {
     icon: Clock,
-    title: "Seit 1976",
+    title: "Schnelle Hilfe",
     description:
-      "Fast 50 Jahre Erfahrung in der Telekommunikation. Verlässlichkeit, der Sie vertrauen können.",
+      "Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
-  },
-  {
-    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",
+    title: "Seit 1976",
     description:
-      "Probleme lösen wir direkt – telefonisch oder vor Ort. Kurze Wege, schnelle Hilfe.",
+      "Fast 50 Jahre Erfahrung in Telekommunikation und IT. Wir kennen die Technik – und die Region.",
+  },
+  {
+    icon: Shield,
+    title: "Zuverlässig",
+    description:
+      "Stabile Netze, bewährte Technik, dauerhafte Lösungen. Darauf können Sie sich verlassen.",
   },
 ];
 
-const trustItems = [
+const trustElements = [
-  "Keine versteckten Kosten",
+  { icon: Award, text: "Zertifizierter Partner" },
-  "Unlimitiertes Datenvolumen",
+  { icon: Users, text: "Über 5.000 zufriedene Kunden" },
-  "Persönlicher Ansprechpartner",
+  { icon: Clock, text: "Fast 50 Jahre Erfahrung" },
-  "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)]">
-        <div className="absolute inset-0 z-0">
+        <Container>
-          <Image
-            src="/images/misc/firma1-8a863d8b.jpg"
-            alt="Telenet Systems Firmengebäude in Reutte"
-            fill
-            priority
-            className="object-cover opacity-40"
-            sizes="100vw"
-          />
-        </div>
-        <Container className="relative z-10">
           <div className="max-w-3xl">
             <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
-              Ihr regionaler Partner in Tirol
+              Ihr Telekom- und IT-Partner in Tirol
             </p>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+            <h1 className="mb-[var(--spacing-lg)]">
-              Telekommunikation und IT-Services aus einer Hand
+              Zuverlässige Technik.
+              <br />
+              <span className="text-[var(--color-primary)]">Persönlicher Service.</span>
             </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+            <p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
-              Seit 1976 versorgen wir den Bezirk Reutte mit zuverlässigem Fernsehen,
+              Fernsehen, Internet und Telefonie aus einer Hand –
-              schnellem Internet und flexibler Telefonie. Persönliche Beratung,
+              direkt aus Reutte für den Bezirk und die Region.
-              ehrlicher Service – ohne komplizierte Prozesse.
+              Mit persönlicher Beratung und schnellem Support.
             </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
+            <div className="flex flex-col sm:flex-row gap-[var(--spacing-md)]">
               <Link href="/kontakt" className="btn btn-primary btn-lg">
                 Jetzt beraten lassen
               </Link>
-              <Link href="/leistungen" className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]">
+              <Link href="/leistungen" className="btn btn-outline btn-lg">
                 Unsere Leistungen
+                <ArrowRight size={18} />
               </Link>
             </div>
           </div>
         </Container>
       </Section>
 
+      {/* Services Section */}
+      <Section id="leistungen">
+        <Container>
+          <div className="text-center mb-[var(--spacing-3xl)]">
+            <h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
+            <p className="lead max-w-2xl mx-auto">
+              Von Fernsehen über Internet bis zur Telefonie –
+              wir bieten Ihnen alles aus einer Hand.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
+            {services.map((service) => (
+              <article key={service.title} className="card group">
+                <div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
+                  <service.icon size={24} className="text-[var(--color-primary)]" />
+                </div>
+                <h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
+                <p className="text-muted mb-[var(--spacing-md)]">
+                  {service.description}
+                </p>
+                <p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
+                  {service.price}
+                </p>
+                <Link
+                  href={service.href}
+                  className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
+                >
+                  Mehr erfahren
+                  <ArrowRight size={16} />
+                </Link>
+              </article>
+            ))}
+          </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)]">
+          <div className="text-center mb-[var(--spacing-3xl)]">
-            <h2>Warum Telenet Systems?</h2>
+            <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
-            <p className="lead mt-[var(--spacing-md)]">
+            <p className="lead max-w-2xl mx-auto">
-              Als regionaler Anbieter verbinden wir modernste Technik mit persönlichem Service.
+              Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
             </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)]">
+                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
-                  <usp.icon className="h-6 w-6" aria-hidden="true" />
+                  <usp.icon size={24} className="text-[var(--color-background)]" />
                 </div>
                 <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
-                <p className="text-muted">{usp.description}</p>
+                <p className="text-sm text-muted">{usp.description}</p>
               </div>
             ))}
           </div>
         </Container>
       </Section>
 
-      {/* Services Section */}
-      <Section>
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <h2>Unsere Leistungen für Sie</h2>
-            <p className="lead mt-[var(--spacing-md)]">
-              Fernsehen, Internet und Telefonie – alles aus einer Hand, ohne Servicepauschale.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--spacing-xl)]">
-            {services.map((service) => (
-              <Link
-                key={service.title}
-                href={service.href}
-                className="card group overflow-hidden hover:shadow-[var(--shadow-lg)] transition-shadow"
-              >
-                <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)] overflow-hidden">
-                  <Image
-                    src={service.image}
-                    alt={service.title}
-                    fill
-                    className="object-cover group-hover:scale-105 transition-transform duration-300"
-                    sizes="(max-width: 1024px) 100vw, 33vw"
-                  />
-                </div>
-                <div className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-sm)]">
-                  <service.icon className="h-5 w-5" aria-hidden="true" />
-                  <h3 className="heading-4">{service.title}</h3>
-                </div>
-                <p className="text-muted mb-[var(--spacing-md)]">{service.description}</p>
-                <span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium group-hover:gap-[var(--spacing-sm)] transition-all">
-                  Mehr erfahren
-                  <ArrowRight className="h-4 w-4" aria-hidden="true" />
-                </span>
-              </Link>
-            ))}
-          </div>
-        </Container>
-      </Section>
-
       {/* Trust Section */}
-      <Section className="bg-[var(--color-primary)]">
+      <Section variant="sm">
         <Container>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+          <div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
-            <div>
+            {trustElements.map((item) => (
-              <h2 className="text-[var(--color-background)]">
+              <div
-                Transparent und fair – ohne versteckte Kosten
+                key={item.text}
-              </h2>
+                className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
-              <p className="text-white/90 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
-                Bei uns wissen Sie immer, woran Sie sind. Keine Überraschungen auf der Rechnung,
-                keine komplizierte Tarifstruktur. Einfach, ehrlich, regional.
-              </p>
-              <ul className="space-y-[var(--spacing-sm)]">
-                {trustItems.map((item) => (
-                  <li
-                    key={item}
-                    className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-background)]"
               >
-                    <CheckCircle className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
+                <item.icon size={20} className="text-[var(--color-primary)]" />
-                    <span>{item}</span>
+                <span className="text-sm font-medium">{item.text}</span>
-                  </li>
+              </div>
             ))}
-              </ul>
-            </div>
-            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
-              <Image
-                src="/images/services/tnr-leistungen-055053d5.jpg"
-                alt="Telenet Systems Mitarbeiter bei der Arbeit"
-                fill
-                className="object-cover"
-                sizes="(max-width: 1024px) 100vw, 50vw"
-              />
-            </div>
-          </div>
-        </Container>
-      </Section>
-
-      {/* For Whom Section */}
-      <Section>
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <h2>Für Privat- und Geschäftskunden</h2>
-            <p className="lead mt-[var(--spacing-md)]">
-              Ob Zuhause oder im Unternehmen – wir haben die passende Lösung für Sie.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-xl)]">
-            {/* Privatkunden */}
-            <div className="card relative overflow-hidden">
-              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
-                <Image
-                  src="/images/misc/privatkunden-a54cf4d8-0018c3fa.jpg"
-                  alt="Familie vor dem Fernseher"
-                  fill
-                  className="object-cover"
-                  sizes="(max-width: 768px) 100vw, 50vw"
-                />
-              </div>
-              <h3 className="heading-3 mb-[var(--spacing-sm)]">Privatkunden</h3>
-              <p className="text-muted mb-[var(--spacing-lg)]">
-                Zuverlässiges Fernsehen, schnelles Internet und günstige Telefonie für Ihr Zuhause.
-                Flexible Tarife ohne Servicepauschale und mit persönlicher Betreuung vor Ort.
-              </p>
-              <Link href="/internet" className="btn btn-primary">
-                Tarife für Privatkunden
-              </Link>
-            </div>
-
-            {/* Geschäftskunden */}
-            <div className="card relative overflow-hidden">
-              <div className="relative h-48 -mx-[var(--spacing-xl)] -mt-[var(--spacing-xl)] mb-[var(--spacing-lg)]">
-                <Image
-                  src="/images/misc/firmenkunden-96736712-5fa99704.jpg"
-                  alt="Geschäftsmann im Büro"
-                  fill
-                  className="object-cover"
-                  sizes="(max-width: 768px) 100vw, 50vw"
-                />
-              </div>
-              <h3 className="heading-3 mb-[var(--spacing-sm)]">Geschäftskunden</h3>
-              <p className="text-muted mb-[var(--spacing-lg)]">
-                Maßgeschneiderte Business-Lösungen für Kommunikation und IT.
-                Von der Netzwerkplanung bis zur Fernwartung – alles aus einer Hand.
-              </p>
-              <Link href="/leistungen" className="btn btn-primary">
-                Business-Lösungen
-              </Link>
-            </div>
           </div>
         </Container>
       </Section>
 
       {/* CTA Section */}
-      <Section className="bg-[var(--color-foreground)]">
+      <Section className="bg-[var(--color-primary)]">
         <Container>
-          <div className="text-center max-w-2xl mx-auto">
+          <div className="text-center text-[var(--color-background)]">
-            <h2 className="text-[var(--color-background)]">
+            <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-              Haben Sie Fragen? Wir beraten Sie gerne.
+              Bereit für zuverlässige Technik?
             </h2>
-            <p className="text-gray-300 text-lg mt-[var(--spacing-md)] mb-[var(--spacing-xl)]">
+            <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Unser Team in Reutte steht Ihnen persönlich zur Verfügung.
+              Kontaktieren Sie uns für eine unverbindliche Beratung.
-              Rufen Sie uns an oder senden Sie uns eine Nachricht.
+              Wir finden die passende Lösung für Sie.
             </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">
+              <Link
-                Kontakt aufnehmen
+                href="/kontakt"
+                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+              >
+                Jetzt beraten lassen
               </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)]">
+              <a
-                +43 5672 5000
+                href="tel:+43567612345"
+                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
+              >
+                <Phone size={18} />
+                PLACEHOLDER: Telefon
               </a>
             </div>
           </div>
         </Container>
       </Section>
-    </>
+    </main>
   );
 }

app/telefonie/page.tsx

@@ -1,196 +1,100 @@
-import type { Metadata } from "next";
+import { 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";
+import { Container } from "@/components/layout/Container";
+import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
 
 export const metadata: Metadata = {
     title: "Telefonie",
     description:
-    "Günstige Telefonie-Tarife fürs Festnetz im Bezirk Reutte. Für Privat- und Geschäftskunden – ab 0 € mit Telenet-Internet.",
+        "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
-  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",
+        beschreibung: "Ohne Internet",
-    price: "5,00",
+        preis: "€ 5,00",
-    minutenpreis: "2,4",
+        kosten: "Festnetz AT: ab 2,4 Cent/Min.",
-    description: "Festnetz-Telefonie ohne Internet-Anschluss von Telenet.",
+        features: ["Nur Telefonie", "Günstige Minutenpreise"],
-    features: [
-      "Festnetzanschluss",
-      "Günstiger Minutenpreis",
-      "Keine Grundgebühr bei Internet",
-    ],
-    popular: false,
     },
     {
         name: "telenet.zero",
-    subtitle: "mit Internet von Telenet",
+        beschreibung: "Mit Internet von Telenet",
-    price: "0,00",
+        preis: "€ 0,00",
-    minutenpreis: "2,4",
+        kosten: "Festnetz AT: ab 2,4 Cent/Min.",
-    description: "Festnetz-Telefonie ohne Grundgebühr für Telenet-Internet-Kunden.",
+        features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
-    features: [
+        highlight: true,
-      "Keine monatliche Grundgebühr",
-      "Günstiger Minutenpreis",
-      "Perfekt für Telenet-Kunden",
-    ],
-    popular: true,
     },
     {
         name: "telenet.business",
-    subtitle: "für Unternehmen",
+        beschreibung: "Für Geschäftskunden",
-    price: "8,90",
+        preis: "€ 8,90",
-    minutenpreis: "3,24",
+        kosten: "Festnetz AT: ab 3,24 Cent/Min.",
-    description: "Professionelle Telefonie-Lösung für Geschäftskunden.",
+        features: ["Business-Funktionen", "Professioneller Support"],
-    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="relative overflow-hidden bg-[var(--color-foreground)]">
+            <Section variant="hero" className="bg-[var(--color-muted)]">
-        <div className="absolute inset-0 z-0">
+                <Container>
-          <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)]">
+                        <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
-              <Phone className="h-5 w-5" aria-hidden="true" />
+                            <PhoneIcon size={32} className="text-[var(--color-background)]" />
-              <span className="font-medium">Telefonie</span>
                         </div>
-            <h1 className="text-[var(--color-background)] mb-[var(--spacing-lg)]">
+                        <h1 className="mb-[var(--spacing-lg)]">
-              Flexible Telefonie-Tarife für jeden Bedarf
+                            Telefonie
+                            <span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
                         </h1>
-            <p className="lead text-gray-300 mb-[var(--spacing-xl)]">
+                        <p className="lead mb-[var(--spacing-2xl)]">
-              Günstig ins österreichische Festnetz telefonieren.
+                            Flexible Telefonie-Tarife für Ihr Festnetz.
-              Mit Telenet-Internet sogar ohne monatliche Grundgebühr.
+                            Mit oder ohne Internet nutzbar – Sie haben die Wahl.
                         </p>
-            <div className="flex flex-wrap gap-[var(--spacing-md)]">
                         <Link href="/kontakt" className="btn btn-primary btn-lg">
-                Jetzt bestellen
+                            Jetzt beraten lassen
                         </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 */}
+            {/* Tarife Section */}
-      <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="text-center mb-[var(--spacing-3xl)]">
-            {benefits.map((benefit) => (
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-              <div
+                            Kabel-Telefonie-Tarife
-                key={benefit}
+                        </span>
-                className="flex items-center gap-[var(--spacing-sm)] text-sm font-medium"
+                        <h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
-              >
-                <CheckCircle
-                  className="h-5 w-5 text-[var(--color-success)]"
-                  aria-hidden="true"
-                />
-                <span>{benefit}</span>
                     </div>
-            ))}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
-          </div>
-        </Container>
-      </Section>
-
-      {/* Tarife */}
-      <Section id="tarife">
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <h2>Unsere Telefonie-Tarife</h2>
-            <p className="lead mt-[var(--spacing-md)]">
-              Einfache Preisstruktur ohne versteckte Kosten.
-              Wählen Sie den passenden Tarif für Ihre Bedürfnisse.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
                         {telefonieTarife.map((tarif, index) => (
                             <div
                                 key={`${tarif.name}-${index}`}
-                className={`card relative ${
+                                className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
-                  tarif.popular
-                    ? "border-[var(--color-primary)] border-2"
-                    : ""
-                }`}
                             >
-                {tarif.popular && (
+                                {tarif.highlight && (
-                  <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">
+                                    <span className="inline-block bg-[var(--color-primary)] text-[var(--color-background)] text-xs font-medium px-[var(--spacing-sm)] py-[var(--spacing-xs)] rounded-full mb-[var(--spacing-md)]">
                                         Empfohlen
-                  </div>
+                                    </span>
                                 )}
-                <div className="text-center">
+                                <h3 className="heading-5 mb-[var(--spacing-xs)]">{tarif.name}</h3>
-                  <h3 className="heading-4 text-[var(--color-primary)]">
+                                <p className="text-sm text-muted mb-[var(--spacing-md)]">{tarif.beschreibung}</p>
-                    {tarif.name}
+                                <p className="text-4xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
-                  </h3>
+                                <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
-                  <p className="text-sm text-muted mb-[var(--spacing-md)]">
+                                <p className="text-sm mb-[var(--spacing-lg)]">{tarif.kosten}</p>
-                    {tarif.subtitle}
+                                <ul className="stack-sm text-left mb-[var(--spacing-lg)]">
-                  </p>
-                  <div className="mb-[var(--spacing-md)]">
-                    <span className="heading-1">€ {tarif.price}</span>
-                    <span className="text-muted"> / Monat</span>
-                  </div>
-                  <p className="text-sm text-muted mb-[var(--spacing-sm)]">
-                    Festnetz AT: ab {tarif.minutenpreis} Cent / Minute
-                  </p>
-                </div>
-                <hr className="border-[var(--color-border)] my-[var(--spacing-lg)]" />
-                <p className="text-muted mb-[var(--spacing-lg)]">
-                  {tarif.description}
-                </p>
-                <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
                                     {tarif.features.map((feature) => (
-                    <li
+                                        <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
-                      key={feature}
+                                            <Check size={16} className="text-[var(--color-primary)] shrink-0" />
-                      className="flex items-center gap-[var(--spacing-sm)] text-sm"
+                                            <span className="text-sm">{feature}</span>
-                    >
-                      <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-outline w-full">
-                  href="/kontakt"
+                                    Anfragen
-                  className={`btn w-full ${
-                    tarif.popular ? "btn-primary" : "btn-outline"
-                  }`}
-                >
-                  Jetzt bestellen
                                 </Link>
                             </div>
                         ))}
@@ -198,105 +102,66 @@ export default function TelefoniePage() {
                 </Container>
             </Section>
 
-      {/* Kombinieren Section */}
+            {/* Info Section */}
             <Section className="bg-[var(--color-muted)]">
-        <Container>
+                <Container variant="narrow">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <div className="text-center">
-            <div>
+                        <h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
-              <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
+                        <div className="stack-lg text-left">
-                <Users className="h-5 w-5" aria-hidden="true" />
+                            <div className="card">
-                <span className="font-medium">Tipp</span>
+                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
-              </div>
+                                <p className="text-muted">
-              <h2>Telefonie + Internet kombinieren</h2>
+                                    Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
-              <p className="lead mt-[var(--spacing-md)] mb-[var(--spacing-lg)]">
+                                    kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
-                Als Telenet-Internet-Kunde telefonieren Sie ohne monatliche Grundgebühr.
-                Sie zahlen nur für die tatsächlich geführten Gespräche.
-              </p>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
-                  <span>0 € Grundgebühr mit Telenet-Internet</span>
-                </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
-                  <span>Einfache Abrechnung über eine Rechnung</span>
-                </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  <CheckCircle className="h-5 w-5 text-[var(--color-success)] flex-shrink-0" aria-hidden="true" />
-                  <span>Ein Ansprechpartner für alles</span>
-                </li>
-              </ul>
-              <Link href="/internet" className="btn btn-primary">
-                Internet-Tarife ansehen
-              </Link>
-            </div>
-            <div className="relative h-80 lg:h-96 rounded-[var(--radius-lg)] overflow-hidden">
-              <Image
-                src="/images/misc/telefon-fa5e8c21-271d2135.jpg"
-                alt="Person telefoniert"
-                fill
-                className="object-cover"
-                sizes="(max-width: 1024px) 100vw, 50vw"
-              />
-            </div>
-          </div>
-        </Container>
-      </Section>
-
-      {/* Business Section */}
-      <Section>
-        <Container>
-          <div className="text-center max-w-2xl mx-auto mb-[var(--spacing-3xl)]">
-            <div className="inline-flex items-center gap-[var(--spacing-sm)] text-[var(--color-primary)] mb-[var(--spacing-md)]">
-              <Building2 className="h-5 w-5" aria-hidden="true" />
-              <span className="font-medium">Business</span>
-            </div>
-            <h2>Telefonie für Unternehmen</h2>
-            <p className="lead mt-[var(--spacing-md)]">
-              Professionelle Telefonielösungen für Ihr Unternehmen.
-              Wir beraten Sie gerne zu den verschiedenen Möglichkeiten.
                                 </p>
                             </div>
-          <div className="card max-w-2xl mx-auto text-center">
+                            <div className="card">
-            <h3 className="heading-4 mb-[var(--spacing-md)]">
+                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
-              Individuelle Business-Lösungen
+                                <p className="text-muted">
-            </h3>
+                                    Sie möchten nur Telefonie ohne Internet? Kein Problem.
-            <p className="text-muted mb-[var(--spacing-lg)]">
+                                    Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
-              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">
+                            </div>
-              Beratung anfragen
+                            <div className="card">
-            </Link>
+                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Business-Telefonie</h3>
+                                <p className="text-muted">
+                                    Für Geschäftskunden bieten wir professionelle Telefonie-Lösungen mit erweiterten Funktionen
+                                    und dediziertem Support.
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </Container>
             </Section>
 
             {/* CTA Section */}
-      <Section className="bg-[var(--color-foreground)]">
+            <Section className="bg-[var(--color-primary)]">
                 <Container>
-          <div className="text-center max-w-2xl mx-auto">
+                    <div className="text-center text-[var(--color-background)]">
-            <h2 className="text-[var(--color-background)]">
+                        <h2 className="mb-[var(--spacing-md)] 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)]">
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Unser Team berät Sie gerne persönlich und findet den passenden Tarif für Sie.
+                            Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
                         </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">
+                            <Link
-                Kontakt aufnehmen
+                                href="/kontakt"
+                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+                            >
+                                Jetzt beraten lassen
                             </Link>
                             <a
-                href="tel:+4356725000"
+                                href="tel:+43567612345"
-                className="btn btn-outline btn-lg text-[var(--color-background)] border-[var(--color-background)] hover:bg-[var(--color-background)] hover:text-[var(--color-foreground)]"
+                                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
                             >
-                +43 5672 5000
+                                <PhoneIcon size={18} />
+                                PLACEHOLDER: Telefon
                             </a>
                         </div>
                     </div>
                 </Container>
             </Section>
-    </>
+        </main>
     );
 }

app/ueber-uns/page.tsx

@@ -0,0 +1,203 @@
+import { Metadata } from "next";
+import Link from "next/link";
+import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
+import { MapPin, Clock, Users, Heart, Shield, ArrowRight } from "lucide-react";
+
+export const metadata: Metadata = {
+    title: "Über uns",
+    description:
+        "Lernen Sie TeleNetSystems kennen – Ihr regionaler Telekom- und IT-Partner in Tirol seit 1976.",
+};
+
+const values = [
+    {
+        icon: Heart,
+        title: "Persönlich",
+        description: "Wir sind kein anonymer Konzern. Bei uns bekommen Sie echte Ansprechpartner.",
+    },
+    {
+        icon: MapPin,
+        title: "Regional",
+        description: "In Reutte verwurzelt, für die Region da. Wir kennen Land und Leute.",
+    },
+    {
+        icon: Shield,
+        title: "Zuverlässig",
+        description: "Stabile Technik, bewährte Lösungen, transparente Kommunikation.",
+    },
+    {
+        icon: Clock,
+        title: "Schnell",
+        description: "Bei Problemen sind wir schnell zur Stelle – ohne lange Warteschleifen.",
+    },
+];
+
+const milestones = [
+    { year: "1976", text: "Gründung als regionaler Telekom-Anbieter" },
+    { year: "1990er", text: "Ausbau des Kabelnetzes in Reutte und Umgebung" },
+    { year: "2000er", text: "Einführung von Highspeed-Internet" },
+    { year: "2010er", text: "Erweiterung um IT-Dienstleistungen" },
+    { year: "Heute", text: "Ihr verlässlicher Partner für Telekom & IT" },
+];
+
+export default function UeberUnsPage() {
+    return (
+        <main>
+            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)]">
+                <Container>
+                    <div className="max-w-3xl">
+                        <h1 className="mb-[var(--spacing-lg)]">
+                            Wir sind
+                            <span className="text-[var(--color-primary)]"> TeleNetSystems</span>
+                        </h1>
+                        <p className="lead mb-[var(--spacing-2xl)]">
+                            Ihr regionaler Telekom- und IT-Partner in Tirol.
+                            Seit 1976 verbinden wir Menschen – mit zuverlässiger Technik, ehrlicher Beratung und persönlichem Service.
+                        </p>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Story Section */}
+            <Section>
+                <Container>
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                        <div>
+                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                                Unsere Geschichte
+                            </span>
+                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                                Fast 50 Jahre Erfahrung
+                            </h2>
+                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                1976 gegründet, sind wir heute einer der führenden regionalen Anbieter für
+                                Telekommunikation und IT-Services in Tirol. Was als kleines Unternehmen begann,
+                                ist heute ein verlässlicher Partner für Tausende von Privat- und Geschäftskunden.
+                            </p>
+                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                Trotz des Wachstums sind wir unseren Werten treu geblieben:
+                                persönlicher Service, regionale Nähe und ehrliche Beratung.
+                                Wir kennen unsere Kunden – viele seit Jahrzehnten.
+                            </p>
+                        </div>
+                        <div className="stack-md">
+                            {milestones.map((milestone) => (
+                                <div key={milestone.year} className="flex items-start gap-[var(--spacing-md)]">
+                                    <span className="text-[var(--color-primary)] font-bold text-lg min-w-[80px]">
+                                        {milestone.year}
+                                    </span>
+                                    <span className="text-muted pt-0.5">{milestone.text}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Values Section */}
+            <Section className="bg-[var(--color-muted)]">
+                <Container>
+                    <div className="text-center mb-[var(--spacing-3xl)]">
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            Wofür wir stehen
+                        </span>
+                        <h2 className="mt-[var(--spacing-sm)]">Unsere Werte</h2>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+                        {values.map((value) => (
+                            <div key={value.title} className="text-center">
+                                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
+                                    <value.icon size={24} className="text-[var(--color-background)]" />
+                                </div>
+                                <h3 className="heading-5 mb-[var(--spacing-sm)]">{value.title}</h3>
+                                <p className="text-sm text-muted">{value.description}</p>
+                            </div>
+                        ))}
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Team Section */}
+            <Section>
+                <Container variant="narrow">
+                    <div className="text-center">
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            Unser Team
+                        </span>
+                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                            Menschen, die für Sie da sind
+                        </h2>
+                        <p className="text-muted mb-[var(--spacing-xl)]">
+                            Hinter TeleNetSystems steht ein engagiertes Team aus Technikern, Beratern und
+                            Service-Mitarbeitern. Wir kennen die Region, wir kennen die Technik – und wir
+                            sind für Sie da, wenn Sie uns brauchen.
+                        </p>
+                        <div className="flex items-center justify-center gap-[var(--spacing-sm)]">
+                            <Users size={20} className="text-[var(--color-primary)]" />
+                            <span className="font-medium">PLACEHOLDER: Anzahl Mitarbeiter</span>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Region Section */}
+            <Section className="bg-[var(--color-muted)]">
+                <Container>
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                        <div className="lg:order-2">
+                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                                Unser Standort
+                            </span>
+                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                                Verwurzelt in Reutte
+                            </h2>
+                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                Unser Hauptsitz ist in Reutte – mitten im Herzen des Außerferns.
+                                Von hier aus betreuen wir Kunden in der gesamten Region.
+                            </p>
+                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                Der Vorteil für Sie: Kurze Wege, schnelle Reaktionszeiten und
+                                persönliche Betreuung vor Ort. Bei uns sind Sie keine Nummer –
+                                sondern ein geschätzter Kunde.
+                            </p>
+                            <div className="flex items-start gap-[var(--spacing-sm)]">
+                                <MapPin size={20} className="text-[var(--color-primary)] shrink-0 mt-0.5" />
+                                <span className="text-muted">
+                                    PLACEHOLDER: Adresse<br />
+                                    6600 Reutte, Tirol
+                                </span>
+                            </div>
+                        </div>
+                        <div className="lg:order-1 bg-[var(--color-background)] rounded-[var(--radius-lg)] aspect-video flex items-center justify-center border border-[var(--color-border)]">
+                            <p className="text-muted">PLACEHOLDER: Karte oder Bild</p>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* CTA Section */}
+            <Section className="bg-[var(--color-primary)]">
+                <Container>
+                    <div className="text-center text-[var(--color-background)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+                            Lernen Sie uns kennen
+                        </h2>
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                            Besuchen Sie uns vor Ort oder kontaktieren Sie uns –
+                            wir freuen uns auf Sie.
+                        </p>
+                        <Link
+                            href="/kontakt"
+                            className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+                        >
+                            Kontakt aufnehmen
+                            <ArrowRight size={18} />
+                        </Link>
+                    </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

@@ -9,18 +9,18 @@ interface ContainerProps {
   variant?: ContainerVariant;
 }
 
-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",
 }: ContainerProps) {
+  const variantClasses: Record<ContainerVariant, string> = {
+    default: "container",
+    narrow: "container container--narrow",
+    wide: "container container--wide",
+  };
+
   return (
     <Tag className={`${variantClasses[variant]} ${className}`.trim()}>
       {children}

components/layout/Footer.tsx

@@ -1,19 +1,17 @@
 import Link from "next/link";
 import Image from "next/image";
-import { MapPin, Phone, Mail, Clock } from "lucide-react";
+import { Phone, Mail, MapPin } from "lucide-react";
 
-const navigation = {
+const footerLinks = {
-  leistungen: [
+    services: [
         { name: "Fernsehen", href: "/fernsehen" },
         { name: "Internet", href: "/internet" },
         { name: "Telefonie", href: "/telefonie" },
-    { name: "IT-Services", href: "/leistungen" },
+        { name: "Leistungen", href: "/leistungen" },
     ],
-  unternehmen: [
+    company: [
         { name: "Über uns", href: "/ueber-uns" },
         { name: "Kontakt", href: "/kontakt" },
-  ],
-  rechtliches: [
         { name: "Impressum", href: "/impressum" },
         { name: "Datenschutz", href: "/datenschutz" },
     ],
@@ -26,112 +24,105 @@ export function Footer() {
         <footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
             <div className="container">
                 {/* Main Footer Content */}
-        <div className="py-[var(--spacing-4xl)]">
+                <div className="py-[var(--spacing-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
                     {/* Company Info */}
-            <div className="lg:col-span-1">
+                    <div className="stack-md">
-              <Image
+                        <Link
-                src="/images/brand/logo-weiss-ffa4cbf6.png"
+                            href="/"
-                alt="Telenet Systems GmbH"
+                            className="hover:no-underline"
-                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" />
+                            <Image
-                  <span>+43 5672 5000</span>
+                                src="/images/logo/logo-weiss-ffa4cbf6.png"
+                                alt="TeleNetSystems Logo"
+                                width={160}
+                                height={36}
+                                className="h-8 w-auto"
+                            />
+                        </Link>
+                        <p className="text-sm opacity-80">
+                            Ihr regionaler Telekom- und IT-Partner in Tirol.
+                            Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
+                        </p>
+                    </div>
+
+                    {/* Services Links */}
+                    <div>
+                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
+                            Leistungen
+                        </h3>
+                        <ul className="stack-sm">
+                            {footerLinks.services.map((link) => (
+                                <li key={link.name}>
+                                    <Link
+                                        href={link.href}
+                                        className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
+                                    >
+                                        {link.name}
+                                    </Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    {/* Company Links */}
+                    <div>
+                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
+                            Unternehmen
+                        </h3>
+                        <ul className="stack-sm">
+                            {footerLinks.company.map((link) => (
+                                <li key={link.name}>
+                                    <Link
+                                        href={link.href}
+                                        className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
+                                    >
+                                        {link.name}
+                                    </Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    {/* Contact Info */}
+                    <div>
+                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
+                            Kontakt
+                        </h3>
+                        <ul className="stack-md">
+                            <li className="flex items-start gap-[var(--spacing-sm)]">
+                                <MapPin size={18} className="shrink-0 mt-0.5 text-[var(--color-primary)]" />
+                                <span className="text-sm opacity-80">
+                                    PLACEHOLDER: Adresse<br />
+                                    6600 Reutte, Tirol
+                                </span>
+                            </li>
+                            <li>
+                                <a
+                                    href="tel:+43567612345"
+                                    className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
+                                >
+                                    <Phone size={18} className="shrink-0 text-[var(--color-primary)]" />
+                                    PLACEHOLDER: Telefon
                                 </a>
+                            </li>
+                            <li>
                                 <a
                                     href="mailto:info@tnr.at"
-                  className="flex items-center gap-[var(--spacing-sm)] text-sm text-gray-300 hover:text-white transition-colors"
+                                    className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
                                 >
-                  <Mail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                                    <Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
-                  <span>info@tnr.at</span>
+                                    PLACEHOLDER: E-Mail
                                 </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>
-              <ul className="space-y-[var(--spacing-sm)]">
-                {navigation.leistungen.map((item) => (
-                  <li key={item.name}>
-                    <Link
-                      href={item.href}
-                      className="text-sm text-gray-300 hover:text-white transition-colors"
-                    >
-                      {item.name}
-                    </Link>
                             </li>
-                ))}
                         </ul>
                     </div>
-
-            {/* Unternehmen */}
-            <div>
-              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Unternehmen</h3>
-              <ul className="space-y-[var(--spacing-sm)]">
-                {navigation.unternehmen.map((item) => (
-                  <li key={item.name}>
-                    <Link
-                      href={item.href}
-                      className="text-sm text-gray-300 hover:text-white transition-colors"
-                    >
-                      {item.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Rechtliches & CTA */}
-            <div>
-              <h3 className="text-base font-semibold mb-[var(--spacing-lg)]">Rechtliches</h3>
-              <ul className="space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)]">
-                {navigation.rechtliches.map((item) => (
-                  <li key={item.name}>
-                    <Link
-                      href={item.href}
-                      className="text-sm text-gray-300 hover:text-white transition-colors"
-                    >
-                      {item.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-              <Link href="/kontakt" className="btn btn-primary">
-                Kontakt aufnehmen
-              </Link>
-            </div>
-          </div>
                 </div>
 
                 {/* Bottom Bar */}
-        <div className="border-t border-gray-700 py-[var(--spacing-lg)]">
+                <div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-[var(--spacing-sm)]">
+                    <p className="text-sm opacity-60 text-center">
-            <p className="text-sm text-gray-400">
                         © {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
                     </p>
-            <p className="text-sm text-gray-400">
-              Ihr Partner für Telekommunikation seit 1976
-            </p>
-          </div>
                 </div>
             </div>
         </footer>

components/layout/Header.tsx

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

components/layout/Section.tsx

@@ -1,6 +1,6 @@
 import type { ElementType, ReactNode } from "react";
 
-type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush";
+type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
 
 interface SectionProps {
   children: ReactNode;
@@ -10,14 +10,6 @@ interface SectionProps {
   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 = "",
@@ -25,6 +17,14 @@ export function Section({
   variant = "default",
   id,
 }: SectionProps) {
+  const variantClasses: Record<SectionVariant, string> = {
+    default: "section",
+    hero: "section section--hero",
+    sm: "section section--sm",
+    lg: "section section--lg",
+    flush: "section section--flush",
+  };
+
   return (
     <Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
       {children}

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: