telenetsystems-2026-02-03-v1/prompts/master_prompt.md

Website-Build Masterprompt v2

Projekt: TeleNetSystems | Branche: IT / Software | Sprache: de

0. Research & Kontext

Nutze diese Insights als Fundament für alle Design- und Content-Entscheidungen.

Branchen-Insights

1. Cloud-basierte Lösungen: Immer mehr Unternehmen setzen auf Cloud-Technologien, um Flexibilität und Skalierbarkeit zu gewährleisten. 2. Cybersecurity: Mit zunehmender Digitalisierung steigt die Nachfrage nach robusten Sicherheitslösungen. 3. Personalisierung: Kunden erwarten maßgeschneiderte Erlebnisse, die auf ihre individuellen Bedürfnisse zugeschnitten sind. 4. Integration von KI: Künstliche Intelligenz wird zunehmend in IT-Dienstleistungen integriert, um Prozesse zu optimieren. 5. Nachhaltigkeit: Umweltfreundliche IT-Lösungen gewinnen an Bedeutung, da Unternehmen nachhaltiger agieren möchten.

Wettbewerbsanalyse

Viele IT-Websites setzen auf ein minimalistisches Design mit klarer Struktur und einfacher Navigation. Häufige Features sind Live-Chats, detaillierte Servicebeschreibungen und Kundenbewertungen. Wettbewerber punkten oft mit einer klaren Darstellung ihrer technischen Kompetenz und einem breiten Serviceangebot. Lücken bestehen häufig in der Personalisierung und regionalen Ansprache, was TeleNetSystems nutzen könnte, um sich abzuheben.

Zielgruppen-Analyse

Primäre Zielgruppe sind Privatkunden im Alter von 18-65 Jahren, die zuverlässige Telekom-Dienste mit persönlichem Service suchen. Sie sind qualitätsbewusst und schätzen regionale Anbieter. Sekundäre Zielgruppe sind Unternehmen, die professionelle IT-Lösungen und technischen Support benötigen. Beide Gruppen legen Wert auf Zuverlässigkeit, einfache Kommunikation und schnelle Problemlösungen. Einwände könnten hohe Kosten oder technische Komplexität sein. Entscheidungskriterien sind Qualität, Service und regionale Nähe.

UX-Empfehlungen

Die Navigation sollte klar und einfach sein, mit einer deutlichen Trennung zwischen Privat- und Geschäftskunden. Eine schlanke Struktur mit schnellen Ladezeiten ist wichtig, um auch Nutzer mit schwächerer Internetverbindung zu erreichen. Interaktive Elemente wie Kontaktformulare oder Live-Chats sollten leicht zugänglich sein, um schnelle Hilfe zu bieten. Die Website sollte übersichtlich sein und klare Handlungsaufforderungen enthalten.

Conversion-Strategie

Um die Zielgruppen zu überzeugen, sollten CTAs wie 'Jetzt beraten lassen' oder 'Schnelle Hilfe anfordern' prominent platziert werden. Vertrauenselemente wie Kundenbewertungen, Zertifikate und regionale Erfolgsgeschichten stärken das Vertrauen. Die Argumentationsstruktur sollte die Zuverlässigkeit und den persönlichen Service betonen, um qualitätsbewusste und rationale Entscheider zu überzeugen.

Vorgeschlagene Alleinstellungsmerkmale (USPs)

• Regionale Nähe und persönlicher Service
• Langjährige Erfahrung seit 1976
• Umfassendes Serviceangebot von TV bis IT
• Schnelle Reaktionszeiten bei Supportanfragen
• Maßgeschneiderte Lösungen für Privat- und Geschäftskunden

SEO-Keywords

Telekommunikation Tirol, IT-Dienstleister Reutte, Highspeed-Internet Österreich, Glasfaser Tirol, TeleNetSystems, regionaler IT-Service, Kabel-TV Anbieter, Telefonie Tarife Österreich, IT-Support Reutte, Netzwerkplanung Tirol, Glasfaser Ausbau, IT-Installation Reutte, Fernwartung IT, lokaler Telekom-Anbieter, IT-Lösungen für Unternehmen

Content-Richtlinien

Die Website sollte in einem freundlichen, sachlichen und beratenden Ton kommunizieren. Botschaften sollten kurz, prägnant und erklärend sein, um Vertrauen und Kompetenz zu vermitteln. Wichtig ist, dass die Sprache verständlich bleibt und Sicherheit vermittelt. Die Inhalte sollten die regionale Verankerung und den persönlichen Service betonen.

---

🚨 KI-KONTEXT (HÖCHSTE GEWICHTUNG)

