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

app/datenschutz/page.tsx

@@ -1,52 +1,89 @@
-
+import { Metadata } from "next";
-import { Container } from "@/components/layout/Container";
 import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
 
-export const metadata = {
+export const metadata: Metadata = {
-    title: "Datenschutzerklärung | TeleNetSystems",
+    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 className="max-w-3xl">
+                <Container variant="narrow">
-                    <h1 className="mb-[var(--spacing-lg)]">Datenschutzerklärung</h1>
+                    <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>
 
-                    <div className="prose">
+                        <h2 className="heading-3">1. Verantwortlicher</h2>
-                        <h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">1. Datenschutz auf einen Blick</h2>
+                        <p className="text-muted">
-                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Allgemeine Hinweise</h3>
+                            Telenet Systems GmbH<br />
-                        <p>
+                            PLACEHOLDER: Adresse<br />
-                            Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
+                            6600 Reutte, Österreich<br />
-                            wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
+                            E-Mail: PLACEHOLDER: E-Mail-Adresse
                         </p>
 
-                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenerfassung auf dieser Website</h3>
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">2. Erhebung und Speicherung personenbezogener Daten</h2>
-                        <p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
+                        <p className="text-muted">
-                        <p>
+                            Beim Besuch unserer Website werden automatisch folgende Daten erhoben:
-                            Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem
+                        </p>
-                            Impressum dieser Website entnehmen.
+                        <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-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">2. Allgemeine Hinweise und Pflichtinformationen</h2>
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">4. Ihre Rechte</h2>
-                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenschutz</h3>
+                        <p className="text-muted">
-                        <p>
+                            Sie haben das Recht:
-                            Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
+                        </p>
-                            vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
+                        <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>
 
-                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Hinweis zur verantwortlichen Stelle</h3>
+                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">6. Änderung dieser Datenschutzerklärung</h2>
-                        <p>
+                        <p className="text-muted">
-                            Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:
+                            Wir behalten uns vor, diese Datenschutzerklärung bei Bedarf anzupassen,
+                            damit sie stets den aktuellen rechtlichen Anforderungen entspricht.
                         </p>
-                        <p className="mt-[var(--spacing-xs)]">
+
-                            PLACEHOLDER: technical.legal.datenschutz.companyName<br />
+                        <p className="text-sm text-muted mt-[var(--spacing-2xl)]">
-                            PLACEHOLDER: technical.legal.datenschutz.street<br />
+                            Stand: Februar 2026
-                            PLACEHOLDER: technical.legal.datenschutz.postalCode PLACEHOLDER: technical.legal.datenschutz.city
-                        </p>
-                        <p className="mt-[var(--spacing-xs)]">
-                            Telefon: PLACEHOLDER: technical.legal.datenschutz.phone<br />
-                            E-Mail: PLACEHOLDER: technical.legal.datenschutz.email
                         </p>
                     </div>
                 </Container>

app/fernsehen/page.tsx

@@ -1,127 +1,182 @@
-
+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, Check, Phone, ArrowRight } from "lucide-react";
 
-export const metadata = {
+export const metadata: Metadata = {
-    title: "Kabelfernsehen | TeleNetSystems",
+    title: "Fernsehen",
-    description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
+    description:
+        "Über 200 TV-Programme inkl. 40 HDTV-Sender. Kabel-TV für Privat- und Geschäftskunden in Tirol.",
 };
 
+const tvFeatures = [
+    "Über 200 Programme",
+    "40 HDTV-Sender",
+    "Rund 40 Radiosender",
+    "Kristallklare Bildqualität",
+    "Keine Servicepauschale",
+    "Regionale Sender inklusive",
+];
+
 export default function FernsehenPage() {
     return (
         <main>
-            {/* Hero */}
+            {/* Hero Section */}
-            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <h1 className="mb-[var(--spacing-md)]">
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-                        Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
+                        <div className="max-w-xl">
-                    </h1>
+                            <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
-                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                                <Tv size={32} className="text-[var(--color-background)]" />
-                        Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
+                            </div>
-                        Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
+                            <h1 className="mb-[var(--spacing-lg)]">
-                    </p>
+                                Fernsehen in
-                    <Link href="#kontakt" className="btn btn-primary btn-lg">
+                                <span className="text-[var(--color-primary)]"> bester Qualität</span>
-                        Jetzt anschließen lassen
+                            </h1>
-                    </Link>
+                            <p className="lead mb-[var(--spacing-2xl)]">
-                </Container>
+                                Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
-            </Section>
+                                direkt über das Kabelnetz von TeleNetSystems.
-
-            {/* Main Benefit */}
-            <Section>
-                <Container>
-                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
-                        <div>
-                            <h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
-                            <p className="mb-[var(--spacing-lg)]">
-                                Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
-                                Egal ob Spielfilme, Sport, Dokumentationen oder Kinderprogramm – hier ist für jeden etwas dabei.
                             </p>
-                            <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
+                            <Link href="/kontakt" className="btn btn-primary btn-lg">
-                                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                Jetzt beraten lassen
-                                    📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
+                            </Link>
-                                </li>
-                                <li className="flex items-center gap-[var(--spacing-sm)]">
-                                    💎 <span>Davon rund <strong>40 Sender in HD-Qualität</strong></span>
-                                </li>
-                                <li className="flex items-center gap-[var(--spacing-sm)]">
-                                    📻 <span>Rund <strong>40 Radiosender</strong> inklusive</span>
-                                </li>
-                            </ul>
                         </div>
-                        <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] flex items-center justify-center aspect-video text-[color:var(--color-muted-foreground)] bg-[var(--color-muted)]">
+                        <div className="relative">
-                            PLACEHOLDER: TV Experience Image
+                            <Image
+                                src="/images/hero/tv-header-44c1e07b.jpg"
+                                alt="Familie schaut gemütlich fern"
+                                width={800}
+                                height={600}
+                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
+                                priority
+                            />
                         </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* Pricing / Offer */}
+            {/* Trust Elements */}
-            <Section className="bg-[var(--color-muted)] text-center">
+            <Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
                 <Container>
-                    <h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
+                    <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
-                    <div className="card max-w-lg mx-auto bg-white">
+                        {tvFeatures.slice(0, 4).map((feature) => (
-                        <h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
+                            <div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
-                        <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
+                                <Check size={18} className="text-[var(--color-primary)]" />
-                            € 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
+                                <span className="text-sm font-medium">{feature}</span>
+                            </div>
+                        ))}
+                    </div>
+                </Container>
+            </Section>
+
+            {/* TV Privat Section */}
+            <Section id="privat">
+                <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">
+                                Für Privatkunden
+                            </span>
+                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                                TV Privat
+                            </h2>
+                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                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="stack-sm mb-[var(--spacing-xl)]">
+                                {tvFeatures.map((feature) => (
+                                    <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
+                                        <Check size={18} className="text-[var(--color-primary)] shrink-0" />
+                                        <span>{feature}</span>
+                                    </li>
+                                ))}
+                            </ul>
                         </div>
-                        <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
+                        <div className="card text-center">
-                            inkl. MwSt
+                            <p className="text-sm text-muted uppercase tracking-wide mb-[var(--spacing-sm)]">
+                                TV Privat
+                            </p>
+                            <p className="text-5xl font-bold text-[var(--color-primary)] mb-[var(--spacing-xs)]">
+                                € 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>
+
+            {/* TV Business Section */}
+            <Section className="bg-[var(--color-muted)]">
+                <Container>
+                    <div className="max-w-3xl mx-auto text-center">
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            Für Geschäftskunden
+                        </span>
+                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                            TV Business
+                        </h2>
+                        <p className="text-muted mb-[var(--spacing-xl)]">
+                            Sie sind noch auf der Suche nach der passenden TV-Lösung für Ihr Unternehmen?
+                            Gerne erstellen wir Ihnen ein individuelles Angebot, das genau zu Ihren Anforderungen passt.
                         </p>
-                        <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
+                        <Link href="/kontakt" className="btn btn-primary">
-                            <li>✅ 200+ TV-Sender</li>
+                            Individuelle Lösung anfragen
-                            <li>✅ 40+ HD-Sender</li>
+                            <ArrowRight size={18} />
-                            <li>✅ 40+ Radiosender</li>
-                            <li>✅ Keine Satellitenschüssel nötig</li>
-                            <li>✅ Beste Bild- & Tonqualität</li>
-                        </ul>
-                        <Link href="#kontakt" className="btn btn-primary w-full">
-                            Jetzt bestellen
                         </Link>
                     </div>
                 </Container>
             </Section>
 
-            {/* Business & Pay TV */}
+            {/* Pay TV Section */}
             <Section>
                 <Container>
-                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
+                    <div className="max-w-3xl mx-auto text-center">
-                        <div>
+                        <h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
-                            <h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
+                        <p className="text-muted mb-[var(--spacing-xl)]">
-                            <p className="mb-[var(--spacing-md)]">
+                            Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
-                                Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
+                            Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
-                            </p>
+                            Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
-                            <Link href="#kontakt" className="btn btn-outline">
+                        </p>
-                                Individuelles Angebot anfragen
+                        <Link href="/kontakt" className="btn btn-outline">
-                            </Link>
+                            Pay-TV anfragen
-                        </div>
+                        </Link>
-                        <div>
-                            <h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
-                            <p className="mb-[var(--spacing-md)]">
-                                Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
-                            </p>
-                            <Link href="#kontakt" className="btn btn-outline">
-                                Pay-TV Optionen prüfen
-                            </Link>
-                        </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* Contact Anchor */}
+            {/* CTA Section */}
-            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+            <Section className="bg-[var(--color-primary)]">
                 <Container>
-                    <h2 className="text-white mb-[var(--spacing-md)]">Interessiert?</h2>
+                    <div className="text-center text-[var(--color-background)]">
-                    <p className="lead text-white mb-[var(--spacing-xl)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        Kontaktieren Sie uns für Ihren TV-Anschluss.
+                            Interesse an unserem TV-Angebot?
-                    </p>
+                        </h2>
-                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
-                            📞 Anrufen
+                        </p>
-                        </a>
+                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            <Link
-                            ✉️ E-Mail schreiben
+                                href="/kontakt"
-                        </a>
+                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+                            >
+                                Jetzt beraten lassen
+                            </Link>
+                            <a
+                                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>

app/impressum/page.tsx

@@ -1,50 +1,106 @@
-
+import { Metadata } from "next";
-import { Container } from "@/components/layout/Container";
 import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
 
-export const metadata = {
+export const metadata: Metadata = {
-    title: "Impressum | TeleNetSystems",
+    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 className="max-w-3xl">
+                <Container variant="narrow">
-                    <h1 className="mb-[var(--spacing-lg)]">Impressum</h1>
+                    <div className="prose max-w-none">
+                        <h2 className="heading-3">Angaben gemäß § 5 ECG</h2>
 
-                    <div className="prose">
+                        <div className="card mb-[var(--spacing-xl)]">
-                        <p><strong>Angaben gemäß § 5 TMG:</strong></p>
+                            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
-                        <p>
+                                ⚠️ PLATZHALTER – Bitte durch echte Daten ersetzen
-                            PLACEHOLDER: technical.legal.impressum.companyName<br />
+                            </p>
-                            PLACEHOLDER: technical.legal.impressum.street<br />
+                            <p className="text-muted text-sm">
-                            PLACEHOLDER: technical.legal.impressum.postalCode PLACEHOLDER: technical.legal.impressum.city<br />
+                                Die folgenden Angaben sind Platzhalter und müssen durch die korrekten
-                            PLACEHOLDER: technical.legal.impressum.country
+                                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>
 
-                        <p className="mt-[var(--spacing-md)]"><strong>Kontakt:</strong></p>
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Kontakt</h3>
-                        <p>
+                        <p className="text-muted">
-                            Telefon: PLACEHOLDER: technical.legal.impressum.phone<br />
+                            Telefon: PLACEHOLDER: Telefonnummer<br />
-                            E-Mail: PLACEHOLDER: technical.legal.impressum.email
+                            E-Mail: PLACEHOLDER: E-Mail-Adresse<br />
+                            Website: https://www.tnr.at
                         </p>
 
-                        <p className="mt-[var(--spacing-md)]"><strong>Registereintrag:</strong></p>
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensgegenstand</h3>
-                        <p>
+                        <p className="text-muted">
-                            Eintragung im Handelsregister.<br />
+                            Telekommunikationsdienstleistungen und IT-Services
-                            Registergericht: PLACEHOLDER<br />
-                            Registernummer: PLACEHOLDER: technical.legal.impressum.register
                         </p>
 
-                        <p className="mt-[var(--spacing-md)]"><strong>Umsatzsteuer:</strong></p>
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchnummer</h3>
-                        <p>
+                        <p className="text-muted">
-                            Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
+                            PLACEHOLDER: FN XXXXXX x
-                            PLACEHOLDER: technical.legal.impressum.vatId
                         </p>
 
-                        <p className="mt-[var(--spacing-md)]"><strong>Streitschlichtung</strong></p>
+                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchgericht</h3>
-                        <p>
+                        <p className="text-muted">
-                            Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.<br />
+                            PLACEHOLDER: Landesgericht Innsbruck
-                            Unsere E-Mail-Adresse finden Sie oben im Impressum.
+                        </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>

app/internet/page.tsx

@@ -1,221 +1,282 @@
-
+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 { Wifi, Check, Phone, ArrowRight } from "lucide-react";
 
-export const metadata = {
+export const metadata: Metadata = {
-    title: "Highspeed Internet | TeleNetSystems",
+    title: "Internet",
-    description: "Surfen Sie mit bis zu 500 Mbit/s in Reutte. Faire Tarife für Kabel und Glasfaser für Privat und Business.",
+    description:
+        "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert – für Privat- und Geschäftskunden in Tirol.",
 };
 
+const kabelTarife = [
+    {
+        name: "telenet.hit",
+        preis: "€ 14,50",
+        download: "40 Mbit/s",
+        upload: "6 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten"],
+    },
+    {
+        name: "telenet.eco",
+        preis: "€ 19,00",
+        download: "60 Mbit/s",
+        upload: "8 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten"],
+    },
+    {
+        name: "telenet.fun",
+        preis: "€ 29,00",
+        download: "80 Mbit/s",
+        upload: "12 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten"],
+    },
+    {
+        name: "telenet.pro",
+        preis: "€ 39,00",
+        download: "100 Mbit/s",
+        upload: "14 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
+        highlight: true,
+    },
+    {
+        name: "telenet.mega",
+        preis: "€ 49,00",
+        download: "180 Mbit/s",
+        upload: "22 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Öffentliche IPv4"],
+    },
+];
+
+const glasfaserTarife = [
+    {
+        name: "telenet.eco",
+        preis: "€ 23,00",
+        download: "100 Mbit/s",
+        upload: "100 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
+    },
+    {
+        name: "telenet.fun",
+        preis: "€ 29,00",
+        download: "200 Mbit/s",
+        upload: "200 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch"],
+    },
+    {
+        name: "telenet.pro",
+        preis: "€ 39,00",
+        download: "300 Mbit/s",
+        upload: "300 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
+        highlight: true,
+    },
+    {
+        name: "telenet.mega",
+        preis: "€ 49,00",
+        download: "500 Mbit/s",
+        upload: "500 Mbit/s",
+        features: ["Keine Servicepauschale", "Unlimitierte Daten", "Symmetrisch", "Öffentliche IPv4"],
+    },
+];
+
 export default function InternetPage() {
     return (
         <main>
-            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <h1 className="mb-[var(--spacing-md)]">
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-                        Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
+                        <div className="max-w-xl">
-                    </h1>
+                            <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
-                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                                <Wifi size={32} className="text-[var(--color-background)]" />
-                        Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
+                            </div>
-                    </p>
+                            <h1 className="mb-[var(--spacing-lg)]">
-                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                                Highspeed-Internet
-                        <Link href="#kabel" className="btn btn-primary">
+                                <span className="text-[var(--color-primary)]"> für Tirol</span>
-                            Kabel-Tarife
+                            </h1>
-                        </Link>
+                            <p className="lead mb-[var(--spacing-2xl)]">
-                        <Link href="#glasfaser" className="btn btn-secondary">
+                                Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
-                            Glasfaser-Tarife
+                                Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
-                        </Link>
+                            </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 Verbindung"
+                                width={800}
+                                height={600}
+                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
+                                priority
+                            />
+                        </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* Intro Info */}
+            {/* Trust Elements */}
+            <Section variant="sm" className="border-b border-[var(--color-border)]">
+                <Container>
+                    <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
+                        {["Keine Servicepauschale", "Unlimitierte Daten", "IPv6 inklusive", "Regionaler Support"].map((feature) => (
+                            <div key={feature} className="flex items-center gap-[var(--spacing-sm)]">
+                                <Check size={18} className="text-[var(--color-primary)]" />
+                                <span className="text-sm font-medium">{feature}</span>
+                            </div>
+                        ))}
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Kabel-Internet Section */}
+            <Section id="kabel">
+                <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 Kabel-Kunden
+                        </span>
+                        <h2 className="mt-[var(--spacing-sm)]">Kabel-Internet</h2>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-[var(--spacing-lg)]">
+                        {kabelTarife.map((tarif) => (
+                            <div
+                                key={tarif.name}
+                                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.05.2024. Für die Installation fallen einmalige Installationskosten an.
+                    </p>
+                </Container>
+            </Section>
+
+            {/* Glasfaser-Internet Section */}
+            <Section id="glasfaser" 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">
+                            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>
+
+            {/* Business Section */}
             <Section>
-                <Container className="text-center max-w-3xl">
-                    <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems Internet?</h2>
-                    <p>
-                        Wir bieten Ihnen echte Flatrates ohne Datenlimit. Keine Servicepauschale.
-                        Ehrliche Bandbreiten und persönlicher Support direkt vor Ort in Reutte.
-                    </p>
-                </Container>
-            </Section>
-
-            {/* Kabel Tarife */}
-            <Section id="kabel" className="bg-[var(--color-muted)]">
                 <Container>
-                    <h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
+                    <div className="max-w-3xl mx-auto text-center">
-                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-                        Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
+                            Für Geschäftskunden
-                    </p>
+                        </span>
-
+                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-                    <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
+                            Business-Internet
-                        {/* Hit */}
+                        </h2>
-                        <div className="card flex flex-col items-center bg-white">
+                        <p className="text-muted mb-[var(--spacing-xl)]">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
+                            Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
-                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</div>
+                            inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                        </p>
-                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
+                        <Link href="/kontakt" className="btn btn-primary">
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                            Individuelle Lösung anfragen
-                                <li><strong>40 Mbit/s</strong> Down</li>
+                            <ArrowRight size={18} />
-                                <li><strong>6 Mbit/s</strong> Up</li>
+                        </Link>
-                                <li>Daten: Unlimitiert</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                        </div>
-
-                        {/* Eco */}
-                        <div className="card flex flex-col items-center bg-white relative overflow-hidden">
-                            <div className="absolute top-0 right-0 bg-[var(--color-secondary)] text-white text-xs px-2 py-1">Tipp</div>
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€19,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>60 Mbit/s</strong> Down</li>
-                                <li><strong>8 Mbit/s</strong> Up</li>
-                                <li>Daten: Unlimitiert</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Bestellen</Link>
-                        </div>
-
-                        {/* Fun */}
-                        <div className="card flex flex-col items-center bg-white">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€29,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>80 Mbit/s</strong> Down</li>
-                                <li><strong>12 Mbit/s</strong> Up</li>
-                                <li>Daten: Unlimitiert</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                        </div>
-
-                        {/* Pro */}
-                        <div className="card flex flex-col items-center bg-white">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€39,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>100 Mbit/s</strong> Down</li>
-                                <li><strong>14 Mbit/s</strong> Up</li>
-                                <li>Public IPv4 Address</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                        </div>
-
-                        {/* Mega */}
-                        <div className="card flex flex-col items-center bg-white">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€49,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <div className="w-full border-t border-[color:var(--color-border)] my-[var(--spacing-sm)]"></div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>180 Mbit/s</strong> Down</li>
-                                <li><strong>22 Mbit/s</strong> Up</li>
-                                <li>Public IPv4 Address</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                        </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* Glasfaser Tarife */}
+            {/* CTA Section */}
-            <Section id="glasfaser">
+            <Section className="bg-[var(--color-primary)]">
                 <Container>
-                    <h2 className="text-center mb-[var(--spacing-sm)]">Glasfaser-Internet Tarife</h2>
+                    <div className="text-center text-[var(--color-background)]">
-                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        Die Zukunft der Geschwindigkeit. (Gültig ab 01.04.2025)
+                            Welcher Tarif passt zu Ihnen?
-                    </p>
+                        </h2>
-
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                    <div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
+                            Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
-                        {/* Eco */}
+                        </p>
-                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
+                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
+                            <Link
-                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,00</div>
+                                href="/kontakt"
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                            >
-                                <li><strong>100 Mbit/s</strong> Down</li>
+                                Jetzt beraten lassen
-                                <li><strong>100 Mbit/s</strong> Up</li>
+                            </Link>
-                                <li>Symmetrisch!</li>
+                            <a
-                            </ul>
+                                href="tel:+43567612345"
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                                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>
-
-                        {/* Fun */}
-                        <div className="card flex flex-col items-center border-[color:var(--color-primary)]">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€29,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>200 Mbit/s</strong> Down</li>
-                                <li><strong>200 Mbit/s</strong> Up</li>
-                                <li>Symmetrisch!</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Anfragen</Link>
-                        </div>
-
-                        {/* Pro */}
-                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€39,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>300 Mbit/s</strong> Down</li>
-                                <li><strong>300 Mbit/s</strong> Up</li>
-                                <li>Public IPv4 Address</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
-                        </div>
-
-                        {/* Mega */}
-                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
-                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
-                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€49,00</div>
-                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
-                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                                <li><strong>500 Mbit/s</strong> Down</li>
-                                <li><strong>500 Mbit/s</strong> Up</li>
-                                <li>Public IPv4 Address</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
-                        </div>
-                    </div>
-                </Container>
-            </Section>
-
-            {/* Business */}
-            <Section className="bg-[var(--color-muted)]">
-                <Container className="text-center">
-                    <h2 className="mb-[var(--spacing-md)]">Internet für Unternehmen</h2>
-                    <p className="max-w-2xl mx-auto mb-[var(--spacing-lg)]">
-                        Sie benötigen garantierte Bandbreiten, SLA oder spezielle IP-Konfigurationen?
-                        Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot.
-                    </p>
-                    <Link href="#kontakt" className="btn btn-primary">
-                        Business-Anfrage stellen
-                    </Link>
-                </Container>
-            </Section>
-
-            {/* Contact Anchor */}
-            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
-                <Container>
-                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Internet bestellen</h2>
-                    <p className="lead text-white mb-[var(--spacing-xl)]">
-                        Wir kümmern uns um die Installation.
-                    </p>
-                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-                            📞 Anrufen
-                        </a>
-                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-                            ✉️ Tarif wählen
-                        </a>
                     </div>
                 </Container>
             </Section>

app/layout.tsx

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

app/leistungen/page.tsx

@@ -1,111 +1,234 @@
-
+import { Metadata } from "next";
 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,
+    Wrench,
+    MonitorSmartphone,
+    Cable,
+    Shield,
+    ArrowRight
+} from "lucide-react";
 
-export const metadata = {
+export const metadata: Metadata = {
-    title: "IT-Services & Leistungen | TeleNetSystems",
+    title: "Leistungen",
-    description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
+    description:
+        "Umfassende Telekom- und IT-Services für Tirol. Fernsehen, Internet, Telefonie, IT-Support und Netzwerkplanung.",
 };
 
+const mainServices = [
+    {
+        title: "Fernsehen",
+        description: "Über 200 Programme inkl. 40 HDTV-Sender für Privat- und Geschäftskunden.",
+        icon: Tv,
+        href: "/fernsehen",
+    },
+    {
+        title: "Internet",
+        description: "Highspeed-Internet über Kabel oder Glasfaser – schnell, stabil, unlimitiert.",
+        icon: Wifi,
+        href: "/internet",
+    },
+    {
+        title: "Telefonie",
+        description: "Flexible Festnetz-Tarife. Mit oder ohne Internet nutzbar.",
+        icon: Phone,
+        href: "/telefonie",
+    },
+];
+
+const itServices = [
+    {
+        title: "Netzwerk- & Serverplanung",
+        description: "Professionelle Planung und Umsetzung Ihrer IT-Infrastruktur.",
+        icon: Server,
+    },
+    {
+        title: "IT-Installation",
+        description: "Fachgerechte Installation von Hard- und Software vor Ort.",
+        icon: MonitorSmartphone,
+    },
+    {
+        title: "Reparatur & Wartung",
+        description: "Schnelle Hilfe bei Problemen, regelmäßige Wartung Ihrer Systeme.",
+        icon: Wrench,
+    },
+    {
+        title: "Fernwartung",
+        description: "Schnelle Problembehebung aus der Ferne – ohne Wartezeit vor Ort.",
+        icon: Shield,
+    },
+    {
+        title: "Glasfaser-Planung & -Ausbau",
+        description: "Beratung und Umsetzung für Glasfaser-Anbindungen.",
+        icon: Cable,
+    },
+];
+
 export default function LeistungenPage() {
     return (
         <main>
-            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <h1 className="mb-[var(--spacing-md)]">
+                    <div className="max-w-3xl">
-                        Mehr als nur Kommunikation. <br />
+                        <h1 className="mb-[var(--spacing-lg)]">
-                        <span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
+                            Alle Leistungen
-                    </h1>
+                            <span className="text-[var(--color-primary)]"> im Überblick</span>
-                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        </h1>
-                        Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
+                        <p className="lead mb-[var(--spacing-2xl)]">
-                        Von der Planung bis zur Wartung.
+                            Von Fernsehen über Internet bis zu IT-Services –
-                    </p>
+                            wir bieten Ihnen umfassende Lösungen aus einer Hand.
-                    <Link href="#it-services" className="btn btn-primary btn-lg">
+                        </p>
-                        Zu den IT-Services
+                        <Link href="/kontakt" className="btn btn-primary btn-lg">
-                    </Link>
+                            Jetzt beraten lassen
+                        </Link>
+                    </div>
                 </Container>
             </Section>
 
-            {/* Overview Core Services */}
+            {/* Telekom Services */}
             <Section>
                 <Container>
-                    <div className="text-center mb-[var(--spacing-2xl)]">
+                    <div className="text-center mb-[var(--spacing-3xl)]">
-                        <h2>Unsere Kernkompetenzen</h2>
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            Telekommunikation
+                        </span>
+                        <h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
                     </div>
-                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
-                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
+                        {mainServices.map((service) => (
-                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
+                            <Link
-                            <p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
+                                key={service.title}
-                            <Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
+                                href={service.href}
-                        </div>
+                                className="card group hover:shadow-lg transition-shadow hover:no-underline"
-                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
+                            >
-                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
+                                <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">
-                            <p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
+                                    <service.icon
-                            <Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
+                                        size={24}
-                        </div>
+                                        className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
-                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
+                                    />
-                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
+                                </div>
-                            <p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
+                                <h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
-                            <Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
+                                    {service.title}
-                        </div>
+                                </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 Detail */}
+            {/* IT Services */}
-            <Section id="it-services" className="bg-[var(--color-muted)]">
+            <Section className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
+                    <div className="text-center mb-[var(--spacing-3xl)]">
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            IT-Dienstleistungen
+                        </span>
+                        <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-3 gap-[var(--spacing-lg)]">
+                        {itServices.map((service) => (
+                            <div key={service.title} className="card">
+                                <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 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>
+
+            {/* Business Section */}
+            <Section>
+                <Container>
+                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
                         <div>
-                            <h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
+                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-                            <div className="space-y-[var(--spacing-xl)]">
+                                Für Unternehmen
-                                <div>
+                            </span>
-                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
+                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-                                    <p>
+                                Maßgeschneiderte Lösungen
-                                        Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
+                            </h2>
-                                        Wir sorgen für eine stabile Infrastruktur.
+                            <p className="text-muted mb-[var(--spacing-lg)]">
-                                    </p>
+                                Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
-                                </div>
+                                Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
-                                <div>
+                                von der Telekommunikation bis zur kompletten IT-Infrastruktur.
-                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
+                            </p>
-                                    <p>
+                            <ul className="stack-sm mb-[var(--spacing-xl)]">
-                                        Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                                        und Antivirus-Software.
+                                    <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>
-                                    </p>
+                                    <span>Bedarfsanalyse vor Ort</span>
-                                </div>
+                                </li>
-                                <div>
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
+                                    <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>
-                                    <p>
+                                    <span>Individuelles Angebot</span>
-                                        Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
+                                </li>
-                                        Gerne auch per Fernwartung für schnelle Hilfe.
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
-                                    </p>
+                                    <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>
-                                </div>
+                                    <span>Professionelle Umsetzung</span>
-                            </div>
+                                </li>
+                                <li className="flex items-start gap-[var(--spacing-sm)]">
+                                    <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>Laufender Support</span>
+                                </li>
+                            </ul>
+                            <Link href="/kontakt" className="btn btn-primary">
+                                Beratungstermin vereinbaren
+                            </Link>
                         </div>
-                        <div className="flex flex-col gap-[var(--spacing-md)]">
+                        <div className="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
-                            <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
+                            <p className="text-6xl font-bold text-[var(--color-primary)] mb-[var(--spacing-md)]">
-                                PLACEHOLDER: IT Hardware Image
+                                50
-                            </div>
+                            </p>
-                            <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
+                            <p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</p>
-                                PLACEHOLDER: Server Room Image
+                            <p className="text-muted">
-                            </div>
+                                Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
+                            </p>
                         </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* Contact Anchor */}
+            {/* CTA Section */}
-            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+            <Section className="bg-[var(--color-primary)]">
                 <Container>
-                    <h2 className="text-white mb-[var(--spacing-md)]">IT-Probleme? Wir helfen.</h2>
+                    <div className="text-center text-[var(--color-background)]">
-                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            Haben Sie Fragen zu unseren Leistungen?
-                            📞 05672 / PLACEHOLDER
+                        </h2>
-                        </a>
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            Kontaktieren Sie uns für eine unverbindliche Beratung.
-                            ✉️ support@tnr.at
+                            Wir finden gemeinsam die passende Lösung.
-                        </a>
+                        </p>
+                        <Link
+                            href="/kontakt"
+                            className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+                        >
+                            Jetzt beraten lassen
+                        </Link>
                     </div>
                 </Container>
             </Section>

app/page.tsx

@@ -1,169 +1,221 @@
-
+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,
+  Award,
+  ArrowRight
+} from "lucide-react";
 
-export default function Home() {
+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 = [
+  {
+    title: "Fernsehen",
+    description:
+      "Über 200 Programme inkl. 40 HDTV-Sender – für Privat- und Geschäftskunden.",
+    icon: Tv,
+    href: "/fernsehen",
+    price: "ab € 16,47/Monat",
+  },
+  {
+    title: "Internet",
+    description:
+      "Highspeed-Internet über Kabel oder Glasfaser. Schnell, stabil, unlimitiert.",
+    icon: Wifi,
+    href: "/internet",
+    price: "ab € 14,50/Monat",
+  },
+  {
+    title: "Telefonie",
+    description:
+      "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar.",
+    icon: Phone,
+    href: "/telefonie",
+    price: "ab € 0,00/Monat",
+  },
+];
+
+const usps = [
+  {
+    icon: MapPin,
+    title: "Regional & Persönlich",
+    description:
+      "Wir sind vor Ort in Reutte. Bei Fragen oder Problemen erreichen Sie echte Ansprechpartner aus der Region.",
+  },
+  {
+    icon: Clock,
+    title: "Schnelle Hilfe",
+    description:
+      "Bei Störungen reagieren wir schnell. Unser Support ist für Sie da – ohne lange Warteschleifen.",
+  },
+  {
+    icon: Users,
+    title: "Seit 1976",
+    description:
+      "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 trustElements = [
+  { icon: Award, text: "Zertifizierter Partner" },
+  { icon: Users, text: "Über 5.000 zufriedene Kunden" },
+  { icon: Clock, text: "Fast 50 Jahre Erfahrung" },
+];
+
+export default function HomePage() {
   return (
     <main>
       {/* Hero Section */}
-      <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+      <Section variant="hero" className="bg-[var(--color-muted)]">
         <Container>
-          <h1 className="mb-[var(--spacing-md)]">
+          <div className="max-w-3xl">
-            Ihr Partner für Telekom & IT <br />
+            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
-            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
+              Ihr Telekom- und IT-Partner in Tirol
-          </h1>
+            </p>
-          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+            <h1 className="mb-[var(--spacing-lg)]">
-            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
+              Zuverlässige Technik.
-            Regional, persönlich und zuverlässig seit 1976.
+              <br />
-          </p>
+              <span className="text-[var(--color-primary)]">Persönlicher Service.</span>
-          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+            </h1>
-            <Link href="#kontakt" className="btn btn-primary btn-lg">
+            <p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
-              Jetzt beraten lassen
+              Fernsehen, Internet und Telefonie aus einer Hand –
-            </Link>
+              direkt aus Reutte für den Bezirk und die Region.
-            <Link href="/internet" className="btn btn-outline btn-lg">
+              Mit persönlicher Beratung und schnellem Support.
-              Internet-Tarife prüfen
+            </p>
-            </Link>
+            <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">
+                Unsere Leistungen
+                <ArrowRight size={18} />
+              </Link>
+            </div>
           </div>
         </Container>
       </Section>
 
       {/* Services Section */}
-      <Section>
+      <Section id="leistungen">
         <Container>
-          <div className="text-center mb-[var(--spacing-2xl)]">
+          <div className="text-center mb-[var(--spacing-3xl)]">
-            <h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
+            <h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
-            <p className="text-[color:var(--color-muted-foreground)]">
+            <p className="lead max-w-2xl mx-auto">
-              Alles, was Sie für digitale Kommunikation benötigen.
+              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)]">
-          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
+            {services.map((service) => (
-            {/* Internet */}
+              <article key={service.title} className="card group">
-            <div className="card text-center transition-transform hover:-translate-y-1">
+                <div className="w-12 h-12 rounded-[var(--radius-md)] bg-[var(--color-primary)]/10 flex items-center justify-center mb-[var(--spacing-lg)]">
-              <div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
+                  <service.icon size={24} className="text-[var(--color-primary)]" />
-              <h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
+                </div>
-              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                <h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
-                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
+                <p className="text-muted mb-[var(--spacing-md)]">
-              </p>
+                  {service.description}
-              <Link href="/internet" className="btn btn-secondary w-full">
+                </p>
-                Zu den Tarifen
+                <p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
-              </Link>
+                  {service.price}
-            </div>
+                </p>
-
+                <Link
-            {/* Fernsehen */}
+                  href={service.href}
-            <div className="card text-center transition-transform hover:-translate-y-1">
+                  className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
-              <div className="mb-[var(--spacing-md)] text-4xl">📺</div>
+                >
-              <h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
+                  Mehr erfahren
-              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                  <ArrowRight size={16} />
-                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
+                </Link>
-              </p>
+              </article>
-              <Link href="/fernsehen" className="btn btn-secondary w-full">
+            ))}
-                Sender entdecken
-              </Link>
-            </div>
-
-            {/* Telefonie */}
-            <div className="card text-center transition-transform hover:-translate-y-1">
-              <div className="mb-[var(--spacing-md)] text-4xl">📞</div>
-              <h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
-              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
-              </p>
-              <Link href="/telefonie" className="btn btn-secondary w-full">
-                Mehr erfahren
-              </Link>
-            </div>
           </div>
         </Container>
       </Section>
 
-      {/* IT Services Teaser */}
+      {/* USP Section */}
       <Section className="bg-[var(--color-muted)]">
         <Container>
-          <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
+          <div className="text-center mb-[var(--spacing-3xl)]">
-            <div>
+            <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
-              <h2 className="mb-[var(--spacing-md)]">
+            <p className="lead max-w-2xl mx-auto">
-                Professionelle IT-Lösungen <br /> für Unternehmen & Privat
+              Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
-              </h2>
+            </p>
-              <p className="mb-[var(--spacing-lg)]">
+          </div>
-                Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
-                Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
+            {usps.map((usp) => (
-              </p>
+              <div key={usp.title} className="text-center">
-              <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
+                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  <usp.icon size={24} className="text-[var(--color-background)]" />
-                  ✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
+                </div>
-                </li>
+                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
+                <p className="text-sm text-muted">{usp.description}</p>
-                  ✅ <span>Netzwerk- und Serverplanung</span>
-                </li>
-                <li className="flex items-center gap-[var(--spacing-sm)]">
-                  ✅ <span>Verkauf & Reparatur von Hardware</span>
-                </li>
-              </ul>
-              <Link href="/leistungen" className="btn btn-primary">
-                Zu den IT-Services
-              </Link>
-            </div>
-            <div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
-              {/* Placeholder styled as a media frame */}
-              <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
-                <span className="text-4xl mb-2">📸</span>
-                <span className="font-medium">IT-Service vor Ort</span>
               </div>
-              <p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
+            ))}
-                Symbolbild: Unser Team bei der Netzwerk-Installation
-              </p>
-            </div>
           </div>
         </Container>
       </Section>
 
-      {/* USPs / Trust Section */}
+      {/* Trust Section */}
-      <Section>
+      <Section variant="sm">
         <Container>
-          <h2 className="text-center mb-[var(--spacing-2xl)]">Warum TeleNetSystems?</h2>
+          <div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
-          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+            {trustElements.map((item) => (
-            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
+              <div
-              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">1976</div>
+                key={item.text}
-              <p className="font-semibold text-[color:var(--color-foreground)]">Gründung</p>
+                className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
-              <p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
+              >
-            </div>
+                <item.icon size={20} className="text-[var(--color-primary)]" />
-            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
+                <span className="text-sm font-medium">{item.text}</span>
-              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">100%</div>
+              </div>
-              <p className="font-semibold text-[color:var(--color-foreground)]">Tirol</p>
+            ))}
-              <p className="text-sm text-[color:var(--color-muted-foreground)]">Regional aus Reutte</p>
-            </div>
-            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
-              <p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
-              <p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
-            </div>
-            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
-              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">Top</div>
-              <p className="font-semibold text-[color:var(--color-foreground)]">Service</p>
-              <p className="text-sm text-[color:var(--color-muted-foreground)]">Persönlicher Ansprechpartner</p>
-            </div>
           </div>
         </Container>
       </Section>
 
-      {/* Contact CTA */}
+      {/* CTA Section */}
-      <Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
+      <Section className="bg-[var(--color-primary)]">
-        <Container className="text-center">
+        <Container>
-          <h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
+          <div className="text-center text-[var(--color-background)]">
-            Noch Fragen? Wir sind für Sie da.
+            <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-          </h2>
+              Bereit für zuverlässige Technik?
-          <p className="text-xl mb-[var(--spacing-xl)] opacity-90">
+            </h2>
-            Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
+            <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-          </p>
+              Kontaktieren Sie uns für eine unverbindliche Beratung.
-          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+              Wir finden die passende Lösung für Sie.
-            <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+            </p>
-              📞 Anrufen
+            <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-            </a>
+              <Link
-            <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                href="/kontakt"
-              ✉️ E-Mail schreiben
+                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
-            </a>
+              >
+                Jetzt beraten lassen
+              </Link>
+              <a
+                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>

app/telefonie/page.tsx

@@ -1,130 +1,164 @@
-
+import { Metadata } from "next";
 import Link from "next/link";
-import { Container } from "@/components/layout/Container";
 import { Section } from "@/components/layout/Section";
+import { Container } from "@/components/layout/Container";
+import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
 
-export const metadata = {
+export const metadata: Metadata = {
-    title: "Telefonie Tarife | TeleNetSystems",
+    title: "Telefonie",
-    description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
+    description:
+        "Flexible Telefonie-Tarife für Festnetz. Mit oder ohne Internet nutzbar – für Privat- und Geschäftskunden in Tirol.",
 };
 
+const telefonieTarife = [
+    {
+        name: "telenet.zero",
+        beschreibung: "Ohne Internet",
+        preis: "€ 5,00",
+        kosten: "Festnetz AT: ab 2,4 Cent/Min.",
+        features: ["Nur Telefonie", "Günstige Minutenpreise"],
+    },
+    {
+        name: "telenet.zero",
+        beschreibung: "Mit Internet von Telenet",
+        preis: "€ 0,00",
+        kosten: "Festnetz AT: ab 2,4 Cent/Min.",
+        features: ["Kostenlos zu Ihrem Internet", "Günstige Minutenpreise"],
+        highlight: true,
+    },
+    {
+        name: "telenet.business",
+        beschreibung: "Für Geschäftskunden",
+        preis: "€ 8,90",
+        kosten: "Festnetz AT: ab 3,24 Cent/Min.",
+        features: ["Business-Funktionen", "Professioneller Support"],
+    },
+];
+
 export default function TelefoniePage() {
     return (
         <main>
-            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <h1 className="mb-[var(--spacing-md)]">
+                    <div className="max-w-3xl">
-                        Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
+                        <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
-                    </h1>
+                            <PhoneIcon size={32} className="text-[var(--color-background)]" />
-                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                        Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
-                        Ideal als Ergänzung zu Ihrem Internet-Paket.
-                    </p>
-                    <Link href="#tarife" className="btn btn-primary btn-lg">
-                        Tarife ansehen
-                    </Link>
-                </Container>
-            </Section>
-
-            <Section id="tarife">
-                <Container>
-                    <div className="text-center mb-[var(--spacing-2xl)]">
-                        <h2>Unsere Telefonie-Tarife</h2>
-                        <p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
-                    </div>
-
-                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
-                        {/* Zero (With Internet) */}
-                        <div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
-                            <div className="bg-[var(--color-primary)] text-white text-xs py-1 px-3 rounded-full inline-block mb-[var(--spacing-sm)]">Empfehlung</div>
-                            <h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
-                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
-                            <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
-                                € 0,00
-                            </div>
-                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-                                Grundgebühr pro Monat
-                            </p>
-                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
-                                <li>✅ Keine Grundgebühr!</li>
-                                <li>📞 Festnetz AT: ab 2,4 Cent/min</li>
-                                <li>🎯 Ideal für Gelegenheitsnutzer</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-primary w-full">Bestellen</Link>
-                        </div>
-
-                        {/* Zero (Solo) */}
-                        <div className="card text-center">
-                            <h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
-                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(ohne Internet)</p>
-                            <div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
-                                € 5,00
-                            </div>
-                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-                                Grundgebühr pro Monat
-                            </p>
-                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
-                                <li>✅ Günstige Grundgebühr</li>
-                                <li>📞 Festnetz AT: ab 2,4 Cent/min</li>
-                                <li>🔌 Nur Kabelanschluss nötig</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline w-full">Bestellen</Link>
-                        </div>
-
-                        {/* Business */}
-                        <div className="card text-center">
-                            <h3 className="heading-4 mb-[var(--spacing-xs)]">business</h3>
-                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(für Unternehmen)</p>
-                            <div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
-                                € 8,90
-                            </div>
-                            <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
-                                Grundgebühr pro Monat
-                            </p>
-                            <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
-                                <li>✅ Professionelle Lösung</li>
-                                <li>📞 Festnetz AT: ab 3,24 Cent/min</li>
-                                <li>👔 Für Firmenkunden</li>
-                            </ul>
-                            <Link href="#kontakt" className="btn btn-outline w-full">Anfragen</Link>
                         </div>
+                        <h1 className="mb-[var(--spacing-lg)]">
+                            Telefonie
+                            <span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
+                        </h1>
+                        <p className="lead mb-[var(--spacing-2xl)]">
+                            Flexible Telefonie-Tarife für Ihr Festnetz.
+                            Mit oder ohne Internet nutzbar – Sie haben die Wahl.
+                        </p>
+                        <Link href="/kontakt" className="btn btn-primary btn-lg">
+                            Jetzt beraten lassen
+                        </Link>
                     </div>
                 </Container>
             </Section>
 
+            {/* Tarife Section */}
+            <Section>
+                <Container>
+                    <div className="text-center mb-[var(--spacing-3xl)]">
+                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            Kabel-Telefonie-Tarife
+                        </span>
+                        <h2 className="mt-[var(--spacing-sm)]">Unsere Tarife</h2>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)] max-w-4xl mx-auto">
+                        {telefonieTarife.map((tarif, index) => (
+                            <div
+                                key={`${tarif.name}-${index}`}
+                                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-xs)]">{tarif.name}</h3>
+                                <p className="text-sm text-muted mb-[var(--spacing-md)]">{tarif.beschreibung}</p>
+                                <p className="text-4xl font-bold text-[var(--color-primary)]">{tarif.preis}</p>
+                                <p className="text-sm text-muted mb-[var(--spacing-md)]">pro Monat</p>
+                                <p className="text-sm mb-[var(--spacing-lg)]">{tarif.kosten}</p>
+                                <ul className="stack-sm text-left mb-[var(--spacing-lg)]">
+                                    {tarif.features.map((feature) => (
+                                        <li key={feature} className="flex items-center gap-[var(--spacing-sm)]">
+                                            <Check size={16} className="text-[var(--color-primary)] shrink-0" />
+                                            <span className="text-sm">{feature}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                                <Link href="/kontakt" className="btn btn-outline w-full">
+                                    Anfragen
+                                </Link>
+                            </div>
+                        ))}
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Info Section */}
             <Section className="bg-[var(--color-muted)]">
-                <Container>
+                <Container variant="narrow">
-                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
+                    <div className="text-center">
-                        <div>
+                        <h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
-                            <h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
+                        <div className="stack-lg text-left">
-                            <p className="mb-[var(--spacing-md)]">
+                            <div className="card">
-                                Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
+                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
-                            </p>
+                                <p className="text-muted">
-                            <p className="text-sm text-[color:var(--color-muted-foreground)]">
+                                    Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
-                                Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
+                                    kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
-                            </p>
+                                </p>
-                        </div>
+                            </div>
-                        <div className="flex justify-center">
+                            <div className="card">
-                            <div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
+                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
-                                <div className="text-6xl mb-2">☎️</div>
+                                <p className="text-muted">
-                                <div className="font-bold">Ihre Nummer</div>
+                                    Sie möchten nur Telefonie ohne Internet? Kein Problem.
-                                <div className="text-sm">bleibt gleich.</div>
+                                    Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
+                                </p>
+                            </div>
+                            <div className="card">
+                                <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>
 
-            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+            {/* CTA Section */}
+            <Section className="bg-[var(--color-primary)]">
                 <Container>
-                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
+                    <div className="text-center text-[var(--color-background)]">
-                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            Fragen zu unseren Telefonie-Tarifen?
-                            📞 Anrufen
+                        </h2>
-                        </a>
+                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
-                            ✉️ E-Mail schreiben
+                        </p>
-                        </a>
+                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                            <Link
+                                href="/kontakt"
+                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+                            >
+                                Jetzt beraten lassen
+                            </Link>
+                            <a
+                                href="tel:+43567612345"
+                                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
+                            >
+                                <PhoneIcon size={18} />
+                                PLACEHOLDER: Telefon
+                            </a>
+                        </div>
                     </div>
                 </Container>
             </Section>

app/ueber-uns/page.tsx

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

components/layout/Container.tsx

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

components/layout/Footer.tsx

@@ -1,54 +1,130 @@
-
 import Link from "next/link";
-import { Container } from "./Container";
+import Image from "next/image";
+import { Phone, Mail, MapPin } from "lucide-react";
+
+const footerLinks = {
+    services: [
+        { name: "Fernsehen", href: "/fernsehen" },
+        { name: "Internet", href: "/internet" },
+        { name: "Telefonie", href: "/telefonie" },
+        { name: "Leistungen", href: "/leistungen" },
+    ],
+    company: [
+        { name: "Über uns", href: "/ueber-uns" },
+        { name: "Kontakt", href: "/kontakt" },
+        { name: "Impressum", href: "/impressum" },
+        { name: "Datenschutz", href: "/datenschutz" },
+    ],
+};
 
 export function Footer() {
     const currentYear = new Date().getFullYear();
 
     return (
-        <footer className="bg-[var(--color-muted)] border-t border-[color:var(--color-border)] py-[var(--spacing-xl)] mt-auto">
+        <footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
-            <Container>
+            <div className="container">
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
+                {/* Main Footer Content */}
-                    <div className="md:col-span-1">
+                <div className="py-[var(--spacing-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
-                        <Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
+                    {/* Company Info */}
-                            TeleNetSystems
+                    <div className="stack-md">
+                        <Link
+                            href="/"
+                            className="hover:no-underline"
+                        >
+                            <Image
+                                src="/images/logo/logo-weiss-ffa4cbf6.png"
+                                alt="TeleNetSystems Logo"
+                                width={160}
+                                height={36}
+                                className="h-8 w-auto"
+                            />
                         </Link>
-                        <p className="text-sm text-[color:var(--color-muted-foreground)]">
+                        <p className="text-sm opacity-80">
-                            Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
+                            Ihr regionaler Telekom- und IT-Partner in Tirol.
+                            Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
                         </p>
                     </div>
 
+                    {/* Services Links */}
                     <div>
-                        <h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
+                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            Leistungen
-                            <li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
+                        </h3>
-                            <li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
+                        <ul className="stack-sm">
-                            <li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
+                            {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>
-                        <h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
+                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            Unternehmen
-                            <li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
+                        </h3>
-                            <li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
+                        <ul className="stack-sm">
-                            <li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
+                            {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>
-                        <h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
+                        <h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
-                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            Kontakt
-                            <li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
+                        </h3>
-                            <li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
+                        <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 opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
+                                >
+                                    <Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
+                                    PLACEHOLDER: E-Mail
+                                </a>
+                            </li>
                         </ul>
                     </div>
                 </div>
 
-                <div className="border-t border-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
+                {/* Bottom Bar */}
-                    &copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
+                <div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
+                    <p className="text-sm opacity-60 text-center">
+                        © {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
+                    </p>
                 </div>
-            </Container>
+            </div>
         </footer>
     );
 }

components/layout/Header.tsx

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

components/layout/Section.tsx

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

components/ui/Button.tsx

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

components/ui/Card.tsx

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

theme/globals.css

@@ -7,8 +7,7 @@
 :root {
   /* ── Colors ──────────────────────────────────────── */
   --color-primary: #f39210;
-  --color-secondary: #1e293b;
+  --color-secondary: #f39210;
-  /* Slate 800 - High contrast to primary orange */
   --color-accent: #eb5c24;
   --color-neutral: #6b7280;
   --color-background: #ffffff;

theme/stylesheet.css

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