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

app/datenschutz/page.tsx

@@ -1,89 +1,52 @@
-import { Metadata } from "next";
-import { Section } from "@/components/layout/Section";
-import { Container } from "@/components/layout/Container";
 
-export const metadata: Metadata = {
+import { Container } from "@/components/layout/Container";
-    title: "Datenschutz",
+import { Section } from "@/components/layout/Section";
-    description: "Datenschutzerklärung der Telenet Systems GmbH",
+
+export const metadata = {
+    title: "Datenschutzerklärung | TeleNetSystems",
 };
 
 export default function DatenschutzPage() {
     return (
         <main>
-            <Section variant="hero" className="bg-[var(--color-muted)]">
-                <Container variant="narrow">
-                    <h1>Datenschutzerklärung</h1>
-                </Container>
-            </Section>
-
             <Section>
-                <Container variant="narrow">
+                <Container className="max-w-3xl">
-                    <div className="prose max-w-none">
+                    <h1 className="mb-[var(--spacing-lg)]">Datenschutzerklärung</h1>
-                        <div className="card mb-[var(--spacing-xl)]">
-                            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
-                                ⚠️ PLATZHALTER – Bitte durch vollständige Datenschutzerklärung ersetzen
-                            </p>
-                            <p className="text-muted text-sm">
-                                Die folgende Datenschutzerklärung ist ein Platzhalter und muss durch eine
-                                rechtlich geprüfte, vollständige Datenschutzerklärung ersetzt werden.
-                            </p>
-                        </div>
 
-                        <h2 className="heading-3">1. Verantwortlicher</h2>
+                    <div className="prose">
-                        <p className="text-muted">
+                        <h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">1. Datenschutz auf einen Blick</h2>
-                            Telenet Systems GmbH<br />
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Allgemeine Hinweise</h3>
-                            PLACEHOLDER: Adresse<br />
+                        <p>
-                            6600 Reutte, Österreich<br />
+                            Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
-                            E-Mail: PLACEHOLDER: E-Mail-Adresse
+                            wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
                         </p>
 
-                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">2. Erhebung und Speicherung personenbezogener Daten</h2>
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenerfassung auf dieser Website</h3>
-                        <p className="text-muted">
+                        <p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
-                            Beim Besuch unserer Website werden automatisch folgende Daten erhoben:
+                        <p>
-                        </p>
+                            Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem
-                        <ul className="stack-sm text-muted">
+                            Impressum dieser Website entnehmen.
-                            <li>IP-Adresse des anfragenden Rechners</li>
-                            <li>Datum und Uhrzeit des Zugriffs</li>
-                            <li>Name und URL der abgerufenen Datei</li>
-                            <li>Website, von der aus der Zugriff erfolgt (Referrer-URL)</li>
-                            <li>Verwendeter Browser und ggf. das Betriebssystem Ihres Rechners</li>
-                        </ul>
-
-                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">3. Kontaktformular</h2>
-                        <p className="text-muted">
-                            Wenn Sie uns über das Kontaktformular kontaktieren, werden die von Ihnen
-                            mitgeteilten Daten (Name, E-Mail-Adresse, Nachricht) zur Bearbeitung Ihrer
-                            Anfrage gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
                         </p>
 
-                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">4. Ihre Rechte</h2>
+                        <h2 className="heading-4 mt-[var(--spacing-md)] mb-[var(--spacing-sm)]">2. Allgemeine Hinweise und Pflichtinformationen</h2>
-                        <p className="text-muted">
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Datenschutz</h3>
-                            Sie haben das Recht:
+                        <p>
-                        </p>
+                            Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
-                        <ul className="stack-sm text-muted">
+                            vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
-                            <li>Auskunft über Ihre bei uns gespeicherten Daten zu erhalten</li>
-                            <li>Berichtigung unrichtiger Daten zu verlangen</li>
-                            <li>Löschung Ihrer Daten zu verlangen</li>
-                            <li>Die Verarbeitung einzuschränken</li>
-                            <li>Der Verarbeitung zu widersprechen</li>
-                            <li>Datenübertragbarkeit zu verlangen</li>
-                        </ul>
-
-                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">5. Cookies</h2>
-                        <p className="text-muted">
-                            Diese Website verwendet technisch notwendige Cookies, die für den Betrieb
-                            der Website erforderlich sind. Eine weitergehende Nutzung von Cookies erfolgt
-                            nur mit Ihrer ausdrücklichen Einwilligung.
                         </p>
 
-                        <h2 className="heading-3 mt-[var(--spacing-2xl)]">6. Änderung dieser Datenschutzerklärung</h2>
+                        <h3 className="heading-5 mt-[var(--spacing-sm)] mb-[var(--spacing-xs)]">Hinweis zur verantwortlichen Stelle</h3>
-                        <p className="text-muted">
+                        <p>
-                            Wir behalten uns vor, diese Datenschutzerklärung bei Bedarf anzupassen,
+                            Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:
-                            damit sie stets den aktuellen rechtlichen Anforderungen entspricht.
                         </p>
-
+                        <p className="mt-[var(--spacing-xs)]">
-                        <p className="text-sm text-muted mt-[var(--spacing-2xl)]">
+                            PLACEHOLDER: technical.legal.datenschutz.companyName<br />
-                            Stand: Februar 2026
+                            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>

app/fernsehen/page.tsx

@@ -1,182 +1,127 @@
-import { Metadata } from "next";
+
 import Link from "next/link";
-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";
+import { Section } from "@/components/layout/Section";
 
-export const metadata: Metadata = {
+export const metadata = {
-    title: "Fernsehen",
+    title: "Kabelfernsehen | TeleNetSystems",
-    description:
+    description: "Erleben Sie über 200 TV-Programme, 40 HDTV-Sender und beste Bildqualität mit TeleNetSystems in Reutte.",
-        "Über 200 TV-Programme inkl. 40 HDTV-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 Section */}
+            {/* Hero */}
-            <Section variant="hero" className="bg-[var(--color-muted)]">
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
                 <Container>
-                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <h1 className="mb-[var(--spacing-md)]">
-                        <div className="max-w-xl">
+                        Fernsehen <span className="text-[color:var(--color-primary)]">neu erleben</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>
-                                <Tv size={32} className="text-[var(--color-background)]" />
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                            </div>
+                        Brillante Bildqualität, riesige Sendervielfalt und kristallklarer Sound.
-                            <h1 className="mb-[var(--spacing-lg)]">
+                        Holen Sie sich das Kino-Feeling direkt in Ihr Wohnzimmer.
-                                Fernsehen in
+                    </p>
-                                <span className="text-[var(--color-primary)]"> bester Qualität</span>
+                    <Link href="#kontakt" className="btn btn-primary btn-lg">
-                            </h1>
+                        Jetzt anschließen lassen
-                            <p className="lead mb-[var(--spacing-2xl)]">
+                    </Link>
-                                Genießen Sie über 200 TV-Programme inkl. 40 HDTV-Sendern –
-                                direkt über das Kabelnetz von TeleNetSystems.
-                            </p>
-                            <Link href="/kontakt" className="btn btn-primary btn-lg">
-                                Jetzt beraten lassen
-                            </Link>
-                        </div>
-                        <div className="relative">
-                            <Image
-                                src="/images/hero/tv-header-44c1e07b.jpg"
-                                alt="Familie schaut gemütlich fern"
-                                width={800}
-                                height={600}
-                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
-                                priority
-                            />
-                        </div>
-                    </div>
                 </Container>
             </Section>
 
-            {/* Trust Elements */}
+            {/* Main Benefit */}
-            <Section variant="sm" className="bg-[var(--color-background)] border-b border-[var(--color-border)]">
-                <Container>
-                    <div className="flex flex-wrap justify-center gap-[var(--spacing-xl)]">
-                        {tvFeatures.slice(0, 4).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>
-
-            {/* 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>
-                        <div className="card text-center">
-                            <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>
-                        <Link href="/kontakt" className="btn btn-primary">
-                            Individuelle Lösung anfragen
-                            <ArrowRight size={18} />
-                        </Link>
-                    </div>
-                </Container>
-            </Section>
-
-            {/* Pay TV Section */}
             <Section>
                 <Container>
-                    <div className="max-w-3xl mx-auto text-center">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
-                        <h2 className="mb-[var(--spacing-lg)]">Pay-TV</h2>
+                        <div>
-                        <p className="text-muted mb-[var(--spacing-xl)]">
+                            <h2 className="mb-[var(--spacing-md)]">Unterhaltung ohne Grenzen</h2>
-                            Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an.
+                            <p className="mb-[var(--spacing-lg)]">
-                            Sie möchten exklusive Filme, Serien und Sport in HD oder UHD?
+                                Mit unserem Kabelanschluss erhalten Sie Zugang zu einer riesigen Welt der Unterhaltung.
-                            Kontaktieren Sie uns einfach und wir finden das passende Angebot für Sie.
+                                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>
-                        <Link href="/kontakt" className="btn btn-outline">
+                        <ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] max-w-xs mx-auto">
-                            Pay-TV anfragen
+                            <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>
 
-            {/* CTA Section */}
+            {/* Business & Pay TV */}
-            <Section className="bg-[var(--color-primary)]">
+            <Section>
                 <Container>
-                    <div className="text-center text-[var(--color-background)]">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] text-center">
-                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+                        <div>
-                            Interesse an unserem TV-Angebot?
+                            <h3 className="mb-[var(--spacing-md)]">Für Unternehmen (TV Business)</h3>
-                        </h2>
+                            <p className="mb-[var(--spacing-md)]">
-                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                                Hotel, Krankenhaus oder Büro? Wir bieten maßgeschneiderte TV-Lösungen für Ihren Betrieb.
-                            Wir beraten Sie gerne persönlich und finden die passende Lösung für Sie.
+                            </p>
-                        </p>
+                            <Link href="#kontakt" className="btn btn-outline">
-                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                                Individuelles Angebot anfragen
-                            <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"
-                            >
-                                <Phone size={18} />
-                                PLACEHOLDER: Telefon
-                            </a>
                         </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>

app/impressum/page.tsx

@@ -1,106 +1,50 @@
-import { Metadata } from "next";
-import { Section } from "@/components/layout/Section";
-import { Container } from "@/components/layout/Container";
 
-export const metadata: Metadata = {
+import { Container } from "@/components/layout/Container";
-    title: "Impressum",
+import { Section } from "@/components/layout/Section";
-    description: "Impressum der Telenet Systems GmbH",
+
+export const metadata = {
+    title: "Impressum | TeleNetSystems",
 };
 
 export default function ImpressumPage() {
     return (
         <main>
-            <Section variant="hero" className="bg-[var(--color-muted)]">
-                <Container variant="narrow">
-                    <h1>Impressum</h1>
-                </Container>
-            </Section>
-
             <Section>
-                <Container variant="narrow">
+                <Container className="max-w-3xl">
-                    <div className="prose max-w-none">
+                    <h1 className="mb-[var(--spacing-lg)]">Impressum</h1>
-                        <h2 className="heading-3">Angaben gemäß § 5 ECG</h2>
 
-                        <div className="card mb-[var(--spacing-xl)]">
+                    <div className="prose">
-                            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-sm)]">
+                        <p><strong>Angaben gemäß § 5 TMG:</strong></p>
-                                ⚠️ PLATZHALTER – Bitte durch echte Daten ersetzen
+                        <p>
-                            </p>
+                            PLACEHOLDER: technical.legal.impressum.companyName<br />
-                            <p className="text-muted text-sm">
+                            PLACEHOLDER: technical.legal.impressum.street<br />
-                                Die folgenden Angaben sind Platzhalter und müssen durch die korrekten
+                            PLACEHOLDER: technical.legal.impressum.postalCode PLACEHOLDER: technical.legal.impressum.city<br />
-                                Unternehmensdaten ersetzt werden.
+                            PLACEHOLDER: technical.legal.impressum.country
-                            </p>
-                        </div>
-
-                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensbezeichnung</h3>
-                        <p className="text-muted">
-                            Telenet Systems GmbH<br />
-                            PLACEHOLDER: Straße und Hausnummer<br />
-                            6600 Reutte<br />
-                            Österreich
                         </p>
 
-                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Kontakt</h3>
+                        <p className="mt-[var(--spacing-md)]"><strong>Kontakt:</strong></p>
-                        <p className="text-muted">
+                        <p>
-                            Telefon: PLACEHOLDER: Telefonnummer<br />
+                            Telefon: PLACEHOLDER: technical.legal.impressum.phone<br />
-                            E-Mail: PLACEHOLDER: E-Mail-Adresse<br />
+                            E-Mail: PLACEHOLDER: technical.legal.impressum.email
-                            Website: https://www.tnr.at
                         </p>
 
-                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Unternehmensgegenstand</h3>
+                        <p className="mt-[var(--spacing-md)]"><strong>Registereintrag:</strong></p>
-                        <p className="text-muted">
+                        <p>
-                            Telekommunikationsdienstleistungen und IT-Services
+                            Eintragung im Handelsregister.<br />
+                            Registergericht: PLACEHOLDER<br />
+                            Registernummer: PLACEHOLDER: technical.legal.impressum.register
                         </p>
 
-                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchnummer</h3>
+                        <p className="mt-[var(--spacing-md)]"><strong>Umsatzsteuer:</strong></p>
-                        <p className="text-muted">
+                        <p>
-                            PLACEHOLDER: FN XXXXXX x
+                            Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br />
+                            PLACEHOLDER: technical.legal.impressum.vatId
                         </p>
 
-                        <h3 className="heading-4 mt-[var(--spacing-xl)]">Firmenbuchgericht</h3>
+                        <p className="mt-[var(--spacing-md)]"><strong>Streitschlichtung</strong></p>
-                        <p className="text-muted">
+                        <p>
-                            PLACEHOLDER: Landesgericht Innsbruck
+                            Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.<br />
-                        </p>
+                            Unsere E-Mail-Adresse finden Sie oben im Impressum.
-
-                        <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,282 +1,221 @@
-import { Metadata } from "next";
+
 import Link from "next/link";
-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";
+import { Section } from "@/components/layout/Section";
 
-export const metadata: Metadata = {
+export const metadata = {
-    title: "Internet",
+    title: "Highspeed Internet | TeleNetSystems",
-    description:
+    description: "Surfen Sie mit bis zu 500 Mbit/s in Reutte. Faire Tarife für Kabel und Glasfaser für Privat und Business.",
-        "Highspeed-Internet über Kabel 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>
-            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <h1 className="mb-[var(--spacing-md)]">
-                        <div className="max-w-xl">
+                        Highspeed Internet <span className="text-[color:var(--color-primary)]">für Tirol</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>
-                                <Wifi size={32} className="text-[var(--color-background)]" />
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                            </div>
+                        Stabil, extrem schnell und ohne versteckte Kosten. Wir bringen die Welt zu Ihnen nach Hause.
-                            <h1 className="mb-[var(--spacing-lg)]">
-                                Highspeed-Internet
-                                <span className="text-[var(--color-primary)]"> für Tirol</span>
-                            </h1>
-                            <p className="lead mb-[var(--spacing-2xl)]">
-                                Schnelles und zuverlässiges Internet über Kabel oder Glasfaser.
-                                Flexible Tarife ohne Servicepauschale – für Privat- und Geschäftskunden.
-                            </p>
-                            <Link href="/kontakt" className="btn btn-primary btn-lg">
-                                Jetzt beraten lassen
-                            </Link>
-                        </div>
-                        <div className="relative">
-                            <Image
-                                src="/images/hero/internet-header-431619ac.jpg"
-                                alt="Highspeed Internet Verbindung"
-                                width={800}
-                                height={600}
-                                className="rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)]"
-                                priority
-                            />
-                        </div>
-                    </div>
-                </Container>
-            </Section>
-
-            {/* 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>
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-            </Section>
+                        <Link href="#kabel" className="btn btn-primary">
-
+                            Kabel-Tarife
-            {/* Glasfaser-Internet Section */}
+                        </Link>
-            <Section id="glasfaser" className="bg-[var(--color-muted)]">
+                        <Link href="#glasfaser" className="btn btn-secondary">
-                <Container>
+                            Glasfaser-Tarife
-                    <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>
-                    <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)]">
-                            Business-Internet
-                        </h2>
-                        <p className="text-muted mb-[var(--spacing-xl)]">
-                            Gerne erstellen wir für Ihr Unternehmen ein maßgeschneidertes Business-Internet-Angebot
-                            inkl. passendem Service-Paket. Schicken Sie uns einfach Ihre Anfrage.
-                        </p>
-                        <Link href="/kontakt" className="btn btn-primary">
-                            Individuelle Lösung anfragen
-                            <ArrowRight size={18} />
                         </Link>
                     </div>
                 </Container>
             </Section>
 
-            {/* CTA Section */}
+            {/* Intro Info */}
-            <Section className="bg-[var(--color-primary)]">
+            <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>
-                    <div className="text-center text-[var(--color-background)]">
+                    <h2 className="text-center mb-[var(--spacing-sm)]">Kabel-Internet Tarife</h2>
-                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+                    <p className="text-center mb-[var(--spacing-2xl)] text-[color:var(--color-muted-foreground)]">
-                            Welcher Tarif passt zu Ihnen?
+                        Verfügbar überall dort, wo Sie unseren Kabelanschluss haben. (Gültig ab 01.05.2024)
-                        </h2>
+                    </p>
-                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+
-                            Wir beraten Sie gerne und finden die beste Lösung für Ihre Anforderungen.
+                    <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-[var(--spacing-md)]">
-                        </p>
+                        {/* Hit */}
-                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        <div className="card flex flex-col items-center bg-white">
-                            <Link
+                            <h3 className="text-xl font-bold mb-[var(--spacing-xs)]">hit</h3>
-                                href="/kontakt"
+                            <div className="text-3xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)]">€14,50</div>
-                                className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
+                            <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>
-                                Jetzt beraten lassen
+                            <ul className="text-sm space-y-[var(--spacing-xs)] flex-1 mb-[var(--spacing-md)] text-center">
-                            </Link>
+                                <li><strong>40 Mbit/s</strong> Down</li>
-                            <a
+                                <li><strong>6 Mbit/s</strong> Up</li>
-                                href="tel:+43567612345"
+                                <li>Daten: Unlimitiert</li>
-                                className="btn border-2 border-[var(--color-background)] text-[var(--color-background)] hover:bg-[var(--color-background)]/10"
+                            </ul>
-                            >
+                            <Link href="#kontakt" className="btn btn-outline btn-sm w-full">Bestellen</Link>
-                                <Phone size={18} />
-                                PLACEHOLDER: Telefon
-                            </a>
                         </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>

app/layout.tsx

@@ -1,62 +1,105 @@
 import type { Metadata, Viewport } from "next";
-import { Inter } from "next/font/google";
-import { Header } from "@/components/layout/Header";
-import { Footer } from "@/components/layout/Footer";
 import "@/theme/globals.css";
 import "@/theme/stylesheet.css";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
 
-const inter = Inter({
+/**
-  subsets: ["latin"],
+ * Root Layout
-  variable: "--font-inter",
+ *
-  display: "swap",
+ * This layout is designed to work with the 9-category parameter system.
-});
+ * It supports:
+ * - Dynamic locale (from spec.client.locale or content.defaultLanguage)
+ * - Google Fonts loading (from spec.brand.fonts)
+ * - Scroll behavior (from spec.interaction.scrollBehavior)
+ * - Meta tags for SEO
+ *
+ * CUSTOMIZATION INSTRUCTIONS:
+ * 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
+ * 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
+ * 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
+ * 4. Update metadata based on spec.brand and spec.seo
+ */
 
+// TODO: Update these values based on ProjectSpec.json
+// - title: from spec.brand.name or spec.meta.projectName
+// - description: from spec.brand.description
+// - keywords: from spec.seo.primaryKeywords
 export const metadata: Metadata = {
-  title: {
+  title: "TeleNetSystems | Telekom & IT aus Tirol",
-    default: "TeleNetSystems | Telekom & IT aus Tirol",
+  description: "TeleNetSystems - Ihr regionaler Partner für Internet, Fernsehen, Telefonie und IT-Services in Reutte und Umgebung.",
-    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",
-    siteName: "TeleNetSystems",
+    // title, description, images will be set per project
-    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="de-AT" className={inter.variable}>
+    <html lang={locale}>
-      <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 />
-        {children}
+        <div className="flex-1">
+          {children}
+        </div>
         <Footer />
       </body>
     </html>

app/leistungen/page.tsx

@@ -1,234 +1,111 @@
-import { Metadata } from "next";
+
 import Link from "next/link";
-import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
-import {
+import { Section } from "@/components/layout/Section";
-    Tv,
-    Wifi,
-    Phone,
-    Server,
-    Wrench,
-    MonitorSmartphone,
-    Cable,
-    Shield,
-    ArrowRight
-} from "lucide-react";
 
-export const metadata: Metadata = {
+export const metadata = {
-    title: "Leistungen",
+    title: "IT-Services & Leistungen | TeleNetSystems",
-    description:
+    description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
-        "Umfassende Telekom- und IT-Services 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>
-            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="max-w-3xl">
+                    <h1 className="mb-[var(--spacing-md)]">
-                        <h1 className="mb-[var(--spacing-lg)]">
+                        Mehr als nur Kommunikation. <br />
-                            Alle Leistungen
+                        <span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
-                            <span className="text-[var(--color-primary)]"> im Überblick</span>
+                    </h1>
-                        </h1>
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                        <p className="lead mb-[var(--spacing-2xl)]">
+                        Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
-                            Von Fernsehen über Internet bis zu IT-Services –
+                        Von der Planung bis zur Wartung.
-                            wir bieten Ihnen umfassende Lösungen aus einer Hand.
+                    </p>
-                        </p>
+                    <Link href="#it-services" className="btn btn-primary btn-lg">
-                        <Link href="/kontakt" className="btn btn-primary btn-lg">
+                        Zu den IT-Services
-                            Jetzt beraten lassen
+                    </Link>
-                        </Link>
-                    </div>
                 </Container>
             </Section>
 
-            {/* Telekom Services */}
+            {/* Overview Core Services */}
             <Section>
                 <Container>
-                    <div className="text-center mb-[var(--spacing-3xl)]">
+                    <div className="text-center mb-[var(--spacing-2xl)]">
-                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                        <h2>Unsere Kernkompetenzen</h2>
-                            Telekommunikation
-                        </span>
-                        <h2 className="mt-[var(--spacing-sm)]">Fernsehen, Internet & Telefonie</h2>
                     </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)]">
-                        {mainServices.map((service) => (
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                            <Link
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
-                                key={service.title}
+                            <p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
-                                href={service.href}
+                            <Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                                className="card group hover:shadow-lg transition-shadow hover:no-underline"
+                        </div>
-                            >
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                                <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">
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
-                                    <service.icon
+                            <p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
-                                        size={24}
+                            <Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                                        className="text-[var(--color-primary)] group-hover:text-[var(--color-background)] transition-colors"
+                        </div>
-                                    />
+                        <div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
-                                </div>
+                            <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
-                                <h3 className="heading-4 mb-[var(--spacing-sm)] text-[var(--color-foreground)]">
+                            <p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
-                                    {service.title}
+                            <Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
-                                </h3>
+                        </div>
-                                <p className="text-muted mb-[var(--spacing-md)]">
-                                    {service.description}
-                                </p>
-                                <span className="inline-flex items-center gap-[var(--spacing-xs)] text-[var(--color-primary)] font-medium">
-                                    Mehr erfahren
-                                    <ArrowRight size={16} />
-                                </span>
-                            </Link>
-                        ))}
                     </div>
                 </Container>
             </Section>
 
-            {/* IT Services */}
+            {/* IT Services Detail */}
-            <Section className="bg-[var(--color-muted)]">
+            <Section id="it-services" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="text-center mb-[var(--spacing-3xl)]">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
-                        <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>
-                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            <h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
-                                Für Unternehmen
+                            <div className="space-y-[var(--spacing-xl)]">
-                            </span>
+                                <div>
-                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
-                                Maßgeschneiderte Lösungen
+                                    <p>
-                            </h2>
+                                        Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
-                            <p className="text-muted mb-[var(--spacing-lg)]">
+                                        Wir sorgen für eine stabile Infrastruktur.
-                                Sie benötigen eine individuelle Lösung für Ihr Unternehmen?
+                                    </p>
-                                Wir analysieren Ihre Anforderungen und erstellen ein maßgeschneidertes Angebot –
+                                </div>
-                                von der Telekommunikation bis zur kompletten IT-Infrastruktur.
+                                <div>
-                            </p>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
-                            <ul className="stack-sm mb-[var(--spacing-xl)]">
+                                    <p>
-                                <li className="flex items-start gap-[var(--spacing-sm)]">
+                                        Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
-                                    <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>
+                                        und Antivirus-Software.
-                                    <span>Bedarfsanalyse vor Ort</span>
+                                    </p>
-                                </li>
+                                </div>
-                                <li className="flex items-start gap-[var(--spacing-sm)]">
+                                <div>
-                                    <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>
+                                    <h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
-                                    <span>Individuelles Angebot</span>
+                                    <p>
-                                </li>
+                                        Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
-                                <li className="flex items-start gap-[var(--spacing-sm)]">
+                                        Gerne auch per Fernwartung für schnelle Hilfe.
-                                    <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>
+                                    </p>
-                                    <span>Professionelle Umsetzung</span>
+                                </div>
-                                </li>
+                            </div>
-                                <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="bg-[var(--color-muted)] rounded-[var(--radius-lg)] p-[var(--spacing-2xl)] text-center">
+                        <div className="flex flex-col gap-[var(--spacing-md)]">
-                            <p className="text-6xl font-bold text-[var(--color-primary)] mb-[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)]">
-                                50
+                                PLACEHOLDER: IT Hardware Image
-                            </p>
+                            </div>
-                            <p className="text-xl font-semibold mb-[var(--spacing-sm)]">Jahre Erfahrung</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-muted">
+                                PLACEHOLDER: Server Room Image
-                                Seit 1976 sind wir Ihr zuverlässiger Partner für Telekommunikation und IT in Tirol.
+                            </div>
-                            </p>
                         </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* CTA Section */}
+            {/* Contact Anchor */}
-            <Section className="bg-[var(--color-primary)]">
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
                 <Container>
-                    <div className="text-center text-[var(--color-background)]">
+                    <h2 className="text-white mb-[var(--spacing-md)]">IT-Probleme? Wir helfen.</h2>
-                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                            Haben Sie Fragen zu unseren Leistungen?
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-                        </h2>
+                            📞 05672 / PLACEHOLDER
-                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        </a>
-                            Kontaktieren Sie uns für eine unverbindliche Beratung.
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-                            Wir finden gemeinsam die passende Lösung.
+                            ✉️ support@tnr.at
-                        </p>
+                        </a>
-                        <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,221 +1,169 @@
-import { Metadata } from "next";
+
 import Link from "next/link";
-import Image from "next/image";
-import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
-import {
+import { Section } from "@/components/layout/Section";
-  Tv,
-  Wifi,
-  Phone,
-  MapPin,
-  Clock,
-  Users,
-  Shield,
-  Award,
-  ArrowRight
-} from "lucide-react";
 
-export const metadata: Metadata = {
+export default function Home() {
-  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)]">
+      <Section variant="hero" className="bg-[var(--color-muted)] text-center">
         <Container>
-          <div className="max-w-3xl">
+          <h1 className="mb-[var(--spacing-md)]">
-            <p className="text-[var(--color-primary)] font-medium mb-[var(--spacing-md)]">
+            Ihr Partner für Telekom & IT <br />
-              Ihr Telekom- und IT-Partner in Tirol
+            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
-            </p>
+          </h1>
-            <h1 className="mb-[var(--spacing-lg)]">
+          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Zuverlässige Technik.
+            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
-              <br />
+            Regional, persönlich und zuverlässig seit 1976.
-              <span className="text-[var(--color-primary)]">Persönlicher Service.</span>
+          </p>
-            </h1>
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-            <p className="lead mb-[var(--spacing-2xl)] max-w-2xl">
+            <Link href="#kontakt" className="btn btn-primary btn-lg">
-              Fernsehen, Internet und Telefonie aus einer Hand –
+              Jetzt beraten lassen
-              direkt aus Reutte für den Bezirk und die Region.
+            </Link>
-              Mit persönlicher Beratung und schnellem Support.
+            <Link href="/internet" className="btn btn-outline btn-lg">
-            </p>
+              Internet-Tarife prüfen
-            <div className="flex flex-col sm:flex-row gap-[var(--spacing-md)]">
+            </Link>
-              <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 id="leistungen">
+      <Section>
         <Container>
-          <div className="text-center mb-[var(--spacing-3xl)]">
+          <div className="text-center mb-[var(--spacing-2xl)]">
-            <h2 className="mb-[var(--spacing-md)]">Unsere Leistungen</h2>
+            <h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
-            <p className="lead max-w-2xl mx-auto">
+            <p className="text-[color:var(--color-muted-foreground)]">
-              Von Fernsehen über Internet bis zur Telefonie –
+              Alles, was Sie für digitale Kommunikation benötigen.
-              wir bieten Ihnen alles aus einer Hand.
             </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-xl)]">
+
-            {services.map((service) => (
+          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
-              <article key={service.title} className="card group">
+            {/* Internet */}
-                <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="card text-center transition-transform hover:-translate-y-1">
-                  <service.icon size={24} className="text-[var(--color-primary)]" />
+              <div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
-                </div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
-                <h3 className="heading-4 mb-[var(--spacing-sm)]">{service.title}</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                <p className="text-muted mb-[var(--spacing-md)]">
+                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
-                  {service.description}
+              </p>
-                </p>
+              <Link href="/internet" className="btn btn-secondary w-full">
-                <p className="font-semibold text-[var(--color-primary)] mb-[var(--spacing-lg)]">
+                Zu den Tarifen
-                  {service.price}
+              </Link>
-                </p>
+            </div>
-                <Link
+
-                  href={service.href}
+            {/* Fernsehen */}
-                  className="btn btn-ghost justify-start p-0 hover:text-[var(--color-primary)]"
+            <div className="card text-center transition-transform hover:-translate-y-1">
-                >
+              <div className="mb-[var(--spacing-md)] text-4xl">📺</div>
-                  Mehr erfahren
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
-                  <ArrowRight size={16} />
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
-                </Link>
+                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
-              </article>
+              </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>
 
-      {/* USP Section */}
+      {/* IT Services Teaser */}
       <Section className="bg-[var(--color-muted)]">
         <Container>
-          <div className="text-center mb-[var(--spacing-3xl)]">
+          <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
-            <h2 className="mb-[var(--spacing-md)]">Warum TeleNetSystems?</h2>
+            <div>
-            <p className="lead max-w-2xl mx-auto">
+              <h2 className="mb-[var(--spacing-md)]">
-              Wir sind kein anonymer Großkonzern – sondern Ihr Partner vor Ort.
+                Professionelle IT-Lösungen <br /> für Unternehmen & Privat
-            </p>
+              </h2>
-          </div>
+              <p className="mb-[var(--spacing-lg)]">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+                Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
-            {usps.map((usp) => (
+                Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
-              <div key={usp.title} className="text-center">
+              </p>
-                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
+              <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
-                  <usp.icon size={24} className="text-[var(--color-background)]" />
+                <li className="flex items-center gap-[var(--spacing-sm)]">
-                </div>
+                  ✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
-                <h3 className="heading-5 mb-[var(--spacing-sm)]">{usp.title}</h3>
+                </li>
-                <p className="text-sm text-muted">{usp.description}</p>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
-              </div>
+                  ✅ <span>Netzwerk- und Serverplanung</span>
-            ))}
+                </li>
-          </div>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
-        </Container>
+                  ✅ <span>Verkauf & Reparatur von Hardware</span>
-      </Section>
+                </li>
-
+              </ul>
-      {/* Trust Section */}
+              <Link href="/leistungen" className="btn btn-primary">
-      <Section variant="sm">
+                Zu den IT-Services
-        <Container>
-          <div className="flex flex-wrap justify-center gap-[var(--spacing-2xl)] items-center">
-            {trustElements.map((item) => (
-              <div
-                key={item.text}
-                className="flex items-center gap-[var(--spacing-sm)] text-[var(--color-muted-foreground)]"
-              >
-                <item.icon size={20} className="text-[var(--color-primary)]" />
-                <span className="text-sm font-medium">{item.text}</span>
-              </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)]">
-              Bereit für zuverlässige Technik?
-            </h2>
-            <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-              Kontaktieren Sie uns für eine unverbindliche Beratung.
-              Wir finden die passende Lösung für Sie.
-            </p>
-            <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"
-              >
-                <Phone size={18} />
-                PLACEHOLDER: Telefon
-              </a>
             </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>

app/telefonie/page.tsx

@@ -1,164 +1,130 @@
-import { Metadata } from "next";
+
 import Link from "next/link";
-import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
-import { Phone as PhoneIcon, Check, ArrowRight } from "lucide-react";
+import { Section } from "@/components/layout/Section";
 
-export const metadata: Metadata = {
+export const metadata = {
-    title: "Telefonie",
+    title: "Telefonie Tarife | TeleNetSystems",
-    description:
+    description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
-        "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>
-            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="max-w-3xl">
+                    <h1 className="mb-[var(--spacing-md)]">
-                        <div className="w-16 h-16 rounded-[var(--radius-lg)] bg-[var(--color-primary)] flex items-center justify-center mb-[var(--spacing-lg)]">
+                        Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
-                            <PhoneIcon size={32} className="text-[var(--color-background)]" />
+                    </h1>
-                        </div>
+                    <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
-                        <h1 className="mb-[var(--spacing-lg)]">
+                        Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
-                            Telefonie
+                        Ideal als Ergänzung zu Ihrem Internet-Paket.
-                            <span className="text-[var(--color-primary)]"> ohne Kompromisse</span>
+                    </p>
-                        </h1>
+                    <Link href="#tarife" className="btn btn-primary btn-lg">
-                        <p className="lead mb-[var(--spacing-2xl)]">
+                        Tarife ansehen
-                            Flexible Telefonie-Tarife für Ihr Festnetz.
+                    </Link>
-                            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 id="tarife">
-            <Section>
                 <Container>
-                    <div className="text-center mb-[var(--spacing-3xl)]">
+                    <div className="text-center mb-[var(--spacing-2xl)]">
-                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                        <h2>Unsere Telefonie-Tarife</h2>
-                            Kabel-Telefonie-Tarife
+                        <p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
-                        </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 className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
-                            <div
+                        {/* Zero (With Internet) */}
-                                key={`${tarif.name}-${index}`}
+                        <div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
-                                className={`card text-center ${tarif.highlight ? "ring-2 ring-[var(--color-primary)]" : ""}`}
+                            <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>
-                                {tarif.highlight && (
+                            <p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
-                                    <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)]">
+                            <div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
-                                        Empfohlen
+                                € 0,00
-                                    </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>
-                        ))}
+                            <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>
 
-            {/* Info Section */}
             <Section className="bg-[var(--color-muted)]">
-                <Container variant="narrow">
+                <Container>
-                    <div className="text-center">
+                    <div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
-                        <h2 className="mb-[var(--spacing-lg)]">So funktioniert es</h2>
+                        <div>
-                        <div className="stack-lg text-left">
+                            <h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
-                            <div className="card">
+                            <p className="mb-[var(--spacing-md)]">
-                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie mit Telenet-Internet</h3>
+                                Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
-                                <p className="text-muted">
+                            </p>
-                                    Wenn Sie bereits Internet von TeleNetSystems nutzen, können Sie unsere Telefonie
+                            <p className="text-sm text-[color:var(--color-muted-foreground)]">
-                                    kostenlos hinzubuchen. Sie zahlen nur die tatsächlich geführten Gespräche nach Minutenpreis.
+                                Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
-                                </p>
+                            </p>
-                            </div>
+                        </div>
-                            <div className="card">
+                        <div className="flex justify-center">
-                                <h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie ohne Internet</h3>
+                            <div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
-                                <p className="text-muted">
+                                <div className="text-6xl mb-2">☎️</div>
-                                    Sie möchten nur Telefonie ohne Internet? Kein Problem.
+                                <div className="font-bold">Ihre Nummer</div>
-                                    Für nur € 5,00 pro Monat erhalten Sie einen Festnetzanschluss mit günstigen Minutenpreisen.
+                                <div className="text-sm">bleibt gleich.</div>
-                                </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>
 
-            {/* CTA Section */}
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
-            <Section className="bg-[var(--color-primary)]">
                 <Container>
-                    <div className="text-center text-[var(--color-background)]">
+                    <h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</h2>
-                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                            Fragen zu unseren Telefonie-Tarifen?
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-                        </h2>
+                            📞 Anrufen
-                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        </a>
-                            Wir beraten Sie gerne und finden die passende Lösung für Ihre Anforderungen.
+                        <a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
-                        </p>
+                            ✉️ E-Mail schreiben
-                        <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+                        </a>
-                            <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,200 +1,79 @@
-import { Metadata } from "next";
+
 import Link from "next/link";
-import { Section } from "@/components/layout/Section";
 import { Container } from "@/components/layout/Container";
-import { MapPin, Clock, Users, Heart, Shield, ArrowRight } from "lucide-react";
+import { Section } from "@/components/layout/Section";
 
-export const metadata: Metadata = {
+export const metadata = {
-    title: "Über uns",
+    title: "Über uns | TeleNetSystems",
-    description:
+    description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
-        "Lernen Sie TeleNetSystems kennen – Ihr regionaler Telekom- und IT-Partner in Tirol seit 1976.",
 };
 
-const values = [
-    {
-        icon: Heart,
-        title: "Persönlich",
-        description: "Wir sind kein anonymer Konzern. Bei uns bekommen Sie echte Ansprechpartner.",
-    },
-    {
-        icon: MapPin,
-        title: "Regional",
-        description: "In Reutte verwurzelt, für die Region da. Wir kennen Land und Leute.",
-    },
-    {
-        icon: Shield,
-        title: "Zuverlässig",
-        description: "Stabile Technik, bewährte Lösungen, transparente Kommunikation.",
-    },
-    {
-        icon: Clock,
-        title: "Schnell",
-        description: "Bei Problemen sind wir schnell zur Stelle – ohne lange Warteschleifen.",
-    },
-];
-
-const milestones = [
-    { year: "1976", text: "Gründung als regionaler Telekom-Anbieter" },
-    { year: "1990er", text: "Ausbau des Kabelnetzes in Reutte und Umgebung" },
-    { year: "2000er", text: "Einführung von Highspeed-Internet" },
-    { year: "2010er", text: "Erweiterung um IT-Dienstleistungen" },
-    { year: "Heute", text: "Ihr verlässlicher Partner für Telekom & IT" },
-];
-
 export default function UeberUnsPage() {
     return (
         <main>
-            {/* Hero Section */}
+            <Section variant="hero" className="bg-[var(--color-muted)] text-center">
-            <Section variant="hero" className="bg-[var(--color-muted)]">
                 <Container>
-                    <div className="max-w-3xl">
+                    <h1 className="mb-[var(--spacing-md)]">
-                        <h1 className="mb-[var(--spacing-lg)]">
+                        Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
-                            Wir sind
+                    </h1>
-                            <span className="text-[var(--color-primary)]"> TeleNetSystems</span>
+                    <p className="lead max-w-2xl mx-auto">
-                        </h1>
+                        Seit 1976 verbinden wir Menschen in der Region Reutte.
-                        <p className="lead mb-[var(--spacing-2xl)]">
+                    </p>
-                            Ihr regionaler Telekom- und IT-Partner in Tirol.
-                            Seit 1976 verbinden wir Menschen – mit zuverlässiger Technik, ehrlicher Beratung und persönlichem Service.
-                        </p>
-                    </div>
                 </Container>
             </Section>
 
-            {/* Story Section */}
             <Section>
                 <Container>
-                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
+                    <div 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>
-                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
+                            <h2 className="mb-[var(--spacing-md)]">Unsere Philosophie</h2>
-                                Unsere Geschichte
+                            <p className="mb-[var(--spacing-md)]">
-                            </span>
+                                Wir sind kein anonymer Konzern mit Call-Center im Ausland. Wir sind Ihre Nachbarn.
-                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
+                                Unsere Mitarbeiter leben in der Region und kennen die Anforderungen vor Ort.
-                                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 className="stack-md">
+                        <div>
-                            {milestones.map((milestone) => (
+                            <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
-                                <div key={milestone.year} className="flex items-start gap-[var(--spacing-md)]">
+                                PLACEHOLDER: Team Image
-                                    <span className="text-[var(--color-primary)] font-bold text-lg min-w-[80px]">
-                                        {milestone.year}
-                                    </span>
-                                    <span className="text-muted pt-0.5">{milestone.text}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </Container>
-            </Section>
-
-            {/* Values Section */}
-            <Section className="bg-[var(--color-muted)]">
-                <Container>
-                    <div className="text-center mb-[var(--spacing-3xl)]">
-                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-                            Wofür wir stehen
-                        </span>
-                        <h2 className="mt-[var(--spacing-sm)]">Unsere Werte</h2>
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
-                        {values.map((value) => (
-                            <div key={value.title} className="text-center">
-                                <div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
-                                    <value.icon size={24} className="text-[var(--color-background)]" />
-                                </div>
-                                <h3 className="heading-5 mb-[var(--spacing-sm)]">{value.title}</h3>
-                                <p className="text-sm text-muted">{value.description}</p>
-                            </div>
-                        ))}
-                    </div>
-                </Container>
-            </Section>
-
-            {/* Team Section */}
-            <Section>
-                <Container variant="narrow">
-                    <div className="text-center">
-                        <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-                            Unser Team
-                        </span>
-                        <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-                            Menschen, die für Sie da sind
-                        </h2>
-                        <p className="text-muted mb-[var(--spacing-xl)]">
-                            Hinter TeleNetSystems steht ein engagiertes Team aus Technikern, Beratern und
-                            Service-Mitarbeitern. Wir kennen die Region, wir kennen die Technik – und wir
-                            sind für Sie da, wenn Sie uns brauchen.
-                        </p>
-                        <div className="flex items-center justify-center gap-[var(--spacing-sm)]">
-                            <Users size={20} className="text-[var(--color-primary)]" />
-                            <span className="font-medium">PLACEHOLDER: Anzahl Mitarbeiter</span>
-                        </div>
-                    </div>
-                </Container>
-            </Section>
-
-            {/* Region Section */}
-            <Section className="bg-[var(--color-muted)]">
-                <Container>
-                    <div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
-                        <div className="lg:order-2">
-                            <span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
-                                Unser Standort
-                            </span>
-                            <h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
-                                Verwurzelt in Reutte
-                            </h2>
-                            <p className="text-muted mb-[var(--spacing-lg)]">
-                                Unser Hauptsitz ist in Reutte – mitten im Herzen des Außerferns.
-                                Von hier aus betreuen wir Kunden in der gesamten Region.
-                            </p>
-                            <p className="text-muted mb-[var(--spacing-lg)]">
-                                Der Vorteil für Sie: Kurze Wege, schnelle Reaktionszeiten und
-                                persönliche Betreuung vor Ort. Bei uns sind Sie keine Nummer –
-                                sondern ein geschätzter Kunde.
-                            </p>
-                            <div className="flex items-start gap-[var(--spacing-sm)]">
-                                <MapPin size={20} className="text-[var(--color-primary)] shrink-0 mt-0.5" />
-                                <span className="text-muted">
-                                    PLACEHOLDER: Adresse<br />
-                                    6600 Reutte, Tirol
-                                </span>
                             </div>
                         </div>
-                        <div className="lg:order-1 bg-[var(--color-background)] rounded-[var(--radius-lg)] aspect-video flex items-center justify-center border border-[var(--color-border)]">
-                            <p className="text-muted">PLACEHOLDER: Karte oder Bild</p>
-                        </div>
                     </div>
                 </Container>
             </Section>
 
-            {/* CTA Section */}
+            {/* Contact Anchor */}
-            <Section className="bg-[var(--color-primary)]">
+            <Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
                 <Container>
-                    <div className="text-center text-[var(--color-background)]">
+                    <h2 className="text-white mb-[var(--spacing-md)]">Werden Sie Teil unseres Netzes</h2>
-                        <h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
+                    <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
-                            Lernen Sie uns kennen
+                        <a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
-                        </h2>
+                            📞 Kontakt aufnehmen
-                        <p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+                        </a>
-                            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
 
-type ContainerVariant = "default" | "narrow" | "wide";
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
-
-interface ContainerProps {
   children: ReactNode;
   className?: string;
   as?: ElementType;
-  variant?: ContainerVariant;
+  variant?: "narrow" | "wide"; // Add variant support
 }
 
 export function Container({
   children,
   className = "",
   as: Tag = "div",
-  variant = "default",
+  variant,
+  ...props
 }: ContainerProps) {
-  const variantClasses: Record<ContainerVariant, string> = {
+  const variantClass = variant === "narrow" ? "container--narrow" :
-    default: "container",
+    variant === "wide" ? "container--wide" : "";
-    narrow: "container container--narrow",
-    wide: "container container--wide",
-  };
 
   return (
-    <Tag className={`${variantClasses[variant]} ${className}`.trim()}>
+    <Tag
+      className={`container ${variantClass} ${className}`.trim()}
+      {...props}
+    >
       {children}
     </Tag>
   );

components/layout/Footer.tsx

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

components/layout/Header.tsx

@@ -1,105 +1,41 @@
-"use client";
 
-import { useState } from "react";
 import Link from "next/link";
-import Image from "next/image";
+import { usePathname } from "next/navigation";
-import { Menu, X, Phone } from "lucide-react";
+import { Container } from "./Container";
+import { Button } from "../ui/Button";
 
-const navigation = [
+const navLinks = [
-    { name: "Fernsehen", href: "/fernsehen" },
+    { href: "/fernsehen", label: "Fernsehen" },
-    { name: "Internet", href: "/internet" },
+    { href: "/internet", label: "Internet" },
-    { name: "Telefonie", href: "/telefonie" },
+    { href: "/telefonie", label: "Telefonie" },
-    { name: "Leistungen", href: "/leistungen" },
+    { href: "/leistungen", label: "Leistungen" },
-    { name: "Über uns", href: "/ueber-uns" },
+    { href: "/ueber-uns", label: "Über uns" },
 ];
 
 export function Header() {
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
     return (
-        <header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
+        <header className="border-b border-[color:var(--color-border)] sticky top-0 z-50 bg-[var(--color-background)]/80 backdrop-blur-md">
-            <div className="container">
+            <Container className="flex h-16 items-center justify-between">
-                <nav className="flex items-center justify-between h-16 md:h-20">
+                <Link href="/" className="font-heading text-xl font-bold text-[color:var(--color-primary)]">
-                    {/* Logo */}
+                    TeleNetSystems
-                    <Link
+                </Link>
-                        href="/"
+                <nav className="hidden md:flex gap-6">
-                        className="hover:no-underline"
+                    {navLinks.map((link) => (
-                    >
+                        <Link
-                        <Image
+                            key={link.href}
-                            src="/images/logo/logo-systems-9fd0db14.png"
+                            href={link.href}
-                            alt="TeleNetSystems Logo"
+                            className="text-sm font-medium hover:text-[color:var(--color-primary)] transition-colors"
-                            width={180}
-                            height={40}
-                            priority
-                            className="h-8 md:h-10 w-auto"
-                        />
-                    </Link>
-
-                    {/* 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} />
+                            {link.label}
-                            <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>
-
+                <div className="flex items-center gap-4">
-                {/* Mobile Navigation */}
+                    <Link href="#kontakt" className="btn btn-primary btn-sm">
-                {mobileMenuOpen && (
+                        Jetzt beraten lassen
-                    <div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
+                    </Link>
-                        <div className="stack-sm pt-[var(--spacing-md)]">
+                </div>
-                            {navigation.map((item) => (
+            </Container>
-                                <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,32 +1,29 @@
 import type { ElementType, ReactNode } from "react";
 
-type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
-
-interface SectionProps {
   children: ReactNode;
   className?: string;
   as?: ElementType;
-  variant?: SectionVariant;
+  variant?: "sm" | "lg" | "hero" | "flush";
-  id?: string;
 }
 
 export function Section({
   children,
   className = "",
   as: Tag = "section",
-  variant = "default",
+  variant,
-  id,
+  ...props
 }: SectionProps) {
-  const variantClasses: Record<SectionVariant, string> = {
+  const variantClass = variant === "sm" ? "section--sm" :
-    default: "section",
+    variant === "lg" ? "section--lg" :
-    hero: "section section--hero",
+      variant === "hero" ? "section--hero" :
-    sm: "section section--sm",
+        variant === "flush" ? "section--flush" : "";
-    lg: "section section--lg",
-    flush: "section section--flush",
-  };
 
   return (
-    <Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
+    <Tag
+      className={`section ${variantClass} ${className}`.trim()}
+      {...props}
+    >
       {children}
     </Tag>
   );

components/ui/Button.tsx

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

components/ui/Card.tsx

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

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);
-}
+}