KRITISCH: Diese Vorgaben haben die höchste Priorität und überschreiben ALLE anderen Regeln, sofern nicht mit SYSTEM_SKILLS kollidierend.

✅ Was bei dieser Website BESONDERS WICHTIG ist:

Die Website soll sofort Vertrauen, Kompetenz und regionale Nähe vermitteln. Besucher sollen das Gefühl haben, bei einem verlässlichen Anbieter aus ihrer Region zu sein, der moderne Technik liefert, aber verständlich kommuniziert. Wichtig ist, dass die Inhalte klar strukturiert und leicht verständlich sind – auch für Menschen ohne technisches Vorwissen. Internet, Fernsehen und IT-Services sollen nicht kompliziert wirken, sondern als stabile, alltagstaugliche Lösungen. Die Seite soll zeigen, dass hinter dem Unternehmen echte Menschen mit Erfahrung stehen, die erreichbar sind und im Problemfall schnell helfen. Serviceorientierung und persönliche Betreuung sollen deutlich spürbar sein. Besonders wichtig ist außerdem: Übersichtlichkeit: Besucher sollen in wenigen Sekunden verstehen, welche Leistungen es gibt und für wen sie gedacht sind. Schnelle Ladezeit: Viele Nutzer kommen aus Regionen mit schwächerer Internetverbindung – die Seite muss technisch schlank sein. Klare Handlungsaufforderungen: Kontakt aufnehmen, Beratung anfragen oder Störung melden muss einfach und direkt möglich sein. Trennung von Privat- und Geschäftskunden: Beide Zielgruppen sollen sich sofort angesprochen fühlen und passende Inhalte finden. Seriöse, moderne Gestaltung: Zeitgemäß, professionell, aber nicht übertrieben futuristisch oder verspielt. Transparenz: Leistungen, Abläufe und Kontaktmöglichkeiten sollen offen und nachvollziehbar dargestellt sein. Der Gesamteindruck soll sein: „Hier bekomme ich zuverlässige Technik, ehrliche Beratung und echte Unterstützung – ohne komplizierte Prozesse.“ Außerdem soll von dem Ordner ( /Volumes/EliasExtern/Arbeit/EB-Solutions/Projekte/Testing/telenetsystems-2026-02-03-v1/assets/BilderUndLogos) das Logo und die bilder gleich passend eingebaut werden. Dass die webiste gleich die rihcitgen bilder nutzt.

❌ Was AUF KEINEN FALL passieren darf:

Die Website darf auf keinen Fall unpersönlich, überladen oder wie eine anonyme Großkonzern-Seite wirken. Sie soll sich klar von aggressivem Marketing und austauschbaren IT-Agentur-Seiten unterscheiden. Unbedingt vermeiden: Übertriebene Werbesprache wie „revolutionär“, „weltweit führend“, „einzigartig“ Unverständlicher Fachjargon ohne Erklärung Zu viele technische Details auf einmal, die Besucher überfordern Unübersichtliche Navigation oder verschachtelte Menüs Ablenkende Animationen oder Effekte, die von den Inhalten ablenken Pop-ups, die sofort erscheinen oder aggressiv zur Newsletter-Anmeldung drängen Stockfotos von fremden Call-Center-Teams, die nicht zum regionalen Charakter passen Dunkle, schwer lesbare Designs oder zu geringe Kontraste Zu lange Textblöcke ohne Struktur Unklare Kontaktwege oder versteckte Telefonnummern Außerdem darf die Seite nicht den Eindruck vermitteln, dass der Support kompliziert oder schwer erreichbar ist. Besucher sollen Sicherheit und Zugänglichkeit spüren – keine Distanz. Kurz gesagt: ❌ Keine Marketing-Show ❌ Keine Technik-Überforderung ❌ Keine anonyme Konzern-Atmosphäre

WICHTIG: Prüfe bei JEDER Designentscheidung, ob sie mit diesem KI-Kontext übereinstimmt. Bei Konflikten: KI-Kontext hat Vorrang vor generischen Regeln.

---

1. Lesereihenfolge (PFLICHT)

Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen, bevor du irgendeine Zeile Code schreibst:

1. READ_FIRST.md (Projektübersicht & Regeln)
2. skills/SYSTEM_SKILLS.md (globale System-Skills – nicht überschreibbar)
3. skills/UI_GUIDELINES.md (UI-Richtlinien – nicht überschreibbar)
4. skills/DEFINITION_OF_DONE.md (Definition of Done – nicht überschreibbar)
5. skills/CLIENT_OVERRIDES.md (kundenspezifische Ergänzungen)
6. spec/ProjectSpec.json (Projektspezifikation)
7. spec/design_tokens.json (Design-Token – Single Source of Truth)
8. theme/globals.css (CSS Custom Properties – Single Source of Truth)
9. theme/stylesheet.css (Strukturelles CSS-Framework)

