Initial commit

.claude-plugin/plugin.json

@@ -0,0 +1,12 @@
+{
+  "name": "netresearch-branding",
+  "description": "Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.",
+  "version": "1.1.0-20251126",
+  "author": {
+    "name": "Netresearch DTT GmbH",
+    "email": "info@netresearch.de"
+  },
+  "skills": [
+    "./"
+  ]
+}

README.md

@@ -0,0 +1,3 @@
+# netresearch-branding
+
+Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.

assets/logos/netresearch-symbol-only.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+   viewBox="-75 -75 440 440"
+   zoomAndPan="disable"
+   version="1.2"
+   baseProfile="tiny-ps"
+   xmlns="http://www.w3.org/2000/svg">
+  <title>Netresearch DTT GmbH</title>
+  <g>
+    <path
+       fill="#2999a4"
+       d="M209.6,0V31.62h32.77a26.38,26.38,0,0,1,26.44,26.43V242a26.38,26.38,0,0,1-26.44,26.44H209.6V300h47.93a42.77,42.77,0,0,0,42.86-42.86V42.89A42.76,42.76,0,0,0,257.53,0ZM43.25,0A42.76,42.76,0,0,0,.39,42.89V257.18A42.76,42.76,0,0,0,43.25,300H91.18V268.46H58.4A26.38,26.38,0,0,1,32,242v-184A26.37,26.37,0,0,1,58.4,31.62H91.18V0Z"
+       transform="translate(-0.39 -0.04)" />
+    <path
+       fill="#595a62"
+       d="M221.44,120.41c0-34.48-13.94-57.82-48.93-57.82-26.62,0-48.54,7.74-64.17,26.56l-.7-22.06-28.31.06V232.94h31.59V124.69c7.14-18.38,32.14-34.8,53-34.5,27.38.4,25.2,26.24,26,45.81v96.94h31.58"
+       transform="translate(-0.39 -0.04)" />
+  </g>
+</svg>

claudedocs/refactoring-summary.md

@@ -0,0 +1,54 @@
+# SKILL.md Refactoring Summary
+
+**Date:** 2025-11-14
+**Version Change:** 1.0.0 → 1.1.0
+**Skill:** netresearch-branding
+
+## Changes Applied
+
+### Pattern 1: Removed "## Overview" Section
+- **Before:** Lines 14-23 contained "## Overview" section
+- **After:** Removed entire section
+- **Rationale:** Content duplicated YAML description; no unique value
+
+### Pattern 2: Converted Do's/Don'ts to Imperative Form
+- **Before:** "Do's:" and "Don'ts:" bullet lists throughout
+- **After:** "When X" trigger-based imperative instructions
+
+#### Color Application Rules
+- **Before:** Separate "Do's" and "Don'ts" lists
+- **After:** "When applying brand colors" with unified action-oriented instructions
+- Combined positive actions and avoidances into cohesive workflow
+
+#### Typography Application Standards
+- **Before:** "Typography Do's and Don'ts" with separate lists
+- **After:** "When applying typography" with unified standards
+- Converted each guideline to action-oriented instruction
+
+### Pattern 3: Converted "## Implementation Checklist" to Procedures
+- **Before:** Three checklists (Design Phase, Development Phase, Quality Assurance) with checkbox items
+- **After:** "## Pre-Launch Validation Procedures" with numbered procedural steps
+- **Changes:**
+  - Design Phase → Design Phase Validation (6 numbered steps)
+  - Development Phase → Development Phase Validation (8 numbered steps)
+  - Quality Assurance → Quality Assurance Validation (8 numbered steps)
+  - Brand Compliance Review → Brand Compliance Validation (3 check categories with numbered steps)
+
+## Impact Analysis
+
+**Readability:** Significantly improved - clear action-oriented instructions
+**Consistency:** Aligned with skill-creator best practices
+**Usability:** Enhanced - readers execute procedures rather than check boxes
+**Clarity:** Removed redundant overview; eliminated Do's/Don'ts duplication
+
+## Files Modified
+
+- `/SKILL.md` (lines 1-866)
+
+## Verification
+
+- Version number updated in YAML frontmatter: ✓
+- Overview section removed: ✓
+- All Do's/Don'ts converted to imperative: ✓
+- Checklists converted to procedures: ✓
+- No broken internal references: ✓

examples/components.html

