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

app/datenschutz/page.tsx

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

app/fernsehen/page.tsx

@@ -0,0 +1,130 @@
+
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "Kabelfernsehen | TeleNetSystems",
+    description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
+};
+
+export default function FernsehenPage() {
+    return (
+        <main>
+            {/* Hero */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+                <Container>
+                    <h1 className="mb-[var(--spacing-md)]">
+                        Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</span>
+                    </h1>
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
+                        Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
+                    </p>
+                    <Link href="#kontakt" className="btn btn-primary btn-lg">
+                        Jetzt anschließen lassen
+                    </Link>
+                </Container>
+            </Section>
+
+            {/* 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)]">
+                                <li className="flex items-center gap-[var(--spacing-sm)]">
+                                    📺 <span><strong>Über 200 Programme</strong> digital empfangbar</span>
+                                </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)]">
+                            PLACEHOLDER: TV Experience Image
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Pricing / Offer */}
+            <Section className="bg-[var(--color-muted)] text-center">
+                <Container>
+                    <h2 className="mb-[var(--spacing-xl)]">Unser Angebot für Privatkunden</h2>
+                    <div className="card max-w-lg mx-auto bg-white">
+                        <h3 className="text-2xl font-bold mb-[var(--spacing-xs)]">TV Privat</h3>
+                        <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
+                            € 16,47 <span className="text-base text-[color:var(--color-foreground)] font-normal">/ Monat</span>
+                        </div>
+                        <p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
+                            inkl. MwSt
+                        </p>
+                        <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
+                            <li>✅ 200+ TV-Sender</li>
+                            <li>✅ 40+ HD-Sender</li>
+                            <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 */}
+            <Section>
+                <Container>
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
+                        <div>
+                            <h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
+                            <p className="mb-[var(--spacing-md)]">
+                                Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
+                            </p>
+                            <Link href="#kontakt" className="btn btn-outline">
+                                Individuelles Angebot anfragen
+                            </Link>
+                        </div>
+                        <div>
+                            <h3 className="mb-[var(--spacing-md)]">Pay TV & Extras</h3>
+                            <p className="mb-[var(--spacing-md)]">
+                                Sie möchten noch mehr? Exklusive Filme, Serien und Premium-Sport in HD/UHD auf Anfrage.
+                            </p>
+                            <Link href="#kontakt" className="btn btn-outline">
+                                Pay-TV Optionen prüfen
+                            </Link>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Contact Anchor */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+                <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">Interessiert?</h2>
+                    <p className="lead text-white mb-[var(--spacing-xl)]">
+                        Kontaktieren Sie uns für Ihren TV-Anschluss.
+                    </p>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            📞 Anrufen
+                        </a>
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            ✉️ E-Mail schreiben
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/impressum/page.tsx

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

app/internet/page.tsx

@@ -0,0 +1,224 @@
+
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "Highspeed Internet | TeleNetSystems",
+    description: "Surfen Sie mit bis zu 500 Mbit/s in Reutte. Faire Tarife für Kabel und Glasfaser für Privat und Business.",
+};
+
+export default function InternetPage() {
+    return (
+        <main>
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+                <Container>
+                    <h1 className="mb-[var(--spacing-md)]">
+                        Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</span>
+                    </h1>
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
+                    </p>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <Link href="#kabel" className="btn btn-primary">
+                            Kabel-Tarife
+                        </Link>
+                        <Link href="#glasfaser" className="btn btn-secondary">
+                            Glasfaser-Tarife
+                        </Link>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Intro Info */}
+            <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>
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
+                        Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
+                    </p>
+
+                    <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
+                        {/* Hit */}
+                        <div className="card flex flex-col items-center bg-white">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</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>40 Mbit/s</strong> Down</li>
+                                <li><strong>6 Mbit/s</strong> Up</li>
+                                <li>Daten: Unlimitiert</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-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 */}
+            <Section id="glasfaser">
+                <Container>
+                    <h2 className="text-center mb-[var(--spacing-sm)]">Glasfaser-Internet Tarife</h2>
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
+                        Die Zukunft der Geschwindigkeit. (Gültig ab 01.04.2025)
+                    </p>
+
+                    <div className="grid md:grid-cols-4 gap-[var(--spacing-md)]">
+                        {/* Eco */}
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">eco</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€23,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>100 Mbit/s</strong> Down</li>
+                                <li><strong>100 Mbit/s</strong> Up</li>
+                                <li>Symmetrisch!</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                        </div>
+
+                        {/* Fun */}
+                        <div className="card flex flex-col items-center border-[color:var(--color-primary)]">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">fun</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€29,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>200 Mbit/s</strong> Down</li>
+                                <li><strong>200 Mbit/s</strong> Up</li>
+                                <li>Symmetrisch!</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-primary btn-sm w-full">Anfragen</Link>
+                        </div>
+
+                        {/* Pro */}
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">pro</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€39,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>300 Mbit/s</strong> Down</li>
+                                <li><strong>300 Mbit/s</strong> Up</li>
+                                <li>Public IPv4 Address</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                        </div>
+
+                        {/* Mega */}
+                        <div className="card flex flex-col items-center bg-[var(--color-muted)]/30">
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">mega</h3>
+                            <div className="text-3xl font-bold text-[color:var(--color-accent)] mb-[var(--spacing-sm)]">€49,00</div>
+                            <div className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-md)]">/ Monat</div>
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
+                                <li><strong>500 Mbit/s</strong> Down</li>
+                                <li><strong>500 Mbit/s</strong> Up</li>
+                                <li>Public IPv4 Address</li>
+                            </ul>
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Anfragen</Link>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Business */}
+            <Section className="bg-[var(--color-muted)]">
+                <Container className="text-center">
+                    <h2 className="mb-[var(--spacing-md)]">Internet für Unternehmen</h2>
+                    <p className="max-w-2xl mx-auto mb-[var(--spacing-lg)]">
+                        Sie benötigen garantierte Bandbreiten, SLA oder spezielle IP-Konfigurationen?
+                        Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot.
+                    </p>
+                    <Link href="#kontakt" className="btn btn-primary">
+                        Business-Anfrage stellen
+                    </Link>
+                </Container>
+            </Section>
+
+            {/* Contact Anchor */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+                <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Internet bestellen</h2>
+                    <p className="lead text-white mb-[var(--spacing-xl)]">
+                        Wir kümmern uns um die Installation.
+                    </p>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            📞 Anrufen
+                        </a>
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            ✉️ Tarif wählen
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/layout.tsx

@@ -1,5 +1,8 @@
 import type { Metadata, Viewport } from "next";
 import "@/theme/globals.css";
+import "@/theme/stylesheet.css";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
 
 /**
  * Root Layout
@@ -23,8 +26,8 @@ import "@/theme/globals.css";
 // - description: from spec.brand.description
 // - keywords: from spec.seo.primaryKeywords
 export const metadata: Metadata = {
-  title: "Website",
+  title: "TeleNetSystems | Telekom & IT aus Tirol",
-  description: "Generated website",
+  description: "TeleNetSystems - Ihr regionaler Partner für Internet, Fernsehen, Telefonie und IT-Services in Reutte und Umgebung.",
   robots: {
     index: true,
     follow: true,
@@ -32,7 +35,7 @@ export const metadata: Metadata = {
   // Open Graph tags - update based on spec
   openGraph: {
     type: "website",
-    locale: "de_DE",
+    locale: "de_AT",
     // title, description, images will be set per project
   },
 };
@@ -41,7 +44,7 @@ export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   // TODO: Update themeColor from spec.brand.colors.primary or design_tokens
-  themeColor: "#ffffff",
+  themeColor: "#f39210",
 };
 
 /**
@@ -92,7 +95,13 @@ export default function RootLayout({
         Example with smooth scrolling:
         <html lang={locale} className="scroll-smooth">
       */}