Erst nach dem Lesen aller Dateien darfst du mit der Implementierung beginnen.

2. Strikte Regeln (Non-Negotiable)

VERBOTEN (sofortige Verletzung)

Die folgenden Praktiken sind absolut verboten und führen zu einem ungültigen Build:

1. Keine Inline-Styles: style={{ ... }} oder style="..." ist in JEDER Komponente verboten. Ausnahme: Dynamische Werte, die nur zur Laufzeit bekannt sind (z.B. style={{ '--progress': value }}). Alle anderen Styles kommen aus CSS-Klassen oder Tailwind-Utilities.
2. Keine harten Pixelwerte: Kein fontSize: 24px, kein padding: 40px, kein margin: 16px in Styles oder Tailwind-Klassen wie p-[40px]. Nutze IMMER Design-Token-Variablen.
3. Kein Content ohne Struktur: Kein Content darf direkt in <main>, <div> oder Root-Level landen. JEDER Content-Block MUSS in <section className="section"> → <div className="container"> eingebettet sein.
4. Keine wilde Button-Erstellung: Buttons dürfen NICHT mit eigenen bg/text-Farbkombinationen erzeugt werden. NUR die definierten Button-Varianten aus stylesheet.css verwenden: .btn-primary, .btn-secondary, .btn-outline, .btn-ghost.
5. Kein Lorem Ipsum: Niemals Lorem ipsum oder andere Dummy-Texte verwenden. Nutze stattdessen branchenspezifische, professionelle Platzhalter-Texte in der Sprache des Projekts.
6. Keine chaotischen Tailwind-Klassen: Keine Kombinationen, die Text- und Hintergrundfarbe kollidieren oder Kontrast zerstören. Keine className-Strings mit mehr als 10 Utility-Klassen – extrahiere in CSS-Klassen.

Strukturelle Pflichten

Section/Container-System (PFLICHT)

Jede Seite MUSS dieser Struktur folgen:

<main>
  <section className="section section--hero">
    <div className="container">
      {/* Hero-Content */}
    </div>
  </section>
  <section className="section">
    <div className="container">
      {/* Weitere Section */}
    </div>
  </section>
</main>

Verfügbare Section-Varianten:

• .section – Standard (padding: --spacing-section)
• .section--sm – Kompakt (padding: --spacing-2xl)
• .section--lg – Großzügig (padding: --spacing-5xl)
• .section--hero – Hero-Bereich (min-height: 80vh, vertikal zentriert)
• .section--flush – Kein Padding (für Bilder, Maps etc.)

Container-Varianten:

• .container – Standard (max-width: --spacing-container)
• .container--narrow – Schmaler (max-width: 48rem, für Text-Content)
• .container--wide – Breiter (max-width: 90rem, für Galerien)

Button-System (PFLICHT)

Buttons werden AUSSCHLIESSLICH über das Variant-System erzeugt:

// RICHTIG:
<button className="btn btn-primary">Jetzt starten</button>
<button className="btn btn-secondary btn-lg">Mehr erfahren</button>
<button className="btn btn-outline">Kontakt</button>
<a href="/kontakt" className="btn btn-ghost">Details →</a>

// FALSCH (VERBOTEN):
<button className="bg-blue-500 text-white px-4 py-2 rounded">Klick</button>
<button style={{ backgroundColor: "blue" }}>Klick</button>

Verfügbare Button-Varianten:

• .btn.btn-primary – Hauptaktion / CTA
• .btn.btn-secondary – Sekundäre Aktion
• .btn.btn-outline – Umrandung, transparent
• .btn.btn-ghost – Minimal, text-artig
• Größen: .btn-sm, .btn-lg

Typografie-System (PFLICHT)

Headlines und Texte MÜSSEN über das definierte System gestylt werden:

// RICHTIG: Nutze HTML-Heading-Tags (automatisch gestylt)
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<p className="lead">Einleitungstext</p>
<p className="text-muted">Ergänzender Text</p>

// Oder Klassen, wenn semantisches Level abweicht:
<h3 className="heading-2">Visuell groß, semantisch h3</h3>

// FALSCH (VERBOTEN):
<p style={{ fontSize: "32px" }}>Groß</p>
<span className="text-[42px]">Riesig</span>

Vertikale Abstände (PFLICHT)

Verwende IMMER die Spacing-Utilities:

• .stack-xs bis .stack-2xl für vertikale Abstände zwischen Kind-Elementen
• Tailwind spacing mit Token-Werten: gap-[var(--spacing-md)], mb-[var(--spacing-lg)]
• NIEMALS: mb-[47px], gap-[23px], mt-[100px]

