diff --git a/assets/fonts/TeleNeoOffice-Bold.a7bb592b.ttf b/assets/fonts/TeleNeoOffice-Bold.a7bb592b.ttf
new file mode 100644
index 0000000..88d13e1
Binary files /dev/null and b/assets/fonts/TeleNeoOffice-Bold.a7bb592b.ttf differ
diff --git a/assets/fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf b/assets/fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf
new file mode 100644
index 0000000..158ffc8
Binary files /dev/null and b/assets/fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf differ
diff --git a/assets/fonts/TeleNeoOffice-Medium.79fb426d.ttf b/assets/fonts/TeleNeoOffice-Medium.79fb426d.ttf
new file mode 100644
index 0000000..6ceef93
Binary files /dev/null and b/assets/fonts/TeleNeoOffice-Medium.79fb426d.ttf differ
diff --git a/assets/fonts/TeleNeoOffice-Regular.b0a2cff1.ttf b/assets/fonts/TeleNeoOffice-Regular.b0a2cff1.ttf
new file mode 100644
index 0000000..672a9b8
Binary files /dev/null and b/assets/fonts/TeleNeoOffice-Regular.b0a2cff1.ttf differ
diff --git a/assets/fonts/TeleNeoOffice-Thin.53627df9.ttf b/assets/fonts/TeleNeoOffice-Thin.53627df9.ttf
new file mode 100644
index 0000000..edeb0d9
Binary files /dev/null and b/assets/fonts/TeleNeoOffice-Thin.53627df9.ttf differ
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index 2569027..88e3bbe 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -1,6 +1,435 @@
 /*
+ * Telekom-inspired Theme Variables
+ * Based on https://edp.buildth.ing Telekom Design System
+ */
 
-Add styles or override variables from the theme here.
+// Bootstrap/Docsy Variable Overrides (must be before imports)
+$primary: #E20074 !default;
+$secondary: #B6B6B6 !default;
+$success: #00b367 !default;
+$info: #0070ad !default;
+$warning: #ffcc00 !default;
+$danger: #d52b1e !default;
+$dark: #000000 !default;
+$light: #f9fafb !default;
 
