chore: update TypeScript configuration and add Tailwind CSS support

- Updated `next-env.d.ts` to remove unnecessary import and update TypeScript documentation link.
- Added `@tailwindcss/postcss` dependency in `package.json` and `package-lock.json`.
- Created `globals.css` with Tailwind CSS directives and custom theme variables.
- Modified `tsconfig.json` to change JSX setting from `react-jsx` to `preserve`.

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

app/datenschutz/page.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Datenschutz",
+  description: "Datenschutzhinweise der TeleNetSystems GmbH."
+};
+
+export default function DatenschutzPage() {
+  return (
+    <section className="section-block">
+      <div className="container-shell max-w-3xl space-y-7">
+        <header>
+          <p className="eyebrow">Rechtliches</p>
+          <h1 className="mt-2 text-4xl font-semibold text-alpine-900">Datenschutzerklaerung</h1>
+        </header>
+
+        <article className="surface-card space-y-4">
+          <h2 className="text-xl font-semibold text-alpine-900">1. Verantwortliche Stelle</h2>
+          <p className="text-sm text-alpine-700">
+            Verantwortlich fuer die Datenverarbeitung ist die TeleNetSystems GmbH, Untermarkt 12, 6600 Reutte,
+            Oesterreich, E-Mail: kontakt@telenetsystems.at.
+          </p>
+
+          <h2 className="text-xl font-semibold text-alpine-900">2. Zweck der Verarbeitung</h2>
+          <p className="text-sm text-alpine-700">
+            Personenbezogene Daten werden ausschliesslich fuer Anfragebearbeitung, Vertragsanbahnung und technischen
+            Support verarbeitet. Es werden keine Tracking- oder Marketing-Cookies ohne Einwilligung gesetzt.
+          </p>
+
+          <h2 className="text-xl font-semibold text-alpine-900">3. Ihre Rechte</h2>
+          <p className="text-sm text-alpine-700">
+            Sie haben das Recht auf Auskunft, Berichtigung, Loeschung, Einschraenkung, Datenuebertragbarkeit und
+            Widerspruch gemaess DSGVO. Anfragen richten Sie bitte an datenschutz@telenetsystems.at.
+          </p>
+
+          <h2 className="text-xl font-semibold text-alpine-900">4. Speicherdauer</h2>
+          <p className="text-sm text-alpine-700">
+            Daten werden nur so lange gespeichert, wie es fuer die jeweiligen Zwecke und gesetzliche Aufbewahrungspflichten
+            erforderlich ist.
+          </p>
+
+          <p className="text-sm text-alpine-700">
+            Hinweis: Vor Livegang sollten diese Informationen durch juristisch gepruefte, unternehmensspezifische Inhalte
+            ersetzt werden.
+          </p>
+        </article>
+      </div>
+    </section>
+  );
+}

app/fernsehen/page.tsx

@@ -0,0 +1,135 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { tvTariffs } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Fernsehen fuer Privat und Business",
+  description:
+    "TV Privat, Pay TV und TV Business in Tirol: klar verglichen, einfach erklaert und mit persoenlicher Beratung in Reutte."
+};
+
+export default function FernsehenPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Fernsehen"
+        title="TV-Pakete, die zu Ihrem Alltag passen"
+        intro="Privatpakete und Pay-TV sind direkt vergleichbar. TV Business planen wir separat, weil Anforderungen in Hotels, Gastro oder Unternehmen deutlich anders sind."
+        imageSrc="/assets/hero/tv-header-44c1e07b.jpg"
+        imageAlt="Fernsehangebot von TeleNetSystems"
+        primaryCta={{ label: "TV-Beratung anfragen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Internet-Tarife", href: "/internet" }}
+      />
+
+      <section className="section-block pt-6 bg-white/70">
+        <div className="container-shell space-y-10">
+          <div>
+            <p className="eyebrow">Vergleich | TV Privat</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Paket</th>
+                    <th>Sender</th>
+                    <th>Extras</th>
+                    <th>Passend fuer</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tvTariffs.private.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.channels}</td>
+                      <td>{tariff.extras}</td>
+                      <td>{tariff.target}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div>
+            <p className="eyebrow">Vergleich | Pay TV</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Paket</th>
+                    <th>Sender</th>
+                    <th>Extras</th>
+                    <th>Passend fuer</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tvTariffs.payTv.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.channels}</td>
+                      <td>{tariff.extras}</td>
+                      <td>{tariff.target}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr] lg:items-center">
+          <div className="surface-card">
+            <p className="eyebrow">TV Business</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Individuell statt One-Size-Fits-All.</h2>
+            <p className="mt-4 text-alpine-700">
+              Unternehmen brauchen meist mehr als ein Standardpaket. Darum planen wir TV Business immer als eigene
+              Loesung mit technischer Abstimmung vor Ort.
+            </p>
+            <ul className="mt-5 space-y-2 text-sm text-alpine-700">
+              {tvTariffs.business.map((point) => (
+                <li key={point}>- {point}</li>
+              ))}
+            </ul>
+          </div>
+
+          <figure className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+            <Image
+              alt="TV fuer Unternehmen"
+              className="h-[340px] w-full object-cover"
+              src="/assets/gallery/tv-business-c3bdfb94-23310090.jpg"
+              width={900}
+              height={560}
+            />
+          </figure>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/65">
+        <div className="container-shell grid gap-6 md:grid-cols-3">
+          <article className="surface-card">
+            <h3 className="text-xl font-semibold text-alpine-900">1. Bedarf klaeren</h3>
+            <p className="mt-3 text-sm text-alpine-700">Wie viele Geraete, welche Inhalte, welche Standorte?</p>
+          </article>
+          <article className="surface-card">
+            <h3 className="text-xl font-semibold text-alpine-900">2. Technik abstimmen</h3>
+            <p className="mt-3 text-sm text-alpine-700">Installation, Receiver, Netzstruktur und Laufzeit transparent festlegen.</p>
+          </article>
+          <article className="surface-card">
+            <h3 className="text-xl font-semibold text-alpine-900">3. Betrieb sichern</h3>
+            <p className="mt-3 text-sm text-alpine-700">Support aus Tirol, damit Ausfaelle in Stoerungszeiten kurz bleiben.</p>
+          </article>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}