Design & Styling

• Keine Templates: Verwende KEINE vorgefertigten UI-Templates, Themes oder Section-Bibliotheken (kein shadcn, kein tailwindui, keine Copy-Paste-Sections).
• Design nur aus Tokens: Jede Farbe, jedes Spacing, jede Schriftgröße MUSS aus globals.css Custom Properties kommen. KEINE Hardcoded-Werte im Code.
• Keine UI-Libraries: Kein shadcn/ui, kein Material UI, kein Chakra UI, kein daisyUI. Nur native Tailwind CSS v4 + Custom Components.
• Tailwind v4: Nutze die neuen v4 Features (CSS-first config, @theme directive).
• Card-Komponente: Nutze .card aus stylesheet.css für Karten-Layouts. Keine eigenen border/shadow-Kombinationen.

Architecture

• Skill-Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
  • CLIENT_OVERRIDES dürfen globale Regeln NICHT brechen, nur ergänzen.
• TypeScript strict: Alle Dateien in TypeScript. strict: true in tsconfig. Keine any Types (außer bei externen Libraries ohne Types).
• Stack: Next.js 16 App Router, React 19, TypeScript 5+, Tailwind CSS v4, framer-motion (sparsam), lucide-react.
• File Structure: Folge der Next.js 16 App Router Convention. Routes in app/, Components in components/.
• No New Dependencies: Füge KEINE neuen npm packages ohne explizite Begründung hinzu. Nutze den vorhandenen Stack.

Qualitätsstandard: Launch-Ready

Die generierte Website MUSS so aussehen, als wäre sie 90 % fertig und bereit für den Go-Live – NICHT wie ein Prototyp oder eine Demo:

• Sinnvolle Abstände: Großzügiges Whitespace zwischen Sections. Keine gedrängten Inhalte.
• Professionelle Platzhalter: Wenn Inhalte fehlen, nutze branchenspezifische, realistische Texte. KEIN Lorem Ipsum, KEIN "Placeholder".
• Keine leeren Sections: Jede Section MUSS visuellen Wert bieten. Keine Sections mit nur einer Zeile Text.
• Visuelle Ruhe: Maximal 2 verschiedene Schriftgrößen pro Section. Einheitliche Ausrichtung. Konsistente Farbanwendung.
• Professionelle Bilder: Verwende hochwertige Placeholder-Bilder (Unsplash/Pexels via next/image mit blur placeholder).

Performance & Accessibility

• framer-motion sparsam: Nur für key interactions. Keine Animationen auf jedem Element.
• Lenis: NICHT aktivieren, es sei denn CLIENT_OVERRIDES fordert es explizit.
• Accessibility: Semantisches HTML5, ARIA-Labels wo nötig, Keyboard-Navigation, WCAG AA minimum.
• Performance: Keine unnötigen Client Components. Nutze Server Components wo möglich. Next.js Image für alle Bilder.

3. Projekt-Parameter & Identität

A) Unternehmensidentität & Kontext

• Kunde: TeleNetSystems
• Slug: telenetsystems
• Beschreibung: Die Telenet Systems GmbH (auf der Website unter tnr.at) ist ein Full-Service-Telekommunikations- und IT-Dienstleister mit Sitz in Reutte, Tirol (Österreich). Das Unternehmen bietet im Bezirk Reutte und Umgebung vor allem folgende Leistungen für Privat- und Geschäftskunden an: Hochwertiges Fernsehen mit über 200 Programmen und HDTV-Sendern, Highspeed-Internet über Kabel und Glasfaser inklusive verschiedener Tarifoptionen, Telefonie-Tarife für Privat- und Firmenkunden, IT-Services und Support, etwa Netzwerk- und Serverplanung, IT-Installation, Reparaturen und Fernwartung, Glasfaser-Planung und -Ausbau, Qualitätssicherung sowie technisch-behördliche Unterstützung bei Netzprojekten. Das Unternehmen besteht seit 1976 und hat sich historisch von einem Kabel- und Antennenanbieter zu einem umfassenden Telekommunikations- und IT-Dienstleister entwickelt. Kurz gesagt: Telenet Systems GmbH ist ein regionaler Telekom- und IT-Service-Provider, der Fernsehen, Internet, Telefonie und technische IT-Dienstleistungen für Privat- und Firmenkunden im Bezirk Reutte und Umgebung anbietet.
• Branche: IT / Software
• Standort: Reutte, Tirol, Österreich
• Einzugsgebiet: regional
• Unternehmensgröße: kmu
• Reifegrad: marktfuehrer
• Locale: de-AT
• Sprache: de (Alle Texte in dieser Sprache!)

B) Zielgruppe & Psychografie

