/* Knowledge Hub - HubSpot-inspired Design (Base) */
/* Entfernt: frühere enge .khub-single max-width (900px) -> jetzt volle Containerbreite.
   Die eigentliche Layout-Definition erfolgt weiter unten im Haupt-Block. */

/* Archive (Landing) Wrapper */
.khub-archive { background: var(--ttx-gray-50); min-height: 100vh; }

/* Single Wrapper Grundstil (Layout & Höhe später) */
.khub-single { background: var(--ttx-gray-50); }

/* Hero Section */
.khub-hero {
  background: var(--ttx-primary);
  color: white;
  padding: var(--sp-4xl) 0 var(--sp-3xl);
  text-align: center;
}

.khub-hero__content {
  max-width: 600px;
  margin: 0 auto;
}

.khub-hero__title {
  font-family: var(--ttx-font-ui);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: var(--sp-md);
  line-height: 1.1;
}

.khub-hero__highlight {
  color: var(--ttx-cyan);
}

.khub-hero__subtitle {
  font-size: var(--ttx-bodyL-size);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-2xl);
  font-family: var(--ttx-font-ui);
}

/* Search Container */
.khub-search-container {
  max-width: 500px;
  margin: 0 auto;
}

.khub-search {
  position: relative;
  display: flex;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(10, 25, 49, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.khub-search input {
  flex: 1;
  padding: var(--sp-md) var(--sp-lg);
  border: none;
  font-size: var(--ttx-body-size);
  font-family: var(--ttx-font-ui);
  background: transparent;
  outline: none;
}

.khub-search input::placeholder {
  color: var(--ttx-gray-500);
}

.khub-search button, .khub-search__btn {
  background: var(--ttx-coral);
  color: white;
  border: none;
  padding: var(--sp-md) var(--sp-xl);
  font-family: var(--ttx-font-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.khub-search button:hover, .khub-search__btn:hover {
  background: #d53c53;
}

/* Categories Section */
.khub-categories {
  padding: var(--sp-4xl) 0;
}

.khub-categories__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-xl);
  max-width: 1000px;
  margin: 0 auto;
}

/* Category Cards */
.khub-category-card {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: var(--sp-2xl);
  text-align: center;
  border: 1px solid var(--ttx-gray-200);
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(10, 25, 49, 0.04);
}

.khub-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 25, 49, 0.12);
  border-color: var(--ttx-purple);
}

.khub-category-card__icon {
  font-size: 3rem;
  margin-bottom: var(--sp-lg);
  display: block;
}

.khub-category-card__title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h4-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-md);
}

.khub-category-card__description {
  color: var(--ttx-gray-700);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.khub-category-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-decoration: none;
  z-index: 1;
}

/* Popular Articles Section */
.khub-popular {
  padding: var(--sp-3xl) 0 var(--sp-4xl);
  background: white;
}

.khub-section-title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h2-size);
  font-weight: 700;
  color: var(--ttx-primary);
  text-align: center;
  margin-bottom: var(--sp-3xl);
}

.khub-popular__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-xl);
  max-width: 1000px;
  margin: 0 auto;
}

/* Article Cards */
.khub-article-card {
  background: white;
  border: 1px solid var(--ttx-gray-200);
  border-radius: 12px;
  padding: var(--sp-xl);
  transition: all 0.3s ease;
}

.khub-article-card:hover {
  box-shadow: 0 8px 24px rgba(10, 25, 49, 0.08);
  border-color: var(--ttx-purple);
}

.khub-article-card__title {
  margin-bottom: var(--sp-md);
}

.khub-article-card__title a {
  color: var(--ttx-primary);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.4;
}

.khub-article-card__title a:hover {
  color: var(--ttx-purple);
}

.khub-article-card__excerpt {
  color: var(--ttx-gray-700);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: var(--sp-md);
}

.khub-article-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ttx-gray-500);
}

.khub-article-card__category {
  background: var(--ttx-gray-50);
  color: var(--ttx-purple);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-family: var(--ttx-font-ui);
  font-weight: 500;
  font-size: 0.8rem;
}

/* Legacy Styles - keeping for existing content */
.khub-title { font-size: 2.2rem; font-weight: 700; margin-bottom: .5em; }
.khub-lead { font-size: 1.1rem; color: #888; margin-bottom: 2em; }
.khub-facets__list { display: flex; gap: 1.5em; flex-wrap: wrap; margin-bottom: 2em; }
.khub-facets__list a { color: var(--ttx-primary); text-decoration: underline; }
.khub-articles { list-style: none; padding: 0; margin: 0; }
.khub-articles li { margin-bottom: 2em; border-bottom: 1px solid #eee; padding-bottom: 1em; }
.khub-article__header { border-bottom: 1px solid #eee; margin-bottom: 2em; padding-bottom: 1em; }
.khub-article__meta { font-size: .95em; color: #666; margin-top: .5em; }
.khub-article__cta { position: absolute; right: 2rem; top: 2rem; }
.khub-cta-secondary { background: var(--ttx-primary); color: #fff; padding: .5em 1em; border-radius: 2em; text-decoration: none; font-weight: 600; }
.khub-toc { background: #f8f8fa; border: 1px solid #eee; padding: 1em; margin-bottom: 2em; border-radius: 6px; }
.khub-toc ul { list-style: none; padding: 0; margin: 0; }
.khub-toc li { margin-bottom: .5em; }
.khub-toc a { color: var(--ttx-primary); text-decoration: underline; }
.khub-breadcrumbs { 
  font-size: .95em; 
  margin-bottom: 1em; 
  color: #666; 
  font-family: var(--ttx-font-ui);
}
.khub-breadcrumbs a { 
  color: var(--ttx-purple); 
  text-decoration: none; 
}
.khub-breadcrumbs a:hover { 
  text-decoration: underline; 
}
.khub-feedback { background: #f8f8fa; border: 1px solid #eee; padding: 1em; margin-top: 2em; border-radius: 6px; }
.khub-feedback label { font-weight: 600; margin-right: 1em; }
.khub-feedback button { margin-right: .5em; }
.khub-article__relations { margin-top: 2em; }
.khub-article__relations ul { list-style: none; padding: 0; }
.khub-article__relations li { margin-bottom: .5em; }
.khub-article__body h2 { counter-increment: step; }
.khub-article__body h2::before { content: counter(step) ". "; color: var(--ttx-primary); font-weight: 700; margin-right: .3em; }
.callout--info { background: #eaf6ff; border-left: 4px solid #2196f3; padding: .8em 1em; margin: 1em 0; border-radius: 4px; }
.callout--warn { background: #fff3e0; border-left: 4px solid #ff9800; padding: .8em 1em; margin: 1em 0; border-radius: 4px; }
.callout--tip { background: #e8f5e9; border-left: 4px solid #4caf50; padding: .8em 1em; margin: 1em 0; border-radius: 4px; }
pre, code { background: #f4f4f4; border-radius: 4px; padding: .2em .4em; font-family: 'Fira Mono', 'Consolas', monospace; }
.label { display: inline-block; background: #eee; color: #333; border-radius: 2em; padding: .2em .8em; font-size: .9em; margin-right: .5em; }

/* Section Pages */
.khub-section {
  background: var(--ttx-gray-50);
  min-height: 100vh;
}

.khub-section-hero {
  background: white;
  padding: var(--sp-2xl) 0;
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-section-hero__content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.khub-section-hero__icon {
  font-size: 4rem;
  margin-bottom: var(--sp-lg);
}

.khub-section-hero__title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h1-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-md);
}

.khub-section-hero__description {
  font-size: var(--ttx-bodyL-size);
  color: var(--ttx-gray-700);
  margin-bottom: var(--sp-xl);
  line-height: 1.6;
}

.khub-section-search {
  max-width: 400px;
  margin: 0 auto;
}

.khub-search--small {
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
}

.khub-search--small input {
  font-size: 0.95rem;
  padding: var(--sp-sm) var(--sp-md);
}

.khub-search--small button {
  padding: var(--sp-sm) var(--sp-md);
}

/* Categories Navigation */
.khub-section-nav {
  background: white;
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-categories-nav__scroll {
  display: flex;
  gap: var(--sp-sm);
  overflow-x: auto;
  padding-bottom: var(--sp-xs);
  scrollbar-width: thin;
}

.khub-categories-nav__scroll::-webkit-scrollbar {
  height: 4px;
}

.khub-categories-nav__scroll::-webkit-scrollbar-track {
  background: var(--ttx-gray-200);
  border-radius: 2px;
}

.khub-categories-nav__scroll::-webkit-scrollbar-thumb {
  background: var(--ttx-gray-500);
  border-radius: 2px;
}

.khub-category-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
  border-radius: 24px;
  text-decoration: none;
  color: var(--ttx-gray-700);
  font-family: var(--ttx-font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.khub-category-nav-item:hover {
  background: var(--ttx-purple);
  color: white;
  border-color: var(--ttx-purple);
}

.khub-category-nav-item.active {
  background: var(--ttx-primary);
  color: white;
  border-color: var(--ttx-primary);
}

.khub-category-nav-item__icon {
  font-size: 1.1rem;
}

/* Section Content */
.khub-section-content {
  padding: var(--sp-3xl) 0;
}

.khub-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-xl);
  margin-bottom: var(--sp-3xl);
}

/* Article Tags */
.khub-article-card__tags {
  display: flex;
  gap: var(--sp-xs);
}

.khub-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-family: var(--ttx-font-ui);
  font-weight: 500;
}

.khub-tag--duration {
  background: var(--ttx-cyan);
  color: var(--ttx-primary);
}

.khub-tag--level {
  background: var(--ttx-gold);
  color: var(--ttx-primary);
}

/* Pagination */
.khub-pagination {
  margin-top: var(--sp-2xl);
}

.khub-pagination__list {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.khub-pagination__item a,
.khub-pagination__item span {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--ttx-gray-200);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ttx-gray-700);
  font-family: var(--ttx-font-ui);
  font-weight: 500;
  transition: all 0.2s ease;
}

.khub-pagination__item a:hover {
  background: var(--ttx-purple);
  color: white;
  border-color: var(--ttx-purple);
}

.khub-pagination__item .current {
  background: var(--ttx-primary);
  color: white;
  border-color: var(--ttx-primary);
}

/* No Results */
.khub-no-results {
  text-align: center;
  padding: var(--sp-4xl) var(--sp-xl);
  background: white;
  border-radius: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.khub-no-results__icon {
  font-size: 4rem;
  margin-bottom: var(--sp-lg);
  opacity: 0.6;
}

.khub-no-results__title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h3-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-md);
}

.khub-no-results__text {
  color: var(--ttx-gray-700);
  margin-bottom: var(--sp-xl);
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .khub-hero {
    padding: var(--sp-3xl) 0 var(--sp-2xl);
  }
  
  .khub-categories__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  
  .khub-popular__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  
  .khub-category-card {
    padding: var(--sp-xl);
  }
  
  .khub-section-hero {
    padding: var(--sp-xl) 0;
  }
  
  .khub-section-hero__icon {
    font-size: 3rem;
  }
  
  .khub-section-hero__title {
    font-size: 2rem;
  }
  
  .khub-articles-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
  
  .khub-categories-nav__scroll {
    gap: var(--sp-xs);
  }
  
  .khub-category-nav-item {
    padding: var(--sp-xs) var(--sp-sm);
    font-size: 0.85rem;
  }
}

/* Single Article Layout */
.khub-single {
  background: var(--ttx-gray-50);
  min-height: 100vh;
  padding: var(--sp-xl) 0;
}

.khub-article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-3xl);
  align-items: start;
}

/* Article Styles */
.khub-article {
  background: white;
  border-radius: 12px;
  padding: var(--sp-3xl);
  box-shadow: 0 2px 8px rgba(10, 25, 49, 0.04);
}

.khub-article__header {
  margin-bottom: var(--sp-3xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-article__category-link {
  display: inline-block;
  background: var(--ttx-purple);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--sp-lg);
  transition: background 0.2s ease;
}

.khub-article__category-link:hover {
  background: var(--ttx-primary);
}

.khub-article__title {
  font-family: var(--ttx-font-ui);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--ttx-primary);
  line-height: 1.2;
  margin-bottom: var(--sp-lg);
}

.khub-article__desc {
  font-size: var(--ttx-bodyL-size);
  color: var(--ttx-gray-700);
  line-height: 1.6;
  margin-bottom: var(--sp-xl);
}

.khub-article__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.khub-article__tags {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.khub-article__updated {
  font-family: var(--ttx-font-ui);
  font-size: 0.9rem;
  color: var(--ttx-gray-500);
}

/* Enhanced TOC */
.khub-toc {
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
  border-radius: 12px;
  padding: var(--sp-xl);
  margin-bottom: var(--sp-3xl);
}

.khub-toc h3 {
  font-family: var(--ttx-font-ui);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-md);
}

.khub-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.khub-toc li {
  margin-bottom: var(--sp-sm);
}

.khub-toc a {
  color: var(--ttx-gray-700);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.khub-toc a:hover {
  color: var(--ttx-purple);
}

/* Article Body */
.khub-article__body {
  font-size: var(--ttx-body-size);
  line-height: 1.7;
  color: var(--ttx-gray-700);
}

.khub-article__body h2 {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h3-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-top: var(--sp-3xl);
  margin-bottom: var(--sp-lg);
  counter-increment: step;
}

.khub-article__body h2::before {
  content: counter(step) ". ";
  color: var(--ttx-purple);
  font-weight: 700;
  margin-right: 0.5rem;
}

.khub-article__body h3 {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h4-size);
  font-weight: 600;
  color: var(--ttx-primary);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-md);
}

.khub-article__body p {
  margin-bottom: var(--sp-lg);
}

.khub-article__body ul,
.khub-article__body ol {
  margin-bottom: var(--sp-lg);
  padding-left: var(--sp-xl);
}

.khub-article__body li {
  margin-bottom: var(--sp-sm);
}

/* Enhanced Feedback */
.khub-feedback {
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
  padding: var(--sp-xl);
  margin-top: var(--sp-3xl);
  border-radius: 12px;
  text-align: center;
}

.khub-feedback label {
  font-family: var(--ttx-font-ui);
  font-weight: 600;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-md);
  display: block;
}

.khub-feedback button {
  background: var(--ttx-purple);
  color: white;
  border: none;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: 8px;
  font-family: var(--ttx-font-ui);
  font-weight: 500;
  margin: 0 var(--sp-xs);
  cursor: pointer;
  transition: background 0.2s ease;
}

.khub-feedback button:hover {
  background: var(--ttx-primary);
}

/* Relations Section */
.khub-article__relations {
  margin-top: var(--sp-4xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--ttx-gray-200);
}

.khub-relations__title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h3-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-xl);
}

.khub-relations__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-lg);
}