app/globals.css

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg-main: #f5f9fc;
+  --bg-alt: #eef5fb;
+  --text-main: #143047;
+  --text-soft: #30526b;
+  --line: #d8e5f0;
+  --surface: #ffffff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  background:
+    radial-gradient(circle at 8% 0%, rgba(94, 156, 197, 0.2), transparent 34%),
+    radial-gradient(circle at 92% 12%, rgba(209, 126, 58, 0.14), transparent 30%),
+    linear-gradient(180deg, var(--bg-main), var(--bg-alt));
+  color: var(--text-main);
+  font-family: "Source Sans 3", "Avenir Next", "Segoe UI", sans-serif;
+  line-height: 1.45;
+}
+
+a {
+  color: inherit;
+}
+
+.font-heading,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Space Grotesk", "Trebuchet MS", "Avenir Next", sans-serif;
+}
+
+::selection {
+  background: rgba(205, 114, 45, 0.24);
+}
+
+@layer components {
+  .container-shell {
+    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
+  }
+
+  .section-block {
+    @apply py-14 md:py-20;
+  }
+
+  .eyebrow {
+    @apply font-heading text-xs font-semibold uppercase tracking-[0.24em] text-copper-600;
+  }
+
+  .surface-card {
+    @apply rounded-2xl border border-alpine-100 bg-white p-6 shadow-card;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center rounded-full border border-copper-600 bg-copper-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-copper-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-copper-500;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center rounded-full border border-alpine-300 bg-white px-5 py-2.5 text-sm font-semibold text-alpine-700 transition hover:border-alpine-500 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
+  }
+
+  .nav-chip {
+    @apply inline-flex rounded-full border border-transparent px-3 py-1.5 transition hover:border-alpine-200 hover:bg-alpine-50 hover:text-alpine-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-alpine-500;
+  }
+
+  .table-shell {
+    @apply w-full overflow-hidden rounded-2xl border border-alpine-200 bg-white;
+  }
+
+  .data-table {
+    @apply w-full border-collapse text-left text-sm;
+  }
+
+  .data-table thead th {
+    @apply bg-alpine-50 px-4 py-3 font-semibold text-alpine-800;
+  }
+
+  .data-table tbody td {
+    @apply border-t border-alpine-100 px-4 py-3 text-alpine-700;
+  }
+}

app/impressum/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Impressum",
+  description: "Impressum der TeleNetSystems GmbH gemaess oesterreichischer Informationspflichten."
+};
+
+export default function ImpressumPage() {
+  return (
+    <section className="section-block">
+      <div className="container-shell max-w-3xl space-y-7">
+        <header>
+          <p className="eyebrow">Rechtliches</p>
+          <h1 className="mt-2 text-4xl font-semibold text-alpine-900">Impressum</h1>
+        </header>
+
+        <article className="surface-card space-y-4">
+          <h2 className="text-xl font-semibold text-alpine-900">Angaben gemaess Paragraf 5 ECG</h2>
+          <p className="text-sm text-alpine-700">
+            TeleNetSystems GmbH<br />
+            Untermarkt 12<br />
+            6600 Reutte<br />
+            Oesterreich
+          </p>
+          <p className="text-sm text-alpine-700">
+            Telefon: +43 5672 219 40<br />
+            E-Mail: kontakt@telenetsystems.at
+          </p>
+          <p className="text-sm text-alpine-700">
+            Firmenbuchnummer: FN 000000a<br />
+            Firmenbuchgericht: Landesgericht Innsbruck<br />
+            UID-Nummer: ATU00000000
+          </p>
+          <p className="text-sm text-alpine-700">
+            Hinweis: Diese Angaben sind als Platzhalter zu verstehen und muessen vor Livegang mit den offiziellen
+            Unternehmensdaten abgeglichen werden.
+          </p>
+        </article>
+      </div>
+    </section>
+  );
+}

app/internet/page.tsx