• Hauptzielgruppe: ➡ Primär: Privatkunden, die solide Telekom-Dienste (TV, Internet, Telefon) mit persönlichem, regionalem Service wollen. ➡ Sekundär: Unternehmen und Gewerbekunden, die professionelle Kommunikationstechnik, IT-Lösungen und Netzwerkinfrastruktur benötigen — mit technischem Support und Beratung vor Ort.
• Altersbereich: 18–65 Jahre
• Geschlecht: egal
• Entscheidertyp: rational, qualitaetsgetrieben
• Wissensstand: laie
• Typische Einwände:
  • Zu teuer
  • Zu kompliziert

C) Tonalität & Kommunikation

• Ansprache: sie
• Tonalität: freundlich, sachlich, beratend
• Schreibstil: kurz_praegnant, erklaerend
• Emotionales Gefühl: Die Website soll vertrauenswürdig, technisch kompetent und regional verankert wirken. Besucher sollen sofort spüren, dass sie es mit einem verlässlichen Telekom- und IT-Partner aus der Region zu tun haben – nicht mit einem anonymen Großkonzern. Gleichzeitig darf der Auftritt nicht kühl oder übertechnisch sein. Er soll klar, modern und aufgeräumt wirken, mit einer Sprache, die verständlich bleibt und Sicherheit vermittelt. Der Nutzer soll das Gefühl haben: „Hier bekomme ich stabile Technik, ehrliche Beratung und schnelle Hilfe, wenn etwas nicht funktioniert.“ Wichtig ist ein Eindruck von: Zuverlässigkeit (stabile Netze, dauerhafte Lösungen), Nähe & Serviceorientierung (persönlicher Ansprechpartner, regionaler Support), Professionalität ohne Arroganz, Moderner Technik auf solidem Fundament. Kurz gesagt: Kompetent wie ein Technikprofi, aber nahbar wie ein regionaler Dienstleister, dem man vertraut.

D) Angebot & Leistungsstruktur

• Angebotstyp: mitgliedschaft
• Anzahl Leistungen: 3
• Leistungen:
  • Fernsehen: TV Privat: Hol dir über 200 Programme inkl. 40 HDTV-Sendern und rund 40 Radiosendern direkt in dein Wohnzimmer – mit unserem Angebot für sensationelle 16,47 € (inkl. MwSt) im Monat! TV Business: Du bist noch auf der Suche nach der passenden TV-Lösung für dein Unternehmen? Gerne sind wir dir dabei behilflich. Schick uns einfach deine Anfrage und wir kümmern uns um deine individuelle Lösung. Pay TV: Auf Wunsch bieten wir zusätzlich Pay-TV-Lösungen an. Du möchtest exklusive Filme, Serien und Sport in HD/UHD? Kontaktier uns einfach und wir finden das passende Angebot für dich.
    • Nutzen: Umfangreiches TV-Angebot mit hoher Bildqualität und individueller Anpassung für Unternehmen.
  • Internet: Unsere Tarife für Kabel-Kunden: hit €14,50/Monat 40 Mbit/s 6 Mbit/s keine Servicepauschale unlimitierte Daten eco €19,00/Monat 60 Mbit/s 8 Mbit/s keine Servicepauschale unlimitierte Daten fun €29,00/Monat 80 Mbit/s 12 Mbit/s keine Servicepauschale unlimitierte Daten pro €39,00/Monat 100 Mbit/s 14 Mbit/s keine Servicepauschale unlimitierte Daten mega €49,00/Monat 180 Mbit/s 22 Mbit/s keine Servicepauschale unlimitierte Daten Tarife gültig ab 01.05.2024. Privat-Anschlüsse enthalten keine statischen IPv4-Adressen. Für die Tarife telenet.hit, telenet.eco und telenet.fun werden interne NonPublic IPv4-Adressen verwendet. Service innerhalb unserer regulären Geschäftszeiten. In allen Paketen ab dem Tarif telenet.pro ist eine öffentliche IPv4-Adresse enthalten, welche dynamisch zugewiesen wird. Alle Tarife enthalten IPv6-Adressen. Für die Installation fallen einmalige Installationskosten an, welche je nach Aufwand verrechnet werden. Unsere Tarife für Glasfaser-Kunden: eco €23,00/Monat 100 Mbit/s 100 Mbit/s keine Servicepauschale unlimitierte Daten fun €29,00/Monat 200 Mbit/s 200 Mbit/s keine Servicepauschale unlimitierte Daten pro €39,00/Monat 300 Mbit/s 300 Mbit/s keine Servicepauschale unlimitierte Daten mega €49,00/Monat 500 Mbit/s 500 Mbit/s keine Servicepauschale unlimitierte Daten Tarife gültig ab 01.04.2025. Privat Anschlüsse enthalten keine statischen IPv4-Adressen. Für die Tarife telenet.eco und telenet.fun werden interne NonPublic IPv4-Adressen verwendet. Service innerhalb unserer regulären Geschäftszeiten. In allen Paketen ab dem Tarif telenet.pro ist eine öffentliche IPv4-Adresse enthalten, welche dynamisch zugewiesen wird. Alle Tarife enthalten IPv6-Adressen. Für die Installation fallen einmalige Installationskosten an, welche je nach Aufwand verrechnet werden. Business: Gerne erstellen wir für dein Unternehmen ein maßgeschneidertes Business-Internet-Angebot inkl. passendem Service-Paket. Schick uns einfach deine Anfrage und wir kümmern uns um deine individuelle Lösung.
    • Nutzen: Schnelles und zuverlässiges Internet mit flexiblen Tarifen für Privat- und Geschäftskunden.
  • Telefonie: Unsere Kabel-Telefonie-Tarife: zero (ohne Internet) €5,00/Monat Festnetz AT: ab 2,4 Cent / Minute zero (mit Internet von Telenet) €0,00/Monat Festnetz AT: ab 2,4 Cent / Minute business €8,90/Monat Festnetz AT: ab 3,24 Cent / Minute
    • Nutzen: Kostengünstige und flexible Telefonie-Tarife für Privat- und Geschäftskunden.
