Initialize client project from skeleton
Client: TeleNetSystems Generated: 2026-02-03T15:33:56.941Z
This commit is contained in:
Prototype Generator
@@ -1,4 +1,18 @@
|
|||||||
{
|
[
|
||||||
"version": "1.0.0",
|
{
|
||||||
"entries": []
|
"projectId": "937300b2-2deb-40b5-b9a5-529044d018f0",
|
||||||
}
|
"generatedAt": "2026-02-03T15:33:56.941Z",
|
||||||
|
"generator": "website-prototype-generator",
|
||||||
|
"specVersion": "1.0",
|
||||||
|
"llmUsed": true,
|
||||||
|
"artifacts": [
|
||||||
|
"design_tokens.json",
|
||||||
|
"CLIENT_OVERRIDES.md",
|
||||||
|
"master_prompt.md",
|
||||||
|
"globals.css",
|
||||||
|
"stylesheet.css",
|
||||||
|
"READ_FIRST.md",
|
||||||
|
"ProjectSpec.json"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -1,107 +1,511 @@
|
|||||||
# Master Prompt
|
# Website-Build Masterprompt v2
|
||||||
|
|
||||||
Anweisungen für die KI zur Website-Generierung.
|
> 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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Kontext
|
## 🚨 KI-KONTEXT (HÖCHSTE GEWICHTUNG)
|
||||||
|
|
||||||
Du arbeitest mit einem minimalistischen Website-Skeleton. Dieses Repository enthält:
|
> **KRITISCH:** Diese Vorgaben haben die **höchste Priorität** und überschreiben ALLE anderen Regeln, sofern nicht mit SYSTEM_SKILLS kollidierend.
|
||||||
|
|
||||||
- Keine fertigen Layouts
|
### ✅ Was bei dieser Website BESONDERS WICHTIG ist:
|
||||||
- Keine UI-Komponenten
|
|
||||||
- Keine Design-Vorgaben
|
|
||||||
|
|
||||||
Alles muss von Grund auf neu erstellt werden.
|
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.“
|
||||||
|
|
||||||
|
### ❌ 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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Vor dem Start
|
## 1. Lesereihenfolge (PFLICHT)
|
||||||
|
|
||||||
**Pflichtlektüre** (in dieser Reihenfolge):
|
**Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen**, bevor du irgendeine Zeile Code schreibst:
|
||||||
|
|
||||||
1. `/skills/SYSTEM_SKILLS.md` - Grundregeln
|
1. `READ_FIRST.md` (Projektübersicht & Regeln)
|
||||||
2. `/skills/UI_GUIDELINES.md` - Qualitätsstandards
|
2. `skills/SYSTEM_SKILLS.md` (globale System-Skills – **nicht überschreibbar**)
|
||||||
3. `/skills/DEFINITION_OF_DONE.md` - Abnahmekriterien
|
3. `skills/UI_GUIDELINES.md` (UI-Richtlinien – **nicht überschreibbar**)
|
||||||
4. `/spec/ProjectSpec.json` - Projektanforderungen
|
4. `skills/DEFINITION_OF_DONE.md` (Definition of Done – **nicht überschreibbar**)
|
||||||
5. `/spec/design_tokens.json` - Design-System
|
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.**
|
||||||
|
|
||||||
## Workflow
|
## 2. Strikte Regeln (Non-Negotiable)
|
||||||
|
|
||||||
### 1. Analyse
|
### VERBOTEN (sofortige Verletzung)
|
||||||
|
|
||||||
- ProjectSpec.json vollständig lesen und verstehen
|
Die folgenden Praktiken sind **absolut verboten** und führen zu einem ungültigen Build:
|
||||||
- Design Tokens studieren
|
|
||||||
- Zielgruppe und Ziele identifizieren
|
|
||||||
- Technische Anforderungen erfassen
|
|
||||||
|
|
||||||
### 2. Konzeption
|
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.
|
||||||
|
|
||||||
- Seitenstruktur planen
|
### Strukturelle Pflichten
|
||||||
- Komponenten identifizieren (keine vorgefertigten!)
|
|
||||||
- Responsive Breakpoints berücksichtigen
|
|
||||||
- Performance-Budget einplanen
|
|
||||||
|
|
||||||
### 3. Umsetzung
|
#### Section/Container-System (PFLICHT)
|
||||||
|
Jede Seite MUSS dieser Struktur folgen:
|
||||||
|
|
||||||
- Mobile-First entwickeln
|
```tsx
|
||||||
- Semantisches HTML verwenden
|
<main>
|
||||||
- CSS Variables aus globals.css nutzen
|
<section className="section section--hero">
|
||||||
- Tailwind für Utility-Klassen
|
<div className="container">
|
||||||
- TypeScript strict mode
|
{/* Hero-Content */}
|
||||||
|
</div>
|
||||||
### 4. Qualitätssicherung
|
</section>
|
||||||
|
<section className="section">
|
||||||
- Definition of Done prüfen
|
<div className="container">
|
||||||
- Alle Breakpoints testen
|
{/* Weitere Section */}
|
||||||
- Accessibility validieren
|
</div>
|
||||||
- Performance messen
|
</section>
|
||||||
|
</main>
|
||||||
### 5. Dokumentation
|
|
||||||
|
|
||||||
- Änderungen in `generation_log.json` festhalten
|
|
||||||
- Entscheidungen dokumentieren
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Beispiel-Prompt für neue Website
|
|
||||||
|
|
||||||
```
|
|
||||||
Erstelle eine Website für [Kunde] basierend auf:
|
|
||||||
|
|
||||||
1. ProjectSpec.json wurde aktualisiert mit:
|
|
||||||
- Firmenname: [Name]
|
|
||||||
- Branche: [Branche]
|
|
||||||
- Zielgruppe: [Zielgruppe]
|
|
||||||
- Gewünschte Seiten: [Liste]
|
|
||||||
|
|
||||||
2. design_tokens.json wurde aktualisiert mit:
|
|
||||||
- Primärfarbe: [Farbe]
|
|
||||||
- Schriftart: [Font]
|
|
||||||
- [weitere Anpassungen]
|
|
||||||
|
|
||||||
Bitte lies zuerst /skills und /spec vollständig.
|
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
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.)
|
||||||
|
|
||||||
## Verbote (Wiederholung)
|
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)
|
||||||
|
|
||||||
- KEINE UI-Libraries
|
#### Button-System (PFLICHT)
|
||||||
- KEINE Templates kopieren
|
Buttons werden AUSSCHLIESSLICH über das Variant-System erzeugt:
|
||||||
- KEINE eigenmächtigen Design-Entscheidungen
|
|
||||||
- KEINE hardcodierten Werte
|
```tsx
|
||||||
- KEIN Over-Engineering
|
// 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:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// 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: ...").
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Ausgabe-Erwartung
|
## 8. Definition of Done (Abnahme-Checkliste)
|
||||||
|
|
||||||
Nach erfolgreicher Generierung:
|
**Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:**
|
||||||
|
|
||||||
- Lauffähige Website unter `npm run dev`
|
### Build & Code Quality
|
||||||
- Build erfolgreich unter `npm run build`
|
- [ ] `npm run build` läuft fehlerfrei durch (0 Errors, 0 Warnings)
|
||||||
- Alle DoD-Kriterien erfüllt
|
- [ ] `npm run lint` meldet keine Fehler (0 Errors, Warnings OK)
|
||||||
- generation_log.json aktualisiert
|
- [ ] 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.*
|
||||||
|
|||||||
@@ -1,152 +1,198 @@
|
|||||||
# CLIENT_OVERRIDES (Project-Specific)
|
# CLIENT_OVERRIDES.md
|
||||||
|
|
||||||
Kundenspezifische Ergänzungen. Diese Datei darf globale Skills nicht überschreiben.
|
> **WICHTIG:** Diese Overrides ergänzen die globalen Skills.
|
||||||
|
> Sie dürfen SYSTEM_SKILLS, UI_GUIDELINES und DEFINITION_OF_DONE **nicht** überschreiben.
|
||||||
|
> Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
|
||||||
|
|
||||||
|
## 🚨 KI-KONTEXT (HÖCHSTE GEWICHTUNG)
|
||||||
|
|
||||||
|
> **KRITISCH:** Diese Vorgaben haben die **höchste Priorität** bei allen Implementierungsentscheidungen.
|
||||||
|
|
||||||
|
### ✅ Was 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.“
|
||||||
|
|
||||||
|
### ❌ 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
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Scope
|
## Kunde & Kontext
|
||||||
|
|
||||||
**Kunde:** TBD
|
- **Name:** TeleNetSystems
|
||||||
**Marke:** TBD
|
- **Slug:** telenetsystems
|
||||||
**Branche:** TBD
|
- **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.
|
||||||
**Geschäftsmodell:** TBD
|
- **Branche:** IT / Software
|
||||||
**Kernleistung:** TBD
|
- **Standort:** Reutte, Tirol, Österreich
|
||||||
**Zielgruppe (primär):** TBD
|
- **Einzugsgebiet:** regional
|
||||||
**Zielgruppe (sekundär):** TBD
|
- **Unternehmensgröße:** kmu
|
||||||
**Kundentyp:** TBD
|
- **Reifegrad:** marktfuehrer
|
||||||
**Region:** TBD
|
- **Locale:** de-AT
|
||||||
|
- **Sprache:** de
|
||||||
|
- **Kontakt:** Nicht angegeben (Nicht angegeben, Nicht angegeben)
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
- **Alter:** 18–65 Jahre
|
||||||
|
- **Geschlecht:** egal
|
||||||
|
- **Entscheidertyp:** rational, qualitaetsgetrieben
|
||||||
|
- **Wissensstand:** laie
|
||||||
|
- **Typische Einwände:** Zu teuer, Zu kompliziert
|
||||||
|
|
||||||
|
## Kommunikation & Tonalität
|
||||||
|
|
||||||
|
- **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.
|
||||||
|
|
||||||
|
## Angebot & Leistungen
|
||||||
|
|
||||||
|
- **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
|
||||||
|
|
||||||
|
## UX & Interaktion
|
||||||
|
|
||||||
|
- **Interaktionsniveau:** moderat
|
||||||
|
- **Animationen:** praeent
|
||||||
|
- **Scroll-Verhalten:** normal
|
||||||
|
|
||||||
|
## Conversion & Vertrauen
|
||||||
|
|
||||||
|
- **Primärer CTA:** "Jetzt beraten lassen" → #kontakt
|
||||||
|
- **Sekundärer CTA:** "Schnelle Hilfe anfordern" → #leistungen
|
||||||
|
- **Kontaktmethoden:** formular, telefon
|
||||||
|
- **Vertrauenselemente:** zertifikate, referenzen, bewertungen
|
||||||
|
|
||||||
|
## Marken- & Stilparameter
|
||||||
|
|
||||||
|
- **Primärfarbe:** #f39210
|
||||||
|
- **Sekundärfarbe:** #f39210
|
||||||
|
- **Akzentfarbe:** #eb5c24
|
||||||
|
- **Hintergrund:** #ffffff
|
||||||
|
- **Vordergrund:** #0f172a
|
||||||
|
- **Schrift Heading:** Inter (400)
|
||||||
|
- **Schrift Body:** Inter (400)
|
||||||
|
- **Logo:** Nicht angegeben
|
||||||
|
- **Stil-Adjektive:** modern, seriös, technisch, dynamisch
|
||||||
|
- **Stil-Verbote:** verspielt, laut, comic, retro, kitschig
|
||||||
|
|
||||||
|
## Research-Insights
|
||||||
|
|
||||||
|
### 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 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.
|
||||||
|
|
||||||
|
## Seitenstruktur
|
||||||
|
|
||||||
|
### Startseite (`/`)
|
||||||
|
- **Zweck:** Informieren | **Priorität:** Hoch
|
||||||
|
- **Beschreibung:** Entdecken Sie zuverlässige Telekom- und IT-Dienste in Tirol.
|
||||||
|
|
||||||
|
### Fernsehen (`/fernsehen`)
|
||||||
|
- **Zweck:** Konvertieren | **Priorität:** Mittel
|
||||||
|
- **Beschreibung:** Erleben Sie über 200 TV-Programme in bester Qualität.
|
||||||
|
|
||||||
|
### Internet (`/internet`)
|
||||||
|
- **Zweck:** Konvertieren | **Priorität:** Mittel
|
||||||
|
- **Beschreibung:** Highspeed-Internet für Privat- und Geschäftskunden.
|
||||||
|
|
||||||
|
### Telefonie (`/telefonie`)
|
||||||
|
- **Zweck:** Konvertieren | **Priorität:** Mittel
|
||||||
|
- **Beschreibung:** Flexible Telefonie-Tarife für jeden Bedarf.
|
||||||
|
|
||||||
|
### Leistungen (`/leistungen`)
|
||||||
|
- **Zweck:** Informieren | **Priorität:** Mittel
|
||||||
|
- **Beschreibung:** Umfassende Telekom- und IT-Services für Tirol.
|
||||||
|
|
||||||
|
### Über uns (`/ueber-uns`)
|
||||||
|
- **Zweck:** Informieren | **Priorität:** Mittel
|
||||||
|
- **Beschreibung:** Lernen Sie die Telenet Systems GmbH kennen.
|
||||||
|
|
||||||
|
|
||||||
|
## Technische Anforderungen & Recht
|
||||||
|
|
||||||
|
- **Domain:** https://www.tnr.at
|
||||||
|
- **Hosting:** Nicht angegeben
|
||||||
|
- **Analytics:** Nicht angegeben
|
||||||
|
- **Features:** Kontaktformular, Bildergalerie, FAQ
|
||||||
|
|
||||||
|
### Rechtliche Pflichtangaben (Impressum)
|
||||||
|
|
||||||
|
- **Firmenname:** Nicht angegeben
|
||||||
|
- **Straße:** Nicht angegeben
|
||||||
|
- **PLZ:** Nicht angegeben
|
||||||
|
- **Stadt:** Nicht angegeben
|
||||||
|
- **Land:** Nicht angegeben
|
||||||
|
- **E-Mail:** Nicht angegeben
|
||||||
|
- **Telefon:** Nicht angegeben
|
||||||
|
- **UID-Nummer:** Nicht angegeben
|
||||||
|
- **Firmenbuch:** Nicht angegeben
|
||||||
|
|
||||||
|
### Integrationen
|
||||||
|
|
||||||
|
- **Newsletter:** Nein
|
||||||
|
|
||||||
|
## Offene Fragen
|
||||||
|
|
||||||
|
- **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?
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Read Order
|
*Generiert von website-prototype-generator v2 am 2026-02-03.*
|
||||||
|
|
||||||
1. `skills/SYSTEM_SKILLS.md`
|
|
||||||
2. `skills/UI_GUIDELINES.md`
|
|
||||||
3. `skills/DEFINITION_OF_DONE.md`
|
|
||||||
4. `skills/CLIENT_OVERRIDES.md` ← diese Datei
|
|
||||||
5. `spec/project_spec.json`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Non-Goals
|
|
||||||
|
|
||||||
Diese Datei definiert **NICHT**:
|
|
||||||
- Globale Arbeitsweisen (siehe SYSTEM_SKILLS.md)
|
|
||||||
- UI-Qualitätsstandards (siehe UI_GUIDELINES.md)
|
|
||||||
- Abnahmekriterien (siehe DEFINITION_OF_DONE.md)
|
|
||||||
- Konkrete Farbwerte, Layouts, Komponenten (kommen aus design_tokens.json)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand Voice (Deutsch)
|
|
||||||
|
|
||||||
| Eigenschaft | Wert |
|
|
||||||
|-------------|------|
|
|
||||||
| Sprache | Deutsch |
|
|
||||||
| Ansprache | TBD |
|
|
||||||
| Formalität | TBD |
|
|
||||||
| Markenpersönlichkeit | TBD |
|
|
||||||
|
|
||||||
**USPs:**
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Must-Haves
|
|
||||||
|
|
||||||
### Pflichtseiten
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Pflichtinhalte
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Pflicht-CTAs
|
|
||||||
| Label | Ziel | Priorität |
|
|
||||||
|-------|------|-----------|
|
|
||||||
| TBD | TBD | TBD |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Must-Not-Haves
|
|
||||||
|
|
||||||
### Verbotene Inhalte
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Verbotene Stilmittel
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Verbotene Technologien
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Content & SEO Notes
|
|
||||||
|
|
||||||
### SEO-Fokus-Keywords
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### GEO-Fokus
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
### Content-Richtung
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Legal (DACH)
|
|
||||||
|
|
||||||
### Impressum
|
|
||||||
- **Erforderlich:** Ja
|
|
||||||
- **Details:** TBD
|
|
||||||
|
|
||||||
### Datenschutzerklärung
|
|
||||||
- **Erforderlich:** Ja
|
|
||||||
- **Details:** TBD
|
|
||||||
|
|
||||||
### Zusätzliche rechtliche Hinweise
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Assets & Links
|
|
||||||
|
|
||||||
### Logo
|
|
||||||
- **Verfügbar:** TBD
|
|
||||||
- **Pfad:** TBD
|
|
||||||
- **Format:** TBD
|
|
||||||
|
|
||||||
### Brand Guidelines
|
|
||||||
- **Verfügbar:** TBD
|
|
||||||
- **Pfad:** TBD
|
|
||||||
|
|
||||||
### Weitere Assets
|
|
||||||
- TBD
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## References (Liked / Disliked)
|
|
||||||
|
|
||||||
### Gefällt (Inspiration)
|
|
||||||
| URL | Grund |
|
|
||||||
|-----|-------|
|
|
||||||
| TBD | TBD |
|
|
||||||
|
|
||||||
### Gefällt nicht (Abgrenzung)
|
|
||||||
| URL | Grund |
|
|
||||||
|-----|-------|
|
|
||||||
| TBD | TBD |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Open Questions (TBD)
|
|
||||||
|
|
||||||
- TBD
|
|
||||||
- Kundenname und Kontaktperson klären
|
|
||||||
- Branche und Geschäftsmodell definieren
|
|
||||||
- Zielgruppe spezifizieren
|
|
||||||
- Tonalität festlegen (Du/Sie, formal/locker)
|
|
||||||
- Seitenstruktur und Prioritäten bestimmen
|
|
||||||
- CTAs und Conversion-Ziele definieren
|
|
||||||
- Rechtliche Daten für Impressum sammeln
|
|
||||||
- Assets (Logo, CI) bereitstellen
|
|
||||||
- Referenz-Websites sammeln
|
|
||||||
|
|||||||
@@ -1,50 +1,427 @@
|
|||||||
{
|
{
|
||||||
"$schema": "./ProjectSpec.schema.json",
|
|
||||||
"meta": {
|
"meta": {
|
||||||
"projectName": "",
|
"specVersion": "1.0",
|
||||||
"client": "",
|
"status": "draft",
|
||||||
"version": "1.0.0",
|
"projectId": "937300b2-2deb-40b5-b9a5-529044d018f0",
|
||||||
"createdAt": "",
|
"createdAt": "2026-02-03T15:33:54.000Z",
|
||||||
"updatedAt": ""
|
"updatedAt": "2026-02-03T15:33:56.941Z"
|
||||||
},
|
},
|
||||||
"brand": {
|
"client": {
|
||||||
"name": "",
|
"name": "TeleNetSystems",
|
||||||
"tagline": "",
|
"slug": "telenetsystems",
|
||||||
"description": "",
|
"description": "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.",
|
||||||
"tone": [],
|
"industry": "IT / Software",
|
||||||
"values": []
|
"location": {
|
||||||
|
"city": "Reutte",
|
||||||
|
"region": "Tirol",
|
||||||
|
"country": "Österreich"
|
||||||
},
|
},
|
||||||
"target": {
|
"marketScope": "regional",
|
||||||
"audience": [],
|
"companySize": "kmu",
|
||||||
"goals": [],
|
"maturityLevel": "marktfuehrer",
|
||||||
"competitors": []
|
"locale": "de-AT",
|
||||||
},
|
"language": "de",
|
||||||
"pages": [],
|
"contact": {
|
||||||
"features": [],
|
"name": "Nicht angegeben",
|
||||||
"integrations": [],
|
"email": "Nicht angegeben",
|
||||||
"seo": {
|
"phone": "Nicht angegeben"
|
||||||
"primaryKeywords": [],
|
|
||||||
"secondaryKeywords": [],
|
|
||||||
"localSeo": {
|
|
||||||
"enabled": false,
|
|
||||||
"regions": []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"technical": {
|
"audience": {
|
||||||
"hosting": "",
|
"primaryTarget": "➡ 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.",
|
||||||
"domain": "",
|
"ageRange": {
|
||||||
"analytics": [],
|
"min": 18,
|
||||||
"thirdParty": []
|
"max": 65
|
||||||
|
},
|
||||||
|
"gender": "egal",
|
||||||
|
"decisionMakerType": [
|
||||||
|
"rational",
|
||||||
|
"qualitaetsgetrieben"
|
||||||
|
],
|
||||||
|
"knowledgeLevel": "laie",
|
||||||
|
"typicalObjections": [
|
||||||
|
"Zu teuer",
|
||||||
|
"Zu kompliziert"
|
||||||
|
],
|
||||||
|
"mainProblems": []
|
||||||
|
},
|
||||||
|
"communication": {
|
||||||
|
"formality": "sie",
|
||||||
|
"baseTone": [
|
||||||
|
"freundlich",
|
||||||
|
"sachlich",
|
||||||
|
"beratend"
|
||||||
|
],
|
||||||
|
"writingStyle": [
|
||||||
|
"kurz_praegnant",
|
||||||
|
"erklaerend"
|
||||||
|
],
|
||||||
|
"emotionalFeeling": "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."
|
||||||
|
},
|
||||||
|
"offering": {
|
||||||
|
"type": "mitgliedschaft",
|
||||||
|
"services": [
|
||||||
|
{
|
||||||
|
"title": "Fernsehen",
|
||||||
|
"description": "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.",
|
||||||
|
"benefit": "Umfangreiches TV-Angebot mit hoher Bildqualität und individueller Anpassung für Unternehmen."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Internet",
|
||||||
|
"description": "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.",
|
||||||
|
"benefit": "Schnelles und zuverlässiges Internet mit flexiblen Tarifen für Privat- und Geschäftskunden."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Telefonie",
|
||||||
|
"description": "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",
|
||||||
|
"benefit": "Kostengünstige und flexible Telefonie-Tarife für Privat- und Geschäftskunden."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"priceSensitivity": "mittel",
|
||||||
|
"upsells": []
|
||||||
},
|
},
|
||||||
"content": {
|
"content": {
|
||||||
"languages": ["de"],
|
"siteType": "multipage",
|
||||||
"defaultLanguage": "de",
|
"pages": [
|
||||||
"contentSources": []
|
{
|
||||||
|
"slug": "/",
|
||||||
|
"title": "Startseite",
|
||||||
|
"description": "Entdecken Sie zuverlässige Telekom- und IT-Dienste in Tirol.",
|
||||||
|
"purpose": "informieren",
|
||||||
|
"priority": "hoch",
|
||||||
|
"sections": []
|
||||||
},
|
},
|
||||||
"timeline": {
|
{
|
||||||
"kickoff": "",
|
"slug": "/fernsehen",
|
||||||
"milestones": [],
|
"title": "Fernsehen",
|
||||||
"launch": ""
|
"description": "Erleben Sie über 200 TV-Programme in bester Qualität.",
|
||||||
|
"purpose": "konvertieren",
|
||||||
|
"priority": "mittel",
|
||||||
|
"sections": []
|
||||||
},
|
},
|
||||||
"notes": ""
|
{
|
||||||
|
"slug": "/internet",
|
||||||
|
"title": "Internet",
|
||||||
|
"description": "Highspeed-Internet für Privat- und Geschäftskunden.",
|
||||||
|
"purpose": "konvertieren",
|
||||||
|
"priority": "mittel",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/telefonie",
|
||||||
|
"title": "Telefonie",
|
||||||
|
"description": "Flexible Telefonie-Tarife für jeden Bedarf.",
|
||||||
|
"purpose": "konvertieren",
|
||||||
|
"priority": "mittel",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/leistungen",
|
||||||
|
"title": "Leistungen",
|
||||||
|
"description": "Umfassende Telekom- und IT-Services für Tirol.",
|
||||||
|
"purpose": "informieren",
|
||||||
|
"priority": "mittel",
|
||||||
|
"sections": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "/ueber-uns",
|
||||||
|
"title": "Über uns",
|
||||||
|
"description": "Lernen Sie die Telenet Systems GmbH kennen.",
|
||||||
|
"purpose": "informieren",
|
||||||
|
"priority": "mittel",
|
||||||
|
"sections": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"internalLinks": [
|
||||||
|
"Footer → Kontakt",
|
||||||
|
"Hero → Leistungen",
|
||||||
|
"Navbar → Alle Seiten"
|
||||||
|
],
|
||||||
|
"tone": "professionell, freundlich",
|
||||||
|
"language": "de",
|
||||||
|
"cta": {
|
||||||
|
"primary": "Jetzt beraten lassen",
|
||||||
|
"secondary": "Schnelle Hilfe anfordern"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"brand": {
|
||||||
|
"colors": {
|
||||||
|
"primary": "#f39210",
|
||||||
|
"secondary": "#f39210",
|
||||||
|
"accent": "#eb5c24",
|
||||||
|
"neutral": "#6b7280",
|
||||||
|
"background": "#ffffff",
|
||||||
|
"foreground": "#0f172a",
|
||||||
|
"muted": "#f3f4f6",
|
||||||
|
"mutedForeground": "#6b7280",
|
||||||
|
"border": "#e5e7eb",
|
||||||
|
"success": "#10b981",
|
||||||
|
"warning": "#f59e0b",
|
||||||
|
"error": "#ef4444"
|
||||||
|
},
|
||||||
|
"fonts": {
|
||||||
|
"heading": {
|
||||||
|
"family": "Inter",
|
||||||
|
"fallback": "sans-serif",
|
||||||
|
"weight": "400"
|
||||||
|
},
|
||||||
|
"body": {
|
||||||
|
"family": "Inter",
|
||||||
|
"fallback": "sans-serif",
|
||||||
|
"weight": "400"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"logo": {
|
||||||
|
"url": "Nicht angegeben",
|
||||||
|
"alt": "TeleNetSystems"
|
||||||
|
},
|
||||||
|
"styleAdjectives": [
|
||||||
|
"modern",
|
||||||
|
"seriös",
|
||||||
|
"technisch",
|
||||||
|
"dynamisch"
|
||||||
|
],
|
||||||
|
"styleProhibitions": [
|
||||||
|
"verspielt",
|
||||||
|
"laut",
|
||||||
|
"comic",
|
||||||
|
"retro",
|
||||||
|
"kitschig"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"interaction": {
|
||||||
|
"level": "moderat",
|
||||||
|
"animations": "praeent",
|
||||||
|
"scrollBehavior": "normal"
|
||||||
|
},
|
||||||
|
"conversion": {
|
||||||
|
"primaryCTA": {
|
||||||
|
"text": "Jetzt beraten lassen",
|
||||||
|
"target": "#kontakt"
|
||||||
|
},
|
||||||
|
"secondaryCTA": {
|
||||||
|
"text": "Schnelle Hilfe anfordern",
|
||||||
|
"target": "#leistungen"
|
||||||
|
},
|
||||||
|
"contactMethod": [
|
||||||
|
"formular",
|
||||||
|
"telefon"
|
||||||
|
],
|
||||||
|
"trustElements": [
|
||||||
|
"zertifikate",
|
||||||
|
"referenzen",
|
||||||
|
"bewertungen"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"technical": {
|
||||||
|
"domain": "https://www.tnr.at",
|
||||||
|
"hosting": "Nicht angegeben",
|
||||||
|
"tracking": "none",
|
||||||
|
"analytics": "Nicht angegeben",
|
||||||
|
"legal": {
|
||||||
|
"impressum": {
|
||||||
|
"companyName": "Nicht angegeben",
|
||||||
|
"street": "Nicht angegeben",
|
||||||
|
"postalCode": "Nicht angegeben",
|
||||||
|
"city": "Nicht angegeben",
|
||||||
|
"country": "Nicht angegeben",
|
||||||
|
"email": "Nicht angegeben",
|
||||||
|
"phone": "Nicht angegeben",
|
||||||
|
"vatId": "Nicht angegeben",
|
||||||
|
"register": "Nicht angegeben"
|
||||||
|
},
|
||||||
|
"datenschutz": {
|
||||||
|
"companyName": "Nicht angegeben",
|
||||||
|
"street": "Nicht angegeben",
|
||||||
|
"postalCode": "Nicht angegeben",
|
||||||
|
"city": "Nicht angegeben",
|
||||||
|
"country": "Nicht angegeben",
|
||||||
|
"email": "Nicht angegeben",
|
||||||
|
"phone": "Nicht angegeben",
|
||||||
|
"vatId": "Nicht angegeben",
|
||||||
|
"register": "Nicht angegeben"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"features": [
|
||||||
|
"Kontaktformular",
|
||||||
|
"Bildergalerie",
|
||||||
|
"FAQ"
|
||||||
|
],
|
||||||
|
"integrations": {
|
||||||
|
"newsletter": false,
|
||||||
|
"bookingTool": "",
|
||||||
|
"external": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"aiContext": {
|
||||||
|
"whatIsImportant": "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.“",
|
||||||
|
"whatToAvoid": "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",
|
||||||
|
"comparisons": {
|
||||||
|
"good": [],
|
||||||
|
"bad": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notes": {
|
||||||
|
"userNotes": "",
|
||||||
|
"openQuestions": [
|
||||||
|
{
|
||||||
|
"field": "client.contact.name",
|
||||||
|
"question": "Wie lautet der Name des Ansprechpartners?",
|
||||||
|
"category": "contact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "client.contact.email",
|
||||||
|
"question": "Wie lautet die offizielle Kontakt-E-Mail-Adresse?",
|
||||||
|
"category": "contact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "client.contact.phone",
|
||||||
|
"question": "Wie lautet die offizielle Kontakt-Telefonnummer?",
|
||||||
|
"category": "contact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.hosting",
|
||||||
|
"question": "Welcher Hosting-Anbieter wird verwendet?",
|
||||||
|
"category": "technical"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.analytics",
|
||||||
|
"question": "Welches Analytics-Tool wird verwendet?",
|
||||||
|
"category": "technical"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "brand.logo.url",
|
||||||
|
"question": "Wo ist das Logo der Telenet Systems GmbH verfügbar?",
|
||||||
|
"category": "brand"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.companyName",
|
||||||
|
"question": "Wie lautet der offizielle Firmenname für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.street",
|
||||||
|
"question": "Wie lautet die offizielle Straßenadresse für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.postalCode",
|
||||||
|
"question": "Wie lautet die offizielle Postleitzahl für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.city",
|
||||||
|
"question": "Wie lautet die offizielle Stadt für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.country",
|
||||||
|
"question": "Wie lautet das offizielle Land für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.email",
|
||||||
|
"question": "Wie lautet die offizielle E-Mail-Adresse für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.phone",
|
||||||
|
"question": "Wie lautet die offizielle Telefonnummer für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.vatId",
|
||||||
|
"question": "Wie lautet die offizielle Umsatzsteuer-Identifikationsnummer für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.impressum.register",
|
||||||
|
"question": "Wie lautet die offizielle Handelsregisternummer für das Impressum?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.companyName",
|
||||||
|
"question": "Wie lautet der offizielle Firmenname für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.street",
|
||||||
|
"question": "Wie lautet die offizielle Straßenadresse für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.postalCode",
|
||||||
|
"question": "Wie lautet die offizielle Postleitzahl für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.city",
|
||||||
|
"question": "Wie lautet die offizielle Stadt für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.country",
|
||||||
|
"question": "Wie lautet das offizielle Land für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.email",
|
||||||
|
"question": "Wie lautet die offizielle E-Mail-Adresse für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.phone",
|
||||||
|
"question": "Wie lautet die offizielle Telefonnummer für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.vatId",
|
||||||
|
"question": "Wie lautet die offizielle Umsatzsteuer-Identifikationsnummer für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"field": "technical.legal.datenschutz.register",
|
||||||
|
"question": "Wie lautet die offizielle Handelsregisternummer für die Datenschutzrichtlinie?",
|
||||||
|
"category": "legal"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"llmResearch": {
|
||||||
|
"industryInsights": "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.",
|
||||||
|
"competitorAnalysis": "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.",
|
||||||
|
"audienceAnalysis": "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.",
|
||||||
|
"seoKeywords": [
|
||||||
|
"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"
|
||||||
|
],
|
||||||
|
"contentGuidelines": "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.",
|
||||||
|
"uxRecommendations": "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.",
|
||||||
|
"conversionStrategy": "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.",
|
||||||
|
"suggestedUSPs": [
|
||||||
|
"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"
|
||||||
|
],
|
||||||
|
"targetAudience": "Die Zielgruppe umfasst Privatkunden und Unternehmen im Bezirk Reutte, Tirol, die zuverlässige Telekommunikations- und IT-Dienstleistungen suchen. Sie sind qualitätsbewusst, schätzen persönlichen Service und legen Wert auf regionale Anbieter. Demografisch sind sie zwischen 18 und 65 Jahre alt, geografisch in Tirol angesiedelt, mit einem Fokus auf einfache und zuverlässige Lösungen.",
|
||||||
|
"generatedAt": "2026-02-03T15:35:11.573Z"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"visibility": "public",
|
||||||
|
"autoInit": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,44 +1,29 @@
|
|||||||
{
|
{
|
||||||
"$schema": "./design_tokens.schema.json",
|
"specVersion": "1.0",
|
||||||
"colors": {
|
"colors": {
|
||||||
"primary": "#000000",
|
"primary": "#f39210",
|
||||||
"secondary": "#666666",
|
"secondary": "#f39210",
|
||||||
"accent": "#0066cc",
|
"accent": "#eb5c24",
|
||||||
|
"neutral": "#6b7280",
|
||||||
"background": "#ffffff",
|
"background": "#ffffff",
|
||||||
"foreground": "#000000",
|
"foreground": "#0f172a",
|
||||||
"muted": "#f5f5f5",
|
"muted": "#f3f4f6",
|
||||||
"border": "#e5e5e5",
|
"mutedForeground": "#4b505a",
|
||||||
"error": "#dc2626",
|
"border": "#e5e7eb",
|
||||||
"success": "#16a34a",
|
"success": "#10b981",
|
||||||
"warning": "#ca8a04"
|
"warning": "#f59e0b",
|
||||||
|
"error": "#ef4444"
|
||||||
},
|
},
|
||||||
"typography": {
|
"fonts": {
|
||||||
"fontFamilies": {
|
"heading": {
|
||||||
"sans": "system-ui, -apple-system, sans-serif",
|
"family": "Inter",
|
||||||
"serif": "Georgia, serif",
|
"fallback": "sans-serif",
|
||||||
"mono": "ui-monospace, monospace"
|
"weight": "400"
|
||||||
},
|
},
|
||||||
"fontSizes": {
|
"body": {
|
||||||
"xs": "0.75rem",
|
"family": "Inter",
|
||||||
"sm": "0.875rem",
|
"fallback": "sans-serif",
|
||||||
"base": "1rem",
|
"weight": "400"
|
||||||
"lg": "1.125rem",
|
|
||||||
"xl": "1.25rem",
|
|
||||||
"2xl": "1.5rem",
|
|
||||||
"3xl": "1.875rem",
|
|
||||||
"4xl": "2.25rem",
|
|
||||||
"5xl": "3rem"
|
|
||||||
},
|
|
||||||
"fontWeights": {
|
|
||||||
"normal": 400,
|
|
||||||
"medium": 500,
|
|
||||||
"semibold": 600,
|
|
||||||
"bold": 700
|
|
||||||
},
|
|
||||||
"lineHeights": {
|
|
||||||
"tight": 1.25,
|
|
||||||
"normal": 1.5,
|
|
||||||
"relaxed": 1.75
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"spacing": {
|
"spacing": {
|
||||||
@@ -48,20 +33,79 @@
|
|||||||
"lg": "1.5rem",
|
"lg": "1.5rem",
|
||||||
"xl": "2rem",
|
"xl": "2rem",
|
||||||
"2xl": "3rem",
|
"2xl": "3rem",
|
||||||
"3xl": "4rem"
|
"3xl": "4rem",
|
||||||
|
"4xl": "6rem",
|
||||||
|
"5xl": "8rem",
|
||||||
|
"section": "5rem",
|
||||||
|
"container": "1200px",
|
||||||
|
"containerPadding": "2rem",
|
||||||
|
"6xl": "10rem"
|
||||||
},
|
},
|
||||||
"borderRadius": {
|
"borderRadius": {
|
||||||
"none": "0",
|
"none": "0",
|
||||||
"sm": "0.25rem",
|
"sm": "0.25rem",
|
||||||
"md": "0.5rem",
|
"md": "0.5rem",
|
||||||
"lg": "1rem",
|
"lg": "0.75rem",
|
||||||
|
"xl": "1rem",
|
||||||
"full": "9999px"
|
"full": "9999px"
|
||||||
},
|
},
|
||||||
"shadows": {
|
"shadows": {
|
||||||
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
"sm": "0 1px 3px 0 rgb(0 0 0 / 0.1)",
|
||||||
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
|
"md": "0 4px 8px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||||||
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
|
"lg": "0 10px 20px -3px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.1)",
|
||||||
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
|
"xl": "0 20px 30px -5px rgb(0 0 0 / 0.1), 0 8px 12px -6px rgb(0 0 0 / 0.1)"
|
||||||
|
},
|
||||||
|
"typography": {
|
||||||
|
"xs": {
|
||||||
|
"size": "0.75rem",
|
||||||
|
"lineHeight": "1.25rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"sm": {
|
||||||
|
"size": "0.875rem",
|
||||||
|
"lineHeight": "1.375rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"base": {
|
||||||
|
"size": "1rem",
|
||||||
|
"lineHeight": "1.625rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"lg": {
|
||||||
|
"size": "1.125rem",
|
||||||
|
"lineHeight": "1.75rem",
|
||||||
|
"letterSpacing": "0"
|
||||||
|
},
|
||||||
|
"xl": {
|
||||||
|
"size": "1.25rem",
|
||||||
|
"lineHeight": "1.875rem",
|
||||||
|
"letterSpacing": "-0.01em"
|
||||||
|
},
|
||||||
|
"2xl": {
|
||||||
|
"size": "1.5rem",
|
||||||
|
"lineHeight": "2.25rem",
|
||||||
|
"letterSpacing": "-0.015em"
|
||||||
|
},
|
||||||
|
"3xl": {
|
||||||
|
"size": "1.875rem",
|
||||||
|
"lineHeight": "2.5rem",
|
||||||
|
"letterSpacing": "-0.02em"
|
||||||
|
},
|
||||||
|
"4xl": {
|
||||||
|
"size": "2.25rem",
|
||||||
|
"lineHeight": "2.75rem",
|
||||||
|
"letterSpacing": "-0.025em"
|
||||||
|
},
|
||||||
|
"5xl": {
|
||||||
|
"size": "3rem",
|
||||||
|
"lineHeight": "1.2",
|
||||||
|
"letterSpacing": "-0.03em"
|
||||||
|
},
|
||||||
|
"6xl": {
|
||||||
|
"size": "3.75rem",
|
||||||
|
"lineHeight": "1.2",
|
||||||
|
"letterSpacing": "-0.03em"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"breakpoints": {
|
"breakpoints": {
|
||||||
"sm": "640px",
|
"sm": "640px",
|
||||||
@@ -69,37 +113,5 @@
|
|||||||
"lg": "1024px",
|
"lg": "1024px",
|
||||||
"xl": "1280px",
|
"xl": "1280px",
|
||||||
"2xl": "1536px"
|
"2xl": "1536px"
|
||||||
},
|
|
||||||
"transitions": {
|
|
||||||
"duration": {
|
|
||||||
"fast": "150ms",
|
|
||||||
"normal": "300ms",
|
|
||||||
"slow": "500ms"
|
|
||||||
},
|
|
||||||
"easing": {
|
|
||||||
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
||||||
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
||||||
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
||||||
"inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"zIndex": {
|
|
||||||
"base": 0,
|
|
||||||
"dropdown": 100,
|
|
||||||
"sticky": 200,
|
|
||||||
"fixed": 300,
|
|
||||||
"modal": 400,
|
|
||||||
"popover": 500,
|
|
||||||
"tooltip": 600
|
|
||||||
},
|
|
||||||
"letterSpacing": {
|
|
||||||
"tight": "-0.01em",
|
|
||||||
"normal": "0em",
|
|
||||||
"wide": "0.05em"
|
|
||||||
},
|
|
||||||
"layout": {
|
|
||||||
"containerMaxWidth": "80rem",
|
|
||||||
"containerPaddingX": "clamp(1rem, 5vw, 2rem)",
|
|
||||||
"sectionSpacingY": "4rem"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,54 +1,63 @@
|
|||||||
@import "tailwindcss";
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
@import "./stylesheet.css";
|
/* globals.css – Single Source of Truth (CSS Custom Props) */
|
||||||
|
/* Generated by website-prototype-generator */
|
||||||
/*
|
/* DO NOT add layout or component styles here. */
|
||||||
* CSS Variables - Single Source of Truth
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
* These variables are placeholders. Override them per project via design_tokens.json
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Colors - Placeholders */
|
/* ── Colors ──────────────────────────────────────── */
|
||||||
--color-primary: #000000;
|
--color-primary: #f39210;
|
||||||
--color-secondary: #666666;
|
--color-secondary: #f39210;
|
||||||
--color-accent: #0066cc;
|
--color-accent: #eb5c24;
|
||||||
|
--color-neutral: #6b7280;
|
||||||
--color-background: #ffffff;
|
--color-background: #ffffff;
|
||||||
--color-foreground: #000000;
|
--color-foreground: #0f172a;
|
||||||
--color-muted: #f5f5f5;
|
--color-muted: #f3f4f6;
|
||||||
--color-border: #e5e5e5;
|
--color-muted-foreground: #4b505a;
|
||||||
--color-error: #dc2626;
|
--color-border: #e5e7eb;
|
||||||
--color-success: #16a34a;
|
--color-success: #10b981;
|
||||||
--color-warning: #ca8a04;
|
--color-warning: #f59e0b;
|
||||||
|
--color-error: #ef4444;
|
||||||
|
|
||||||
/* Typography - Placeholders */
|
/* ── Typography – Families ────────────────────────── */
|
||||||
--font-sans: system-ui, -apple-system, sans-serif;
|
--font-heading: 'Inter', sans-serif;
|
||||||
--font-serif: Georgia, serif;
|
--font-body: 'Inter', sans-serif;
|
||||||
--font-mono: ui-monospace, monospace;
|
--font-heading-weight: 400;
|
||||||
|
--font-body-weight: 400;
|
||||||
|
|
||||||
--font-size-xs: 0.75rem;
|
/* ── Typography – Scale ───────────────────────────── */
|
||||||
--font-size-sm: 0.875rem;
|
--text-xs: 0.75rem;
|
||||||
--font-size-base: 1rem;
|
--text-xs-line-height: 1.25rem;
|
||||||
--font-size-lg: 1.125rem;
|
--text-xs-letter-spacing: 0;
|
||||||
--font-size-xl: 1.25rem;
|
--text-sm: 0.875rem;
|
||||||
--font-size-2xl: 1.5rem;
|
--text-sm-line-height: 1.375rem;
|
||||||
--font-size-3xl: 1.875rem;
|
--text-sm-letter-spacing: 0;
|
||||||
--font-size-4xl: 2.25rem;
|
--text-base: 1rem;
|
||||||
--font-size-5xl: 3rem;
|
--text-base-line-height: 1.625rem;
|
||||||
|
--text-base-letter-spacing: 0;
|
||||||
|
--text-lg: 1.125rem;
|
||||||
|
--text-lg-line-height: 1.75rem;
|
||||||
|
--text-lg-letter-spacing: 0;
|
||||||
|
--text-xl: 1.25rem;
|
||||||
|
--text-xl-line-height: 1.875rem;
|
||||||
|
--text-xl-letter-spacing: -0.01em;
|
||||||
|
--text-2xl: 1.5rem;
|
||||||
|
--text-2xl-line-height: 2.25rem;
|
||||||
|
--text-2xl-letter-spacing: -0.015em;
|
||||||
|
--text-3xl: 1.875rem;
|
||||||
|
--text-3xl-line-height: 2.5rem;
|
||||||
|
--text-3xl-letter-spacing: -0.02em;
|
||||||
|
--text-4xl: 2.25rem;
|
||||||
|
--text-4xl-line-height: 2.75rem;
|
||||||
|
--text-4xl-letter-spacing: -0.025em;
|
||||||
|
--text-5xl: 3rem;
|
||||||
|
--text-5xl-line-height: 1.2;
|
||||||
|
--text-5xl-letter-spacing: -0.03em;
|
||||||
|
--text-6xl: 3.75rem;
|
||||||
|
--text-6xl-line-height: 1.2;
|
||||||
|
--text-6xl-letter-spacing: -0.03em;
|
||||||
|
|
||||||
--font-weight-normal: 400;
|
/* ── Spacing ─────────────────────────────────────── */
|
||||||
--font-weight-medium: 500;
|
|
||||||
--font-weight-semibold: 600;
|
|
||||||
--font-weight-bold: 700;
|
|
||||||
|
|
||||||
--line-height-tight: 1.25;
|
|
||||||
--line-height-normal: 1.5;
|
|
||||||
--line-height-relaxed: 1.75;
|
|
||||||
|
|
||||||
/* Letter Spacing - Placeholders */
|
|
||||||
--letter-spacing-tight: -0.01em;
|
|
||||||
--letter-spacing-normal: 0em;
|
|
||||||
--letter-spacing-wide: 0.05em;
|
|
||||||
|
|
||||||
/* Spacing - Placeholders */
|
|
||||||
--spacing-xs: 0.25rem;
|
--spacing-xs: 0.25rem;
|
||||||
--spacing-sm: 0.5rem;
|
--spacing-sm: 0.5rem;
|
||||||
--spacing-md: 1rem;
|
--spacing-md: 1rem;
|
||||||
@@ -56,80 +65,31 @@
|
|||||||
--spacing-xl: 2rem;
|
--spacing-xl: 2rem;
|
||||||
--spacing-2xl: 3rem;
|
--spacing-2xl: 3rem;
|
||||||
--spacing-3xl: 4rem;
|
--spacing-3xl: 4rem;
|
||||||
|
--spacing-4xl: 6rem;
|
||||||
|
--spacing-5xl: 8rem;
|
||||||
|
--spacing-section: 5rem;
|
||||||
|
--spacing-container: 1200px;
|
||||||
|
--spacing-container-padding: 2rem;
|
||||||
|
--spacing-6xl: 10rem;
|
||||||
|
|
||||||
/* Border Radius - Placeholders */
|
/* ── Border Radius ───────────────────────────────── */
|
||||||
--radius-none: 0;
|
--radius-none: 0;
|
||||||
--radius-sm: 0.25rem;
|
--radius-sm: 0.25rem;
|
||||||
--radius-md: 0.5rem;
|
--radius-md: 0.5rem;
|
||||||
--radius-lg: 1rem;
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
--radius-full: 9999px;
|
--radius-full: 9999px;
|
||||||
|
|
||||||
/* Shadows - Placeholders */
|
/* ── Shadows ─────────────────────────────────────── */
|
||||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
--shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
--shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.1);
|
||||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
--shadow-xl: 0 20px 30px -5px rgb(0 0 0 / 0.1), 0 8px 12px -6px rgb(0 0 0 / 0.1);
|
||||||
|
|
||||||
/* Transitions - Placeholders */
|
/* ── Breakpoints (reference) ─────────────────────── */
|
||||||
--duration-fast: 150ms;
|
--breakpoint-sm: 640px;
|
||||||
--duration-normal: 300ms;
|
--breakpoint-md: 768px;
|
||||||
--duration-slow: 500ms;
|
--breakpoint-lg: 1024px;
|
||||||
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
--breakpoint-xl: 1280px;
|
||||||
|
--breakpoint-2xl: 1536px;
|
||||||
/* Z-Index Scale */
|
|
||||||
--z-base: 0;
|
|
||||||
--z-dropdown: 100;
|
|
||||||
--z-sticky: 200;
|
|
||||||
--z-fixed: 300;
|
|
||||||
--z-modal: 400;
|
|
||||||
--z-popover: 500;
|
|
||||||
--z-tooltip: 600;
|
|
||||||
|
|
||||||
/* Layout - Placeholders */
|
|
||||||
--container-max-width: 80rem;
|
|
||||||
--container-padding-x: clamp(1rem, 5vw, 2rem);
|
|
||||||
--section-spacing-y: var(--spacing-3xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Base Resets
|
|
||||||
*/
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-size: var(--font-size-base);
|
|
||||||
line-height: var(--line-height-normal);
|
|
||||||
color: var(--color-foreground);
|
|
||||||
background-color: var(--color-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
font: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,164 +1,294 @@
|
|||||||
/*
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
* Stylesheet
|
/* stylesheet.css – Structural framework */
|
||||||
*
|
/* Uses variables from globals.css (Single Source of Truth) */
|
||||||
* Typography & structural rules only.
|
/* Generated by website-prototype-generator */
|
||||||
* NO component styles. NO layout sections.
|
/* */
|
||||||
* This file is imported by globals.css.
|
/* REGELN: */
|
||||||
*
|
/* - Jede Section MUSS .section nutzen */
|
||||||
* Structure:
|
/* - Content MUSS in .container eingebettet sein */
|
||||||
* 1. Typography
|
/* - Buttons NUR über .btn + Variante */
|
||||||
* 2. Structural Rules
|
/* - Typografie NUR über definierte Klassen/Heading-Tags */
|
||||||
* 3. Utility Classes
|
/* - KEINE Inline-Styles, KEINE harten Pixelwerte */
|
||||||
* 4. Animations
|
/* ═══════════════════════════════════════════════════════════ */
|
||||||
*/
|
|
||||||
|
|
||||||
/* ==========================================================================
|
@import "tailwindcss";
|
||||||
1. Typography
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
h1,
|
/* ── Base Resets ───────────────────────────────────── */
|
||||||
h2,
|
|
||||||
h3,
|
*, *::before, *::after {
|
||||||
h4,
|
box-sizing: border-box;
|
||||||
h5,
|
margin: 0;
|
||||||
h6 {
|
padding: 0;
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
line-height: var(--line-height-tight);
|
|
||||||
letter-spacing: var(--letter-spacing-tight);
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
html {
|
||||||
font-size: var(--font-size-4xl);
|
scroll-behavior: smooth;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
body {
|
||||||
font-size: var(--font-size-3xl);
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--font-body-weight);
|
||||||
|
color: var(--color-foreground);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
line-height: var(--text-base-line-height);
|
||||||
|
font-size: var(--text-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
/* ── Section & Container (PFLICHT-Bausteine) ────── */
|
||||||
font-size: var(--font-size-2xl);
|
/* Jede Seite MUSS aus <section class="section"> bestehen. */
|
||||||
|
/* Innerhalb jeder Section MUSS ein <div class="container"> */
|
||||||
|
/* den Content umschließen. */
|
||||||
|
|
||||||
|
.section {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-block: var(--spacing-section);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
.section--sm {
|
||||||
font-size: var(--font-size-xl);
|
padding-block: var(--spacing-2xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
.section--lg {
|
||||||
font-size: var(--font-size-lg);
|
padding-block: var(--spacing-5xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
.section--hero {
|
||||||
font-size: var(--font-size-base);
|
padding-block: var(--spacing-5xl) var(--spacing-section);
|
||||||
font-weight: var(--font-weight-semibold);
|
min-height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
.section--flush {
|
||||||
margin-top: 0;
|
padding-block: 0;
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
line-height: var(--line-height-normal);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
.container {
|
||||||
font-size: var(--font-size-sm);
|
width: 100%;
|
||||||
|
max-width: var(--spacing-container);
|
||||||
|
margin-inline: auto;
|
||||||
|
padding-inline: var(--spacing-container-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
strong,
|
.container--narrow {
|
||||||
b {
|
max-width: 48rem;
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent orphans and widows in text blocks */
|
.container--wide {
|
||||||
p,
|
max-width: 90rem;
|
||||||
li,
|
|
||||||
dd {
|
|
||||||
orphans: 2;
|
|
||||||
widows: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Lists */
|
/* ── Headings (Typography System) ─────────────────── */
|
||||||
ul,
|
/* Headlines MÜSSEN über HTML-Tags (h1–h6) oder */
|
||||||
ol {
|
/* .heading-* Klassen gestylt werden. */
|
||||||
margin-top: 0;
|
/* VERBOTEN: style={{ fontSize: ... }} oder harte px */
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
padding-left: var(--spacing-lg);
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-weight: var(--font-heading-weight);
|
||||||
|
color: var(--color-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
h1, .heading-1 {
|
||||||
margin-bottom: var(--spacing-xs);
|
font-size: var(--text-5xl);
|
||||||
|
line-height: var(--text-5xl-line-height);
|
||||||
|
letter-spacing: var(--text-5xl-letter-spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Blockquote */
|
h2, .heading-2 {
|
||||||
blockquote {
|
font-size: var(--text-4xl);
|
||||||
margin: 0 0 var(--spacing-md);
|
line-height: var(--text-4xl-line-height);
|
||||||
padding-left: var(--spacing-lg);
|
letter-spacing: var(--text-4xl-letter-spacing);
|
||||||
border-left: 3px solid var(--color-border);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Code */
|
h3, .heading-3 {
|
||||||
code {
|
font-size: var(--text-3xl);
|
||||||
font-family: var(--font-mono);
|
line-height: var(--text-3xl-line-height);
|
||||||
font-size: var(--font-size-sm);
|
letter-spacing: var(--text-3xl-letter-spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
h4, .heading-4 {
|
||||||
margin-top: 0;
|
font-size: var(--text-2xl);
|
||||||
margin-bottom: var(--spacing-md);
|
line-height: var(--text-2xl-line-height);
|
||||||
overflow-x: auto;
|
letter-spacing: var(--text-2xl-letter-spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
h5, .heading-5 {
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--text-xl);
|
||||||
|
line-height: var(--text-xl-line-height);
|
||||||
|
letter-spacing: var(--text-xl-letter-spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
h6, .heading-6 {
|
||||||
2. Structural Rules
|
font-size: var(--text-lg);
|
||||||
========================================================================== */
|
line-height: var(--text-lg-line-height);
|
||||||
|
letter-spacing: var(--text-lg-letter-spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Body Text Utilities ───────────────────────────── */
|
||||||
|
|
||||||
|
.text-xs { font-size: var(--text-xs); line-height: var(--text-xs-line-height); }
|
||||||
|
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm-line-height); }
|
||||||
|
.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
|
||||||
|
.text-lg { font-size: var(--text-lg); line-height: var(--text-lg-line-height); }
|
||||||
|
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: var(--color-muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
line-height: var(--text-xl-line-height);
|
||||||
|
color: var(--color-muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Button System (EINZIGER erlaubter Weg) ──────── */
|
||||||
|
/* Buttons MÜSSEN eine der folgenden Klassen nutzen: */
|
||||||
|
/* .btn-primary – Hauptaktion (CTA) */
|
||||||
|
/* .btn-secondary – Sekundäraktion */
|
||||||
|
/* .btn-outline – Umrandeter Button */
|
||||||
|
/* .btn-ghost – Textartig, minimal */
|
||||||
|
/* VERBOTEN: Eigene bg/text-Kombinationen auf <button> */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
padding: var(--spacing-sm) var(--spacing-lg);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: var(--text-base-line-height);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:focus-visible {
|
||||||
|
outline: 2px solid var(--color-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: var(--color-background);
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
color: var(--color-background);
|
||||||
|
border-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-primary);
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: var(--color-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-foreground);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover {
|
||||||
|
background-color: var(--color-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
padding: var(--spacing-xs) var(--spacing-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
padding: var(--spacing-md) var(--spacing-xl);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Card Component ─────────────────────────────── */
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Links ───────────────────────────────────────── */
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Images ──────────────────────────────────────── */
|
||||||
|
|
||||||
|
img, video, svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Focus ───────────────────────────────────────── */
|
||||||
|
|
||||||
/* Focus styles for keyboard navigation */
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid var(--color-primary);
|
outline: 2px solid var(--color-primary);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Selection */
|
/* ── Selection ──────────────────────────────────── */
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
color: var(--color-background);
|
color: var(--color-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reduced motion */
|
/* ── Spacing Utilities ──────────────────────────── */
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
*,
|
.stack-xs > * + * { margin-top: var(--spacing-xs); }
|
||||||
*::before,
|
.stack-sm > * + * { margin-top: var(--spacing-sm); }
|
||||||
*::after {
|
.stack-md > * + * { margin-top: var(--spacing-md); }
|
||||||
animation-duration: 0.01ms !important;
|
.stack-lg > * + * { margin-top: var(--spacing-lg); }
|
||||||
animation-iteration-count: 1 !important;
|
.stack-xl > * + * { margin-top: var(--spacing-xl); }
|
||||||
transition-duration: 0.01ms !important;
|
.stack-2xl > * + * { margin-top: var(--spacing-2xl); }
|
||||||
scroll-behavior: auto !important;
|
|
||||||
}
|
/* ── Divider ───────────────────────────────────── */
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
margin-block: var(--spacing-2xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
3. Utility Classes
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.visually-hidden {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
4. Animations
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Animations are added per project */
|
|
||||||
|
|||||||
Reference in New Issue
Block a user