@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Netresearch Brand Components</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../templates/styles.css">
+  <style>
+    .component-showcase {
+      padding: 48px 24px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .component-section {
+      margin-bottom: 64px;
+      padding: 32px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+    .component-section h2 {
+      border-bottom: 3px solid #2F99A4;
+      padding-bottom: 12px;
+      margin-bottom: 24px;
+    }
+    .component-demo {
+      margin: 24px 0;
+      padding: 24px;
+      background: #F5F5F5;
+      border-radius: 4px;
+    }
+    .code-block {
+      background: #585961;
+      color: #fff;
+      padding: 16px;
+      border-radius: 4px;
+      overflow-x: auto;
+      font-family: 'Courier New', monospace;
+      font-size: 14px;
+      margin-top: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="component-showcase">
+    <h1 style="text-align: center; margin-bottom: 48px;">Netresearch Brand Components</h1>
+
+    <!-- Buttons -->
+    <div class="component-section">
+      <h2>Buttons</h2>
+
+      <div class="component-demo">
+        <h3>Primary Buttons</h3>
+        <button class="btn-primary btn-small">Small Button</button>
+        <button class="btn-primary">Default Button</button>
+        <button class="btn-primary btn-large">Large Button</button>
+      </div>
+
+      <div class="component-demo">
+        <h3>Secondary Buttons</h3>
+        <button class="btn-secondary btn-small">Small Button</button>
+        <button class="btn-secondary">Default Button</button>
+        <button class="btn-secondary btn-large">Large Button</button>
+      </div>
+
+      <div class="component-demo" style="background: #2F99A4; color: white;">
+        <h3 style="color: white;">Outline Buttons (on dark background)</h3>
+        <button class="btn-outline btn-small">Small Button</button>
+        <button class="btn-outline">Default Button</button>
+        <button class="btn-outline btn-large">Large Button</button>
+      </div>
+
+      <div class="code-block">
+&lt;button class="btn-primary"&gt;Primary Action&lt;/button&gt;
+&lt;button class="btn-secondary"&gt;Secondary Action&lt;/button&gt;
+&lt;button class="btn-outline"&gt;Tertiary Action&lt;/button&gt;
+
+&lt;!-- Sizes --&gt;
+&lt;button class="btn-primary btn-small"&gt;Small&lt;/button&gt;
+&lt;button class="btn-primary"&gt;Default&lt;/button&gt;
+&lt;button class="btn-primary btn-large"&gt;Large&lt;/button&gt;
+      </div>
+    </div>
+
+    <!-- Cards -->
+    <div class="component-section">
+      <h2>Cards</h2>
+
+      <div class="component-demo">
+        <div class="three-column">
+          <div class="card">
+            <div class="card-content">
+              <h3 class="card-title">Simple Card</h3>
+              <p class="card-text">This is a basic card with title and text content.</p>
+              <a href="#" class="link-standalone">Learn more</a>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-content">
+              <h3 class="card-title">Card with Footer</h3>
+              <p class="card-text">This card includes a footer section with metadata.</p>
+            </div>
+            <div class="card-footer">
+              <span class="card-meta">Published: Jan 1, 2025</span>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-content">
+              <h3 class="card-title">Card with Button</h3>
+              <p class="card-text">This card has a primary action button.</p>
+              <button class="btn-primary">Take Action</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="code-block">
+&lt;div class="card"&gt;
+  &lt;div class="card-content"&gt;
+    &lt;h3 class="card-title"&gt;Card Title&lt;/h3&gt;
+    &lt;p class="card-text"&gt;Card description.&lt;/p&gt;
+    &lt;a href="#" class="link-standalone"&gt;Learn more&lt;/a&gt;
+  &lt;/div&gt;
+  &lt;div class="card-footer"&gt;
+    &lt;span class="card-meta"&gt;Metadata&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+      </div>
+    </div>
+
+    <!-- Typography -->
+    <div class="component-section">
+      <h2>Typography</h2>
+
+      <div class="component-demo">
+        <h1>Heading 1 - Raleway Bold 48px</h1>
+        <h2>Heading 2 - Raleway Bold 36px</h2>
+        <h3>Heading 3 - Raleway SemiBold 28px</h3>
+        <h4>Heading 4 - Raleway SemiBold 22px</h4>
+        <p class="lead">Lead paragraph - Open Sans Regular 20px with comfortable line height for improved readability.</p>
+        <p>Body text - Open Sans Regular 16px. This is the standard paragraph text used throughout the website. It maintains excellent readability with a line-height of 1.6.</p>
+        <p><small>Small text - Open Sans Regular 14px for captions and metadata.</small></p>
+      </div>
+
+      <div class="code-block">
+&lt;h1&gt;Heading 1&lt;/h1&gt;
+&lt;h2&gt;Heading 2&lt;/h2&gt;
+&lt;h3&gt;Heading 3&lt;/h3&gt;
+&lt;p class="lead"&gt;Lead paragraph&lt;/p&gt;
+&lt;p&gt;Body text&lt;/p&gt;
+&lt;small&gt;Small text&lt;/small&gt;
+      </div>
+    </div>
+
+    <!-- Links -->
+    <div class="component-section">
+      <h2>Links</h2>
+
+      <div class="component-demo">
+        <p>This is a paragraph with an <a href="#">inline link</a> within the text.</p>
+        <p><a href="#" class="link-standalone">Standalone link with arrow</a></p>
+        <p><a href="document.pdf" download>Download link with icon</a></p>
+        <p><a href="https://example.com" target="_blank">External link with icon</a></p>
+      </div>
+
+      <div class="code-block">
+&lt;!-- Inline link --&gt;
+&lt;a href="#"&gt;Link text&lt;/a&gt;
+
+&lt;!-- Standalone link with arrow --&gt;
+&lt;a href="#" class="link-standalone"&gt;Learn more&lt;/a&gt;
+
+&lt;!-- Download link --&gt;
+&lt;a href="file.pdf" download&gt;Download PDF&lt;/a&gt;
+
+&lt;!-- External link --&gt;
+&lt;a href="https://example.com" target="_blank"&gt;External&lt;/a&gt;
+      </div>
+    </div>
+
+    <!-- Forms -->
+    <div class="component-section">
+      <h2>Forms</h2>
+
+      <div class="component-demo">
+        <form style="max-width: 600px;">
+          <div class="form-group">
+            <label for="demo-name" class="form-label">Name*</label>
+            <input type="text" id="demo-name" class="form-input" placeholder="Your name" required>
+          </div>
+
+          <div class="form-group">
+            <label for="demo-email" class="form-label">Email*</label>
+            <input type="email" id="demo-email" class="form-input" placeholder="your@email.com" required>
+          </div>
+
+          <div class="form-group">
+            <label for="demo-message" class="form-label">Message*</label>
+            <textarea id="demo-message" class="form-textarea" placeholder="Your message" required></textarea>
+          </div>
+
+          <button type="submit" class="btn-primary">Submit Form</button>
+        </form>
+      </div>
+
+      <div class="code-block">
+&lt;form&gt;
+  &lt;div class="form-group"&gt;
+    &lt;label for="name" class="form-label"&gt;Name*&lt;/label&gt;
+    &lt;input type="text" id="name" class="form-input"
+           placeholder="Your name" required&gt;
+  &lt;/div&gt;
+
+  &lt;div class="form-group"&gt;
+    &lt;label for="message" class="form-label"&gt;Message*&lt;/label&gt;
+    &lt;textarea id="message" class="form-textarea"
+              placeholder="Your message" required&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;button type="submit" class="btn-primary"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+      </div>
+    </div>
+
+    <!-- Color Palette -->
+    <div class="component-section">
+      <h2>Color Palette</h2>
+
+      <div class="component-demo">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+          <div style="text-align: center;">
+            <div style="background: #2F99A4; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
+            <strong>Turquoise Primary</strong><br>
+            <code>#2F99A4</code>
+          </div>
+          <div style="text-align: center;">
+            <div style="background: #FF4D00; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
+            <strong>Orange Accent</strong><br>
+            <code>#FF4D00</code>
+          </div>
+          <div style="text-align: center;">
+            <div style="background: #585961; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
+            <strong>Anthracite Text</strong><br>
+            <code>#585961</code>
+          </div>
+          <div style="text-align: center;">
+            <div style="background: #CCCDCC; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
+            <strong>Light Grey</strong><br>
+            <code>#CCCDCC</code>
+          </div>
+          <div style="text-align: center;">
+            <div style="background: #FFFFFF; height: 100px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #E5E5E5;"></div>
+            <strong>White</strong><br>
+            <code>#FFFFFF</code>
+          </div>
+        </div>
+      </div>
+
+      <div class="code-block">
+/* CSS Custom Properties */
+:root {
+  --color-primary: #2F99A4;
+  --color-accent: #FF4D00;
+  --color-text-primary: #585961;
+  --color-border: #CCCDCC;
+  --color-background: #FFFFFF;
+}
+      </div>
+    </div>
+
+    <!-- Grid Layouts -->
+    <div class="component-section">
+      <h2>Grid Layouts</h2>
+
+      <div class="component-demo">
+        <h3>Two-Column Layout</h3>
+        <div class="two-column" style="margin-bottom: 32px;">
+          <div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 1</div>
+          <div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 2</div>
+        </div>
+
+        <h3>Three-Column Layout</h3>
+        <div class="three-column">
+          <div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 1</div>
+          <div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 2</div>
+          <div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 3</div>
+        </div>
+      </div>
+
+      <div class="code-block">
+&lt;!-- Two-column layout --&gt;
+&lt;div class="two-column"&gt;
+  &lt;div&gt;Content 1&lt;/div&gt;
+  &lt;div&gt;Content 2&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!-- Three-column layout --&gt;
+&lt;div class="three-column"&gt;
+  &lt;div&gt;Content 1&lt;/div&gt;
+  &lt;div&gt;Content 2&lt;/div&gt;
+  &lt;div&gt;Content 3&lt;/div&gt;
+&lt;/div&gt;
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>

plugin.lock.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:netresearch/claude-code-marketplace:skills/netresearch-branding",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "0aeaae6c6d369ee917b3c91b58f7cce7bbd86894",
+    "treeHash": "c714d3b4b9e117a82e159a14f99a154660041476f07fb603dfc11f68f6d584c6",
+    "generatedAt": "2025-11-28T10:27:20.050957Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "netresearch-branding",
+    "description": "Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.",
+    "version": "1.1.0-20251126"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "a5b0012d55dca7ac9635b19f258541fc2db3bdcce16a520403ad6691a489aadc"
+      },
+      {
+        "path": "SKILL.md",
+        "sha256": "4dbc3494d69303bf5be910168bd991bfffa75c0d4f0606274e333f4f1349a032"
+      },
+      {
+        "path": "references/colors.md",
+        "sha256": "42fbf46dc515b079a250727b8881dde7541400d1777eccfd07b910c6a43328f8"
+      },
+      {
+        "path": "references/web-design.md",
+        "sha256": "2016875af8aaca78eff4121e107871339d79441d0e23d4ff3f148dff3fc12dd9"
+      },
+      {
+        "path": "references/typography.md",
+        "sha256": "a2484d7416e8f35e1db48dc694fe56945819951e2e8b9ad9b6d1815627b29fff"
+      },
+      {
+        "path": "claudedocs/refactoring-summary.md",
+        "sha256": "c1ace25fce5c5c8afa76d0900c8fec9c8255618c845a32b5eb5adce6803b260f"
+      },
+      {
+        "path": "examples/components.html",
+        "sha256": "548341dfdbaacf0b0d8befc95b264f4fdde1793dc6d3f73e1edde038624591f5"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "e46c28cdaadb6b32560e7269d3750de47b3016c188e1c0354b95f8c5ae9495e1"
+      },
+      {
+        "path": "templates/styles.css",
+        "sha256": "f4c1ecdb68b4132130f4f6261e56c1b020fdcbe38cf4ad4e4bff85dded88cc79"
+      },
+      {
+        "path": "templates/landing-page.html",
+        "sha256": "d5ad833e350e48a1e8cac4c8aa461e293e9723fab60469a8fc3b912046708fed"
+      },
+      {
+        "path": "assets/logos/netresearch-symbol-only.svg",
+        "sha256": "b63c3f838232beff165668516c1a2a81f9c05327b3712c07453523e4055337c1"
+      }
+    ],
+    "dirSha256": "c714d3b4b9e117a82e159a14f99a154660041476f07fb603dfc11f68f6d584c6"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}