• Preissensitivität: mittel

F) Marken- & Stilparameter

• Primärfarbe: #f39210
• Sekundärfarbe: #f39210
• Akzentfarbe: #eb5c24
• Hintergrund: #ffffff
• Vordergrund: #0f172a
• Heading Font: Inter
• Body Font: Inter
• Stil-Adjektive: modern, seriös, technisch, dynamisch
• Stil-Verbote: verspielt, laut, comic, retro, kitschig

G) UX & Interaktion

• Interaktionsniveau: moderat
• Animationen: praeent
• Scroll-Verhalten: normal

H) Conversion & Vertrauen

• Primärer CTA: "Jetzt beraten lassen" → #kontakt
• Sekundärer CTA: "Schnelle Hilfe anfordern" → #leistungen
• Kontaktmethoden: formular, telefon
• Vertrauenselemente: zertifikate, referenzen, bewertungen

4. Seitenstruktur & Anforderungen

Startseite (/)

Zweck: Informieren | Priorität: Hoch

Beschreibung: Entdecken Sie zuverlässige Telekom- und IT-Dienste in Tirol.

Content-Strategie: Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.

Route: app/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt beraten lassen" und "Schnelle Hilfe anfordern"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Fernsehen (/fernsehen)

Zweck: Konvertieren | Priorität: Mittel

Beschreibung: Erleben Sie über 200 TV-Programme in bester Qualität.

Content-Strategie: Fokus auf Handlungsaufforderung, prominente CTAs, Einwände adressieren, Conversion-Elemente (Trust, Urgency).

Route: app/fernsehen/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt beraten lassen" und "Schnelle Hilfe anfordern"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Internet (/internet)

Zweck: Konvertieren | Priorität: Mittel

Beschreibung: Highspeed-Internet für Privat- und Geschäftskunden.

Content-Strategie: Fokus auf Handlungsaufforderung, prominente CTAs, Einwände adressieren, Conversion-Elemente (Trust, Urgency).

Route: app/internet/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt beraten lassen" und "Schnelle Hilfe anfordern"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Telefonie (/telefonie)

Zweck: Konvertieren | Priorität: Mittel

Beschreibung: Flexible Telefonie-Tarife für jeden Bedarf.

Content-Strategie: Fokus auf Handlungsaufforderung, prominente CTAs, Einwände adressieren, Conversion-Elemente (Trust, Urgency).

Route: app/telefonie/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt beraten lassen" und "Schnelle Hilfe anfordern"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Leistungen (/leistungen)

Zweck: Informieren | Priorität: Mittel

Beschreibung: Umfassende Telekom- und IT-Services für Tirol.

Content-Strategie: Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.

Route: app/leistungen/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt beraten lassen" und "Schnelle Hilfe anfordern"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Über uns (/ueber-uns)

Zweck: Informieren | Priorität: Mittel

Beschreibung: Lernen Sie die Telenet Systems GmbH kennen.

Content-Strategie: Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.

Route: app/ueber-uns/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt beraten lassen" und "Schnelle Hilfe anfordern"
• Accessibility (ARIA labels, alt texts, keyboard nav)

5. Technische Anforderungen

Features:

• Kontaktformular
• Bildergalerie
• FAQ

Domain: https://www.tnr.at Analytics: Nicht angegeben Hosting: Nicht angegeben