.khub-relation-card {
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
  border-radius: 8px;
  padding: var(--sp-lg);
  transition: all 0.2s ease;
}

.khub-relation-card:hover {
  box-shadow: 0 4px 16px rgba(10, 25, 49, 0.08);
  border-color: var(--ttx-purple);
}

.khub-relation-card__title {
  margin-bottom: var(--sp-sm);
}

.khub-relation-card__title a {
  color: var(--ttx-primary);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-weight: 600;
  font-size: 1rem;
}

.khub-relation-card__title a:hover {
  color: var(--ttx-purple);
}

.khub-relation-card__excerpt {
  color: var(--ttx-gray-600);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Sidebar */
.khub-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}

.khub-sidebar-card {
  background: white;
  border: 1px solid var(--ttx-gray-200);
  border-radius: 12px;
  padding: var(--sp-xl);
  box-shadow: 0 2px 8px rgba(10, 25, 49, 0.04);
}

.khub-sidebar-card--cta {
  background: linear-gradient(135deg, var(--ttx-purple) 0%, var(--ttx-primary) 100%);
  color: white;
  border: none;
}

.khub-sidebar-card__title {
  font-family: var(--ttx-font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--sp-md);
  color: inherit;
}

.khub-sidebar-card__text {
  margin-bottom: var(--sp-lg);
  line-height: 1.5;
  font-size: 0.95rem;
  color: inherit;
  opacity: 0.9;
}

/* Quick Links */
.khub-quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.khub-quick-links__item {
  margin-bottom: var(--sp-sm);
}

.khub-quick-links__link {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  text-decoration: none;
  color: var(--ttx-gray-700);
  border-radius: 8px;
  transition: background 0.2s ease;
}

.khub-quick-links__link:hover {
  background: var(--ttx-gray-50);
  color: var(--ttx-purple);
}

.khub-quick-links__icon {
  font-size: 1.1rem;
}