references/colors.md

@@ -0,0 +1,347 @@
+# Netresearch Brand Colors Reference
+
+Complete color palette with technical specifications and usage guidelines.
+
+## Primary Brand Colors
+
+### Turquoise (Primary)
+**Technical Specifications:**
+- **Hex:** `#2F99A4`
+- **RGB:** `rgb(47, 153, 164)`
+- **CMYK:** `C71 M7 Y17 K36`
+- **Pantone:** 7709 C (approximate)
+- **NCS:** S 3040-B30G
+
+**Usage:**
+- Primary brand color for all digital and print materials
+- Main CTA buttons and interactive elements
+- Headers and key visual elements
+- Links in default state
+- Primary navigation highlights
+- Brand identity elements
+
+**Contrast Ratios (WCAG AA):**
+- On white background: 3.8:1 (Meets AA for large text)
+- On #F5F5F5: 4.2:1 (Meets AA for large text)
+- White text on turquoise: 4.5:1 (Meets AA for all text)
+
+**Web Implementation:**
+```css
+:root {
+  --color-primary: #2F99A4;
+  --color-primary-rgb: 47, 153, 164;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: #FFFFFF;
+}
+
+.link-primary {
+  color: var(--color-primary);
+}
+```
+
+---
+
+### Orange (Accent)
+**Technical Specifications:**
+- **Hex:** `#FF4D00`
+- **RGB:** `rgb(255, 77, 0)`
+- **CMYK:** `C0 M70 Y100 K0`
+- **Pantone:** 172 C (approximate)
+- **NCS:** S 1080-Y60R
+
+**Usage:**
+- Accent color for emphasis and highlights
+- Secondary CTA buttons
+- Important notifications and alerts
+- Hover states on primary elements
+- Call-out boxes and highlights
+- Limited use - accent only, not dominant
+
+**Contrast Ratios (WCAG AA):**
+- On white background: 3.9:1 (Meets AA for large text)
+- On #F5F5F5: 4.3:1 (Meets AA for large text)
+- White text on orange: 3.2:1 (Meets AA for large text only)
+
+**Web Implementation:**
+```css
+:root {
+  --color-accent: #FF4D00;
+  --color-accent-rgb: 255, 77, 0;
+}
+
+.btn-secondary {
+  background-color: var(--color-accent);
+  color: #FFFFFF;
+}
+
+.highlight {
+  border-left: 4px solid var(--color-accent);
+}
+```
+
+---
+
+## Neutral Colors
+
+### Anthracite (Text Primary)
+**Technical Specifications:**
+- **Hex:** `#585961`
+- **RGB:** `rgb(88, 89, 97)`
+- **CMYK:** C9 M2 Y0 K62`
+- **NCS:** S 5502-B
+
+**Usage:**
+- Primary text color for body copy
+- Headlines and subheadings
+- Navigation text
+- Form labels
+- Default icon color
+
+**Contrast Ratios (WCAG AA):**
+- On white background: 8.3:1 (Meets AAA for all text)
+- On #F5F5F5: 7.8:1 (Meets AAA for all text)
+
+**Web Implementation:**
+```css
+:root {
+  --color-text-primary: #585961;
+}
+
+body, p, h1, h2, h3 {
+  color: var(--color-text-primary);
+}
+```
+
+---
+
+### Light Grey (Backgrounds)
+**Technical Specifications:**
+- **Hex:** `#CCCDCC`
+- **RGB:** `rgb(204, 205, 204)`
+- **CMYK:** C0 M0 Y0 K20`
+- **NCS:** S 2000-N
+
+**Usage:**
+- Background sections and cards
+- Subtle borders and dividers
+- Disabled states
+- Alternating table rows
+- Input field borders
+
+**Contrast Note:**
+- Not suitable for text on white background
+- Use for backgrounds and UI elements only
+
+**Web Implementation:**
+```css
+:root {
+  --color-background-light: #CCCDCC;
+  --color-border-light: #CCCDCC;
+}
+
+.card {
+  background-color: #F5F5F5;
+  border: 1px solid var(--color-border-light);
+}
+```
+
+---
+
+### White (Background)
+**Technical Specifications:**
+- **Hex:** `#FFFFFF`
+- **RGB:** `rgb(255, 255, 255)`
+
+**Usage:**
+- Primary background color
+- Text on dark backgrounds
+- Card backgrounds
+- Clean, spacious layouts
+
+---
+
+## Color Combinations
+
+### Approved Combinations
+
+**Primary Palette:**
+```css
+/* Turquoise on white - Primary brand */
+.combination-1 {
+  background: #FFFFFF;
+  color: #2F99A4;
+}
+
+/* White text on turquoise - High impact */
+.combination-2 {
+  background: #2F99A4;
+  color: #FFFFFF;
+}
+
+/* Orange accent with turquoise */
+.combination-3 {
+  background: #2F99A4;
+  border-color: #FF4D00;
+  color: #FFFFFF;
+}
+```
+
+**Text Combinations:**
+```css
+/* Body text on white - Standard */
+.text-standard {
+  background: #FFFFFF;
+  color: #585961;
+}
+
+/* Body text on light grey - Sections */
+.text-section {
+  background: #F5F5F5;
+  color: #585961;
+}
+```
+
+### Avoid These Combinations
+
+❌ **Never Use:**
+- Orange on turquoise (poor contrast)
+- Light grey text on white (fails WCAG)
+- Turquoise text smaller than 18px on white (AA compliance)
+- Orange text on white for small text (fails AA)
+
+---
+
+## Accessibility Guidelines
+
+### WCAG AA Compliance
+
+**Minimum Contrast Ratios:**
+- **Normal text (< 18px):** 4.5:1
+- **Large text (≥ 18px):** 3:1
+- **UI components:** 3:1
+
+**Approved Text Combinations:**
+
+✅ **Pass AA for All Text Sizes:**
+- Anthracite (#585961) on white: 8.3:1 ✓
+- Anthracite (#585961) on #F5F5F5: 7.8:1 ✓
+- White on turquoise (#2F99A4): 4.5:1 ✓
+
+✅ **Pass AA for Large Text Only:**
+- Turquoise (#2F99A4) on white: 3.8:1 ✓
+- Orange (#FF4D00) on white: 3.9:1 ✓
+- White on orange (#FF4D00): 3.2:1 ✓
+
+❌ **Fail AA (Do Not Use):**
+- Light grey (#CCCDCC) on white: 1.6:1 ✗
+
+---
+
+## Usage Guidelines by Context
+
+### Websites
+- **Primary color:** Turquoise for headers, links, CTAs
+- **Accent color:** Orange sparingly for emphasis
+- **Background:** White (#FFFFFF) or subtle off-white (#F5F5F5)
+- **Text:** Anthracite (#585961)
+- **High white space:** Let colors breathe
+
+### Social Media
+- **Header images:** Turquoise primary with orange accents
+- **Profile elements:** Turquoise logo on white
+- **Post graphics:** Maximum 2 brand colors per graphic
+
+### Documents
+- **Headers:** Turquoise or anthracite
+- **Highlights:** Orange for key information
+- **Body text:** Anthracite
+- **Backgrounds:** White primary, light grey for emphasis
+
+### Presentations
+- **Title slides:** Turquoise background with white text
+- **Content slides:** White background with turquoise accents
+- **Emphasis:** Orange for key points
+
+---
+
+## CSS Custom Properties (Complete Set)
+
+```css
+:root {
+  /* Primary Colors */
+  --color-primary: #2F99A4;
+  --color-primary-rgb: 47, 153, 164;
+  --color-primary-light: rgba(47, 153, 164, 0.1);
+  --color-primary-dark: #257880;
+
+  /* Accent Colors */
+  --color-accent: #FF4D00;
+  --color-accent-rgb: 255, 77, 0;
+  --color-accent-light: rgba(255, 77, 0, 0.1);
+  --color-accent-dark: #CC3D00;
+
+  /* Neutral Colors */
+  --color-text-primary: #585961;
+  --color-text-secondary: #8A8B93;
+  --color-background: #FFFFFF;
+  --color-background-alt: #F5F5F5;
+  --color-border: #CCCDCC;
+  --color-border-light: #E5E5E5;
+
+  /* Semantic Colors */
+  --color-success: #28A745;
+  --color-warning: #FFC107;
+  --color-error: #DC3545;
+  --color-info: var(--color-primary);
+}
+```
+
+---
+
+## Sass/SCSS Variables
+
+```scss
+// Primary Colors
+$color-primary: #2F99A4;
+$color-accent: #FF4D00;
+
+// Neutral Colors
+$color-anthracite: #585961;
+$color-light-grey: #CCCDCC;
+$color-white: #FFFFFF;
+
+// Backgrounds
+$color-bg-primary: $color-white;
+$color-bg-secondary: #F5F5F5;
+
+// Text
+$color-text-primary: $color-anthracite;
+$color-text-secondary: lighten($color-anthracite, 15%);
+
+// Borders
+$color-border: $color-light-grey;
+$color-border-light: #E5E5E5;
+```
+
+---
+
+## Color Testing Checklist
+
+Before deploying any brand materials:
+
+- [ ] All text meets WCAG AA contrast requirements
+- [ ] Turquoise is primary, orange is accent only
+- [ ] No unapproved color combinations used
+- [ ] Colors match exact hex values
+- [ ] High white space maintained
+- [ ] Tested on multiple displays for color accuracy
+- [ ] Print materials use CMYK values
+- [ ] Digital materials use RGB/Hex values
+
+---
+
+*Last updated: 2025-10-18*
+*Maintained by: Netresearch DTT GmbH*

references/typography.md

@@ -0,0 +1,609 @@
+# Netresearch Typography Reference
+
+Complete typography system with font specifications, hierarchy, and implementation guidelines.
+
+## Font Family Overview
+
+| Context | Typeface | Purpose |
+|---------|----------|---------|
+| Web Headlines | **Raleway** | Digital headers, navigation, buttons |
+| Web Body Text | **Open Sans** | Digital body copy, captions, lists |
+| Documents | **Calibri** | Word, PowerPoint, Excel, email |
+| Print | **Raleway + Open Sans** | Brochures, flyers, business cards |
+
+---
+
+## Raleway (Headlines & Display)
+
+### Font Specifications
+
+**Family:** Raleway
+**Designer:** Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida
+**License:** Open Font License (free for commercial use)
+**Classification:** Sans-serif, Geometric
+
+**Recommended Weights for Netresearch:**
+- **Regular (400)** - Secondary headlines, navigation
+- **Semi-Bold (600)** - Buttons, emphasized text
+- **Bold (700)** - Primary headlines, h1-h2
+
+### Web Font Loading
+
+**Google Fonts CDN:**
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
+```
+
+**CSS @import:**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');
+```
+
+**Self-Hosted (Recommended for Performance):**
+```css
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/raleway-regular.woff2') format('woff2'),
+       url('/fonts/raleway-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/raleway-semibold.woff2') format('woff2'),
+       url('/fonts/raleway-semibold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/raleway-bold.woff2') format('woff2'),
+       url('/fonts/raleway-bold.woff') format('woff');
+}
+```
+
+### Usage Guidelines
+
+**Use Raleway For:**
+- ✅ Page headlines (h1, h2, h3)
+- ✅ Navigation menu items
+- ✅ Button labels
+- ✅ Section headers
+- ✅ Pull quotes and callouts
+- ✅ Hero text and taglines
+
+**Do Not Use Raleway For:**
+- ❌ Body paragraphs (use Open Sans)
+- ❌ Long-form content (readability issues)
+- ❌ Small text below 14px (legibility)
+- ❌ Dense information tables
+
+---
+
+## Open Sans (Body Text)
+
+### Font Specifications
+
+**Family:** Open Sans
+**Designer:** Steve Matteson
+**License:** Apache License 2.0 (free for commercial use)
+**Classification:** Sans-serif, Humanist
+
+**Recommended Weights for Netresearch:**
+- **Regular (400)** - Body text, lists, captions
+- **Semi-Bold (600)** - Emphasized body text, labels
+- **Bold (700)** - Strong emphasis, sub-headers
+
+### Web Font Loading
+
+**Google Fonts CDN:**
+```html
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+```
+
+**CSS @import:**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
+```
+
+**Self-Hosted:**
+```css
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/opensans-regular.woff2') format('woff2'),
+       url('/fonts/opensans-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/opensans-semibold.woff2') format('woff2'),
+       url('/fonts/opensans-semibold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/opensans-bold.woff2') format('woff2'),
+       url('/fonts/opensans-bold.woff') format('woff');
+}
+```
+
+### Usage Guidelines
+
+**Use Open Sans For:**
+- ✅ All body copy and paragraphs
+- ✅ Lists (ordered and unordered)
+- ✅ Form input text
+- ✅ Captions and metadata
+- ✅ Table content
+- ✅ Footer text
+
+**Do Not Use Open Sans For:**
+- ❌ Main page headlines (use Raleway)
+- ❌ Large display text above 48px (use Raleway)
+
+---
+
+## Calibri (Documents)
+
+### Font Specifications
+
+**Family:** Calibri
+**Designer:** Luc(as) de Groot
+**License:** Microsoft bundled (available on Windows/Office)
+**Classification:** Sans-serif, Humanist
+
+**Weights Available:**
+- Regular (400)
+- Bold (700)
+- Italic (400)
+- Bold Italic (700)
+
+### Usage Guidelines
+
+**Use Calibri For:**
+- ✅ Microsoft Word documents
+- ✅ PowerPoint presentations
+- ✅ Excel spreadsheets
+- ✅ Outlook emails
+- ✅ Internal documentation
+
+**Fallback for Non-Microsoft Platforms:**
+```css
+font-family: Calibri, 'Open Sans', Arial, sans-serif;
+```
+
+**Document Templates:**
+- **Headings:** Calibri Bold, Turquoise (#2F99A4)
+- **Body Text:** Calibri Regular, Anthracite (#585961)
+- **Emphasis:** Calibri Bold or Calibri Italic
+
+---
+
+## Typography Scale
+
+### Web Typography Hierarchy
+
+```css
+/* h1 - Page Title */
+h1 {
+  font-family: 'Raleway', sans-serif;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #585961;
+  margin-bottom: 24px;
+}
+
+/* h2 - Section Header */
+h2 {
+  font-family: 'Raleway', sans-serif;
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: #585961;
+  margin-bottom: 20px;
+}
+
+/* h3 - Subsection Header */
+h3 {
+  font-family: 'Raleway', sans-serif;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #585961;
+  margin-bottom: 16px;
+}
+
+/* h4 - Minor Header */
+h4 {
+  font-family: 'Raleway', sans-serif;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #585961;
+  margin-bottom: 12px;
+}
+
+/* h5 - Small Header */
+h5 {
+  font-family: 'Raleway', sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: #585961;
+  margin-bottom: 12px;
+}
+
+/* Body Text */
+body, p {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: #585961;
+  margin-bottom: 16px;
+}
+
+/* Small Text / Captions */
+.text-small, small {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: #585961;
+}
+
+/* Lead Paragraph */
+.lead {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: #585961;
+}
+```
+
+### Responsive Typography
+
+```css
+/* Mobile First Approach */
+
+/* Base (Mobile) */
+h1 { font-size: 32px; }
+h2 { font-size: 26px; }
+h3 { font-size: 22px; }
+h4 { font-size: 18px; }
+body, p { font-size: 16px; }
+
+/* Tablet (768px+) */
+@media (min-width: 768px) {
+  h1 { font-size: 40px; }
+  h2 { font-size: 32px; }
+  h3 { font-size: 26px; }
+  h4 { font-size: 20px; }
+}
+
+/* Desktop (1024px+) */
+@media (min-width: 1024px) {
+  h1 { font-size: 48px; }
+  h2 { font-size: 36px; }
+  h3 { font-size: 28px; }
+  h4 { font-size: 22px; }
+}
+
+/* Large Desktop (1440px+) */
+@media (min-width: 1440px) {
+  h1 { font-size: 56px; }
+  h2 { font-size: 40px; }
+}
+```
+
+---
+
+## Line Height & Spacing
+
+### Line Height Guidelines
+
+```css
+/* Headlines - Tighter Leading */
+h1, h2, h3 {
+  line-height: 1.2;
+}
+
+h4, h5, h6 {
+  line-height: 1.4;
+}
+
+/* Body Text - Comfortable Reading */
+p, li, td {
+  line-height: 1.6;
+}
+
+/* Small Text */
+small, .caption {
+  line-height: 1.5;
+}
+```
+
+### Vertical Rhythm
+
+```css
+/* Consistent spacing system */
+:root {
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 48px;
+}
+
+/* Apply to typography */
+h1 { margin-bottom: var(--spacing-lg); }
+h2 { margin-bottom: var(--spacing-lg); }
+h3 { margin-bottom: var(--spacing-md); }
+h4, h5 { margin-bottom: var(--spacing-sm); }
+p { margin-bottom: var(--spacing-md); }
+```
+
+---
+
+## Special Typography Elements
+
+### Buttons
+
+```css
+.btn {
+  font-family: 'Raleway', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.5px;
+  text-transform: none;
+}
+
+.btn-large {
+  font-size: 18px;
+}
+
+.btn-small {
+  font-size: 14px;
+}
+```
+
+### Navigation
+
+```css
+.nav-link {
+  font-family: 'Raleway', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.3px;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  font-weight: 600;
+}
+```
+
+### Blockquotes / Pull Quotes
+
+```css
+blockquote {
+  font-family: 'Raleway', sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.5;
+  font-style: italic;
+  color: #2F99A4;
+  border-left: 4px solid #FF4D00;
+  padding-left: 24px;
+  margin: 32px 0;
+}
+
+blockquote cite {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  font-style: normal;
+  color: #585961;
+  display: block;
+  margin-top: 12px;
+}
+```
+
+### Lists
+
+```css
+ul, ol {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  margin-bottom: 16px;
+  padding-left: 24px;
+}
+
+li {
+  margin-bottom: 8px;
+}
+
+/* Custom bullet points using brand color */
+ul.branded {
+  list-style: none;
+  padding-left: 0;
+}
+
+ul.branded li::before {
+  content: '●';
+  color: #2F99A4;
+  font-weight: bold;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+```
+
+---
+
+## Font Loading Strategy
+
+### Performance Optimization
+
+```html
+<!-- Critical CSS with system font fallback -->
+<style>
+  body {
+    font-family: -apple-system, BlinkMacSystemFont,
+                 'Segoe UI', sans-serif;
+  }
+</style>
+
+<!-- Preload critical fonts -->
+<link rel="preload"
+      href="/fonts/raleway-bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+<link rel="preload"
+      href="/fonts/opensans-regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin>
+```
+
+### Font Display Strategy
+
+```css
+@font-face {
+  font-family: 'Raleway';
+  font-display: swap; /* Show fallback immediately, swap when loaded */
+  /* ... other properties */
+}
+```
+
+### Fallback Stack
+
+```css
+/* Complete fallback chain */
+--font-headlines: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
+--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont,
+             'Segoe UI', Roboto, sans-serif;
+--font-documents: Calibri, 'Open Sans', Arial, sans-serif;
+```
+
+---
+
+## Accessibility Considerations
+
+### Minimum Font Sizes
+
+- **Body text:** Never below 16px (1rem)
+- **Small text:** Never below 14px (0.875rem)
+- **Buttons:** Minimum 16px for touch targets
+
+### Contrast Requirements
+
+All text must meet WCAG AA:
+- **Normal text:** 4.5:1 contrast ratio
+- **Large text (≥18px):** 3:1 contrast ratio
+
+### Readability
+
+**Line Length:**
+- Optimal: 50-75 characters per line
+- Maximum: 90 characters per line
+
+```css
+.content {
+  max-width: 75ch; /* Character-based width */
+}
+```
+
+**Paragraph Spacing:**
+```css
+p + p {
+  margin-top: 16px; /* Clear paragraph separation */
+}
+```
+
+---
+
+## CSS Custom Properties (Complete Set)
+
+```css
+:root {
+  /* Font Families */
+  --font-headline: 'Raleway', sans-serif;
+  --font-body: 'Open Sans', sans-serif;
+  --font-document: Calibri, 'Open Sans', sans-serif;
+
+  /* Font Sizes */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 28px;
+  --font-size-4xl: 36px;
+  --font-size-5xl: 48px;
+  --font-size-6xl: 56px;
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights */
+  --line-height-tight: 1.2;
+  --line-height-snug: 1.4;
+  --line-height-normal: 1.6;
+  --line-height-relaxed: 1.8;
+
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.5px;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.5px;
+}
+```
+
+---
+
+## Typography Testing Checklist
+
+Before deploying:
+
+- [ ] Fonts load correctly on all major browsers
+- [ ] Fallback fonts provide acceptable experience
+- [ ] All text meets WCAG AA contrast requirements
+- [ ] Font files optimized (woff2 format preferred)
+- [ ] Font-display: swap implemented
+- [ ] Line lengths within 50-90 character range
+- [ ] Responsive typography scales appropriately
+- [ ] No text smaller than 14px in production
+- [ ] Headlines use Raleway, body uses Open Sans
+- [ ] Documents use Calibri with proper fallbacks
+
+---
+
+*Last updated: 2025-10-18*
+*Maintained by: Netresearch DTT GmbH*

references/web-design.md

@@ -0,0 +1,860 @@
+# Netresearch Web Design Guidelines
+
+Comprehensive web design patterns, layouts, components, and responsive design standards.
+
+## Core Design Principles
+
+### 1. High White Space
+**Philosophy:** Clean, uncluttered layouts that prioritize content and readability.
+
+```css
+/* Generous spacing throughout */
+:root {
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 48px;
+  --spacing-3xl: 64px;
+  --spacing-4xl: 96px;
+}
+
+/* Section spacing */
+section {
+  padding: var(--spacing-4xl) 0;
+}
+
+/* Content spacing */
+.content {
+  padding: var(--spacing-xxl);
+}
+```
+
+**Guidelines:**
+- Minimum 48px padding around major sections
+- Minimum 24px margin between content blocks
+- Generous line-height (1.6) for readability
+- Never crowd elements - let designs breathe
+
+---
+
+### 2. Responsive Grid System
+
+**12-Column Flexible Grid:**
+```css
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--spacing-lg);
+  padding: 0 var(--spacing-lg);
+}
+
+/* Content within container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+/* Responsive columns */
+.col-12 { grid-column: span 12; }
+.col-6 { grid-column: span 6; }
+.col-4 { grid-column: span 4; }
+.col-3 { grid-column: span 3; }
+
+@media (max-width: 768px) {
+  .col-6, .col-4, .col-3 {
+    grid-column: span 12;
+  }
+}
+```
+
+---
+
+### 3. Design Hierarchy
+- **Primary:** Turquoise (#2F99A4) for key elements
+- **Secondary:** Orange (#FF4D00) for accents only
+- **Typography:** Clear hierarchy with Raleway headers and Open Sans body
+- **Visual Flow:** Top to bottom, left to right reading patterns
+
+---
+
+## Responsive Breakpoints
+
+### Standard Breakpoints
+
+```css
+/* Mobile First Approach */
+
+/* Extra Small (Mobile Portrait) */
+/* Default: 0px - 599px */
+
+/* Small (Mobile Landscape) */
+@media (min-width: 600px) {
+  /* Adjustments for landscape phones */
+}
+
+/* Medium (Tablet) */
+@media (min-width: 768px) {
+  /* Two-column layouts start here */
+}
+
+/* Large (Desktop) */
+@media (min-width: 1024px) {
+  /* Full desktop layouts */
+}
+
+/* Extra Large (Wide Desktop) */
+@media (min-width: 1440px) {
+  /* Maximum content width, larger typography */
+}
+
+/* Ultra Wide */
+@media (min-width: 1920px) {
+  /* Optional: Enhanced spacing for ultra-wide displays */
+}
+```
+
+### Container Widths
+
+```css
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+@media (min-width: 600px) {
+  .container { max-width: 580px; }
+}
+
+@media (min-width: 768px) {
+  .container { max-width: 750px; }
+}
+
+@media (min-width: 1024px) {
+  .container { max-width: 1000px; }
+}
+
+@media (min-width: 1440px) {
+  .container { max-width: 1200px; }
+}
+```
+
+---
+
+## Component Library
+
+### Buttons
+
+```css
+/* Primary Button */
+.btn-primary {
+  display: inline-block;
+  font-family: 'Raleway', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  padding: 12px 32px;
+  border: none;
+  border-radius: 4px;
+  background-color: #2F99A4;
+  color: #FFFFFF;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+  background-color: #257880;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(47, 153, 164, 0.3);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+/* Secondary Button */
+.btn-secondary {
+  background-color: #FF4D00;
+  color: #FFFFFF;
+}
+
+.btn-secondary:hover {
+  background-color: #CC3D00;
+  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3);
+}
+
+/* Outline Button */
+.btn-outline {
+  background-color: transparent;
+  color: #2F99A4;
+  border: 2px solid #2F99A4;
+}
+
+.btn-outline:hover {
+  background-color: #2F99A4;
+  color: #FFFFFF;
+}
+
+/* Button Sizes */
+.btn-small {
+  padding: 8px 24px;
+  font-size: 14px;
+}
+
+.btn-large {
+  padding: 16px 48px;
+  font-size: 18px;
+}
+
+/* Button States */
+.btn:disabled,
+.btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+```
+
+**Button Usage:**
+```html
+<!-- Primary action -->
+<button class="btn-primary">Get Started</button>
+
+<!-- Secondary action -->
+<button class="btn-secondary">Learn More</button>
+
+<!-- Tertiary action -->
+<button class="btn-outline">Contact Us</button>
+
+<!-- Sizes -->
+<button class="btn-primary btn-small">Small</button>
+<button class="btn-primary">Default</button>
+<button class="btn-primary btn-large">Large</button>
+```
+
+---
+
+### Cards
+
+```css
+.card {
+  background: #FFFFFF;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(-4px);
+}
+
+.card-image {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+}
+
+.card-content {
+  padding: var(--spacing-lg);
+}
+
+.card-title {
+  font-family: 'Raleway', sans-serif;
+  font-size: 22px;
+  font-weight: 600;
+  color: #585961;
+  margin-bottom: var(--spacing-sm);
+}
+
+.card-text {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #585961;
+  margin-bottom: var(--spacing-md);
+}
+
+.card-footer {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid #E5E5E5;
+  background-color: #F5F5F5;
+}
+```
+
+**Card Usage:**
+```html
+<div class="card">
+  <img src="image.jpg" alt="Card image" class="card-image">
+  <div class="card-content">
+    <h3 class="card-title">Card Title</h3>
+    <p class="card-text">Card description goes here.</p>
+    <a href="#" class="btn-primary">Read More</a>
+  </div>
+  <div class="card-footer">
+    <span class="card-meta">Posted: January 1, 2025</span>
+  </div>
+</div>
+```
+
+---
+
+### Navigation
+
+```css
+/* Main Navigation */
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background: #FFFFFF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: var(--spacing-md) 0;
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+.navbar-logo {
+  height: 48px;
+}
+
+.navbar-menu {
+  display: flex;
+  gap: var(--spacing-lg);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-link {
+  font-family: 'Raleway', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: #585961;
+  text-decoration: none;
+  padding: 8px 16px;
+  transition: all 0.3s ease;
+}
+
+.navbar-link:hover,
+.navbar-link.active {
+  color: #2F99A4;
+  font-weight: 600;
+}
+
+/* Mobile Menu Toggle */
+.navbar-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.navbar-toggle span {
+  display: block;
+  width: 24px;
+  height: 3px;
+  background: #2F99A4;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 768px) {
+  .navbar-toggle {
+    display: flex;
+  }
+
+  .navbar-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    background: #FFFFFF;
+    padding: var(--spacing-lg);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-menu.active {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+```
+
+---
+
+### Forms
+
+```css
+.form-group {
+  margin-bottom: var(--spacing-lg);
+}
+
+.form-label {
+  display: block;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #585961;
+  margin-bottom: var(--spacing-xs);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  color: #585961;
+  padding: 12px 16px;
+  border: 1px solid #CCCDCC;
+  border-radius: 4px;
+  background: #FFFFFF;
+  transition: all 0.3s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: none;
+  border-color: #2F99A4;
+  box-shadow: 0 0 0 3px rgba(47, 153, 164, 0.1);
+}
+
+.form-input::placeholder {
+  color: #8A8B93;
+}
+
+.form-textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.form-error {
+  color: #DC3545;
+  font-size: 14px;
+  margin-top: var(--spacing-xs);
+}
+
+.form-input.error {
+  border-color: #DC3545;
+}
+
+.form-help {
+  font-size: 14px;
+  color: #8A8B93;
+  margin-top: var(--spacing-xs);
+}
+```
+
+**Form Example:**
+```html
+<form class="form">
+  <div class="form-group">
+    <label for="name" class="form-label">Name*</label>
+    <input type="text" id="name" class="form-input" placeholder="Your name" required>
+  </div>
+
+  <div class="form-group">
+    <label for="email" class="form-label">Email*</label>
+    <input type="email" id="email" class="form-input" placeholder="your@email.com" required>
+    <small class="form-help">We'll never share your email.</small>
+  </div>
+
+  <div class="form-group">
+    <label for="message" class="form-label">Message*</label>
+    <textarea id="message" class="form-textarea" placeholder="Your message" required></textarea>
+  </div>
+
+  <button type="submit" class="btn-primary">Send Message</button>
+</form>
+```
+
+---
+
+### Links
+
+```css
+/* Body Links */
+a {
+  color: #2F99A4;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border-bottom: 1px solid transparent;
+}
+
+a:hover {
+  color: #257880;
+  border-bottom-color: #2F99A4;
+}
+
+/* External Links */
+a[target="_blank"]::after {
+  content: ' ↗';
+  font-size: 0.9em;
+}
+
+/* Download Links */
+a[download]::before {
+  content: '⬇ ';
+}
+
+/* Standalone Links */
+.link-standalone {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.link-standalone::after {
+  content: '→';
+  transition: transform 0.3s ease;
+}
+
+.link-standalone:hover::after {
+  transform: translateX(4px);
+}
+```
+
+---
+
+### Hero Sections
+
+```css
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 600px;
+  padding: var(--spacing-4xl) var(--spacing-lg);
+  background: linear-gradient(135deg, #2F99A4 0%, #257880 100%);
+  color: #FFFFFF;
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 800px;
+  z-index: 1;
+}
+
+.hero-title {
+  font-family: 'Raleway', sans-serif;
+  font-size: 56px;
+  font-weight: 700;
+  margin-bottom: var(--spacing-lg);
+}
+
+.hero-subtitle {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 20px;
+  line-height: 1.6;
+  margin-bottom: var(--spacing-xl);
+  opacity: 0.9;
+}
+
+.hero-cta {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .hero {
+    min-height: 400px;
+    padding: var(--spacing-xxl) var(--spacing-lg);
+  }
+
+  .hero-title {
+    font-size: 36px;
+  }
+
+  .hero-subtitle {
+    font-size: 18px;
+  }
+
+  .hero-cta {
+    flex-direction: column;
+  }
+}
+```
+
+---
+
+### Tables
+
+```css
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--spacing-lg);
+  background: #FFFFFF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.table thead {
+  background-color: #2F99A4;
+  color: #FFFFFF;
+}
+
+.table th {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 600;
+  text-align: left;
+  padding: 16px;
+}
+
+.table td {
+  font-family: 'Open Sans', sans-serif;
+  padding: 12px 16px;
+  border-bottom: 1px solid #E5E5E5;
+}
+
+.table tbody tr:hover {
+  background-color: #F5F5F5;
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Responsive Table */
+@media (max-width: 768px) {
+  .table {
+    display: block;
+    overflow-x: auto;
+  }
+}
+```
+
+---
+
+### Footer
+
+```css
+.footer {
+  background-color: #585961;
+  color: #FFFFFF;
+  padding: var(--spacing-4xl) 0 var(--spacing-lg);
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-xl);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.footer-section h4 {
+  font-family: 'Raleway', sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: #FFFFFF;
+  margin-bottom: var(--spacing-md);
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-section li {
+  margin-bottom: var(--spacing-sm);
+}
+
+.footer-section a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+  color: #2F99A4;
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: var(--spacing-lg);
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+}
+```
+
+---
+
+## Layout Patterns
+
+### Two-Column Layout
+
+```css
+.two-column {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--spacing-xl);
+}
+
+@media (max-width: 768px) {
+  .two-column {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+### Three-Column Layout
+
+```css
+.three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-lg);
+}
+
+@media (max-width: 1024px) {
+  .three-column {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .three-column {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+### Content + Sidebar
+
+```css
+.content-sidebar {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: var(--spacing-xxl);
+}
+
+@media (max-width: 1024px) {
+  .content-sidebar {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+---
+
+## Animations & Transitions
+
+```css
+/* Smooth transitions */
+* {
+  transition-timing-function: ease-in-out;
+}
+
+/* Fade In */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+/* Slide In */
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Pulse (for emphasis) */
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+```
+
+---
+
+## Web Design Checklist
+
+Before launching any web project:
+
+**Layout:**
+- [ ] High white space maintained throughout
+- [ ] Responsive grid implemented correctly
+- [ ] All breakpoints tested (mobile, tablet, desktop)
+- [ ] Content max-width appropriate (≤1200px)
+
+**Components:**
+- [ ] Buttons follow brand styles (Raleway font, correct colors)
+- [ ] Cards have appropriate shadows and hover states
+- [ ] Navigation sticky/fixed and accessible
+- [ ] Forms styled consistently with validation
+
+**Typography:**
+- [ ] Headlines use Raleway
+- [ ] Body text uses Open Sans
+- [ ] Font sizes scale responsively
+- [ ] Line-heights appropriate for readability
+
+**Colors:**
+- [ ] Turquoise primary, orange accent only
+- [ ] WCAG AA contrast compliance verified
+- [ ] Brand colors match exactly (no variations)
+
+**Performance:**
+- [ ] Images optimized and responsive
+- [ ] Fonts loaded efficiently (preload critical)
+- [ ] CSS minified for production
+- [ ] Animations use transform/opacity (GPU-accelerated)
+
+**Accessibility:**
+- [ ] All interactive elements keyboard accessible
+- [ ] ARIA labels where needed
+- [ ] Focus states visible
+- [ ] Screen reader tested
+
+---
+
+*Last updated: 2025-10-18*
+*Maintained by: Netresearch DTT GmbH*

templates/landing-page.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Netresearch - Landing Page Template</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- Navigation -->
+  <nav class="navbar">
+    <div class="navbar-container">
+      <img src="logo.svg" alt="Netresearch Logo" class="navbar-logo">
+
+      <button class="navbar-toggle" aria-label="Toggle navigation">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+
+      <ul class="navbar-menu">
+        <li><a href="#services" class="navbar-link active">Services</a></li>
+        <li><a href="#about" class="navbar-link">About</a></li>
+        <li><a href="#portfolio" class="navbar-link">Portfolio</a></li>
+        <li><a href="#contact" class="navbar-link">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="hero-content">
+      <h1 class="hero-title">Your Digital Transformation Partner</h1>
+      <p class="hero-subtitle">
+        We create innovative digital solutions that drive business growth and enhance user experiences.
+      </p>
+      <div class="hero-cta">
+        <a href="#contact" class="btn-primary btn-large">Get Started</a>
+        <a href="#services" class="btn-outline btn-large">Learn More</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Services Section -->
+  <section id="services" class="section">
+    <div class="container">
+      <h2 class="section-title">Our Services</h2>
+      <p class="section-subtitle">
+        Comprehensive digital solutions tailored to your needs
+      </p>
+
+      <div class="three-column">
+        <div class="card">
+          <div class="card-content">
+            <h3 class="card-title">Web Development</h3>
+            <p class="card-text">
+              Modern, responsive websites built with the latest technologies and best practices.
+            </p>
+            <a href="#" class="link-standalone">Learn more</a>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="card-content">
+            <h3 class="card-title">E-Commerce Solutions</h3>
+            <p class="card-text">
+              Powerful online stores that drive sales and provide exceptional shopping experiences.
+            </p>
+            <a href="#" class="link-standalone">Learn more</a>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="card-content">
+            <h3 class="card-title">Digital Strategy</h3>
+            <p class="card-text">
+              Strategic consulting to help your business thrive in the digital landscape.
+            </p>
+            <a href="#" class="link-standalone">Learn more</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- About Section -->
+  <section id="about" class="section section-alt">
+    <div class="container">
+      <div class="two-column">
+        <div>
+          <h2>About Netresearch</h2>
+          <p class="lead">
+            With over 20 years of experience, we've been helping businesses succeed online through innovative digital solutions.
+          </p>
+          <p>
+            Our team of experts combines technical excellence with creative thinking to deliver projects that exceed expectations. We specialize in TYPO3, e-commerce, and custom web applications.
+          </p>
+          <p>
+            Based in Leipzig, Germany, we serve clients across Europe and beyond, providing end-to-end digital services from strategy to implementation and support.
+          </p>
+          <a href="#contact" class="btn-primary">Work with us</a>
+        </div>
+        <div>
+          <img src="about-image.jpg" alt="Netresearch team" style="width: 100%; border-radius: 8px;">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Portfolio Section -->
+  <section id="portfolio" class="section">
+    <div class="container">
+      <h2 class="section-title">Our Work</h2>
+      <p class="section-subtitle">
+        Recent projects we're proud of
+      </p>
+
+      <div class="three-column">
+        <div class="card">
+          <img src="project-1.jpg" alt="Project 1" class="card-image">
+          <div class="card-content">
+            <h3 class="card-title">E-Commerce Platform</h3>
+            <p class="card-text">
+              Complete redesign and development of a multi-vendor marketplace.
+            </p>
+            <div class="card-footer">
+              <span class="card-meta">TYPO3 • Magento • 2024</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <img src="project-2.jpg" alt="Project 2" class="card-image">
+          <div class="card-content">
+            <h3 class="card-title">Corporate Website</h3>
+            <p class="card-text">
+              Modern website with multilingual content and advanced integrations.
+            </p>
+            <div class="card-footer">
+              <span class="card-meta">TYPO3 • API • 2024</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <img src="project-3.jpg" alt="Project 3" class="card-image">
+          <div class="card-content">
+            <h3 class="card-title">Custom Web Application</h3>
+            <p class="card-text">
+              Bespoke solution for complex business requirements and workflows.
+            </p>
+            <div class="card-footer">
+              <span class="card-meta">Laravel • Vue.js • 2024</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Contact Section -->
+  <section id="contact" class="section section-alt">
+    <div class="container">
+      <div class="two-column">
+        <div>
+          <h2>Get in Touch</h2>
+          <p class="lead">
+            Ready to start your next project? Let's talk about how we can help.
+          </p>
+          <p>
+            <strong>Netresearch DTT GmbH</strong><br>
+            Nonnenstraße 11d<br>
+            04229 Leipzig, Germany
+          </p>
+          <p>
+            <strong>Phone:</strong> +49 341 49288-0<br>
+            <strong>Email:</strong> <a href="mailto:info@netresearch.de">info@netresearch.de</a>
+          </p>
+        </div>
+
+        <div>
+          <form class="form">
+            <div class="form-group">
+              <label for="name" class="form-label">Name*</label>
+              <input type="text" id="name" class="form-input" placeholder="Your name" required>
+            </div>
+
+            <div class="form-group">
+              <label for="email" class="form-label">Email*</label>
+              <input type="email" id="email" class="form-input" placeholder="your@email.com" required>
+            </div>
+
+            <div class="form-group">
+              <label for="subject" class="form-label">Subject*</label>
+              <input type="text" id="subject" class="form-input" placeholder="Project inquiry" required>
+            </div>
+
+            <div class="form-group">
+              <label for="message" class="form-label">Message*</label>
+              <textarea id="message" class="form-textarea" placeholder="Tell us about your project" required></textarea>
+            </div>
+
+            <button type="submit" class="btn-primary btn-large">Send Message</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-section">
+        <h4>Company</h4>
+        <ul>
+          <li><a href="#about">About Us</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#portfolio">Portfolio</a></li>
+          <li><a href="#careers">Careers</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Services</h4>
+        <ul>
+          <li><a href="#web-dev">Web Development</a></li>
+          <li><a href="#ecommerce">E-Commerce</a></li>
+          <li><a href="#typo3">TYPO3</a></li>
+          <li><a href="#consulting">Consulting</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Resources</h4>
+        <ul>
+          <li><a href="#blog">Blog</a></li>
+          <li><a href="#case-studies">Case Studies</a></li>
+          <li><a href="#documentation">Documentation</a></li>
+          <li><a href="#support">Support</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-section">
+        <h4>Legal</h4>
+        <ul>
+          <li><a href="#imprint">Imprint</a></li>
+          <li><a href="#privacy">Privacy Policy</a></li>
+          <li><a href="#terms">Terms of Service</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <div class="container">
+        <p>&copy; 2025 Netresearch DTT GmbH. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    // Mobile menu toggle
+    const toggle = document.querySelector('.navbar-toggle');
+    const menu = document.querySelector('.navbar-menu');
+
+    toggle.addEventListener('click', () => {
+      menu.classList.toggle('active');
+    });
+
+    // Smooth scrolling
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth' });
+          menu.classList.remove('active');
+        }
+      });
+    });
+  </script>
+</body>
+</html>

templates/styles.css

@@ -0,0 +1,612 @@
+/*
+ * Netresearch Brand Styles
+ * Complete CSS template following brand guidelines
+ */
+
+/* ============================================
+   CSS CUSTOM PROPERTIES
+   ============================================ */
+:root {
+  /* Brand Colors */
+  --color-primary: #2F99A4;
+  --color-primary-rgb: 47, 153, 164;
+  --color-primary-dark: #257880;
+  --color-accent: #FF4D00;
+  --color-accent-rgb: 255, 77, 0;
+  --color-accent-dark: #CC3D00;
+
+  /* Neutral Colors */
+  --color-text-primary: #585961;
+  --color-text-secondary: #8A8B93;
+  --color-background: #FFFFFF;
+  --color-background-alt: #F5F5F5;
+  --color-border: #CCCDCC;
+  --color-border-light: #E5E5E5;
+
+  /* Typography */
+  --font-headline: 'Raleway', sans-serif;
+  --font-body: 'Open Sans', sans-serif;
+
+  /* Font Sizes */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 28px;
+  --font-size-4xl: 36px;
+  --font-size-5xl: 48px;
+  --font-size-6xl: 56px;
+
+  /* Spacing */
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 48px;
+  --spacing-3xl: 64px;
+  --spacing-4xl: 96px;
+
+  /* Shadows */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
+}
+
+/* ============================================
+   RESET & BASE STYLES
+   ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  background-color: var(--color-background);
+}
+
+/* ============================================
+   TYPOGRAPHY
+   ============================================ */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-headline);
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--color-text-primary);
+}
+
+h1 {
+  font-size: var(--font-size-5xl);
+  margin-bottom: var(--spacing-lg);
+}
+
+h2 {
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--spacing-lg);
+}
+
+h3 {
+  font-size: var(--font-size-3xl);
+  font-weight: 600;
+  margin-bottom: var(--spacing-md);
+}
+
+h4 {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+}
+
+p {
+  margin-bottom: var(--spacing-md);
+}
+
+.lead {
+  font-size: var(--font-size-xl);
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+a:hover {
+  color: var(--color-primary-dark);
+}
+
+/* ============================================
+   LAYOUT
+   ============================================ */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+.section {
+  padding: var(--spacing-4xl) 0;
+}
+
+.section-alt {
+  background-color: var(--color-background-alt);
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: var(--spacing-md);
+}
+
+.section-subtitle {
+  text-align: center;
+  font-size: var(--font-size-xl);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-xxl);
+}
+
+.two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-xl);
+  align-items: center;
+}
+
+.three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-lg);
+}
+
+/* ============================================
+   NAVIGATION
+   ============================================ */
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background: var(--color-background);
+  box-shadow: var(--shadow-sm);
+  padding: var(--spacing-md) 0;
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+}
+
+.navbar-logo {
+  height: 48px;
+}
+
+.navbar-menu {
+  display: flex;
+  gap: var(--spacing-lg);
+  list-style: none;
+}
+
+.navbar-link {
+  font-family: var(--font-headline);
+  font-size: var(--font-size-base);
+  font-weight: 400;
+  color: var(--color-text-primary);
+  padding: var(--spacing-xs) var(--spacing-md);
+  transition: all 0.3s ease;
+}
+
+.navbar-link:hover,
+.navbar-link.active {
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+.navbar-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.navbar-toggle span {
+  display: block;
+  width: 24px;
+  height: 3px;
+  background: var(--color-primary);
+  transition: all 0.3s ease;
+}
+
+/* ============================================
+   HERO SECTION
+   ============================================ */
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 600px;
+  padding: var(--spacing-4xl) var(--spacing-lg);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: var(--color-background);
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 800px;
+  z-index: 1;
+}
+
+.hero-title {
+  color: var(--color-background);
+  margin-bottom: var(--spacing-lg);
+}
+
+.hero-subtitle {
+  font-size: var(--font-size-xl);
+  line-height: 1.6;
+  margin-bottom: var(--spacing-xl);
+  opacity: 0.95;
+}
+
+.hero-cta {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* ============================================
+   BUTTONS
+   ============================================ */
+.btn-primary,
+.btn-secondary,
+.btn-outline {
+  display: inline-block;
+  font-family: var(--font-headline);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  padding: 12px 32px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(47, 153, 164, 0.3);
+}
+
+.btn-secondary {
+  background-color: var(--color-accent);
+  color: var(--color-background);
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-accent-dark);
+  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3);
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: var(--color-background);
+  border: 2px solid var(--color-background);
+}
+
+.btn-outline:hover {
+  background-color: var(--color-background);
+  color: var(--color-primary);
+}
+
+.btn-large {
+  padding: 16px 48px;
+  font-size: var(--font-size-lg);
+}
+
+.btn-small {
+  padding: 8px 24px;
+  font-size: var(--font-size-sm);
+}
+
+/* ============================================
+   CARDS
+   ============================================ */
+.card {
+  background: var(--color-background);
+  border-radius: 8px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  height: 100%;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-4px);
+}
+
+.card-image {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+}
+
+.card-content {
+  padding: var(--spacing-lg);
+}
+
+.card-title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+}
+
+.card-text {
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.card-footer {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid var(--color-border-light);
+  background-color: var(--color-background-alt);
+}
+
+.card-meta {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* ============================================
+   LINKS
+   ============================================ */
+.link-standalone {
+  font-family: var(--font-headline);
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-primary);
+}
+
+.link-standalone::after {
+  content: '→';
+  transition: transform 0.3s ease;
+}
+
+.link-standalone:hover::after {
+  transform: translateX(4px);
+}
+
+/* ============================================
+   FORMS
+   ============================================ */
+.form-group {
+  margin-bottom: var(--spacing-lg);
+}
+
+.form-label {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  font-family: var(--font-body);
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  padding: 12px 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  transition: all 0.3s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(47, 153, 164, 0.1);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.form-textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+/* ============================================
+   FOOTER
+   ============================================ */
+.footer {
+  background-color: var(--color-text-primary);
+  color: var(--color-background);
+  padding: var(--spacing-4xl) 0 var(--spacing-lg);
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-xl);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.footer-section h4 {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-background);
+  margin-bottom: var(--spacing-md);
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-section li {
+  margin-bottom: var(--spacing-sm);
+}
+
+.footer-section a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+  color: var(--color-primary);
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: var(--spacing-lg);
+  text-align: center;
+}
+
+.footer-bottom p {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+
+/* Tablet (768px and below) */
+@media (max-width: 1024px) {
+  .three-column {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  /* Typography */
+  h1 { font-size: var(--font-size-4xl); }
+  h2 { font-size: var(--font-size-3xl); }
+  h3 { font-size: var(--font-size-2xl); }
+
+  /* Layout */
+  .two-column,
+  .three-column {
+    grid-template-columns: 1fr;
+  }
+
+  /* Hero */
+  .hero {
+    min-height: 400px;
+    padding: var(--spacing-xxl) var(--spacing-lg);
+  }
+
+  .hero-title {
+    font-size: var(--font-size-4xl);
+  }
+
+  .hero-subtitle {
+    font-size: var(--font-size-lg);
+  }
+
+  .hero-cta {
+    flex-direction: column;
+  }
+
+  /* Navigation */
+  .navbar-toggle {
+    display: flex;
+  }
+
+  .navbar-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    background: var(--color-background);
+    padding: var(--spacing-lg);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-menu.active {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* Sections */
+  .section {
+    padding: var(--spacing-xxl) 0;
+  }
+}
+
+/* Mobile (600px and below) */
+@media (max-width: 600px) {
+  h1 { font-size: var(--font-size-3xl); }
+  h2 { font-size: var(--font-size-2xl); }
+
+  .hero {
+    min-height: 300px;
+  }
+
+  .btn-large {
+    padding: 12px 32px;
+    font-size: var(--font-size-base);
+  }
+}
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+.text-center {
+  text-align: center;
+}
+
+.mb-0 { margin-bottom: 0; }
+.mb-sm { margin-bottom: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+.mb-lg { margin-bottom: var(--spacing-lg); }
+.mb-xl { margin-bottom: var(--spacing-xl); }