6. Implementierungs-Reihenfolge

Befolge diese Schritte in exakter Reihenfolge:

1. Plan erstellen: Kurzer Plan (3-5 Bullet Points) mit deinem Implementierungsansatz.
2. Layout-Components: Header, Footer, Navigation (in components/layout/). Header und Footer nutzen <div className="container"> für Content-Begrenzung.
3. Shared Components: Button-Komponente (nutzt .btn + Varianten-Klassen aus stylesheet.css), Card (nutzt .card), Form-Elemente (in components/ui/). KEINE eigenen Farb-/Spacing-Kombinationen.
4. Seiten implementieren: In der Reihenfolge der Seitenstruktur (Abschnitt 4). JEDE Seite folgt dem Section/Container-Muster. Jede Section nutzt <section className="section"> → <div className="container">.
5. Platzhalter-Inhalte: Fehlende Texte durch branchenspezifische, professionelle Platzhalter ersetzen. Fehlende Bilder durch thematisch passende Unsplash-URLs.
6. SEO & Metadata: Für jede Seite metadata export mit title, description, og:tags.
7. Accessibility Check: Semantisches HTML, ARIA, Keyboard-Navigation prüfen.
8. Qualitätscheck: Prüfe jede Seite auf: (a) Keine Inline-Styles, (b) Alle Sections in Section/Container, (c) Buttons nur über Varianten, (d) Typografie nur über System-Klassen, (e) Konsistente Abstände.
9. Performance Check: Unnötige Client Components zu Server Components refactoren.
10. Build & Lint: npm run build && npm run lint fehlerfrei. Bei Fehler: .next-Ordner löschen, erneut bauen.

7. Offene Fragen (mit Client klären)

Die folgenden Informationen fehlen und müssen mit dem Client geklärt werden:

• client.contact.name (contact): Wie lautet der Name des Ansprechpartners?
• client.contact.email (contact): Wie lautet die offizielle Kontakt-E-Mail-Adresse?
• client.contact.phone (contact): Wie lautet die offizielle Kontakt-Telefonnummer?
• technical.hosting (technical): Welcher Hosting-Anbieter wird verwendet?
• technical.analytics (technical): Welches Analytics-Tool wird verwendet?
• brand.logo.url (brand): Wo ist das Logo der Telenet Systems GmbH verfügbar?
• technical.legal.impressum.companyName (legal): Wie lautet der offizielle Firmenname für das Impressum?
• technical.legal.impressum.street (legal): Wie lautet die offizielle Straßenadresse für das Impressum?
• technical.legal.impressum.postalCode (legal): Wie lautet die offizielle Postleitzahl für das Impressum?
• technical.legal.impressum.city (legal): Wie lautet die offizielle Stadt für das Impressum?
• technical.legal.impressum.country (legal): Wie lautet das offizielle Land für das Impressum?
• technical.legal.impressum.email (legal): Wie lautet die offizielle E-Mail-Adresse für das Impressum?
• technical.legal.impressum.phone (legal): Wie lautet die offizielle Telefonnummer für das Impressum?
• technical.legal.impressum.vatId (legal): Wie lautet die offizielle Umsatzsteuer-Identifikationsnummer für das Impressum?
• technical.legal.impressum.register (legal): Wie lautet die offizielle Handelsregisternummer für das Impressum?
• technical.legal.datenschutz.companyName (legal): Wie lautet der offizielle Firmenname für die Datenschutzrichtlinie?
• technical.legal.datenschutz.street (legal): Wie lautet die offizielle Straßenadresse für die Datenschutzrichtlinie?
• technical.legal.datenschutz.postalCode (legal): Wie lautet die offizielle Postleitzahl für die Datenschutzrichtlinie?
• technical.legal.datenschutz.city (legal): Wie lautet die offizielle Stadt für die Datenschutzrichtlinie?
• technical.legal.datenschutz.country (legal): Wie lautet das offizielle Land für die Datenschutzrichtlinie?
• technical.legal.datenschutz.email (legal): Wie lautet die offizielle E-Mail-Adresse für die Datenschutzrichtlinie?
• technical.legal.datenschutz.phone (legal): Wie lautet die offizielle Telefonnummer für die Datenschutzrichtlinie?
• technical.legal.datenschutz.vatId (legal): Wie lautet die offizielle Umsatzsteuer-Identifikationsnummer für die Datenschutzrichtlinie?
• technical.legal.datenschutz.register (legal): Wie lautet die offizielle Handelsregisternummer für die Datenschutzrichtlinie?

WICHTIG: Für diese Felder darfst du NICHT raten. Frage den Client oder nutze Platzhalter-Werte mit klarer Kennzeichnung (z.B. "PLACEHOLDER: ...").