-      <body>{children}</body>
+      <body className="flex min-h-screen flex-col">
+        <Header />
+        <div className="flex-1">
+          {children}
+        </div>
+        <Footer />
+      </body>
     </html>
   );
 }

app/leistungen/page.tsx

@@ -0,0 +1,114 @@
+
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "IT-Services & Leistungen | TeleNetSystems",
+    description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
+};
+
+export default function LeistungenPage() {
+    return (
+        <main>
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+                <Container>
+                    <h1 className="mb-[var(--spacing-md)]">
+                        Mehr als nur Kommunikation. <br />
+                        <span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
+                    </h1>
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
+                        Von der Planung bis zur Wartung.
+                    </p>
+                    <Link href="#it-services" className="btn btn-primary btn-lg">
+                        Zu den IT-Services
+                    </Link>
+                </Container>
+            </Section>
+
+            {/* Overview Core Services */}
+            <Section>
+                <Container>
+                    <div className="text-center mb-[var(--spacing-2xl)]">
+                        <h2>Unsere Kernkompetenzen</h2>
+                    </div>
+                    <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
+                            <p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
+                            <Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
+                        </div>
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
+                            <p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
+                            <Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
+                        </div>
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
+                            <p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
+                            <Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* IT Services Detail */}
+            <Section id="it-services" className="bg-[var(--color-muted)]">
+                <Container>
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
+                        <div>
+                            <h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
+                            <div className="space-y-[var(--spacing-xl)]">
+                                <div>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
+                                    <p>
+                                        Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
+                                        Wir sorgen für eine stabile Infrastruktur.
+                                    </p>
+                                </div>
+                                <div>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
+                                    <p>
+                                        Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
+                                        und Antivirus-Software.
+                                    </p>
+                                </div>
+                                <div>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
+                                    <p>
+                                        Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
+                                        Gerne auch per Fernwartung für schnelle Hilfe.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex flex-col gap-[var(--spacing-md)]">
+                            <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
+                                PLACEHOLDER: IT Hardware Image
+                            </div>
+                            <div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
+                                PLACEHOLDER: Server Room Image
+                            </div>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            {/* Contact Anchor */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+                <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">IT-Probleme? Wir helfen.</h2>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            📞 05672 / PLACEHOLDER
+                        </a>
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            ✉️ support@tnr.at
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/page.tsx

@@ -1,12 +1,170 @@
+
+import Link from "next/link";
 import { Container } from "@/components/layout/Container";
 import { Section } from "@/components/layout/Section";
 
-export default function Page() {
+export default function Home() {
   return (
     <main>
+      {/* Hero Section */}
+      <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+        <Container>
+          <h1 className="mb-[var(--spacing-md)]">
+            Ihr Partner für Telekom & IT <br />
+            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
+          </h1>
+          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
+            Regional, persönlich und zuverlässig seit 1976.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+            <Link href="#kontakt" className="btn btn-primary btn-lg">
+              Jetzt beraten lassen
+            </Link>
+            <Link href="/internet" className="btn btn-outline btn-lg">
+              Internet-Tarife prüfen
+            </Link>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Services Section */}
       <Section>
         <Container>
-          <p>Ready</p>
+          <div className="text-center mb-[var(--spacing-2xl)]">
+            <h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
+            <p className="text-[color:var(--color-muted-foreground)]">
+              Alles, was Sie für digitale Kommunikation benötigen.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
+            {/* Internet */}
+            <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)]">Highspeed Internet</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
+              </p>
+              <Link href="/internet" className="btn btn-secondary w-full">
+                Zu den Tarifen
+              </Link>
+            </div>
+
+            {/* Fernsehen */}
+            <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)]">Kabelfernsehen</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
+              </p>
+              <Link href="/fernsehen" className="btn btn-secondary w-full">
+                Sender entdecken
+              </Link>
+            </div>
+
+            {/* Telefonie */}
+            <div className="card text-center transition-transform hover:-translate-y-1">
+              <div className="mb-[var(--spacing-md)] text-4xl">📞</div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
+              </p>
+              <Link href="/telefonie" className="btn btn-secondary w-full">
+                Mehr erfahren
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* IT Services Teaser */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
+            <div>
+              <h2 className="mb-[var(--spacing-md)]">
+                Professionelle IT-Lösungen <br /> für Unternehmen & Privat
+              </h2>
+              <p className="mb-[var(--spacing-lg)]">
+                Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
+                Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
+              </p>
+              <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Netzwerk- und Serverplanung</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Verkauf & Reparatur von Hardware</span>
+                </li>
+              </ul>
+              <Link href="/leistungen" className="btn btn-primary">
+                Zu den IT-Services
+              </Link>
+            </div>
+            <div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
+              {/* Placeholder styled as a media frame */}
+              <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
+                <span className="text-4xl mb-2">📸</span>
+                <span className="font-medium">IT-Service vor Ort</span>
+              </div>
+              <p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
+                Symbolbild: Unser Team bei der Netzwerk-Installation
+              </p>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* USPs / Trust Section */}
+      <Section>
+        <Container>
+          <h2 className="text-center mb-[var(--spacing-2xl)]">Warum TeleNetSystems?</h2>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+            <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)]">1976</div>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Gründung</p>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
+            </div>
+            <div className="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)]">100%</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 */}
+      <Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
+        <Container className="text-center">
+          <h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
+            Noch Fragen? Wir sind für Sie da.
+          </h2>
+          <p className="text-xl mb-[var(--spacing-xl)] opacity-90">
+            Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+            <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+              📞 Anrufen
+            </a>
+            <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+              ✉️ E-Mail schreiben
+            </a>
+          </div>
         </Container>
       </Section>
     </main>