.khub-quick-links__text {
  font-family: var(--ttx-font-ui);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Related List */
.khub-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.khub-related-list__item {
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-related-list__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.khub-related-list__link {
  color: var(--ttx-gray-700);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.khub-related-list__link:hover {
  color: var(--ttx-purple);
}

/* Responsive Design for Single Articles */
@media (max-width: 1024px) {
  .khub-article-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
  
  .khub-sidebar {
    order: -1;
  }
  
  .khub-sidebar-card {
    display: none;
  }
  
  .khub-sidebar-card--cta {
    display: block;
  }
}

@media (max-width: 768px) {
  .khub-article {
    padding: var(--sp-xl);
    border-radius: 0;
    margin: 0 calc(var(--sp-sm) * -1);
  }
  
  .khub-single {
    padding: var(--sp-lg) 0;
  }
  
  .khub-article__meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .khub-relations__grid {
    grid-template-columns: 1fr;
  }
}

/* HubSpot-Style Category Pages */
.khub-category-page {
  background: white;
  min-height: 100vh;
}

/* ==========================
   Knowledge Hub Sub Navigation
   ========================== */
.khub-subnav {
  background: #fff;
  border-bottom: 1px solid var(--ttx-gray-200);
  position: sticky;
  top: 58px; /* unter dem Hub-Header (angepasste Höhe) */
  z-index: 999;
}
body:not(.khub-context) .khub-subnav { display:none; }
.khub-subnav .container { overflow: hidden; }
.khub-subnav__list {
  display: flex;
  gap: var(--sp-sm);
  list-style: none;
  padding: var(--sp-sm) 0;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.khub-subnav__list::-webkit-scrollbar { display:none; }
.khub-subnav__item a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  font-family: var(--ttx-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--ttx-gray-50);
  color: var(--ttx-gray-700);
  text-decoration: none;
  border-radius: 999px;
  line-height: 1;
  border: 1px solid var(--ttx-gray-200);
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.khub-subnav__item a:hover { background:#fff; color: var(--ttx-primary); }
.khub-subnav__item.is-active a,
.khub-subnav__item a[aria-current=page] {
  background: var(--ttx-purple);
  color: #fff;
  border-color: var(--ttx-purple);
  box-shadow: 0 2px 6px rgba(90,60,200,.25);
}
@media (max-width: 700px) {
  .khub-subnav { top: 54px; }
  .khub-subnav__item a { font-size: 0.75rem; padding: 0 12px; }
}

/* =============================================================
   KNOWLEDGE HUB – HUBSPOT BASELINE RESTORE (STABLE FOUNDATION)
   -----------------------------------------------------------
   Dieser Block stellt den ursprünglichen, funktionierenden Stand
   wieder her (vor allen Breiten‑/Experiment-Anpassungen). 
   Ziel: Verlässliche Basis, auf der wir in kleinen, kontrollierten
   Schritten optimieren können.

   Prinzipien:
   1) Einheitliche max Breite: Globale .container = var(--ttx-maxw) (1200px)
   2) Artikel Layout: 2-Spalten Grid (Content + fixe Sidebar 300px)
   3) Keine forcierte Verbreiterung durch !important Hacks
   4) Responsive Breakpoint für Umschalten: 1024px
   5) Klar definierte vertikale Rhythmik & Spacing Tokens

   Wenn du später nur den Artikeltext verbreitern willst:
     -> Option A: Nur Content-Spalte innerhalb des Grids vergrößern, z.B.
        .khub-article-layout { grid-template-columns: minmax(0, 820px) 300px; }
     -> Option B: Eine breitere Variante (Modifier Class) einführen:
        .khub-single--wide .khub-article-layout { grid-template-columns: minmax(0, 960px) 300px; }
     -> Option C: Leserbreite steuern über max-width auf .khub-article__body

   BITTE: Keine globalen Container-Überschreibungen mehr für diesen Zweck.
   ============================================================= */

/* Baseline Grid (Single Article) */
.khub-article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-3xl);
  align-items: start;
}

/* Artikel (Body Card) */
.khub-article {
  background: #FFF;
  border: 1px solid var(--ttx-gray-200);
  border-radius: 12px;
  padding: var(--sp-3xl);
  box-shadow: 0 2px 8px rgba(10,25,49,0.04);
}

/* Sidebar Grundlayout */
.khub-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}

.khub-sidebar-card {
  background: #FFF;
  border: 1px solid var(--ttx-gray-200);
  border-radius: 12px;
  padding: var(--sp-xl);
  box-shadow: 0 2px 8px rgba(10,25,49,0.04);
}

.khub-sidebar-card--cta {
  background: linear-gradient(135deg, var(--ttx-purple) 0%, var(--ttx-primary) 100%);
  color: #FFF;
  border: none;
}

/* Responsive – ab Tablet runter: Sidebar oben, nur CTA sichtbar */
@media (max-width:1024px) {
  .khub-article-layout { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .khub-sidebar { order: -1; }
  .khub-sidebar-card { display: none; }
  .khub-sidebar-card--cta { display: block; }
  .khub-article { padding: var(--sp-2xl) var(--sp-xl); }
}

@media (max-width:768px) {
  .khub-article { border-radius: 0; margin: 0 calc(var(--sp-sm) * -1); }
  .khub-single { padding: var(--sp-lg) 0; }
}

/* Modifier (noch NICHT aktiv eingebunden) – Falls wir später breiter werden wollen
   Nutzung: <body class="khub-single khub-single--wide"> ... */
.khub-single--wide .khub-article-layout {
  grid-template-columns: minmax(0, 860px) 300px; /* ca. + ~120px Content */
}
.khub-single--wider .khub-article-layout {
  grid-template-columns: minmax(0, 960px) 300px; /* größere Lesebreite */
}

/* OPTIONAL: Begrenzung reiner Lesebreite innerhalb des Artikels (derzeit deaktiviert)
.khub-article__body { max-width: 72ch; margin-inline: auto; }
*/


/* Category Header */
.khub-category-header {
  background: var(--ttx-gray-50);
  border-bottom: 1px solid var(--ttx-gray-200);
  padding: var(--sp-lg) 0;
}

.khub-global-search {
  margin-top: var(--sp-md);
  max-width: 300px;
}

.khub-search--global {
  background: white;
  border: 1px solid var(--ttx-gray-200);
  border-radius: 6px;
  overflow: hidden;
}

.khub-search--global input {
  padding: var(--sp-sm) var(--sp-md);
  font-size: 0.9rem;
}

.khub-search--global button {
  padding: var(--sp-sm) var(--sp-md);
  background: var(--ttx-gray-100);
  color: var(--ttx-gray-600);
}

.khub-search--global button:hover {
  background: var(--ttx-gray-200);
}

/* Category Layout */
.khub-category-layout {
  padding: var(--sp-xl) 0;
}

.khub-category-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-3xl);
  align-items: start;
}

/* Sidebar Navigation */
.khub-category-sidebar {
  position: sticky;
  top: var(--sp-xl);
}

.khub-sidebar-nav {
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
  border-radius: 8px;
  padding: var(--sp-lg);
}

/* Navigation Groups */
.khub-nav-group {
  margin-bottom: var(--sp-lg);
}

.khub-nav-group:last-child {
  margin-bottom: 0;
}

.khub-nav-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ttx-font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ttx-primary);
  margin: 0 0 var(--sp-sm);
  padding: var(--sp-sm) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-nav-group__title.active {
  color: var(--ttx-purple);
}

.khub-nav-group__icon {
  margin-right: var(--sp-sm);
  font-size: 1rem;
}

.khub-nav-group__toggle {
  transition: transform 0.2s ease;
}

.khub-nav-group__title[aria-expanded="true"] .khub-nav-group__toggle {
  transform: rotate(180deg);
}

.khub-nav-group__children {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: var(--sp-lg);
}

/* Navigation Items */
.khub-nav-item {
  margin-bottom: var(--sp-xs);
}

.khub-nav-item--top {
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) var(--sp-sm);
  color: var(--ttx-gray-700);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.khub-nav-link:hover {
  background: white;
  color: var(--ttx-purple);
}

.khub-nav-link.active {
  background: var(--ttx-purple);
  color: white;
  font-weight: 600;
}

.khub-nav-link__icon {
  margin-right: var(--sp-sm);
  font-size: 1rem;
}

.khub-nav-badge {
  background: var(--ttx-cyan);
  color: var(--ttx-primary);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-family: var(--ttx-font-ui);
}

/* Main Content */
.khub-category-content-header {
  margin-bottom: var(--sp-2xl);
}

.khub-category-title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h1-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-3xl);
  line-height: 1.2;
}

/* Top Articles Section */
.khub-top-articles {
  margin-bottom: var(--sp-4xl);
}

.khub-section-title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h3-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-xl);
}

.khub-top-articles-list {
  display: grid;
  gap: var(--sp-md);
}

.khub-top-article-item {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-top-article-item:last-child {
  border-bottom: none;
}

.khub-top-article-title {
  margin: 0;
}

.khub-top-article-title a {
  color: var(--ttx-primary);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.khub-top-article-title a:hover {
  color: var(--ttx-purple);
}

/* All Articles Section */
.khub-all-articles {
  margin-bottom: var(--sp-2xl);
}

.khub-category-search {
  margin-bottom: var(--sp-2xl);
  max-width: 500px;
}

.khub-search--category {
  background: var(--ttx-gray-50);
  border: 1px solid var(--ttx-gray-200);
  border-radius: 6px;
}

.khub-search--category input {
  padding: var(--sp-sm) var(--sp-md);
  font-size: 0.9rem;
  background: transparent;
}

.khub-search--category button {
  padding: var(--sp-sm) var(--sp-md);
  background: var(--ttx-gray-200);
  color: var(--ttx-gray-600);
}

/* Articles List */
.khub-articles-list {
  display: grid;
  gap: var(--sp-xl);
}

.khub-article-item {
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--ttx-gray-200);
}

.khub-article-item:last-child {
  border-bottom: none;
}

.khub-article-item__title {
  margin-bottom: var(--sp-sm);
}

.khub-article-item__title a {
  color: var(--ttx-primary);
  text-decoration: none;
  font-family: var(--ttx-font-ui);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.khub-article-item__title a:hover {
  color: var(--ttx-purple);
}

.khub-article-item__excerpt {
  color: var(--ttx-gray-700);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: var(--sp-sm);
}

.khub-article-item__meta {
  font-family: var(--ttx-font-ui);
  font-size: 0.85rem;
  color: var(--ttx-gray-500);
}

/* No Articles State */
.khub-no-articles {
  text-align: center;
  padding: var(--sp-2xl) 0;
  color: var(--ttx-gray-500);
  font-style: italic;
}

/* Responsive Design for Category Pages */
@media (max-width: 1024px) {
  .khub-category-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
  
  .khub-category-sidebar {
    position: static;
    order: -1;
  }
  
  .khub-sidebar-nav {
    padding: var(--sp-md);
  }
  
  .khub-nav-group__children {
    padding-left: var(--sp-md);
  }
  
  .khub-article-item {
    margin: 0;
    padding: var(--sp-lg) 0;
  }
}

@media (max-width: 768px) {
  .khub-category-layout {
    padding: var(--sp-lg) 0;
  }
  
  .khub-category-title {
    font-size: 1.75rem;
  }
  
  .khub-nav-group__title {
    font-size: 0.85rem;
  }
  
  .khub-nav-link {
    font-size: 0.8rem;
  }
  
  .khub-sidebar-nav {
    background: white;
    border: 1px solid var(--ttx-gray-200);
    border-radius: 8px;
  }
}

/* Utility Classes */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Button Variations */
.ttx-btn--small {
  padding: var(--sp-sm) var(--sp-lg);
  font-size: 0.9rem;
}

/* Knowledge Hub Teaser Updates for consistency */
.khub-teaser {
  background: var(--ttx-gray-50);
  padding: var(--sp-4xl) 0;
}

.khub-teaser__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.khub-teaser__head {
  text-align: center;
  margin-bottom: var(--sp-2xl);
}

#khub-title, .khub-title {
  font-family: var(--ttx-font-ui);
  font-size: var(--ttx-h2-size);
  font-weight: 700;
  color: var(--ttx-primary);
  margin-bottom: var(--sp-md);
}

.khub-subline {
  font-size: var(--ttx-bodyL-size);
  color: var(--ttx-gray-700);
  margin-bottom: var(--sp-xl);
}
/* Talktrix Brand Tokens & Base (from Brand Guide v2) */
/* Fonts are expected to be self-hosted in /assets/fonts. Replace sources as needed. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables (Design Tokens) */
:root {
  /* Colors */
  --ttx-primary: #0A1931;
  --ttx-purple:  #6B4DE6;
  --ttx-cyan:    #00FFD1; /* focus/interaction, not for body text on white */
  --ttx-teal:    #00A9A5;
  --ttx-coral:   #E84A5F; /* strong CTAs */
  --ttx-gold:    #C5A15D;
  --ttx-gray-700:#334155;
  --ttx-gray-500:#64748B;
  --ttx-gray-200:#E5E7EB;
  --ttx-gray-50: #F8FAFC;
  /* Smooth Scrolling (sanfter Anker-Scroll). Wird für Nutzer mit reduzierter Bewegung deaktiviert */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  /* Typography */
  --ttx-font-ui: 'Satoshi', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ttx-font-body: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Type scale (sizes in px, line-heights unitless per brand guide) */
  --ttx-h1-size: 56px; --ttx-h1-lh: 1.05; --ttx-h1-tracking: 0.01em;
  --ttx-h2-size: 40px; --ttx-h2-lh: 1.10; --ttx-h2-tracking: 0.01em;
  --ttx-h3-size: 28px; --ttx-h3-lh: 1.15; --ttx-h3-tracking: 0.01em;
  --ttx-h4-size: 22px; --ttx-h4-lh: 1.20; --ttx-h4-tracking: 0.01em;
  --ttx-h5-size: 18px; --ttx-h5-lh: 1.25; --ttx-h5-tracking: 0.01em;
  --ttx-h6-size: 16px; --ttx-h6-lh: 1.30; --ttx-h6-tracking: 0.01em;

  --ttx-body-size: 18px; --ttx-body-lh: 1.7;
  --ttx-bodyL-size: 19px; --ttx-bodyL-lh: 1.7;
  --ttx-small-size: 13px; --ttx-small-lh: 1.5;

  /* Layout */
  --ttx-maxw: 1200px;
  --ttx-space-1: 4px;
  --ttx-space-2: 8px;
  --ttx-space-3: 12px;
  --ttx-space-4: 16px;
  --ttx-space-6: 24px;
  --ttx-space-8: 32px;
  --ttx-space-12: 48px;
  --ttx-radius: 14px;
  --ttx-shadow: 0 8px 24px rgba(10,25,49,0.08);
}

/* Modern spacing scale (keeps header unchanged) */
:root {
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px; /* base */
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 72px;
  --sp-4xl: 120px;
}

/* Highlight utility: paints a color behind ~50% of the text height (not the text color).
   Implementation uses a ::before pseudo-element sized to 60% of the computed line-height
   and vertically centered to cover roughly the lower half of single-line headings.
   Adjusts for multi-line headings by using background-clip workaround. */
.ttx-highlight-half {
  position: relative;
  display: inline-block;
  z-index: 0; /* keep above the pseudo background */
}
.ttx-highlight-half::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* size: roughly 50% of the element's height — use ems so it scales with font-size */
  height: 0.6em;
  /* place the band vertically so it covers the lower half of the glyphs */
  top: 0.5em;
  background: linear-gradient(90deg, var(--ttx-purple) 0%, var(--ttx-purple) 100%);
  z-index: -1; /* behind the text */
  border-radius: 4px;
  /* ensure the band doesn't overflow overly tight letters — add slight horizontal padding */
  transform-origin: left center;
}