---

8. Definition of Done (Abnahme-Checkliste)

Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:

Build & Code Quality

• npm run build läuft fehlerfrei durch (0 Errors, 0 Warnings)
• npm run lint meldet keine Fehler (0 Errors, Warnings OK)
• TypeScript strict mode aktiv, keine any types
• Alle Imports funktionieren, keine broken imports

Funktionalität

• Alle Seiten aus Seitenstruktur (Abschnitt 4) existieren und sind erreichbar
• Navigation funktioniert zwischen allen Seiten
• Alle CTAs ("Jetzt beraten lassen", "Schnelle Hilfe anfordern") funktional
• Kontaktformular (falls vorhanden) validiert Eingaben

Strukturelle Integrität

• KEINE Inline-Styles (style={{ }} / style="") im gesamten Code (Ausnahme: dynamische CSS-Variablen)
• JEDE Section nutzt <section className="section ..."> → <div className="container ...">
• KEIN Content direkt in <main> oder <div> ohne Section/Container-Wrapper
• ALLE Buttons nutzen .btn + Variante (.btn-primary, .btn-secondary, .btn-outline, .btn-ghost)
• KEINE eigenen bg/text-Farbkombinationen auf Buttons
• KEIN Lorem Ipsum – nur branchenspezifische Platzhalter-Texte

Design & Styling

• Alle Farben kommen aus globals.css Custom Properties (keine Hardcoded Colors)
• Alle Spacings nutzen Design Tokens (keine Magic Numbers, keine p-[47px])
• Typography nutzt Heading-Tags (h1–h6) oder .heading-* Klassen – KEINE harten Pixelwerte
• Brand-konform (Farben, Fonts, Tonalität)
• Visuelle Ruhe: Großzügige Abstände, keine gedrängten Sections
• Maximal 10 Tailwind-Klassen pro Element (sonst in CSS-Klasse extrahieren)

Responsive & Cross-Browser

• Mobile (320px - 767px): Layout funktioniert, Navigation collapsed
• Tablet (768px - 1023px): Layout angepasst
• Desktop (1024px+): Volle Breite, optimales Layout
• Touch-Targets mindestens 44x44px (Mobile)

Accessibility (WCAG AA)

• Semantisches HTML5 (header, nav, main, section, article, footer)
• Alle Bilder haben alt-Texte
• Farbkontraste min. 4.5:1 für Text, 3:1 für UI (automatisch geprüft)
• Keyboard-Navigation funktioniert (Tab, Enter, Escape)
• Focus-States sichtbar
• ARIA-Labels wo semantisches HTML nicht ausreicht

Performance

• Unnötige Client Components zu Server Components refactored
• Bilder nutzen Next.js <Image> Component
• Keine blocking Scripts in <head>
• framer-motion nur sparsam eingesetzt (nicht überall)

SEO

• Jede Seite hat metadata export (title, description)
• Open Graph Tags gesetzt (og:title, og:description, og:image)
• Strukturierte Daten (JSON-LD) für Organisation (Homepage)

Legal & Content

• Impressum-Seite vorhanden (falls in Seitenstruktur)
• Datenschutz-Seite vorhanden (falls in Seitenstruktur)
• Alle Texte auf de

9. Stop Conditions

In folgenden Situationen MUSST du stoppen und NICHT weitermachen:

1. Unklare Anforderungen: Wenn Spec-Felder "Nicht angegeben" enthalten oder unklar sind → Frage den Client (siehe Abschnitt 7).
2. Widersprüche: Wenn CLIENT_OVERRIDES gegen SYSTEM_SKILLS/UI_GUIDELINES verstoßen → Melde das Problem.
3. Fehlende Assets: Wenn Logo, Bilder oder andere Assets fehlen → Nutze Platzhalter mit klarer Kennzeichnung.
4. Build Errors: Wenn npm run build fehlschlägt und du es nicht beheben kannst → Melde den Fehler mit Stack Trace.

NIEMALS:

• Raten bei unklaren Requirements
• Globale Skills (SYSTEM_SKILLS/UI_GUIDELINES/DEFINITION_OF_DONE) ignorieren
• Neue Dependencies ohne Begründung hinzufügen
• UI-Templates oder Copy-Paste-Code nutzen
• Inline-Styles verwenden (style={{ }})
• Content ohne Section/Container-Struktur platzieren
• Buttons mit eigenen Farb-Kombinationen statt .btn-Varianten erzeugen
• Harte Pixelwerte für Schriftgrößen oder Abstände verwenden
• Lorem Ipsum oder generische Dummy-Texte einsetzen

---

Generiert von website-prototype-generator v2 am 2026-02-03.