app/telefonie/page.tsx

@@ -0,0 +1,133 @@
+
+import Link from "next/link";
+import { Container } from "@/components/layout/Container";
+import { Section } from "@/components/layout/Section";
+
+export const metadata = {
+    title: "Telefonie Tarife | TeleNetSystems",
+    description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
+};
+
+export default function TelefoniePage() {
+    return (
+        <main>
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+                <Container>
+                    <h1 className="mb-[var(--spacing-md)]">
+                        Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
+                    </h1>
+                    <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>
+                    </div>
+                </Container>
+            </Section>
+
+            <Section className="bg-[var(--color-muted)]">
+                <Container>
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
+                        <div>
+                            <h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
+                            <p className="mb-[var(--spacing-md)]">
+                                Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
+                            </p>
+                            <p className="text-sm text-[color:var(--color-muted-foreground)]">
+                                Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
+                            </p>
+                        </div>
+                        <div className="flex justify-center">
+                            <div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
+                                <div className="text-6xl mb-2">☎️</div>
+                                <div className="font-bold">Ihre Nummer</div>
+                                <div className="text-sm">bleibt gleich.</div>
+                            </div>
+                        </div>
+                    </div>
+                </Container>
+            </Section>
+
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
+                <Container>
+                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
+                            📞 Anrufen
+                        </a>
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
+                            ✉️ E-Mail schreiben
+                        </a>
+                    </div>
+                </Container>
+            </Section>
+        </main>
+    );
+}