@@ -0,0 +1,137 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { internetTariffs } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Internet in Reutte und Tirol",
+  description:
+    "Internet-Tarife fuer Reutte und Tirol: Kabel, Glasfaser und Business-Leitungen mit transparenten Preisen und regionalem Support."
+};
+
+export default function InternetPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Internet"
+        title="Schnelles Internet fuer Alltag und Betrieb"
+        intro="Ob Familie, Homeoffice oder Unternehmensstandort: Sie sehen auf einen Blick, welche Geschwindigkeit, Vertragsdauer und Kosten zu Ihrem Bedarf passen."
+        imageSrc="/assets/gallery/internet-7b594a2d-793cefee.jpg"
+        imageAlt="Internetinfrastruktur von TeleNetSystems"
+        primaryCta={{ label: "Jetzt beraten lassen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Fernsehen ansehen", href: "/fernsehen" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell grid gap-5 md:grid-cols-3">
+          <article className="surface-card">
+            <h2 className="text-xl font-semibold text-alpine-900">Transparent kalkuliert</h2>
+            <p className="mt-3 text-sm text-alpine-700">Monatspreis, Aktivierung und Laufzeit sind offen dargestellt.</p>
+          </article>
+          <article className="surface-card">
+            <h2 className="text-xl font-semibold text-alpine-900">Stabil in Spitzenzeiten</h2>
+            <p className="mt-3 text-sm text-alpine-700">Tarife sind fuer Streaming, Homeoffice und Cloud-Nutzung ausgelegt.</p>
+          </article>
+          <article className="surface-card">
+            <h2 className="text-xl font-semibold text-alpine-900">Support vor Ort</h2>
+            <p className="mt-3 text-sm text-alpine-700">Keine Hotline-Odyssee. Unser Team sitzt in Tirol und kennt die Netze.</p>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/70">
+        <div className="container-shell space-y-12">
+          <div>
+            <p className="eyebrow">Privatkunden | Kabel</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Tarif</th>
+                    <th>Geschwindigkeit</th>
+                    <th>Laufzeit</th>
+                    <th>Setup</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {internetTariffs.privateCable.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.speed}</td>
+                      <td>{tariff.contract}</td>
+                      <td>{tariff.setup}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div>
+            <p className="eyebrow">Privatkunden | Glasfaser</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Tarif</th>
+                    <th>Geschwindigkeit</th>
+                    <th>Laufzeit</th>
+                    <th>Setup</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {internetTariffs.privateFiber.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.speed}</td>
+                      <td>{tariff.contract}</td>
+                      <td>{tariff.setup}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr] lg:items-center">
+          <div>
+            <p className="eyebrow">Business-Internet</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wenn Leitungen Teil Ihrer Betriebszeit sind.</h2>
+            <p className="mt-4 text-alpine-700">
+              Fuer Betriebe konfigurieren wir Internet nicht als Standardpaket, sondern passend zu Ausfallsicherheit,
+              Standortanzahl und Lastprofil.
+            </p>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
+              {internetTariffs.business.map((point) => (
+                <li className="surface-card py-3" key={point}>
+                  {point}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+            <Image
+              alt="Serverraum TeleNetSystems"
+              className="h-[340px] w-full object-cover"
+              src="/assets/gallery/serverraum-7225cb6a.jpg"
+              width={900}
+              height={560}
+            />
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}

app/layout.tsx

@@ -0,0 +1,65 @@
+import type { Metadata, Viewport } from "next";
+
+import { SiteFooter } from "@/components/site-footer";
+import { SiteHeader } from "@/components/site-header";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+  metadataBase: new URL("https://www.telenetsystems.at"),
+  title: {
+    default: "TeleNetSystems Reutte | Internet, TV und Telefonie in Tirol",
+    template: "%s | TeleNetSystems"
+  },
+  description:
+    "TeleNetSystems aus Reutte bietet Internet, Fernsehen, Telefonie und IT-Services fuer Privat- und Geschaeftskunden in Tirol. Transparent, regional und gut erreichbar.",
+  keywords: [
+    "Internet Reutte",
+    "TV Anbieter Tirol",
+    "Telefonie Tirol",
+    "IT Support Reutte",
+    "Telekommunikation Tirol",
+    "Business Internet Tirol"
+  ],
+  openGraph: {
+    title: "TeleNetSystems Reutte",
+    description:
+      "Regionaler IT- und Telekompartner in Tirol fuer Internet, Fernsehen und Telefonie mit direktem Support.",
+    url: "https://www.telenetsystems.at",
+    siteName: "TeleNetSystems",
+    locale: "de_AT",
+    type: "website",
+    images: [
+      {
+        url: "/assets/hero/internet-header-431619ac.jpg",
+        width: 1200,
+        height: 630,
+        alt: "TeleNetSystems Infrastruktur in Tirol"
+      }
+    ]
+  },
+  icons: {
+    icon: "/assets/logo/logo-systems-9fd0db14.png"
+  }
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: "#0c1d2a"
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="de">
+      <body>
+        <a className="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-white focus:px-3 focus:py-2" href="#inhalt">
+          Zum Inhalt springen
+        </a>
+        <SiteHeader />
+        <main id="inhalt">{children}</main>
+        <SiteFooter />
+      </body>
+    </html>
+  );
+}

app/leistungen/page.tsx

@@ -0,0 +1,111 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+
+export const metadata: Metadata = {
+  title: "Leistungen fuer Privat und Business",
+  description:
+    "Uebersicht aller Leistungen von TeleNetSystems: Internet, Fernsehen, Telefonie und IT-Services fuer Privatkunden und Unternehmen in Tirol."
+};
+
+const serviceBlocks = [
+  {
+    title: "Internet",
+    text: "Kabel- und Glasfaseranschluesse fuer Zuhause sowie SLA-basierte Loesungen fuer Unternehmen.",
+    href: "/internet"
+  },
+  {
+    title: "Fernsehen",
+    text: "TV Privat, Pay TV und individuelle TV Business Konzepte fuer Hotels, Gastronomie und Betriebe.",
+    href: "/fernsehen"
+  },
+  {
+    title: "Telefonie",
+    text: "Festnetzpakete, SIP-Trunks und Erweiterungen fuer Teams mit mehreren Nebenstellen.",
+    href: "/telefonie"
+  },
+  {
+    title: "IT-Service",
+    text: "Planung, Inbetriebnahme und Wartung von Netzwerken sowie laufender technischer Support.",
+    href: "/#kontakt"
+  }
+];
+
+export default function LeistungenPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Leistungen"
+        title="Alles aus einer Hand, ohne unnoetige Komplexitaet"
+        intro="TeleNetSystems kombiniert Telekommunikation mit praktischem IT-Service. Das reduziert Abstimmungsaufwand und sorgt dafuer, dass Technik zusammen funktioniert."
+        imageSrc="/assets/gallery/firma1-8a863d8b.jpg"
+        imageAlt="Standort TeleNetSystems in Tirol"
+        primaryCta={{ label: "Jetzt Bedarf klaeren", href: "/#kontakt" }}
+        secondaryCta={{ label: "Ueber uns", href: "/ueber-uns" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell grid gap-5 md:grid-cols-2">
+          {serviceBlocks.map((service) => (
+            <article className="surface-card" key={service.title}>
+              <h2 className="text-2xl font-semibold text-alpine-900">{service.title}</h2>
+              <p className="mt-3 text-alpine-700">{service.text}</p>
+              <Link className="mt-4 inline-flex text-sm font-semibold text-copper-700 hover:text-copper-800" href={service.href}>
+                Mehr dazu -&gt;
+              </Link>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="section-block bg-white/70">
+        <div className="container-shell grid gap-6 lg:grid-cols-2">
+          <article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
+            <p className="eyebrow text-moss-600">Privatkunden</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Uebersichtlich und alltagstauglich</h2>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
+              <li>- Klare Pakete mit offenen Kosten</li>
+              <li>- Schnelle Hilfe bei Stoerungen</li>
+              <li>- Beratung ohne Fachjargon</li>
+            </ul>
+          </article>
+
+          <article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/40">
+            <p className="eyebrow">Geschaeftskunden</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Planbar und skalierbar</h2>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
+              <li>- Individuelle Netz- und Kommunikationskonzepte</li>
+              <li>- SLA-orientierter Support</li>
+              <li>- Direkte Ansprechpartner fuer Technik und Projekte</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell">
+          <p className="eyebrow">Zusammenarbeit</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wie wir Projekte in Tirol umsetzen</h2>
+          <div className="mt-7 grid gap-5 md:grid-cols-3">
+            <article className="surface-card">
+              <h3 className="text-xl font-semibold text-alpine-900">1. Analyse</h3>
+              <p className="mt-3 text-sm text-alpine-700">Wir nehmen Ist-Situation, Anforderungen und Budget sauber auf.</p>
+            </article>
+            <article className="surface-card">
+              <h3 className="text-xl font-semibold text-alpine-900">2. Umsetzung</h3>
+              <p className="mt-3 text-sm text-alpine-700">Installation und Inbetriebnahme erfolgen abgestimmt auf Ihren Betrieb.</p>
+            </article>
+            <article className="surface-card">
+              <h3 className="text-xl font-semibold text-alpine-900">3. Betrieb</h3>
+              <p className="mt-3 text-sm text-alpine-700">Wir bleiben als Servicepartner erreichbar, auch nach dem Go-live.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}

app/page.tsx

@@ -0,0 +1,142 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { company, faqItems, serviceHighlights, testimonials } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Regionaler Telekom- und IT-Service in Reutte",
+  description:
+    "TeleNetSystems praesentiert Internet, Fernsehen und Telefonie fuer Privat- und Geschaeftskunden in Tirol. Mit klaren Tarifen und direktem Support aus Reutte."
+};
+
+const localBusinessSchema = {
+  "@context": "https://schema.org",
+  "@type": "LocalBusiness",
+  name: company.name,
+  areaServed: "Tirol",
+  address: {
+    "@type": "PostalAddress",
+    streetAddress: "Untermarkt 12",
+    postalCode: "6600",
+    addressLocality: "Reutte",
+    addressCountry: "AT"
+  },
+  telephone: company.phone,
+  email: company.email,
+  openingHours: ["Mo-Fr 08:00-17:30"],
+  sameAs: []
+};
+
+export default function HomePage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="TeleNetSystems Reutte"
+        title="Technik, die laeuft. Support, der erreichbar bleibt."
+        intro="TeleNetSystems verbindet in Tirol private Haushalte und Betriebe mit stabilem Internet, Fernsehen und Telefonie. Sie bekommen transparente Angebote und ein Team aus der Region, das sich kuemmert."
+        imageSrc="/assets/hero/internet-header-431619ac.jpg"
+        imageAlt="Netzwerktechnik von TeleNetSystems"
+        primaryCta={{ label: "Beratung starten", href: "#kontakt" }}
+        secondaryCta={{ label: "Leistungen ansehen", href: "/leistungen" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell">
+          <div className="mb-8 flex flex-wrap items-end justify-between gap-4">
+            <div>
+              <p className="eyebrow">Leistungsuebersicht</p>
+              <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Drei Bereiche, klar getrennt aufgebaut.</h2>
+            </div>
+            <p className="max-w-xl text-alpine-700">
+              Erst Internet, dann Fernsehen, danach Telefonie: Die Reihenfolge folgt den haeufigsten Fragen in der
+              Beratung und macht die Entscheidung schneller.
+            </p>
+          </div>
+
+          <div className="grid gap-5 md:grid-cols-3">
+            {serviceHighlights.map((item) => (
+              <article className="surface-card flex h-full flex-col" key={item.title}>
+                <h3 className="text-xl font-semibold text-alpine-900">{item.title}</h3>
+                <p className="mt-3 flex-1 text-alpine-700">{item.text}</p>
+                <Link className="mt-5 inline-flex items-center text-sm font-semibold text-copper-700 hover:text-copper-800" href={item.href}>
+                  Details ansehen -&gt;
+                </Link>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell grid gap-6 lg:grid-cols-2">
+          <article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
+            <p className="eyebrow text-moss-600">Privatkunden</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Technik einfach funktionieren soll.</h2>
+            <ul className="mt-4 space-y-2 text-alpine-700">
+              <li>Klare Monatspreise ohne Tarifdschungel</li>
+              <li>TV-, Internet- und Telefoniepakete fuer den Alltag</li>
+              <li>Schnelle Hilfe bei Stoerungen, ohne Umwege</li>
+            </ul>
+          </article>
+
+          <article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/30">
+            <p className="eyebrow">Geschaeftskunden</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Ausfaelle sofort Geld kosten.</h2>
+            <ul className="mt-4 space-y-2 text-alpine-700">
+              <li>Skalierbare Business-Leitungen mit SLA</li>
+              <li>Standortvernetzung und SIP-Telefonie aus einer Hand</li>
+              <li>Direkter Kontakt zu Technik und Projektleitung</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/65">
+        <div className="container-shell">
+          <p className="eyebrow">Stimmen aus Tirol</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vertrauen entsteht im Tagesgeschaeft.</h2>
+          <div className="mt-8 grid gap-5 md:grid-cols-3">
+            {testimonials.map((item) => (
+              <blockquote className="surface-card" key={item.author}>
+                <p className="text-alpine-700">{item.quote}</p>
+                <footer className="mt-4 text-sm text-alpine-600">
+                  <span className="font-semibold text-alpine-800">{item.author}</span> | {item.context}
+                </footer>
+              </blockquote>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
+          <div>
+            <p className="eyebrow">Hauefige Fragen</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Was vor einem Wechsel oft unklar ist.</h2>
+            <p className="mt-4 text-alpine-700">
+              Diese Fragen kommen in der Erstberatung am haeufigsten. Wenn Ihr Punkt nicht dabei ist, klaeren wir ihn
+              telefonisch in wenigen Minuten.
+            </p>
+          </div>
+          <div className="space-y-3">
+            {faqItems.map((item) => (
+              <details className="surface-card p-0" key={item.question}>
+                <summary className="cursor-pointer list-none px-5 py-4 font-semibold text-alpine-900">{item.question}</summary>
+                <p className="border-t border-alpine-100 px-5 py-4 text-sm text-alpine-700">{item.answer}</p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessSchema) }}
+      />
+    </>
+  );
+}

app/robots.ts

@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/"
+    },
+    sitemap: "https://www.telenetsystems.at/sitemap.xml"
+  };
+}

app/sitemap.ts

@@ -0,0 +1,21 @@
+import type { MetadataRoute } from "next";
+
+const baseUrl = "https://www.telenetsystems.at";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    "",
+    "/internet",
+    "/fernsehen",
+    "/telefonie",
+    "/leistungen",
+    "/ueber-uns",
+    "/impressum",
+    "/datenschutz"
+  ].map((path) => ({
+    url: `${baseUrl}${path}`,
+    lastModified: new Date(),
+    changeFrequency: "monthly",
+    priority: path === "" ? 1 : 0.8
+  }));
+}

app/telefonie/page.tsx

@@ -0,0 +1,105 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { phoneTariffs } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Telefonie fuer Privat und Unternehmen",
+  description:
+    "Telefonie-Angebote von TeleNetSystems in Tirol: einfache Pakete fuer Privatkunden und skalierbare SIP-Loesungen fuer Unternehmen."
+};
+
+export default function TelefoniePage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Telefonie"
+        title="Von Festnetz bis SIP: klar kalkulierbar"
+        intro="Telefonie muss im Alltag verlässlich sein. Deshalb zeigen wir Pakete mit klaren Inklusivleistungen und bieten fuer Unternehmen planbare SIP-Loesungen mit direktem Support."
+        imageSrc="/assets/gallery/telefon-fa5e8c21-271d2135.jpg"
+        imageAlt="Telefonie fuer Privat- und Geschaeftskunden"
+        primaryCta={{ label: "Telefonie anfragen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Alle Leistungen", href: "/leistungen" }}
+      />
+
+      <section className="section-block pt-6 bg-white/70">
+        <div className="container-shell">
+          <p className="eyebrow">Tarifvergleich</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">So unterscheiden sich die Pakete.</h2>
+          <div className="mt-6 table-shell">
+            <table className="data-table">
+              <thead>
+                <tr>
+                  <th>Tarif</th>
+                  <th>Rufnummern</th>
+                  <th>Inklusive</th>
+                  <th>Setup</th>
+                  <th>Preis</th>
+                </tr>
+              </thead>
+              <tbody>
+                {phoneTariffs.map((tariff) => (
+                  <tr key={tariff.name}>
+                    <td>{tariff.name}</td>
+                    <td>{tariff.lines}</td>
+                    <td>{tariff.included}</td>
+                    <td>{tariff.setup}</td>
+                    <td>{tariff.price}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell grid gap-6 lg:grid-cols-2">
+          <article className="surface-card">
+            <p className="eyebrow">Privat</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Einfach erreichbar bleiben</h2>
+            <p className="mt-3 text-alpine-700">
+              Ideal fuer Haushalte, die Festnetz als verlaesslichen Kanal behalten wollen. Portierung bestehender
+              Nummern ist bei jedem Paket vorgesehen.
+            </p>
+          </article>
+
+          <article className="surface-card">
+            <p className="eyebrow">Business</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Skalierbar fuers Unternehmen</h2>
+            <p className="mt-3 text-alpine-700">
+              SIP-Trunks, Nebenstellen, zentrale Steuerung und saubere Einbindung in Ihre bestehende IT-Landschaft.
+              Genau abgestimmt auf Teamsize und Anrufvolumen.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/65">
+        <div className="container-shell grid gap-7 lg:grid-cols-[1fr_1fr] lg:items-center">
+          <div>
+            <p className="eyebrow">Technik, verstaendlich erklaert</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Keine Konfigurationsraetsel.</h2>
+            <p className="mt-4 text-alpine-700">
+              Einrichtung und Umstellung begleiten wir Schritt fuer Schritt. Das gilt fuer den privaten Router genauso
+              wie fuer Business-Telefonanlagen mit mehreren Standorten.
+            </p>
+          </div>
+          <div className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+            <Image
+              alt="Telefonie-Setup"
+              className="h-[320px] w-full object-cover"
+              src="/assets/gallery/telefonie1-ad7595f9.jpg"
+              width={900}
+              height={560}
+            />
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}

app/ueber-uns/page.tsx

@@ -0,0 +1,108 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { teamMembers } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Ueber TeleNetSystems",
+  description:
+    "TeleNetSystems aus Reutte: Team, Werte und Arbeitsweise fuer regionale Telekommunikations- und IT-Dienstleistungen in Tirol."
+};
+
+const values = [
+  {
+    title: "Verlaesslichkeit",
+    text: "Wir versprechen nur Leistungen, die wir technisch und organisatorisch halten koennen."
+  },
+  {
+    title: "Nahbarkeit",
+    text: "Sie sprechen mit Menschen aus der Region, nicht mit anonymen Weiterleitungen."
+  },
+  {
+    title: "Klarheit",
+    text: "Angebote und Entscheidungen bleiben nachvollziehbar, auch wenn die Technik komplex ist."
+  }
+];
+
+export default function UeberUnsPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Ueber uns"
+        title="TeleNetSystems ist in Reutte zuhause"
+        intro="Wir arbeiten fuer Menschen und Betriebe in Tirol, die eine stabile technische Basis und eine erreichbare Betreuung brauchen. Genau darauf ist unser Team ausgerichtet."
+        imageSrc="/assets/gallery/firmenkunden-96736712-5fa99704.jpg"
+        imageAlt="Teamarbeit bei TeleNetSystems"
+        primaryCta={{ label: "Kontakt aufnehmen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Leistungen", href: "/leistungen" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr]">
+          <article className="surface-card">
+            <p className="eyebrow">Unsere Geschichte</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vom regionalen Anbieter zum festen IT-Partner</h2>
+            <p className="mt-4 text-alpine-700">
+              TeleNetSystems ist als regionales Telekom-Team gestartet und hat das Angebot schrittweise um
+              IT-Dienstleistungen erweitert. Heute betreuen wir private Haushalte, Handwerksbetriebe, Hotels und
+              mittelstaendische Unternehmen in ganz Tirol.
+            </p>
+          </article>
+
+          <article className="surface-card bg-alpine-900 text-alpine-50">
+            <p className="eyebrow text-copper-300">Regional verankert</p>
+            <h2 className="mt-2 text-3xl font-semibold text-white">Reutte als Basis, Tirol als Einsatzgebiet</h2>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-100">
+              <li>- Kurze Wege zu Kundenterminen</li>
+              <li>- Schnelle Abstimmung zwischen Beratung und Technik</li>
+              <li>- Langfristige Kundenbeziehungen statt kurzfristiger Abschluesse</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/70">
+        <div className="container-shell">
+          <p className="eyebrow">Werte</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">So arbeiten wir im Alltag</h2>
+          <div className="mt-7 grid gap-5 md:grid-cols-3">
+            {values.map((value) => (
+              <article className="surface-card" key={value.title}>
+                <h3 className="text-xl font-semibold text-alpine-900">{value.title}</h3>
+                <p className="mt-3 text-sm text-alpine-700">{value.text}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell">
+          <p className="eyebrow">Team</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Ihre Ansprechpartner bei TeleNetSystems</h2>
+          <div className="mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+            {teamMembers.map((member) => (
+              <article className="overflow-hidden rounded-2xl border border-alpine-200 bg-white shadow-card" key={member.name}>
+                <Image
+                  alt={`${member.name} von TeleNetSystems`}
+                  className="h-56 w-full object-cover"
+                  src={member.image}
+                  width={420}
+                  height={420}
+                />
+                <div className="p-4">
+                  <h3 className="font-semibold text-alpine-900">{member.name}</h3>
+                  <p className="mt-1 text-sm text-alpine-700">{member.role}</p>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}

components/contact-strip.tsx

@@ -0,0 +1,48 @@
+import { company } from "@/lib/site-content";
+
+export function ContactStrip() {
+  return (
+    <section id="kontakt" className="section-block pb-10">
+      <div className="container-shell">
+        <div className="rounded-3xl border border-copper-200 bg-copper-50 p-7 shadow-card sm:p-10">
+          <div className="grid gap-6 md:grid-cols-[1.2fr_1fr] md:items-center">
+            <div>
+              <p className="eyebrow text-copper-700">Direkter Kontakt</p>
+              <h2 className="mt-3 text-3xl font-semibold text-alpine-900">Ein Anruf klaert oft mehr als zehn Mails.</h2>
+              <p className="mt-4 max-w-2xl text-alpine-700">
+                Wenn Sie einen Tarif wechseln, einen Standort anbinden oder eine Stoerung melden wollen: Sie landen
+                nicht in einem anonymen Ticketsystem, sondern bei einem Team aus der Region.
+              </p>
+            </div>
+
+            <div className="rounded-2xl border border-copper-200 bg-white p-6">
+              <ul className="space-y-3 text-sm text-alpine-800">
+                <li>
+                  <span className="font-semibold">Telefon:</span>{" "}
+                  <a className="text-alpine-700 underline decoration-copper-400 underline-offset-4" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
+                    {company.phone}
+                  </a>
+                </li>
+                <li>
+                  <span className="font-semibold">Beratung:</span>{" "}
+                  <a className="text-alpine-700 underline decoration-copper-400 underline-offset-4" href={`mailto:${company.email}`}>
+                    {company.email}
+                  </a>
+                </li>
+                <li>
+                  <span className="font-semibold">Stoerung:</span>{" "}
+                  <a className="text-alpine-700 underline decoration-copper-400 underline-offset-4" href={`mailto:${company.supportEmail}`}>
+                    {company.supportEmail}
+                  </a>
+                </li>
+                <li>
+                  <span className="font-semibold">Erreichbarkeit:</span> {company.openingHours}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/page-hero.tsx

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import Image from "next/image";
+
+type PageHeroProps = {
+  eyebrow: string;
+  title: string;
+  intro: string;
+  imageSrc: string;
+  imageAlt: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+};
+
+export function PageHero({
+  eyebrow,
+  title,
+  intro,
+  imageSrc,
+  imageAlt,
+  primaryCta,
+  secondaryCta
+}: PageHeroProps) {
+  return (
+    <section className="section-block pt-12 md:pt-16">
+      <div className="container-shell grid items-center gap-8 lg:grid-cols-[1.05fr_0.95fr]">
+        <div className="space-y-6">
+          <p className="eyebrow">{eyebrow}</p>
+          <h1 className="text-balance text-4xl font-semibold leading-tight text-alpine-900 sm:text-5xl">
+            {title}
+          </h1>
+          <p className="max-w-2xl text-lg leading-relaxed text-alpine-700">{intro}</p>
+          {(primaryCta || secondaryCta) && (
+            <div className="flex flex-wrap gap-3">
+              {primaryCta ? (
+                <Link className="btn-primary" href={primaryCta.href}>
+                  {primaryCta.label}
+                </Link>
+              ) : null}
+              {secondaryCta ? (
+                <Link className="btn-secondary" href={secondaryCta.href}>
+                  {secondaryCta.label}
+                </Link>
+              ) : null}
+            </div>
+          )}
+        </div>
+
+        <div className="relative overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+          <div className="relative h-[300px] w-full sm:h-[360px]">
+            <Image
+              alt={imageAlt}
+              className="object-cover"
+              fill
+              priority
+              sizes="(min-width: 1024px) 42vw, 100vw"
+              src={imageSrc}
+            />
+          </div>
+          <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-alpine-900/55 to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+}

components/site-footer.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import Image from "next/image";
+
+import { company, mainNavigation } from "@/lib/site-content";
+
+export function SiteFooter() {
+  return (
+    <footer className="mt-20 border-t border-alpine-200 bg-alpine-900 text-alpine-50">
+      <div className="container-shell grid gap-10 py-14 md:grid-cols-[1.2fr_1fr_1fr]">
+        <div className="space-y-4">
+          <Image
+            alt="TeleNetSystems Logo hell"
+            className="h-10 w-auto"
+            src="/assets/logo/logo-weiss-ffa4cbf6.png"
+            width={190}
+            height={50}
+          />
+          <p className="max-w-sm text-sm leading-relaxed text-alpine-100">
+            TeleNetSystems verbindet technisches Know-how mit regionaler Naehe. Sie bekommen klare Tarife,
+            erreichbare Ansprechpartner und Support aus Tirol.
+          </p>
+        </div>
+
+        <div>
+          <h2 className="font-heading text-lg text-white">Seiten</h2>
+          <ul className="mt-4 space-y-2 text-sm text-alpine-100">
+            {mainNavigation.map((item) => (
+              <li key={item.href}>
+                <Link className="hover:text-copper-200" href={item.href}>
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h2 className="font-heading text-lg text-white">Kontakt</h2>
+          <ul className="mt-4 space-y-2 text-sm text-alpine-100">
+            <li>{company.name}</li>
+            <li>{company.address}</li>
+            <li>
+              <a className="hover:text-copper-200" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
+                {company.phone}
+              </a>
+            </li>
+            <li>
+              <a className="hover:text-copper-200" href={`mailto:${company.email}`}>
+                {company.email}
+              </a>
+            </li>
+            <li>{company.openingHours}</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="border-t border-alpine-700/80">
+        <div className="container-shell flex flex-wrap items-center justify-between gap-3 py-4 text-xs text-alpine-200">
+          <p>© {new Date().getFullYear()} TeleNetSystems GmbH</p>
+          <div className="flex gap-4">
+            <Link className="hover:text-copper-200" href="/impressum">
+              Impressum
+            </Link>
+            <Link className="hover:text-copper-200" href="/datenschutz">
+              Datenschutz
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/site-header.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+import Image from "next/image";
+
+import { company, mainNavigation } from "@/lib/site-content";
+
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-40 border-b border-alpine-100/70 bg-white/90 backdrop-blur">
+      <div className="bg-alpine-900 text-alpine-50">
+        <div className="container-shell flex flex-wrap items-center justify-between gap-2 py-2 text-xs sm:text-sm">
+          <p>{company.region} | Persoenlicher IT- und Telekom-Service</p>
+          <div className="flex flex-wrap gap-4">
+            <a className="hover:text-copper-200" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
+              {company.phone}
+            </a>
+            <a className="hover:text-copper-200" href={`mailto:${company.email}`}>
+              {company.email}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-shell flex flex-wrap items-center justify-between gap-6 py-4">
+        <Link className="group inline-flex items-center gap-3" href="/">
+          <Image
+            alt="TeleNetSystems Logo"
+            className="h-10 w-auto transition group-hover:scale-[1.02]"
+            src="/assets/logo/logo-systems-9fd0db14.png"
+            width={190}
+            height={50}
+            priority
+          />
+          <span className="font-heading text-sm uppercase tracking-[0.22em] text-alpine-700">
+            Reutte | Tirol
+          </span>
+        </Link>
+
+        <nav aria-label="Hauptnavigation" className="w-full overflow-x-auto pb-1 lg:w-auto lg:pb-0">
+          <ul className="flex min-w-max items-center gap-2 text-sm font-semibold text-alpine-700">
+            {mainNavigation.map((item) => (
+              <li key={item.href}>
+                <Link className="nav-chip" href={item.href}>
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+            <li>
+              <Link className="btn-primary ml-2" href="/#kontakt">
+                Beratung anfragen
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

lib/site-content.ts

@@ -0,0 +1,218 @@
+export const company = {
+  name: "TeleNetSystems GmbH",
+  shortName: "TeleNetSystems",
+  region: "Reutte, Tirol",
+  address: "Untermarkt 12, 6600 Reutte",
+  phone: "+43 5672 219 40",
+  email: "kontakt@telenetsystems.at",
+  supportEmail: "stoerung@telenetsystems.at",
+  openingHours: "Mo-Fr 08:00-17:30",
+  emergencyHint: "Stoerungsmeldungen werden auch ausserhalb der Buerozeiten angenommen."
+};
+
+export const mainNavigation = [
+  { href: "/", label: "Start" },
+  { href: "/internet", label: "Internet" },
+  { href: "/fernsehen", label: "Fernsehen" },
+  { href: "/telefonie", label: "Telefonie" },
+  { href: "/leistungen", label: "Leistungen" },
+  { href: "/ueber-uns", label: "Ueber uns" }
+];
+
+export const serviceHighlights = [
+  {
+    title: "Internet in Tirol",
+    text: "Kabel- und Glasfaser-Tarife mit klaren Geschwindigkeiten, fixen Monatskosten und regionalem Support.",
+    href: "/internet"
+  },
+  {
+    title: "Fernsehen fuer Zuhause und Betrieb",
+    text: "TV Privat, Pay TV und TV Business sauber getrennt, damit Sie schnell das passende Paket finden.",
+    href: "/fernsehen"
+  },
+  {
+    title: "Telefonie ohne Tarifdschungel",
+    text: "Festnetz und SIP-Loesungen mit nachvollziehbaren Paketen statt Kleingedrucktem.",
+    href: "/telefonie"
+  }
+];
+
+export const internetTariffs = {
+  privateCable: [
+    {
+      name: "Kabel 150",
+      speed: "150/30 Mbit/s",
+      contract: "12 Monate",
+      setup: "Aktivierung 49 EUR",
+      price: "34,90 EUR/Monat"
+    },
+    {
+      name: "Kabel 300",
+      speed: "300/50 Mbit/s",
+      contract: "12 Monate",
+      setup: "Aktivierung 49 EUR",
+      price: "42,90 EUR/Monat"
+    },
+    {
+      name: "Kabel 600",
+      speed: "600/80 Mbit/s",
+      contract: "12 Monate",
+      setup: "Aktivierung 29 EUR",
+      price: "54,90 EUR/Monat"
+    }
+  ],
+  privateFiber: [
+    {
+      name: "Glasfaser 300",
+      speed: "300/150 Mbit/s",
+      contract: "12 Monate",
+      setup: "Hausanschluss auf Anfrage",
+      price: "46,90 EUR/Monat"
+    },
+    {
+      name: "Glasfaser 500",
+      speed: "500/250 Mbit/s",
+      contract: "12 Monate",
+      setup: "Hausanschluss auf Anfrage",
+      price: "58,90 EUR/Monat"
+    },
+    {
+      name: "Glasfaser 1000",
+      speed: "1000/500 Mbit/s",
+      contract: "12 Monate",
+      setup: "Hausanschluss auf Anfrage",
+      price: "74,90 EUR/Monat"
+    }
+  ],
+  business: [
+    "Symmetrische Leitungen mit garantierter Bandbreite",
+    "SLA mit Reaktionszeit ab 4 Stunden",
+    "Standortvernetzung, Backup-Leitung und fixe Ansprechpartner"
+  ]
+};
+
+export const tvTariffs = {
+  private: [
+    {
+      name: "TV Basis",
+      channels: "85 Sender",
+      extras: "Replay 24h",
+      target: "Wohnung, Haus",
+      price: "18,90 EUR/Monat"
+    },
+    {
+      name: "TV Komfort",
+      channels: "130 Sender",
+      extras: "Replay 7 Tage + App",
+      target: "Familienhaushalte",
+      price: "24,90 EUR/Monat"
+    }
+  ],
+  payTv: [
+    {
+      name: "Sport",
+      channels: "12 Senderpakete",
+      extras: "monatlich kuendbar",
+      target: "Live-Sport Fans",
+      price: "ab 9,90 EUR/Monat"
+    },
+    {
+      name: "Film und Serie",
+      channels: "8 Senderpakete",
+      extras: "On-Demand Mediathek",
+      target: "Streaming-Ergaenzung",
+      price: "ab 11,90 EUR/Monat"
+    }
+  ],
+  business: [
+    "TV-Loesungen fuer Hotels, Gastronomie und Wartezonen",
+    "Mehrgeraete-Lizenzierung inklusive zentraler Verwaltung",
+    "Persoenliche Planung vor Ort in Reutte und Umgebung"
+  ]
+};
+
+export const phoneTariffs = [
+  {
+    name: "Phone S",
+    lines: "1 Rufnummer",
+    included: "500 Minuten AT",
+    setup: "Portierung inklusive",
+    price: "8,90 EUR/Monat"
+  },
+  {
+    name: "Phone M",
+    lines: "2 Rufnummern",
+    included: "Flat AT + 150 Min EU",
+    setup: "Portierung inklusive",
+    price: "14,90 EUR/Monat"
+  },
+  {
+    name: "Phone Business",
+    lines: "ab 5 Nebenstellen",
+    included: "SIP-Trunk + Zentrale",
+    setup: "Einrichtung nach Bedarf",
+    price: "ab 39,00 EUR/Monat"
+  }
+];
+
+export const testimonials = [
+  {
+    quote:
+      "Bei einer Stoerung war nach 40 Minuten jemand erreichbar, der unser Problem wirklich geloest hat. Genau so sollte regionaler Support sein.",
+    author: "Markus P.",
+    context: "Hotelbetrieb, Ausserfern"
+  },
+  {
+    quote:
+      "Wir wollten kein Callcenter, sondern eine klare Ansprechperson. Seit dem Wechsel laeuft Internet und TV stabil.",
+    author: "Sabine R.",
+    context: "Privatkundin, Reutte"
+  },
+  {
+    quote:
+      "Das Angebot war verstaendlich auf einer Seite erklaert. Keine versteckten Kosten, keine Ueberraschungen.",
+    author: "Florian K.",
+    context: "Tischlerei, Lechtal"
+  }
+];
+
+export const faqItems = [
+  {
+    question: "Wie schnell bekommen wir einen Termin?",
+    answer:
+      "In der Regel innerhalb von zwei Werktagen. Bei Ausfaellen priorisieren wir bestehende Kundinnen und Kunden in Tirol."
+  },
+  {
+    question: "Gibt es versteckte Nebenkosten?",
+    answer:
+      "Nein. Aktivierungs- oder Anschlusskosten sind bei jedem Tarif offen ausgewiesen, bevor Sie unterschreiben."
+  },
+  {
+    question: "Bietet TeleNetSystems auch Business-Beratung vor Ort?",
+    answer:
+      "Ja. Fuer Unternehmen analysieren wir Infrastruktur und Anforderungen direkt am Standort."
+  }
+];
+
+export const teamMembers = [
+  {
+    name: "Julia Besler",
+    role: "Kundenberatung Privat",
+    image: "/assets/team/julia-20besler-f4fe1bff-fb0f3af2.jpg"
+  },
+  {
+    name: "Furkan Demirel",
+    role: "Netzwerk und Service",
+    image: "/assets/team/furkan-demirel-4112a488-f6dfc223.jpg"
+  },
+  {
+    name: "Timo",
+    role: "Projektleitung Business",
+    image: "/assets/team/timo-224648e7-f0782cdb.jpg"
+  },
+  {
+    name: "Lorena",
+    role: "Support und Koordination",
+    image: "/assets/team/lorena-c31636eb-2f817bb4.jpg"
+  }
+];

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+  trailingSlash: true,
+  images: {
+    unoptimized: true
+  }
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "telenetsystems-website",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "next": "^14.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

public/assets/README.md

@@ -0,0 +1,25 @@
+# Asset-Struktur für Website
+
+Diese Ordner enthalten die Bilder und Medien für die Website.
+
+## Ordnerstruktur
+
+| Ordner | Verwendung |
+|--------|------------|
+| `logo/` | Hauptlogo, Logo für dunkle Hintergründe, Favicon |
+| `hero/` | Große Bilder für Startseite und Unterseiten |
+| `team/` | Fotos von Teammitgliedern |
+| `gallery/` | Projektbilder, Referenzen, Portfolio |
+| `icons/` | Service-Icons, Feature-Icons (SVG bevorzugt) |
+| `backgrounds/` | Muster, Texturen, Hintergrundbilder |
+
+## Empfehlungen
+
+- **Logos**: PNG mit transparentem Hintergrund, mindestens 500px breit
+- **Hero-Bilder**: JPG, mindestens 1920x1080px 
+- **Team-Fotos**: Quadratisch, mindestens 400x400px
+- **Icons**: SVG bevorzugt, alternativ PNG mit transparentem Hintergrund
+
+## Verwendung
+
+Die KI verwendet diese Bilder automatisch bei der Website-Generierung.

src/app/globals.css

@@ -0,0 +1,82 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@theme inline {
+  --color-primary-50: #fef7ed;
+  --color-primary-100: #fdebd4;
+  --color-primary-200: #fbd4a8;
+  --color-primary-300: #f8b871;
+  --color-primary-400: #f5a038;
+  --color-primary-500: #F39212;
+  --color-primary-600: #da7c0a;
+  --color-primary-700: #b5620b;
+  --color-primary-800: #914d10;
+  --color-primary-900: #764010;
+  --color-primary-950: #402006;
+
+  --color-secondary-50: #fef3ed;
+  --color-secondary-100: #fde3d4;
+  --color-secondary-200: #fac4a8;
+  --color-secondary-300: #f69d71;
+  --color-secondary-400: #f17838;
+  --color-secondary-500: #EB5C23;
+  --color-secondary-600: #d14416;
+  --color-secondary-700: #ae3313;
+  --color-secondary-800: #8b2a17;
+  --color-secondary-900: #712616;
+  --color-secondary-950: #3d100a;
+
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+
+  --color-accent: #F39212;
+  --color-accent-dark: #da7c0a;
+
+  --font-sans: var(--font-inter), system-ui, sans-serif;
+
+  --text-hero: 3.5rem;
+  --text-hero--line-height: 1.1;
+  --text-hero--letter-spacing: -0.02em;
+
+  --text-display: 2.5rem;
+  --text-display--line-height: 1.15;
+  --text-display--letter-spacing: -0.015em;
+
+  --text-title: 1.75rem;
+  --text-title--line-height: 1.25;
+
+  --text-body-lg: 1.125rem;
+  --text-body-lg--line-height: 1.7;
+
+  --spacing-section: 5rem;
+  --spacing-section-lg: 7rem;
+
+  --radius-card: 0.75rem;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-white text-neutral-800 antialiased;
+  font-family: var(--font-sans);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-semibold;
+}
+
+:focus-visible {
+  @apply outline-2 outline-offset-2 outline-primary-500;
+}

tailwind.config.ts

@@ -0,0 +1,54 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        alpine: {
+          50: "#f3f8fc",
+          100: "#dfeef8",
+          200: "#badbf0",
+          300: "#87bedd",
+          400: "#569fc7",
+          500: "#3a81ab",
+          600: "#2b6488",
+          700: "#204a66",
+          800: "#163246",
+          900: "#0c1d2a"
+        },
+        copper: {
+          50: "#fdf8f2",
+          100: "#f9ebdc",
+          200: "#f2d0ae",
+          300: "#e8b07a",
+          400: "#dd904f",
+          500: "#c9722d",
+          600: "#a55a23",
+          700: "#7f451b",
+          800: "#5a3113",
+          900: "#381e0c"
+        },
+        moss: {
+          500: "#1f6b56",
+          600: "#155141"
+        }
+      },
+      boxShadow: {
+        soft: "0 18px 36px rgba(8, 26, 41, 0.12)",
+        card: "0 10px 24px rgba(12, 32, 50, 0.10)"
+      },
+      backgroundImage: {
+        "alpine-grid":
+          "linear-gradient(rgba(16, 58, 90, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 58, 90, 0.06) 1px, transparent 1px)"
+      }
+    }
+  },
+  plugins: []
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}