/* Fine tune for larger headings so the band covers ~50% visually */
@media (min-width: 700px) {
  .ttx-hero__title .ttx-highlight-half::before { height: 0.55em; top: 0.52em; }
}

/* If the heading wraps to multiple lines, let the highlight only sit behind the first line
   by limiting the pseudo element's height and using overflow hidden on the inline block */
.ttx-highlight-half { overflow: visible; }


/* Base reset-ish */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ttx-primary);
  background: #fff;
  font-family: var(--ttx-font-body);
  font-size: var(--ttx-body-size);
  line-height: var(--ttx-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Containers */
.container { max-width: var(--ttx-maxw); margin: 0 auto; padding-left: var(--sp-md); padding-right: var(--sp-md); }

/* Headings (Satoshi; tight tracking) */
.ttx-h1, h1 {
  font-family: var(--ttx-font-ui);
  font-weight: 700;
  font-size: var(--ttx-h1-size);
  line-height: var(--ttx-h1-lh);
  letter-spacing: var(--ttx-h1-tracking);
  margin: 0 0 var(--sp-lg);
}
.ttx-h2, h2 {
  font-family: var(--ttx-font-ui);
  font-weight: 700;
  font-size: var(--ttx-h2-size);
  line-height: var(--ttx-h2-lh);
  letter-spacing: var(--ttx-h2-tracking);
  margin: var(--sp-xl) 0 var(--sp-md);
}
.ttx-h3, h3 {
  font-family: var(--ttx-font-ui);
  font-weight: 700;
  font-size: var(--ttx-h3-size);
  line-height: var(--ttx-h3-lh);
  letter-spacing: var(--ttx-h3-tracking);
  margin: var(--sp-lg) 0 var(--sp-sm);
}
.ttx-h4, h4 { font-family: var(--ttx-font-ui); font-weight: 600; font-size: var(--ttx-h4-size); line-height: var(--ttx-h4-lh); letter-spacing: var(--ttx-h4-tracking); }
.ttx-h5, h5 { font-family: var(--ttx-font-ui); font-weight: 600; font-size: var(--ttx-h5-size); line-height: var(--ttx-h5-lh); letter-spacing: var(--ttx-h5-tracking); }
.ttx-h6, h6 { font-family: var(--ttx-font-ui); font-weight: 600; font-size: var(--ttx-h6-size); line-height: var(--ttx-h6-lh); letter-spacing: var(--ttx-h6-tracking); }

/* Text */
p { margin: 0 0 var(--ttx-space-6); }
.ttx-lead { font-family: var(--ttx-font-body); font-size: var(--ttx-bodyL-size); line-height: var(--ttx-bodyL-lh); color: var(--ttx-gray-700); }
.ttx-small, small { font-family: var(--ttx-font-ui); font-size: var(--ttx-small-size); line-height: var(--ttx-small-lh); color: var(--ttx-gray-500); }

/* Links and focus */
a { color: var(--ttx-primary); text-underline-offset: 2px; }
a:hover { opacity: .9; }
:focus-visible {
  outline: 2px solid var(--ttx-cyan);
  outline-offset: 2px; /* clear visible focus ring */
}

/* Buttons */
.ttx-btn {
  --bg: var(--ttx-coral);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--ttx-radius);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ttx-font-ui);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--ttx-shadow);
  border: 0;
  cursor: pointer;
}
.ttx-btn--secondary { --bg: var(--ttx-purple); }

/* Header/Footer */
.ttx-header {
  /* sticky header that remains at the top while scrolling */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  /* ensure header and its children sit above the offcanvas overlay/panel */
  z-index: 1000005 !important;
  background: transparent;
  border-bottom: 0;
  transform: translateY(70px); /* visually lower the header without moving content */
}

/* Knowledge Hub Kontext: Header direkt am oberen Rand fixieren, eigenes Erscheinungsbild */
body.khub-context .ttx-header {
  transform: none;
  background: #ffffff;
  border-bottom: 1px solid var(--ttx-gray-200);
  box-shadow: 0 2px 4px rgba(10,25,49,0.04);
}

/* Optional: leichte kompaktere Höhe im Hub-Kontext */
body.khub-context .ttx-header .container {
  height: 84px; /* erhöht für mehr Präsenz im Hub */
  padding-top: 6px;
  padding-bottom: 6px;
}
@media (min-width: 1400px) {
  body.khub-context .ttx-header .container { height: 92px; }
}
/* Subnav Offset anpassen, da Header höher ist */
body.khub-context .khub-subnav { top: 84px; }
@media (min-width:1400px){ body.khub-context .khub-subnav { top: 92px; } }

/* On small screens keep the header closer to the top so it remains reachable */
@media (max-width: 700px) {
  .ttx-header { transform: translateY(12px); }
}
.ttx-header .container { display: flex; align-items: center; gap: var(--ttx-space-6); height: 64px; }
.ttx-logo {
  font-family: var(--ttx-font-ui);
  font-weight: 700; /* weniger fett */
  text-decoration: none;
  font-size: 25px; /* etwas größer */
}
.ttx-nav ul { display: flex; gap: var(--ttx-space-6); list-style: none; margin: 0; padding: 0; }
.ttx-nav a { font-family: var(--ttx-font-ui); text-decoration: none; color: var(--ttx-gray-700); }
.ttx-nav a[aria-current="page"] { color: var(--ttx-primary); }

/* Header actions (right side): CTA + burger */
.ttx-header__actions { display: flex; align-items: center; gap: 12px; }
.ttx-btn--header {
  background: var(--ttx-coral);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(232,74,95,0.16);
  text-decoration: none;
}
.ttx-btn--header:hover { transform: translateY(-1px); }

.ttx-footer { margin-top: var(--ttx-space-12); padding: var(--ttx-space-8) 0; border-top: 1px solid var(--ttx-gray-200); color: var(--ttx-gray-500); }

/* Content */
.ttx-content img { max-width: 100%; height: auto; border-radius: 8px; }
.ttx-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ttx-space-6); }
.ttx-card { padding: var(--ttx-space-6); border: 1px solid var(--ttx-gray-200); border-radius: var(--ttx-radius); }