-*/
+// Link colors
+$link-color: #E20074 !default;
+$link-hover-color: #C2005E !default;
+
+// Body
+$body-bg: #ffffff !default;
+$body-color: #000000 !default;
+
+// Navbar
+$navbar-light-color: #000000 !default;
+$navbar-light-hover-color: #E20074 !default;
+$navbar-light-active-color: #E20074 !default;
+
+// Fonts
+$font-family-sans-serif: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-base: $font-family-sans-serif !default;
+
+// Telekom TeleNeo Fonts
+@font-face {
+  font-family: 'TeleNeo';
+  src: url('../fonts/TeleNeoOffice-Thin.53627df9.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TeleNeo';
+  src: url('../fonts/TeleNeoOffice-Regular.b0a2cff1.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TeleNeo';
+  src: url('../fonts/TeleNeoOffice-Medium.79fb426d.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TeleNeo';
+  src: url('../fonts/TeleNeoOffice-Bold.a7bb592b.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'TeleNeo';
+  src: url('../fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+// Primary Colors - Telekom Magenta
+:root {
+  // Telekom Primary Color (Magenta)
+  --color-primary: #E20074;
+  --color-primary-contrast: #ffffff;
+  --color-primary-dark-1: #C2005E;
+  --color-primary-dark-2: #A5004D;
+  --color-primary-dark-3: #87003D;
+  --color-primary-light-1: #E7338A;
+  --color-primary-light-2: #EC66A1;
+  --color-primary-light-3: #F299B8;
+  --color-primary-light-4: #F7CCCF;
+  --color-primary-light-5: #FCEFF6;
+  --color-primary-light-6: #FFF5FA;
+  
+  // Secondary Colors
+  --color-secondary: #B6B6B6;
+  --color-secondary-dark: #6a7178;
+  --color-secondary-light: #f9fafb;
+  
+  // Semantic Colors
+  --color-success: #00b367;
+  --color-warning: #ffcc00;
+  --color-error: #d52b1e;
+  --color-info: #0070ad;
+  
+  // Text Colors
+  --color-text: #000000;
+  --color-text-light: #666666;
+  --color-text-dark: #000000;
+  
+  // Background Colors
+  --color-body: #ffffff;
+  --color-card: #F1F1F1;
+  --color-hover: #F1F1F1;
+  --color-active: #F1F1F1;
+  
+  // Navigation
+  --color-nav-bg: #ffffff;
+  --color-nav-text: #000000;
+  --nav-border-color: #B6B6B6;
+  
+  // UI Elements
+  --color-input-background: #ffffff;
+  --color-input-border: #cccccc;
+  --color-input-text: #000000;
+  --color-box-body: #f2f2f2;
+  --color-box-header: #e6e6e6;
+  
+  // Shadows & Overlays
+  --color-shadow: rgba(0, 0, 0, 0.15);
+  --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
+  
+  // Font Settings
+  --font-family-base: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
+  --nav-text-font-weight: 600;
+}
+
+// Apply TeleNeo font globally
+body {
+  font-family: var(--font-family-base);
+}
+
+// Dark Mode Support
+@media (prefers-color-scheme: dark) {
+  :root {
+    // Primary Colors remain same
+    --color-primary: #E20074;
+    --color-primary-contrast: #000000;
+    
+    // Dark Mode Adjustments
+    --color-primary-dark-1: #E7338A;
+    --color-primary-dark-2: #EC66A1;
+    --color-primary-light-1: #C2005E;
+    --color-primary-light-2: #A5004D;
+    
+    // Secondary Colors for Dark Mode
+    --color-secondary: #1c1c1e;
+    --color-secondary-dark: #4D4D4D;
+    --color-secondary-light: #0D0D0D;
+    
+    // Text Colors
+    --color-text: #FFFFFF;
+    --color-text-light: #CCCCCC;
+    --color-text-dark: #FFFFFF;
+    
+    // Background Colors
+    --color-body: #000000;
+    --color-card: #1c1c1e;
+    --color-hover: #1c1c1e;
+    --color-active: #0D0D0D;
+    
+    // Navigation
+    --color-nav-bg: #000000;
+    --color-nav-text: #FFFFFF;
+    
+    // UI Elements
+    --color-input-background: #1c1c1e;
+    --color-input-border: #4D4D4D;
+    --color-input-text: #FFFFFF;
+    --color-box-body: #000000;
+    --color-box-header: #1A1A1A;
+    
+    // Semantic Colors for Dark Mode
+    --color-success: #00A94F;
+    --color-warning: #FFCC00;
+    --color-error: #D52B1E;
+    --color-info: #0070AD;
+    
+    // Shadows
+    --color-shadow: rgba(0, 0, 0, 0.35);
+  }
+}
+
+// Telekom-inspired Component Styling
+.td-navbar {
+  background-color: var(--color-nav-bg) !important;
+  border-bottom: 1px solid var(--nav-border-color);
+  
+  .navbar-brand,
+  .nav-link {
+    color: var(--color-nav-text) !important;
+    font-weight: var(--nav-text-font-weight);
+  }
+  
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--color-primary) !important;
+    background: transparent !important;
+  }
+}
+
+// Primary Buttons - Telekom Magenta
+.btn-primary {
+  background-color: var(--color-primary) !important;
+  border-color: var(--color-primary) !important;
+  color: var(--color-primary-contrast) !important;
+  
+  &:hover {
+    background-color: var(--color-primary-dark-1) !important;
+    border-color: var(--color-primary-dark-1) !important;
+  }
+  
+  &:active,
+  &:focus {
+    background-color: var(--color-primary-dark-2) !important;
+    border-color: var(--color-primary-dark-2) !important;
+  }
+}
+
+// Links
+a {
+  color: var(--color-primary);
+  
+  &:hover {
+    color: var(--color-primary-dark-1);
+  }
+}
+
+// Cards with Telekom Style
+.card {
+  background-color: var(--color-card);
+  border: 1px solid var(--nav-border-color);
+  
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}
+
+// Active/Selected States - REMOVED harsh black backgrounds
+// Now using soft Telekom colors instead
+
+// Sidebar Navigation
+.td-sidebar-nav {
+  .td-sidebar-link {
+    &:hover {
+      background-color: var(--color-primary-light-5) !important;
+      color: var(--color-primary) !important;
+    }
+    
+    &.active {
+      background-color: var(--color-primary-light-6);
+      color: var(--color-primary);
+      font-weight: 500;
+      border-left: 3px solid var(--color-primary);
+    }
+  }
+  
+  // All list items in sidebar
+  li a {
+    &:hover {
+      background-color: var(--color-primary-light-5) !important;
+      color: var(--color-primary) !important;
+    }
+  }
+}
+
+// Main navigation tabs
+.td-sidebar {
+  .td-sidebar-nav__section {
+    .ul-1 > li > a {
+      &.active,
+      &.td-sidebar-link--active {
+        background-color: var(--color-primary-light-6) !important;
+        color: var(--color-primary) !important;
+        font-weight: 500;
+        border-left: 3px solid var(--color-primary);
+      }
+      
+      &:hover {
+        background-color: var(--color-primary-light-5) !important;
+        color: var(--color-primary) !important;
+      }
+    }
+    
+    // All nested levels
+    li a:hover {
+      background-color: var(--color-primary-light-5) !important;
+      color: var(--color-primary) !important;
+    }
+  }
+}
+
+// Top navigation breadcrumb area
+.td-sidebar__inner {
+  .td-sidebar-nav__section-title {
+    &.active {
+      background-color: var(--color-primary-light-5) !important;
+      color: var(--color-primary) !important;
+    }
+  }
+}
+
+// Breadcrumb navigation in header
+.breadcrumb {
+  .active {
+    color: var(--color-primary) !important;
+  }
+  
+  a:hover {
+    color: var(--color-primary-dark-1) !important;
+  }
+}
+
+// Remove harsh black backgrounds globally
+.active,
+.selected {
+  background-color: var(--color-primary-light-6) !important;
+  color: var(--color-primary) !important;
+}
+
+// Softer hover states
+*:hover {
+  transition: all 0.2s ease-in-out;
+}
+
+// Override any dark/black hover backgrounds in navigation
+nav, .td-sidebar, .td-sidebar-nav {
+  a:hover,
+  li:hover > a,
+  .nav-link:hover {
+    background-color: var(--color-primary-light-5) !important;
+    color: var(--color-primary) !important;
+  }
+}
+
+// Code Blocks
+pre,
+code {
+  background-color: var(--color-box-body);
+  border: 1px solid var(--color-input-border);
+}
+
+// Tables
+table {
+  thead {
+    background-color: var(--color-box-header);
+  }
+  
+  tbody tr:hover {
+    background-color: var(--color-hover);
+  }
+}
+
+// Alerts/Notifications
+.alert-success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.alert-warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+  color: #000000;
+}
+
+.alert-danger {
+  background-color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.alert-info {
+  background-color: var(--color-info);
+  border-color: var(--color-info);
+}
+
+// Docsy Homepage Components
+.td-cover-block {
+  background-color: var(--color-primary) !important;
+  
+  h1, h2, h3, h4, h5, h6, p {
+    color: var(--color-primary-contrast) !important;
+  }
+}
+
+.td-box {
+  background-color: var(--color-card);
+  border: 1px solid var(--nav-border-color);
+  
+  &:hover {
+    background-color: var(--color-hover);
+    border-color: var(--color-primary);
+  }
+  
+  &--primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-contrast);
+  }
+  
+  &--secondary {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
+  }
+}
+
+// Hero/Cover sections
+.td-cover {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark-2) 100%);
+  
+  .display-1, .display-2, .display-3, .display-4 {
+    color: var(--color-primary-contrast) !important;
+  }
+}
+
+// Section backgrounds
+.td-section {
+  &--primary {
+    background-color: var(--color-primary-light-6);
+  }
+  
+  &--secondary {
+    background-color: var(--color-secondary-light);
+  }
+}
+
+// Feature boxes
+.td-feature {
+  border: 1px solid var(--nav-border-color);
+  background-color: var(--color-card);
+  
+  &:hover {
+    border-color: var(--color-primary);
+    box-shadow: 0 4px 12px var(--color-shadow);
+  }
+}
 
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 9334bdf..7386260 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -8,7 +8,7 @@
 		{{ partial "feedback.html" .Site.Params.ui.feedback }}
                 <br />
         {{ end }}
-        {{ if (.Site.DisqusShortname) }}
+        {{ if (.Site.Config.Services.Disqus.Shortname) }}
                 <br />
                 {{ partial "disqus-comment.html" . }}
         {{ end }}