techadmin/sonith-website
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: CI-konformes Farbschema gemäß Logo & CI Handbuch (v1.1.0)

Browse Source 
- Logo-Gelb auf #DEDC1E korrigiert (Pantone 381 C)
- Petrol #067391 als Sekundärakzent eingeführt (CI-Störer-/Gegenfarbe)
- Generische Slate-Töne durch CI-Grautöne (#848687, #C8C9CA) ersetzt
- Hintergrund von Slate-Navy auf petrol-getöntes Dunkel umgestellt
- Sekundär-Button (Helpdesk im Hero) nutzt jetzt Petrol-Outline
- Hero-Gradient mit Petrol-Akzent unten links ergänzt
- CLAUDE.md mit CI-Quelle und Pantone-Referenzen dokumentiert

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dominik Höfling
2026-05-04 23:05:38 +02:00
parent 96fc0601b5
commit 6662ba2dd1
5 changed files with 134 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
datenschutz.html
+14 -11
View File
@@ -8,12 +8,15 @@
<link rel="icon" type="image/png" href="img/logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<script>
// CI-Farben (Logo & CI Handbuch, Sonith UG)
tailwind.config = {
theme: {
extend: {
colors: {
'sonith': { DEFAULT: '#DEDC1B', dark: '#c5c318', light: '#e8e64d' },
'dark': { DEFAULT: '#0f172a', light: '#1e293b', lighter: '#334155' },
'sonith': { DEFAULT: '#DEDC1E', dark: '#bdbb1a', light: '#e8e74a' },
'petrol': { DEFAULT: '#067391', light: '#3a96b0', dark: '#045066', 900: '#033b4b' },
'ci-gray': { DEFAULT: '#848687', light: '#C8C9CA' },
'dark': { DEFAULT: '#0a1f28', light: '#102b38', lighter: '#1a3d4d' },
},
fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'] },
},
@@ -23,16 +26,16 @@
<link rel="stylesheet" href="fonts/inter.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-dark text-slate-200 font-sans antialiased">
<body class="bg-dark text-ci-gray-light font-sans antialiased">
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-slate-700/50">
<nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-petrol-dark/30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20">
<a href="index.html" class="flex items-center gap-3">
<span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
</a>
<a href="index.html" class="text-sm font-medium text-slate-300 hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
<a href="index.html" class="text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
</div>
</div>
</nav>
@@ -42,7 +45,7 @@
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-8">Datenschutzerklärung</h1>
<div class="space-y-6 text-slate-300 leading-relaxed">
<div class="space-y-6 text-ci-gray-light leading-relaxed">
<h2 class="text-xl font-bold text-white mt-8">1. Datenschutz auf einen Blick</h2>
@@ -192,7 +195,7 @@
Diese Website nutzt die Schriftart „Inter", die lokal auf unserem Server gehostet wird. Es wird keine Verbindung zu externen Servern (z.&nbsp;B. Google) für die Schriftartendarstellung hergestellt.
</p>
<p class="text-slate-500 text-sm mt-12 pt-8 border-t border-slate-700/50">
<p class="text-ci-gray text-sm mt-12 pt-8 border-t border-petrol-dark/30">
Stand: März 2026
</p>
</div>
@@ -200,15 +203,15 @@
</main>
<!-- Footer -->
<footer class="py-8 bg-dark-light border-t border-slate-700/50">
<footer class="py-8 bg-dark-light border-t border-petrol-dark/30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<p class="text-slate-500 text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-slate-600 text-xs">v1.0.0</span>
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.1.0</span>
</div>
<div class="flex items-center gap-6">
<a href="impressum.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Impressum</a>
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
<a href="datenschutz.html" class="text-sonith text-sm">Datenschutz</a>
</div>
</div>