app/ueber-uns/page.tsx

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

components/layout/Container.tsx

@@ -1,19 +1,27 @@
 import type { ElementType, ReactNode } from "react";
+import React from "react"; // Added import for React to use React.HTMLAttributes
 
-interface ContainerProps {
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode;
   className?: string;
   as?: ElementType;
+  variant?: "narrow" | "wide"; // Add variant support
 }
 
 export function Container({
   children,
   className = "",
   as: Tag = "div",
+  variant,
+  ...props
 }: ContainerProps) {
+  const variantClass = variant === "narrow" ? "container--narrow" :
+    variant === "wide" ? "container--wide" : "";
+
   return (
     <Tag
-      className={`mx-auto w-full max-w-[var(--container-max-width)] px-[var(--container-padding-x)] ${className}`.trim()}
+      className={`container ${variantClass} ${className}`.trim()}
+      {...props}
     >
       {children}
     </Tag>

components/layout/Footer.tsx

@@ -0,0 +1,54 @@
+
+import Link from "next/link";
+import { Container } from "./Container";
+
+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">
+            <Container>
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
+                    <div className="md:col-span-1">
+                        <Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
+                            TeleNetSystems
+                        </Link>
+                        <p className="text-sm text-[color:var(--color-muted-foreground)]">
+                            Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
+                            <li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
+                            <li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
+                            <li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
+                            <li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
+                            <li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div className="border-t border-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
+                    &copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
+                </div>
+            </Container>
+        </footer>
+    );
+}

components/layout/Header.tsx

@@ -0,0 +1,41 @@
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Container } from "./Container";
+import { Button } from "../ui/Button";
+
+const navLinks = [
+    { href: "/fernsehen", label: "Fernsehen" },
+    { href: "/internet", label: "Internet" },
+    { href: "/telefonie", label: "Telefonie" },
+    { href: "/leistungen", label: "Leistungen" },
+    { href: "/ueber-uns", label: "Über uns" },
+];
+
+export function Header() {
+    return (
+        <header className="border-b border-[color:var(--color-border)] sticky top-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-md">
+            <Container className="flex h-16 items-center justify-between">
+                <Link href="/" className="font-heading text-xl font-bold text-[color:var(--color-primary)]">
+                    TeleNetSystems
+                </Link>
+                <nav className="hidden md:flex gap-6">
+                    {navLinks.map((link) => (
+                        <Link
+                            key={link.href}
+                            href={link.href}
+                            className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
+                        >
+                            {link.label}
+                        </Link>
+                    ))}
+                </nav>
+                <div className="flex items-center gap-4">
+                    <Link href="#kontakt" className="btn btn-primary btn-sm">
+                        Jetzt beraten lassen
+                    </Link>
+                </div>
+            </Container>
+        </header>
+    );
+}

components/layout/Section.tsx

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

components/ui/Button.tsx

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

components/ui/Card.tsx

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

theme/globals.css

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

theme/stylesheet.css

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