/* Gradient headline utility (use sparingly) */
.ttx-gradient {
  background: linear-gradient(90deg, var(--ttx-purple), var(--ttx-cyan), var(--ttx-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Accessibility & Motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Motion removed for hover interactions (no lift) */

/* Utilities */
.mt-0{margin-top:0}.mt-1{margin-top:var(--ttx-space-1)}.mt-2{margin-top:var(--ttx-space-2)}.mt-4{margin-top:var(--ttx-space-4)}.mt-6{margin-top:var(--ttx-space-6)}.mt-8{margin-top:var(--ttx-space-8)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--ttx-space-2)}.mb-4{margin-bottom:var(--ttx-space-4)}.mb-6{margin-bottom:var(--ttx-space-6)}.mb-8{margin-bottom:var(--ttx-space-8)}
.p-4{padding:var(--ttx-space-4)}.p-6{padding:var(--ttx-space-6)}.p-8{padding:var(--ttx-space-8)}
.grid{display:grid}.grid-2{grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ttx-space-6)}
.shadow{box-shadow:var(--ttx-shadow)}.radius{border-radius:var(--ttx-radius)}
.text-center{text-align:center}.text-right{text-align:right}

/* --- Components: Hero, Bento Use-Cases, CTA --- */
.ttx-hero { padding-block: clamp(var(--sp-2xl), 8vw, var(--sp-4xl)); }
.ttx-hero__actions {
  display: flex;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  flex-wrap: wrap;
  justify-content: center; /* center buttons under the text */
  align-items: center;
}
/* ttx-hero__kpis removed — list relocated/removed from markup */

/* Hero visuals */
.ttx-hero {
  /* zarte Glows / Bloom-Effekte rechts */
  background-image:
    radial-gradient(60% 60% at 85% 30%, rgba(107, 77, 230, 0.12) 0%, transparent 60%),
    radial-gradient(45% 45% at 92% 70%, rgba(0, 169, 165, 0.10) 0%, transparent 65%),
    /* Hauptverlauf (Fallback zuletzt) */
    linear-gradient(135deg, #EEE9FF 0%, #E9F5FF 50%, #E6FFF7 100%);
  background-size: cover;
  min-height: 680px;
  display: flex;
  align-items: center;
  /* pull the hero up so its background shows behind the visually lowered header */
  margin-top: -70px;
}
.ttx-hero__inner {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  padding-block-start: var(--sp-2xl); /* keep some space so content isn't hidden behind header */
  padding-block-end: var(--sp-lg);
}
.ttx-hero__eyebrow {
  color: var(--ttx-purple);
  font-family: var(--ttx-font-ui);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
  font-size: 13px;
}
.ttx-hero__title {
  margin: 0 0 var(--sp-md);
  font-size: clamp(36px, 6.6vw, 72px);
  line-height: 1.02;
  font-family: var(--ttx-font-ui);
  font-weight: 800;
  color: var(--ttx-primary);
}
.ttx-hero__sub {
  color: var(--ttx-gray-700);
  max-width: 760px;
  margin: 0 auto;
  margin-bottom: var(--sp-lg);
}

/* Primary CTA styling specifically in hero */
.ttx-hero .ttx-btn {
  --bg: var(--ttx-coral);
  --fg: #fff;
  background: var(--ttx-coral);
  color: var(--ttx-btn-fg, #fff);
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(232,74,95,0.18);
  border: 0;
}

.ttx-btn--ghost {
  --bg: transparent;
  --fg: var(--ttx-primary);
  background: transparent;
  color: var(--ttx-primary);
  border: 2px solid rgba(10,25,49,0.12);
  padding: 12px 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ttx-btn--ghost:before {
  content: '\25B6'; /* simple play icon */
  display: inline-block;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 999px; font-size: 12px; color: inherit;
}

/* ttx-hero__kpis styles removed — KPIs markup deleted */

/* Responsive adjustments */
@media (max-width: 900px) {
  .ttx-hero__inner { padding-top: 70px; }
  .ttx-hero { min-height: 520px; }
  .ttx-hero__title { font-size: clamp(28px, 9vw, 44px); }
}

/* adjust hero pull-up for small screens where header offset is smaller */
@media (max-width: 700px) {
  .ttx-hero { margin-top: -12px; }
  .ttx-hero__inner { padding-top: 28px; }
}

/* Mobile-specific fixes: ensure no white gap at the top on small devices */
@media (max-width: 700px) {
  /* Force the hero to pull up above the header (important for some mobile browsers) */
  .ttx-hero { margin-top: -12px !important; }
  /* If the user agent shows a white area behind the header, use the hero gradient as body background */
  body {
    background: linear-gradient(135deg, #EEE9FF 0%, #E9F5FF 50%, #E6FFF7 100%);
  }
  /* Respect safe-area inset at the very top (iPhones with notch) */
  .ttx-header { padding-top: env(safe-area-inset-top, 12px); }
}

.ttx-section__header { margin-bottom: var(--ttx-space-6); }

.ttx-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}

/* New Features section (3x2 card grid like screenshot) */
.ttx-features { padding-block: var(--sp-2xl); }
.ttx-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-md);
}
.feature-card {
  background: #fff;
  /* slightly thicker neutral border for a more defined card */
  border: 2px solid rgba(10,25,49,0.06);
  border-radius: 12px;
  padding: var(--sp-lg);
  box-shadow: 0 6px 18px rgba(10,25,49,0.04);
  /* transition only border and shadow (no transform/lift) */
  transition: border-color 240ms cubic-bezier(.2,.9,.3,1), box-shadow 240ms cubic-bezier(.2,.9,.3,1);
}
.feature-card__icon {
  /* slightly larger icon container for bigger SVGs */
  width: 44px; height: 44px; display:inline-grid; place-items:center;
  background: rgba(107,77,230,0.06); color: var(--ttx-purple); border-radius: 10px; margin-bottom: 12px;
}
/* Hover / focus treatment: purple border + gentle glow */
.feature-card:hover,
.feature-card:focus-within,
.feature-card:focus {
  /* soft lavender border as requested */
  border-color: #BCA8EF;
  /* glow tuned to the same hue but very subtle */
  box-shadow: 0 8px 18px rgba(188,168,239,0.06);
}

/* visible focus for keyboard users */
.feature-card:focus-visible { outline: 3px solid rgba(107,77,230,0.10); outline-offset: 3px; }
.feature-card__icon img {
  width: 28px; height: 28px; display: block; object-fit: contain; filter: none;
}
.feature-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.feature-card p { margin: 0; color: var(--ttx-gray-700); font-size: 14px; line-height: 1.6; }

@media (max-width: 1000px) {
  .ttx-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ttx-features__grid { grid-template-columns: 1fr; }
}
/* Bento layout (responsive) */
.bento-card {
  grid-column: span 1;
  padding: var(--sp-lg);
  /* slightly thicker neutral border for more presence */
  border: 2px solid rgba(10,25,49,0.06);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(10,25,49,0.04);
  /* transition only border and shadow */
  transition: border-color 240ms cubic-bezier(.2,.9,.3,1), box-shadow 240ms cubic-bezier(.2,.9,.3,1);
}
.bento-card__icon {
  /* slightly larger container for bento icons */
  width: 48px; height: 48px; display:inline-grid; place-items:center;
  background: rgba(107,77,230,0.06); color: var(--ttx-purple); border-radius: 10px; margin-bottom: 12px;
}
.bento-card__icon img { width: 28px; height: 28px; }
.bento-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.bento-card ul { margin: 12px 0; padding-left: 20px; color: var(--ttx-gray-700); }
.bento-card ul li { list-style: disc; margin-left: 8px; color: #000; }
.bento-card ul li::marker { color: #6B4DE6; }
.bento-card p a { color: var(--ttx-primary); text-decoration: none; }
.bento-card--primary {
  grid-column: span 12;
  background: linear-gradient(135deg, var(--ttx-purple) 0%, var(--ttx-teal) 100%);
  color: #fff;
}
.bento-card--primary .ttx-btn { --bg: var(--ttx-coral); }
@media (min-width: 900px) {
  /* Keep bento cards occupying a single column on wide screens; allow primary card to span both columns */
  .bento-card { grid-column: span 1; }
  .bento-card--primary { grid-column: span 2; }
}

/* Hover / focus for bento cards to match feature cards */
.bento-card:hover,
.bento-card:focus-within,
.bento-card:focus {
  border-color: #BCA8EF;
  box-shadow: 0 8px 18px rgba(188,168,239,0.06);
}
.bento-card:focus-visible { outline: 3px solid rgba(107,77,230,0.10); outline-offset: 3px; }

/* Responsive: stack bento cards to single column on narrower screens */
@media (max-width: 900px) {
  .ttx-bento { grid-template-columns: 1fr; }
}

.ttx-cta {
  margin-top: var(--ttx-space-12);
  padding: var(--ttx-space-8) 0;
  background: radial-gradient(40% 60% at 20% 40%, rgba(107,77,230,0.12) 0%, transparent 60%),
              radial-gradient(40% 60% at 80% 60%, rgba(0,255,209,0.12) 0%, transparent 60%);
  border-top: 1px solid var(--ttx-gray-200);
  border-bottom: 1px solid var(--ttx-gray-200);
}
.ttx-bento__cta { display:flex; justify-content:center; margin-top: var(--sp-lg); }
.ttx-bento__cta .ttx-btn { background: var(--ttx-coral); padding: 12px 20px; border-radius: 999px; }
.ttx-cta__row { display:flex; align-items:center; justify-content:space-between; gap: var(--ttx-space-6); flex-wrap: wrap; }


/* --- Header Row with Left Logo --- */
.ttx-header__row { display:flex; align-items:center; justify-content:space-between; height:64px; }

/* --- Floating Burger --- */
.ttx-burger {
  appearance: none;
  border: 0;
  background: #fff;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  /* Use flex column to precisely control spacing between the bars */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px; /* slightly larger gap for the bigger burger */
  box-shadow: var(--ttx-shadow);
  cursor: pointer;
}
/* Burger to X animation */
.ttx-burger.is-active { background: transparent; }
.ttx-burger.is-active .ttx-burger__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.ttx-burger.is-active .ttx-burger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ttx-burger.is-active .ttx-burger__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.ttx-burger__bar { transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 200ms ease; }

/* keep header burger above the offcanvas overlay when active */
.ttx-burger { position: relative; z-index: 1000006; }
.ttx-burger.is-active { z-index: 1000007; }
.ttx-burger--floating { position: relative; } /* sits inside header on the right */
.ttx-burger__bar {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #111;
  /* remove margins — spacing is controlled by the parent's gap */
  margin: 0;
  border-radius: 2px;
}

.ttx-offcanvas {
  /* fullscreen overlay */
  position: fixed; inset: 0;
  background: rgba(10,25,49,0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999999 !important; /* much higher to ensure it covers everything */
  will-change: opacity, visibility;
  transition: opacity 720ms cubic-bezier(.22,1,.36,1), visibility 720ms cubic-bezier(.22,1,.36,1);
}
.ttx-offcanvas.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ttx-offcanvas__panel {
  /* full-bleed panel that slides down from top */
  position: fixed; /* ensure panel isn't affected by stacking contexts */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  box-shadow: none;
  padding: var(--ttx-space-8);
  display: flex; flex-direction: column; gap: var(--ttx-space-6);
  transform: translateY(-100%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 840ms cubic-bezier(.22,1,.36,1), opacity 560ms cubic-bezier(.22,1,.36,1);
  z-index: 1000000 !important; /* ensure panel is above overlay children if needed */
}
.ttx-offcanvas.is-open .ttx-offcanvas__panel {
  transform: translateY(0);
  opacity: 1;
}
.ttx-offcanvas__close {
  align-self: flex-end;
  border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer;
}
.ttx-offcanvas__nav .ttx-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ttx-offcanvas__nav .ttx-menu a {
  display: block; padding: 10px 12px;
  text-decoration: none; color: var(--ttx-primary);
  font-family: var(--ttx-font-ui); font-weight: 600;
  border-radius: 10px;
}
.ttx-offcanvas__nav .ttx-menu a:hover,
.ttx-offcanvas__nav .ttx-menu a[aria-current="page"] {
  background: var(--ttx-gray-50);
}

/* Responsive container max-widths */
:root {
  /* default: mobile-first — container will be full-width within padding */
  --ttx-maxw: 100%;
}

@media (min-width: 700px) {
  :root { --ttx-maxw: 960px; }
}

@media (min-width: 1024px) {
  :root { --ttx-maxw: 1200px; }
}

@media (min-width: 1400px) {
  :root { --ttx-maxw: 1440px; }
  /* on very wide screens give an extra hero top offset */
  .ttx-hero__inner { padding-top: 72px; }
}

/* Ensure container uses the variable (already defined earlier) */
.container { max-width: var(--ttx-maxw); }

/* ROI Rechner Styles (updated to match screenshot) */
.ttx-roi { padding-block: var(--sp-2xl); }
.ttx-roi__card {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(10,25,49,0.06);
  border-radius: 12px;
  padding: var(--sp-lg);
  box-shadow: 0 12px 30px rgba(10,25,49,0.06);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-lg);
  align-items: start;
}
.ttx-roi__controls { display:flex; flex-direction:column; gap:16px; }
.ttx-roi__row { display:flex; gap:16px; align-items:center; }
.ttx-roi__field { flex:1; }
.ttx-roi__field label { display:block; font-weight:600; font-family: var(--ttx-font-ui); margin-bottom:8px; }
.ttx-roi__small { font-size: 13px; color: var(--ttx-gray-500); margin-top:6px; }

.ttx-roi__plan-summary { font-size: 13px; color: var(--ttx-gray-600); margin-top:6px; }
.ttx-roi__breakdown small { font-size: 13px; color: var(--ttx-gray-600); }

.ttx-roi__range { width: 100%; }
.ttx-roi__range input[type="range"] { width:100%; appearance: none; height:8px; border-radius:999px; background: linear-gradient(90deg, var(--ttx-gray-200), var(--ttx-gray-200)); outline: none; }
.ttx-roi__range input[type="range"]::-webkit-slider-thumb { appearance: none; width:16px; height:16px; border-radius:50%; background: var(--ttx-purple); box-shadow: 0 2px 6px rgba(107,77,230,0.24); cursor: pointer; }
.ttx-roi__range-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--ttx-gray-500); margin-top:6px; }

.ttx-roi__field input[type="number"], .ttx-roi__field select { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--ttx-gray-200); font-size:14px; }

.ttx-roi__result { text-align:center; background: var(--ttx-gray-50); border-radius: 10px; padding: 18px; }
.ttx-roi__result h3 { margin:0 0 8px; font-size:16px; }
.ttx-roi__amount { background: #fff; padding: 18px 14px; border-radius:8px; margin: 12px 0; box-shadow: inset 0 -1px 0 rgba(10,25,49,0.02); }
.ttx-roi__amount #roi-amount { font-size: 32px; font-weight:800; display:block; }
.ttx-roi__breakdown { color: var(--ttx-gray-500); margin-bottom: 8px; display:block; }
.ttx-roi__result .ttx-btn { margin-top: 8px; display: inline-block; }

@media (max-width: 900px) {
  .ttx-roi__card { grid-template-columns: 1fr; }
  .ttx-roi__row { flex-direction: column; align-items: stretch; }
  .ttx-roi__result { order: 3; }
}

/* === New Structured ROI Layout === */
.ttx-roi__layout { display:grid; grid-template-columns: 1fr 360px; gap: var(--sp-lg); align-items:start; }
@media (max-width: 1000px){ .ttx-roi__layout { grid-template-columns: 1fr; } }
.ttx-roi__left { display:flex; flex-direction:column; gap: var(--sp-lg); }
.ttx-roi__form { display:flex; flex-direction:column; gap: var(--sp-lg); }
.ttx-roi__group { margin:0; padding: var(--sp-md) var(--sp-md) var(--sp-lg); border:1px solid rgba(10,25,49,0.08); border-radius:10px; background:#fff; }
.ttx-roi__group legend { font-family: var(--ttx-font-ui); font-size:14px; font-weight:600; padding:0 6px; color: var(--ttx-gray-700); }
.ttx-roi__grid2 { display:grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.ttx-roi__field select, .ttx-roi__field input[type=range] { width:100%; }
.ttx-roi__label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; font-family: var(--ttx-font-ui); }
.ttx-roi__range-scale { display:flex; justify-content:space-between; font-size:11px; color: var(--ttx-gray-500); margin-top:6px; }
.ttx-roi__meta-row { display:flex; justify-content:space-between; font-size:12px; margin-top:8px; flex-wrap:wrap; gap:8px; }
.ttx-roi__planline { font-size:12px; margin-top:6px; color: var(--ttx-gray-600); }
.ttx-roi__details { font-size:13px; }
.ttx-roi__details summary { cursor:pointer; font-weight:600; }
.ttx-roi__tierlist { display:none; }
.ttx-roi__right { position:relative; }
.ttx-roi__resultbox { background: var(--ttx-gray-50); border:1px solid rgba(10,25,49,0.08); padding: var(--sp-lg); border-radius:12px; display:flex; flex-direction:column; gap:12px; }
.ttx-roi__result-title { margin:0; font-size:16px; font-weight:700; font-family: var(--ttx-font-ui); }
.ttx-roi__table { width:100%; border-collapse: collapse; font-size:13px; }
.ttx-roi__table th { text-align:left; font-weight:600; padding:4px 0; }
.ttx-roi__table td { text-align:right; padding:4px 0; font-variant-numeric: tabular-nums; }
.ttx-roi__table tr + tr th, .ttx-roi__table tr + tr td { border-top:1px solid rgba(10,25,49,0.08); }
.ttx-roi__amount { font-family: var(--ttx-font-ui); font-size: clamp(26px,4vw,34px); font-weight:800; }
.ttx-roi__hint { font-size:11px; color: var(--ttx-gray-500); margin:0; }
.ttx-roi__resultbox .ttx-btn { align-self:center; margin-top:4px; }

/* ===== ROI Dashboard Redesign ===== */
.ttx-roi--dashboard { --roi-bg:#F8F9FC; --roi-border:rgba(0,0,0,0.08); --roi-shadow:0 4px 24px rgba(0,0,0,0.10); --roi-radius:16px; }
.ttx-roi--dashboard .ttx-roi__card { background:transparent; box-shadow:none; border:0; }
.ttx-roi--dashboard .ttx-roi__layout { position:relative; }
.ttx-roi--dashboard .ttx-roi__group { background: var(--roi-bg); border:1px solid var(--roi-border); border-radius: var(--roi-radius); padding:24px 26px 30px; backdrop-filter: saturate(1.15) blur(4px); transition: box-shadow 260ms, border-color 260ms, background 260ms; }
.ttx-roi--dashboard .ttx-roi__group:hover { box-shadow: var(--roi-shadow); border-color: rgba(232,74,95,0.35); }
.ttx-roi--dashboard select, .ttx-roi--dashboard input[type=number] { background:#fff; border:1px solid var(--roi-border); border-radius:10px; padding:10px 12px; font-family: var(--ttx-font-ui); font-size:14px; transition:border-color 200ms, box-shadow 200ms; }
.ttx-roi--dashboard select:focus, .ttx-roi--dashboard input[type=number]:focus { border-color: var(--ttx-purple); box-shadow:0 0 0 3px rgba(107,77,230,0.15); outline:0; }
.ttx-roi--dashboard .ttx-roi__label { font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:#1E1E1E; }
.ttx-roi--dashboard .ttx-roi__planline { font-size:11px; color: var(--ttx-gray-500); opacity:.85; }
.ttx-roi--dashboard .ttx-roi__details { background: var(--roi-bg); border:1px solid var(--roi-border); border-radius: var(--roi-radius); padding:14px 20px 10px; margin-top:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.ttx-roi--dashboard .ttx-roi__details[open] { box-shadow:0 4px 18px rgba(0,0,0,0.08); }
.ttx-roi--dashboard .ttx-roi__details summary { list-style:none; cursor:pointer; font-family: var(--ttx-font-ui); font-size:13px; }
.ttx-roi--dashboard .ttx-roi__details summary::-webkit-details-marker { display:none; }
.ttx-roi--dashboard .ttx-roi__tierlist { margin-top:10px; }
.ttx-roi--dashboard .ttx-roi__assumptions-inner { margin-top:14px; display:grid; gap:14px; }

/* Result Panel */
.ttx-roi--dashboard .ttx-roi__right { position:sticky; top:90px; }
.ttx-roi--dashboard .ttx-roi__resultbox { background:linear-gradient(180deg,#FFFFFF 0%, #FDFDFE 60%, #F6F7FA 100%); border:1px solid var(--roi-border); border-radius:24px; padding:34px 34px 36px; box-shadow:0 8px 40px -8px rgba(0,0,0,0.18), 0 4px 22px rgba(0,0,0,0.08); position:relative; overflow:hidden; }
.ttx-roi--dashboard .ttx-roi__resultbox:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(107,77,230,0.18), transparent 60%), radial-gradient(circle at 85% 75%, rgba(232,74,95,0.15), transparent 65%); pointer-events:none; mix-blend-mode:normal; }
.ttx-roi--dashboard .ttx-roi__result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ttx-roi--dashboard .ttx-roi__realtime-status { font-size:11px; font-family: var(--ttx-font-ui); display:flex; align-items:center; gap:6px; color: var(--ttx-gray-500); letter-spacing:.5px; text-transform:uppercase; }
.ttx-roi--dashboard .ttx-roi__pulse { width:8px; height:8px; border-radius:50%; background: linear-gradient(90deg,#6B4DE6,#E84A5F); position:relative; display:inline-block; animation: roiPulse 1800ms ease-in-out infinite; }
@keyframes roiPulse { 0%{ box-shadow:0 0 0 0 rgba(232,74,95,0.55);} 70%{ box-shadow:0 0 0 8px rgba(232,74,95,0);} 100%{ box-shadow:0 0 0 0 rgba(232,74,95,0);} }
.ttx-roi--dashboard .ttx-roi__amount { font-size: clamp(34px,5vw,48px); background: linear-gradient(90deg,#6B4DE6,#E84A5F); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; text-align:center; line-height:1.1; margin:4px 0 4px; }
.ttx-roi--dashboard .ttx-roi__indicator { font-size:13px; text-align:center; font-family: var(--ttx-font-ui); padding:6px 10px; border-radius:999px; background:rgba(107,77,230,0.08); color:#1E1E1E; margin:0 auto 16px; width:fit-content; transition: background 300ms, color 300ms; }
.ttx-roi--dashboard .ttx-roi__indicator.is-positive { background:rgba(0,169,165,0.18); color:#064e47; }
.ttx-roi--dashboard .ttx-roi__indicator.is-negative { background:rgba(232,74,95,0.18); color:#7a1221; }
.ttx-roi--dashboard .ttx-roi__indicator.is-neutral { background:rgba(0,0,0,0.08); color:#222; }
.ttx-roi--dashboard .ttx-roi__chart { width:100%; max-width:320px; margin:0 auto 18px; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)); }
.ttx-roi--dashboard .ttx-roi__table { margin-top:4px; }
.ttx-roi--dashboard .ttx-roi__table th { font-size:12px; font-weight:500; letter-spacing:.3px; color:#1E1E1E; }
.ttx-roi--dashboard .ttx-roi__table td { font-size:12px; font-weight:600; color:#1E1E1E; }
.ttx-roi--dashboard .ttx-roi__hint { font-size:11px; text-align:center; margin-top:12px; opacity:.75; }
.ttx-roi--dashboard .ttx-roi__cta { background: linear-gradient(90deg,#6B4DE6,#E84A5F); border:0; width:100%; margin-top:10px; font-size:15px; font-weight:700; letter-spacing:.5px; box-shadow:0 8px 26px -4px rgba(232,74,95,0.45), 0 4px 14px rgba(107,77,230,0.35); transition: filter 260ms, transform 260ms; }
.ttx-roi--dashboard .ttx-roi__cta:hover { filter:brightness(1.05); transform:translateY(-2px); }
.ttx-roi--dashboard .ttx-roi__trust { font-size:11px; text-align:center; margin:10px 0 0; color: var(--ttx-gray-500); letter-spacing:.3px; }

/* Slider gradient */
.ttx-roi--dashboard .ttx-roi__range-input { appearance:none; width:100%; height:10px; border-radius:999px; background: linear-gradient(90deg,#6B4DE6,#E84A5F); position:relative; outline:0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.08); }
.ttx-roi--dashboard .ttx-roi__range-input::-webkit-slider-thumb { appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #6B4DE6; box-shadow:0 2px 6px rgba(0,0,0,0.25); transition:border-color 240ms, transform 240ms; }
.ttx-roi--dashboard .ttx-roi__range-input:active::-webkit-slider-thumb { transform:scale(1.08); border-color:#E84A5F; }
.ttx-roi--dashboard .ttx-roi__range-input::-moz-range-track { height:10px; background: linear-gradient(90deg,#6B4DE6,#E84A5F); border-radius:999px; }
.ttx-roi--dashboard .ttx-roi__range-input::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #6B4DE6; box-shadow:0 2px 6px rgba(0,0,0,0.25); }

/* Micro animation for buttons (gentle pulse) */
@keyframes ttxBtnPulse { 0%,100%{ box-shadow:0 8px 26px -4px rgba(232,74,95,0.45),0 4px 14px rgba(107,77,230,0.35);} 50%{ box-shadow:0 10px 32px -4px rgba(232,74,95,0.55),0 6px 18px rgba(107,77,230,0.45);} }
.ttx-roi--dashboard .ttx-roi__cta { animation: ttxBtnPulse 4.5s ease-in-out infinite; }

/* Hover subtle glasmorph */
.ttx-roi--dashboard .ttx-roi__group:hover { background: rgba(248,249,252,0.85); backdrop-filter: blur(6px) saturate(1.2); }

@media (max-width:1000px){
  .ttx-roi--dashboard .ttx-roi__right { position:static; top:auto; }
  .ttx-roi--dashboard .ttx-roi__resultbox { margin-top:10px; }
}

/* ===== Pricing Section ===== */
.ttx-pricing { padding-block: var(--sp-2xl) var(--sp-3xl); }
.ttx-pricing__header h2 { margin-bottom: var(--sp-sm); }
.ttx-pricing__grid { display:grid; gap: var(--sp-lg); grid-template-columns: repeat(3,1fr); align-items:stretch; margin-top: var(--sp-xl); }
@media (max-width: 1100px){ .ttx-pricing__grid { grid-template-columns: 1fr; max-width:680px; margin-inline:auto; } }

.ttx-price-card { position:relative; border:1px solid rgba(10,25,49,0.12); background:#fff; border-radius:14px; padding:26px 30px 30px; display:flex; flex-direction:column; box-shadow:0 4px 14px rgba(10,25,49,0.04); transition: border-color 220ms, box-shadow 220ms; }
.ttx-price-card:hover { border-color: rgba(107,77,230,0.35); box-shadow:0 8px 28px rgba(10,25,49,0.08); }
.ttx-price-card--popular { border:2px solid var(--ttx-purple); box-shadow:0 10px 36px rgba(107,77,230,0.18); }
.ttx-price-card__badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background: var(--ttx-purple); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; border-radius:999px; box-shadow:0 4px 10px rgba(107,77,230,0.35); }
.ttx-price-card__title { margin:0 0 4px; font-size:22px; font-weight:700; font-family: var(--ttx-font-ui); }
.ttx-price-card__tagline { margin:0 0 18px; font-size:14px; line-height:1.45; color: var(--ttx-gray-600); font-family: var(--ttx-font-ui); }
.ttx-price-card__meta { margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.ttx-price-card__meta div { display:flex; gap:10px; align-items:baseline; }
.ttx-price-card__meta dt { font-size:13px; font-weight:600; width:72px; color: var(--ttx-gray-600); font-family: var(--ttx-font-ui); }
.ttx-price-card__meta dd { margin:0; font-size:14px; font-family: var(--ttx-font-ui); display:flex; gap:6px; align-items:baseline; }
.ttx-price-card__price { font-size:17px; font-weight:700; letter-spacing:.5px; }
.ttx-price-card__unit { font-size:11px; color: var(--ttx-gray-500); text-transform: lowercase; }
.ttx-price-card__range { margin:6px 0 4px; font-size:11px; letter-spacing:.5px; color: var(--ttx-gray-500); }
.ttx-price-card__included { margin:0 0 16px; font-size:12px; font-weight:600; color: var(--ttx-purple); }
.ttx-price-card__cta { display:inline-flex; justify-content:center; align-items:center; height:44px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none; font-family: var(--ttx-font-ui); margin-bottom:18px; transition:background .25s, color .25s, box-shadow .25s; }
.ttx-price-card__cta--primary { background: var(--ttx-coral); color:#fff; box-shadow:0 8px 24px rgba(232,74,95,0.35); }
.ttx-price-card__cta--primary:hover { background:#d53c53; }
.ttx-price-card__cta--outline { background:#fff; color: var(--ttx-primary); border:1.5px solid rgba(10,25,49,0.25); }
.ttx-price-card__cta--outline:hover { border-color: var(--ttx-primary); }
.ttx-price-card__features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.5; color: var(--ttx-gray-700); }
.ttx-price-card__features li { position:relative; padding-left:20px; }
.ttx-price-card__features li:before { content:'\2713'; position:absolute; left:0; top:2px; font-size:12px; color: var(--ttx-purple); }
.ttx-pricing__foot { margin-top: var(--sp-2xl); font-size:13px; color: var(--ttx-gray-600); }
.ttx-price-card__body { flex:1; display:flex; flex-direction:column; }

@media (prefers-reduced-motion: reduce){
  .ttx-price-card, .ttx-price-card__cta { transition:none !important; }
}

/* ===== Demo Section (unter Pricing) ===== */
.ttx-demo { padding-block: var(--sp-2xl) var(--sp-3xl); background: #f7f9fc; }
.ttx-demo__header h2 { margin-bottom: var(--sp-sm); }
.ttx-demo__header p { max-width: 780px; margin-left:auto; margin-right:auto; }
.ttx-demo-card {
  max-width: 680px;
  margin: var(--sp-xl) auto 0;
  background:#fff;
  border:1px solid rgba(10,25,49,0.08);
  border-radius:18px;
  padding:56px 46px 52px;
  text-align:center;
  position:relative;
  box-shadow:0 12px 38px -8px rgba(10,25,49,0.10), 0 4px 18px rgba(10,25,49,0.05);
}
.ttx-demo-card__play {
  position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  width:68px; height:68px; border-radius:999px; border:0; cursor:default;
  background: var(--ttx-coral); color:#fff; display:grid; place-items:center;
  font-size:30px; font-weight:700; box-shadow:0 8px 24px rgba(232,74,95,0.35);
}
.ttx-demo-card__play[disabled] { opacity:1; }
.ttx-demo-card__play-icon { line-height:1; transform:translateX(2px); }
.ttx-demo-card__title { margin:0 0 14px; font-family: var(--ttx-font-ui); font-weight:700; font-size:18px; }
.ttx-demo-card__desc { margin:0 0 28px; font-size:14px; line-height:1.55; color: var(--ttx-gray-700); font-family: var(--ttx-font-ui); }
.ttx-demo-card__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ttx-btn--demo-primary { --bg: var(--ttx-coral); background: var(--ttx-coral); color:#fff; padding:12px 22px; border-radius:8px; font-size:14px; font-weight:600; box-shadow:0 8px 22px rgba(232,74,95,0.30); }
.ttx-btn--demo-primary:hover { background:#d53c53; }
.ttx-btn--demo-secondary { --bg:#fff; background:#fff; color: var(--ttx-primary); padding:12px 22px; border-radius:8px; font-size:14px; font-weight:600; box-shadow:0 2px 4px rgba(10,25,49,0.06); border:1px solid rgba(10,25,49,0.15); }
.ttx-btn--demo-secondary:hover { border-color: var(--ttx-primary); }
@media (max-width:700px){
  .ttx-demo-card { padding:56px 24px 46px; }
}

/* ================= Footer Redesign (Dark) ================= */
.ttx-footer--site { --footer-bg:#061320; --footer-text:#D5DDE5; --footer-dim:#8693A1; --footer-border:rgba(255,255,255,0.08); background: var(--footer-bg); color: var(--footer-text); font-family: var(--ttx-font-ui); margin-top: 0; padding-top: 72px; position:relative; }
.ttx-footer--site a { color: var(--footer-text); text-decoration:none; transition: color .25s ease; }
.ttx-footer--site a:hover { color: #fff; }
.ttx-footer__top { padding-bottom: 36px; }
.ttx-footer__grid { display: grid; gap: 48px clamp(40px,6vw,120px); grid-template-columns: repeat(4,minmax(140px,1fr)); align-items:start; }
.ttx-footer__brand { max-width: 260px; }
.ttx-footer__logo { margin:0 0 12px; font-size: 20px; font-weight:700; letter-spacing:.5px; color:#fff; }
.ttx-footer__tagline { margin:0; font-size: 13px; line-height:1.5; color: var(--footer-dim); font-family: var(--ttx-font-body); }
.ttx-footer__heading { font-size:14px; font-weight:600; margin:0 0 14px; letter-spacing:.5px; color:#fff; text-transform:none; }
.ttx-footer__links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ttx-footer__links a { font-size:13px; font-weight:500; color: var(--footer-dim); position:relative; }
.ttx-footer__links a:hover:after, .ttx-footer__links a:focus-visible:after { content:""; position:absolute; left:0; bottom:-4px; width:22px; height:1px; background:#fff; }
.ttx-footer__links a:hover, .ttx-footer__links a:focus-visible { color:#fff; }
.ttx-footer__divider { width:100%; border:0; height:1px; background: var(--footer-border); margin: 48px 0 0; }
.ttx-footer__bottom { padding: 26px 0 38px; }
.ttx-footer__bottom-row { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.ttx-footer__copyright { font-size:12px; color: var(--footer-dim); }
.ttx-footer__legal { list-style:none; margin:0; padding:0; display:flex; gap:26px; }
.ttx-footer__legal a { font-size:12px; color: var(--footer-dim); }
.ttx-footer__legal a:hover, .ttx-footer__legal a:focus-visible { color:#fff; }
@media (max-width:700px){
  .ttx-footer--site { padding-top:56px; }
  .ttx-footer__grid { gap:38px 32px; }
  .ttx-footer__bottom-row { flex-direction:column; align-items:flex-start; }
}

/* =============================
   Knowledge Hub Teaser (isoliert) – Styles
   ============================= */
.khub-teaser { --khub-bg: var(--ttx-gray-50,#F8FAFC); --khub-border: var(--ttx-gray-200,#E5E7EB); --khub-text: var(--ttx-gray-700,#334155); --khub-accent: var(--ttx-coral,#E84A5F); --khub-accent-alt: var(--ttx-purple,#6B4DE6); --khub-radius: 18px; --khub-focus-ring: var(--khub-accent); background: linear-gradient(180deg,#FFFFFF 0%,var(--khub-bg) 100%); border-top:1px solid var(--khub-border); padding:clamp(2rem,5vw,3rem) 1.25rem; margin-top:clamp(3rem,8vw,6rem); color:var(--khub-text); position:relative; overflow:hidden; }
.khub-teaser::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 18%,rgba(107,77,230,.08),transparent 55%),radial-gradient(circle at 88% 72%,rgba(232,74,95,.08),transparent 60%); pointer-events:none; }
.khub-teaser__inner { max-width:1100px; margin:0 auto; display:grid; gap:2rem; }
.khub-teaser.is-variant-b .khub-subline--a, .khub-teaser.is-variant-b .khub-cta-text--a { display:none; }
.khub-subline--b, .khub-cta-text--b { display:none; }
.khub-teaser.is-variant-b .khub-subline--b, .khub-teaser.is-variant-b .khub-cta-text--b { display:inline; }
.khub-teaser__head { display:flex; flex-direction:column; gap:.5rem; }
.khub-title { font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.15; letter-spacing:.5px; background:linear-gradient(90deg,var(--khub-accent),var(--khub-accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; margin:0; }
.khub-subline { margin:0; font-size:1.05rem; font-weight:500; color:var(--khub-text); }
.khub-search { display:flex; flex-wrap:nowrap; gap:.75rem; background:#FFF; border:1px solid var(--khub-border); border-radius:var(--khub-radius); padding:.75rem .85rem; box-shadow:0 4px 10px -2px rgba(0,0,0,.04); }
.khub-search input[type=search] { flex:1; border:none; font:inherit; padding:.35rem .25rem; background:transparent; min-width:0; }
.khub-search input[type=search]::placeholder { color:var(--ttx-gray-500,#64748B); opacity:.85; }
.khub-search input:focus { outline:none; }
.khub-search__btn { border:1px solid var(--khub-accent); background:var(--khub-accent); color:#fff; padding:.55rem 1rem; border-radius:.65rem; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .2s, box-shadow .2s; }
.khub-search__btn:hover, .khub-search__btn:focus-visible { background:var(--khub-accent-alt); }
.khub-quicklinks { margin-top:.25rem; }
.khub-quicklinks__list { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.khub-quicklinks__list a { display:block; background:#FFF; border:1px solid var(--khub-border); border-radius:.9rem; padding:.9rem 1rem; text-decoration:none; font-weight:500; font-size:.95rem; color:var(--khub-text); position:relative; line-height:1.3; transition:border-color .2s, transform .15s; }
.khub-quicklinks__list a:hover { border-color:var(--khub-accent); transform:translateY(-2px); }
.khub-quicklinks__list a:focus-visible { outline:3px solid var(--khub-focus-ring); outline-offset:2px; }
.khub-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:.5rem; }
.khub-cta-secondary { text-decoration:none; font-size:.9rem; font-weight:600; padding:.65rem 1.1rem; border-radius:.75rem; background:linear-gradient(90deg,var(--khub-accent) 0%, var(--khub-accent-alt) 100%); color:#fff; position:relative; box-shadow:0 4px 14px -4px rgba(0,0,0,.15); transition:transform .2s, box-shadow .2s; }
.khub-cta-secondary:hover, .khub-cta-secondary:focus-visible { transform:translateY(-2px); box-shadow:0 6px 18px -6px rgba(0,0,0,.22); outline:none; }
.khub-all-link { font-size:.9rem; text-decoration:none; font-weight:500; padding:.5rem .6rem; border-radius:.5rem; color:var(--khub-accent-alt); transition:color .2s, background .2s; }
.khub-all-link:hover, .khub-all-link:focus-visible { background:rgba(0,0,0,.04); outline:none; color:var(--khub-accent); }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (min-width:640px){ .khub-teaser__inner { grid-template-columns:1fr 1fr; align-items:start; } .khub-quicklinks__list { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } .khub-teaser__head { grid-column:1 / -1; } .khub-search { grid-column:1 / -1; } }
@media (min-width:960px){ .khub-teaser__inner { grid-template-columns:1.2fr 1fr; grid-auto-rows:min-content; } .khub-quicklinks { grid-column:1; } .khub-actions { grid-column:2; justify-content:flex-start; align-self:start; } }
.khub-quicklinks__optional { display:none; }
@media (min-width:500px){ .khub-quicklinks__optional { display:list-item; } }