/* KHT Content System
   Globale, ruhige Grundlage fuer Unterseiten-Inhalte.
   Scope: nur Main-Content, keine Navigation, kein Header, kein Footer. */

:root {
  --kht-content-bg: var(--paper, #ffffff);
  --kht-content-text: #000000;
  --kht-content-muted: #000000;
  --kht-content-soft: #ffffff;
  --kht-content-line: #ffffff;
  --kht-content-strong-line: #000000;
  --kht-content-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kht-content-max: 1280px;
  --kht-content-pad: clamp(20px, 4vw, 56px);
  --kht-content-gap: clamp(16px, 2vw, 28px);
  --kht-content-section: clamp(40px, 7vw, 88px);
}

:is(main, #main, #content-wrap, [role="main"]) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--kht-content-max);
  margin-inline: auto;
  padding-inline: var(--kht-content-pad);
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  font-family: var(--kht-content-font);
}

:is(main, #main, #content-wrap, [role="main"]) *,
:is(main, #main, #content-wrap, [role="main"]) *::before,
:is(main, #main, #content-wrap, [role="main"]) *::after {
  box-sizing: border-box;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  background-image: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(h1, h2, h3, h4, h5, h6, p, li, td, th, label, input, textarea, select, button) {
  font-family: var(--kht-content-font);
}

/* Page Hero */
:is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
  margin: 0 0 var(--kht-content-section);
  padding-block: clamp(44px, 7vw, 96px) clamp(28px, 4vw, 56px);
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero)::before,
:is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero)::after {
  content: none !important;
  display: none !important;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.hero-eyebrow, .page-eyebrow, .kicker, .eyebrow, .section-label, .intro-label, .card-kicker, .workflow-kicker, .search-kicker, .area-kicker) {
  margin: 0 0 14px;
  color: var(--kht-content-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

/* Typografie */
:is(main, #main, #content-wrap, [role="main"]) h1 {
  max-width: 980px;
  margin: 0 0 clamp(18px, 2.6vw, 32px);
  color: var(--kht-content-text);
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(h1 em, .hero-subtitle, .page-subtitle, .subtitle, .subheadline, .create-hero-lead, .rhino-hero-lead) {
  display: block !important;
  max-width: 760px !important;
  margin-top: 14px !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(28px, 2.6vw, 34px) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(main, #main, #content-wrap, [role="main"]) h2 {
  margin: 0 0 14px;
  color: var(--kht-content-text);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) h3 {
  margin: 0 0 10px;
  color: var(--kht-content-text);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(p, li, td, blockquote, figcaption) {
  color: var(--kht-content-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.hero > p, .page-intro, .intro, .intro-text, .lead, .deck-intro) {
  max-width: 820px;
  margin: 0;
  color: var(--kht-content-text);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}

:is(main, #main, #content-wrap, [role="main"]) :where(p, ul, ol, blockquote) + :where(p, ul, ol, blockquote) {
  margin-top: 1em;
}

:is(main, #main, #content-wrap, [role="main"]) a {
  color: var(--kht-content-text);
  text-decoration-color: currentColor;
  text-underline-offset: 0.16em;
}

/* Grids */
:is(main, #main, #content-wrap, [role="main"]) :where(.grid, .area-grid, .workflow-grid, .toolbox-grid, .cards-grid, .card-grid, .detail-grid, .quick-grid, .glossary-grid, .info-grid, .view-intro-grid, .sc-grid, .triple-grid, #category-grid) {
  display: grid;
  gap: var(--kht-content-gap);
}

:is(main, #main, #content-wrap, [role="main"]) :where(.area-grid, .workflow-grid, .toolbox-grid, .cards-grid, .card-grid, .glossary-grid, .info-grid, .view-intro-grid, .sc-grid, .triple-grid, #category-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

:is(main, #main, #content-wrap, [role="main"]) :where(.detail-grid, .quick-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Cards und Detailbereiche */
:is(main, #main, #content-wrap, [role="main"]) :where(.card, .area-card, .knowledge-block, .category-card, .workflow-card, .task-card, .entry-card, .tool-card, .glossary-card, .detail-card, .triple-card, .sc-box, .result, .sr-item, .gs-result, .panel, .module, .detail-panel, .detail-block, .detail-notes, .checks, .workflow-meta, .content-section, .search-block, #panel, #detail, #detail-placeholder, #detail-content) {
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border: 1px solid var(--kht-content-line);
  border-radius: 0;
  box-shadow: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.card, .area-card, .knowledge-block, .category-card, .workflow-card, .task-card, .entry-card, .tool-card, .glossary-card, .detail-card, .triple-card, .sc-box, .result, .sr-item, .gs-result, .panel, .module, .detail-panel, .detail-block, .detail-notes, .checks, .workflow-meta, .content-section, .search-block) {
  padding: clamp(18px, 2.2vw, 28px);
}

:is(main, #main, #content-wrap, [role="main"]) :where(#panel, #detail, #detail-placeholder, #detail-content) {
  padding: clamp(18px, 2.2vw, 32px);
}

:is(main, #main, #content-wrap, [role="main"]) :where(.area-card, .knowledge-block, .category-card, .workflow-card, .task-card, .entry-card, .tool-card) {
  text-decoration: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.area-card:hover, .area-card:focus-visible, .knowledge-block:hover, .knowledge-block:focus-visible, .category-card:hover, .category-card:focus-visible, .workflow-card:hover, .workflow-card:focus-visible, .task-card:hover, .task-card:focus-visible, .entry-card:hover, .entry-card:focus-visible, .tool-card:hover, .tool-card:focus-visible) {
  background: var(--kht-content-bg);
  border-color: var(--kht-content-strong-line);
  outline: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.area-card, .knowledge-block, .category-card, .workflow-card, .task-card, .entry-card, .tool-card)::before,
:is(main, #main, #content-wrap, [role="main"]) :where(.area-card, .knowledge-block, .category-card, .workflow-card, .task-card, .entry-card, .tool-card)::after {
  content: none;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block {
  color: var(--kht-content-text) !important;
  background: var(--kht-content-bg) !important;
  border: 1px solid var(--kht-content-line) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block:hover,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block:focus-visible {
  background: var(--kht-content-bg) !important;
  border-color: var(--kht-content-strong-line) !important;
  outline: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block::before,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block {
  min-height: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: clamp(42px, 7vw, 92px) !important;
  padding: clamp(24px, 3vw, 34px) !important;
  overflow: hidden !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-header,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-footer {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-kicker,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links {
  color: var(--kht-content-muted) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-title {
  margin: 12px 0 0 !important;
  color: var(--kht-content-text) !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-text {
  max-width: 820px !important;
  margin: 0 0 10px !important;
  color: var(--kht-content-text) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 10px !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links span,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links a {
  color: inherit !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links span::before,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links a::before,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links span::after,
html body :is(main, #main, #content-wrap, [role="main"]) .knowledge-block-links a::after {
  content: none !important;
  display: none !important;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.card-title, .area-title, .entry-title, .tool-title, .dw-card-title, .knowledge-block-title) {
  color: var(--kht-content-text);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.card-text, .dw-card-text, .entry-meta, .step-detail) {
  color: var(--kht-content-text);
  font-size: 16px;
  line-height: 1.55;
}

/* Tags */
:is(main, #main, #content-wrap, [role="main"]) :where(.tag, .pill, .badge, .chip, .label, .d-tag, .d-tag-cat, .dw-tag, .task-meta span, .tag-row span, #detail-tags span, .workflow-tools span) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border: 1px solid var(--kht-content-line);
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.tag-row, .task-meta, #detail-tags, .dw-card-tags, .workflow-tools) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tabellen */
:is(main, #main, #content-wrap, [role="main"]) table {
  width: 100%;
  border-collapse: collapse;
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border-top: 1px solid var(--kht-content-strong-line);
  border-bottom: 1px solid var(--kht-content-strong-line);
}

:is(main, #main, #content-wrap, [role="main"]) :where(th, td) {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border-bottom: 1px solid var(--kht-content-line);
}

:is(main, #main, #content-wrap, [role="main"]) th {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) tr:last-child :where(th, td) {
  border-bottom: 0;
}

/* Detail- und Prozessbereiche */
:is(main, #main, #content-wrap, [role="main"]) :where(.steps, .detail-layout, .content, #search-results) {
  display: grid;
  gap: var(--kht-content-gap);
}

/* #browse-view (Rhino/Grasshopper/KeyShot Toolbox) intentionally excluded above:
   its tabs (#filter-row) and panel must sit flush against each other, see
   "TOOLBROWSER FILTERS ATTACHED TO PANEL" below. */
html body #browse-view {
  display: grid;
  gap: 0;
}

:is(main, #main, #content-wrap, [role="main"]) :where(.step) {
  display: grid;
  grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  padding-block: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--kht-content-line);
}

:is(main, #main, #content-wrap, [role="main"]) :where(.step-number) {
  color: var(--kht-content-muted);
  font-size: 14px;
  line-height: 1.4;
}

:is(main, #main, #content-wrap, [role="main"]) :where(hr, .divider) {
  height: 0;
  margin-block: var(--kht-content-section);
  border: 0;
  border-top: 1px solid var(--kht-content-line);
}

/* Forms im Inhaltsbereich */
:is(main, #main, #content-wrap, [role="main"]) :where(input, textarea, select) {
  width: 100%;
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border: 1px solid var(--kht-content-line);
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.4;
}

:is(main, #main, #content-wrap, [role="main"]) :where(button, .button, .btn, .filter-button, .tab-btn, .subcat-tab, .category-tab) {
  color: var(--kht-content-text);
  background: var(--kht-content-bg);
  border: 1px solid var(--kht-content-line);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--kht-content-font);
  letter-spacing: 0;
  text-transform: none;
}

:is(main, #main, #content-wrap, [role="main"]) :where(button:hover, .button:hover, .btn:hover, .filter-button:hover, .tab-btn:hover, .subcat-tab:hover, .category-tab:hover),
:is(main, #main, #content-wrap, [role="main"]) :where(button.active, .button.active, .btn.active, .filter-button.active, .tab-btn.active, .subcat-tab.active, .category-tab.active) {
  border-color: var(--kht-content-strong-line);
}

@media (max-width: 720px) {
  :is(main, #main, #content-wrap, [role="main"]) {
    padding-inline: 18px;
  }

  :is(main, #main, #content-wrap, [role="main"]) h1 {
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1.02;
  }

  :is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
    padding-block: 36px 28px;
  }

  :is(main, #main, #content-wrap, [role="main"]) :where(.step) {
    grid-template-columns: 1fr;
  }

  :is(main, #main, #content-wrap, [role="main"]) table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Final reset: heroes are typographic openings, not framed cards. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero)::before,
html body :is(main, #main, #content-wrap, [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero)::after {
  content: none !important;
  display: none !important;
}

/* Search wrappers should not read as cards; only the input row carries structure. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(.search-block, .tasks-search) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding-inline: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.search-block, .tasks-search)::before,
html body :is(main, #main, #content-wrap, [role="main"]) :where(.search-block, .tasks-search)::after {
  content: none !important;
  display: none !important;
}

/* Header and footer should align with the page/container edges, not add a second inset. */
html body #page > :where(.topline, #header, .footer, .global-footer) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Final header typography: one clear source of truth across all sections. */
html body #page > header.topline,
html body #page > .topline {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

html body #page > header.topline .global-nav,
html body #page > .topline .global-nav {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
}

html body #page > header.topline .global-nav a,
html body #page > header.topline .global-nav a *,
html body #page > .topline .global-nav a,
html body #page > .topline .global-nav a * {
  color: #000000 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .16em !important;
  text-rendering: geometricPrecision !important;
}

/* Unified editorial cards: Impact category cards are the visual source of truth. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(#category-grid, .area-grid, .workflow-grid, .tool-grid, .library-grid, .grid, .card-grid) {
  gap: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  min-height: clamp(300px, 28vw, 420px) !important;
  padding: clamp(26px, 3vw, 32px) !important;
  margin: -1px 0 0 -1px !important;
  color: #000000 !important;
  background: var(--paper, #ffffff) !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: background .14s ease, border-color .14s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .workflow-card, .tool-card-simple, .tool-card, .library-card) {
  aspect-ratio: auto !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card)::before {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #000000 !important;
  z-index: 1 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card) > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card-top, .category-card-bottom, .workflow-card-top, .workflow-card-bottom, .knowledge-block-header, .knowledge-block-footer) {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card-top, .area-card > span:first-child, .workflow-card-top, .knowledge-block-header)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-kicker, .area-kicker, .workflow-kicker, .knowledge-block-kicker, .tool-card-simple .label, .tool-card .label, .library-card .label) {
  display: block !important;
  margin: 0 0 14px !important;
  color: #000000 !important;
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-title, .area-title, .workflow-card h2, .knowledge-block-title, .tool-card-simple h3, .tool-card h2, .tool-card h3, .library-card h2, .library-card h3) {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: #000000 !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(16px, 9cqw, 34px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-title, .area-title, .workflow-card h2, .knowledge-block-title, .tool-card-simple h3, .tool-card h2, .tool-card h3, .library-card h2, .library-card h3)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover :where(.card-title, .area-title, h2, h3)::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible :where(.card-title, .area-title, h2, h3)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-title-slash, .area-slash, .area-title-slash) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-desc, .area-desc, .workflow-card p, .knowledge-block-text, .tool-card-simple p, .tool-card p, .library-card p, .library-card-desc) {
  display: table !important;
  position: relative !important;
  max-width: 440px !important;
  margin: 22px 0 0 !important;
  color: #000000 !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-desc, .area-desc, .workflow-card p, .knowledge-block-text, .tool-card-simple p, .tool-card p, .library-card p, .library-card-desc)::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 3px !important;
  margin-top: 18px !important;
  background: #000000 !important;
  border: 0 !important;
  transition: width .18s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover :where(.card-desc, .area-desc, p, .knowledge-block-text)::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible :where(.card-desc, .area-desc, p, .knowledge-block-text)::after {
  width: min(100%, var(--kht-card-title-width, 100%)) !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-tags, .area-links, .workflow-tools, .knowledge-block-links) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 8px !important;
  margin: clamp(28px, 4vw, 58px) 0 0 !important;
  padding: 0 !important;
  color: #000000 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(.card-tags *, .area-links *, .workflow-tools *, .knowledge-block-links *) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

@media (max-width: 720px) {
  html body :is(main, #main, #content-wrap, [role="main"]) :where(.category-card, .area-card, .workflow-card, .tool-card-simple, .tool-card, .library-card) {
    aspect-ratio: auto !important;
  }
}

/* Stronger pass for old page-local card variants. */
html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  min-height: clamp(300px, 28vw, 420px) !important;
  padding: 32px !important;
  margin: -1px 0 0 -1px !important;
  color: #000000 !important;
  background: var(--paper, #ffffff) !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  text-align: left !important;
  text-decoration: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.knowledge-block) {
  grid-column: auto !important;
  aspect-ratio: auto !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) > :where(section, div) > :is(.knowledge-block),
html body :is(main, #main, #content-wrap, [role="main"]) > :is(.knowledge-block) {
  width: calc((100% + 2px) / 3) !important;
  max-width: none !important;
}

@media (max-width: 980px) {
  html body :is(main, #main, #content-wrap, [role="main"]) > :where(section, div) > :is(.knowledge-block),
  html body :is(main, #main, #content-wrap, [role="main"]) > :is(.knowledge-block) {
    width: calc((100% + 1px) / 2) !important;
  }
}

@media (max-width: 720px) {
  html body :is(main, #main, #content-wrap, [role="main"]) > :where(section, div) > :is(.knowledge-block),
  html body :is(main, #main, #content-wrap, [role="main"]) > :is(.knowledge-block) {
    width: 100% !important;
    aspect-ratio: auto !important;
  }
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card)::before {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #000000 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover::after,
html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.card-title, .area-title, .knowledge-block-title, .workflow-card h2, .tool-card-simple h3, .tool-card h2, .tool-card h3, .library-card h2, .library-card h3) {
  display: block !important;
  max-width: 100% !important;
  position: relative !important;
  color: #000000 !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(16px, 9cqw, 34px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.card-title, .area-title, .knowledge-block-title, .workflow-card h2, .tool-card-simple h3, .tool-card h2, .tool-card h3, .library-card h2, .library-card h3)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover :is(.card-title, .area-title, .knowledge-block-title, h2, h3)::after,
html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible :is(.card-title, .area-title, .knowledge-block-title, h2, h3)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.card-desc, .area-desc, .knowledge-block-text, .workflow-card p, .tool-card-simple p, .tool-card p, .library-card p, .library-card-desc) {
  display: table !important;
  position: relative !important;
  color: #000000 !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
  text-align: left !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.card-desc, .area-desc, .knowledge-block-text, .workflow-card p, .tool-card-simple p, .tool-card p, .library-card p, .library-card-desc)::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 3px !important;
  margin-top: 18px !important;
  background: #000000 !important;
  border: 0 !important;
  transition: width .18s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):hover :is(.card-desc, .area-desc, .knowledge-block-text, p)::after,
html body :is(main, #main, #content-wrap, [role="main"]) :is(.category-card, .area-card, .knowledge-block, .workflow-card, .tool-card-simple, .tool-card, .library-card):focus-visible :is(.card-desc, .area-desc, .knowledge-block-text, p)::after {
  width: min(100%, var(--kht-card-title-width, 100%)) !important;
}

/* Filter navigation should stay open and unframed across sections. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 6px !important;
  color: #000000 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active) {
  color: #000000 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Same hover/active affordance for all filter buttons. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 0 8px !important;
  transition: color .14s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  display: block !important;
  width: 0 !important;
  height: 2px !important;
  background: #000000 !important;
  transition: width .18s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):focus-visible,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active) {
  color: #000000 !important;
  background: transparent !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):focus-visible::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active)::after {
  width: 100% !important;
}

/* MONOCHROME RESET - black text on white ground, no area colour surfaces */
:root {
  --black: #000000;
  --white: #ffffff;
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --card: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --mid: #000000;
  --pale: #000000;
  --faint: transparent;
  --ghost: transparent;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --accent: #000000;
  --accent-deep: #000000;
  --oat: #ffffff;
  --sage: #ffffff;
  --sand: #ffffff;
  --taupe: #ffffff;
  --slate: #ffffff;
  --accent-design: #000000;
  --accent-make: #000000;
  --accent-impact: #000000;
  --accent-show: #000000;
  --accent-sell: #000000;
  --accent-research: #000000;
  --line: rgba(0,0,0,.22);
  --line-2: rgba(0,0,0,.44);
  --strong: #000000;
  --border: 1px solid var(--line);
  --border-strong: 1.5px solid var(--strong);
  --hover-bg: #ffffff;
  --kht-content-bg: #ffffff;
  --kht-content-panel: #ffffff;
  --kht-content-panel-soft: #ffffff;
  --kht-content-text: #000000;
  --kht-content-muted: #000000;
  --kht-content-line: rgba(0,0,0,.22);
  --kht-content-strong-line: #000000;
  --browser-skin-bg: #ffffff;
  --browser-skin-panel: #ffffff;
  --browser-skin-panel-soft: #ffffff;
  --browser-skin-active: #ffffff;
  --browser-skin-text: #000000;
  --browser-skin-muted: #000000;
}

html,
body {
  background: #ffffff !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #000000 !important;
}

body :where(header, main, footer, nav, section, article, aside, div, form, fieldset, label, ul, ol, li, table, thead, tbody, tr, th, td, details, summary) {
  background-color: #000000 !important;
  background-image: none !important;
  color: #000000 !important;
}

body :where(a, a *, button, button *, input, textarea, select, option, h1, h2, h3, h4, h5, h6, p, span, small, strong, em, b, i, li, dt, dd, th, td, label) {
  color: #000000 !important;
}

body :where(.area-card, .category-card, .tool-card-simple, .workflow-card, .knowledge-block, .library-card, .tool-card, .result, .gs-result, .search-block, .search-row, #search-wrap, .global-nav, .footer-nav a, .quick-grid a, .template-panel, .detail-notes, .panel, #panel, #detail, #detail-content) {
  background: #ffffff !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body :where(.area-card::before, .category-card::before, .tool-card-simple::before, .workflow-card::before, .knowledge-block::before),
body :where(.area-card::after, .category-card::after, .tool-card-simple::after, .workflow-card::after, .knowledge-block::after) {
  background: #000000 !important;
  background-color: #000000 !important;
}

body :where(.global-nav a[aria-current="page"], .tab-btn.active, .filter-btn.active, .pill.active, button.active) {
  background: #ffffff !important;
  background-color: #000000 !important;
  color: #000000 !important;
}

body :where(input, textarea, select, button) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

body :where(input::placeholder, textarea::placeholder) {
  color: #000000 !important;
  opacity: 1 !important;
}

body :where(img, svg, video, canvas) {
  filter: none !important;
}

/* Global monochrome frames and selected states. */
html body :is(main, #main, #content-wrap, [role="main"]) :is(.card, .area-card, .category-card, .tool-card-simple, .workflow-card, .knowledge-block, .library-card, .tool-card, .task-card, .entry-card, .glossary-card, .detail-card, .triple-card, .sc-box, .sc-tip-box, .fw-box, .glossar-card) {
  border: 1.5px solid #000000 !important;
}

html body :where(button, a, .cat-btn, .sub-btn, .item-card, .tab-btn, .filter-btn, .pill):hover {
  background: #f2f2f2 !important;
}

html body :where(a[aria-current="page"], button.active, .active, .is-active, .selected, .is-selected, [aria-selected="true"]) {
  background: #f2f2f2 !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .14) !important;
}

html body :where(a[aria-current="page"], button.active, .active, .is-active, .selected, .is-selected, [aria-selected="true"]) :where(*) {
  color: #000000 !important;
}

html body :where(a[aria-current="page"], button.active, .active, .is-active, .selected, .is-selected, [aria-selected="true"], .active .cat-label, .active .item-name) {
  font-weight: 800 !important;
}

/* Keep button labels readable in active states. */
html body :where(button.active, button.active *, .cat-btn.active, .cat-btn.active *, .sub-btn.active, .sub-btn.active *, .item-card.active, .item-card.active *, .filter-btn.active, .filter-btn.active *, .tab-btn.active, .tab-btn.active *, .pill.active, .pill.active *) {
  color: #000000 !important;
}

/* Active main navigation keeps white type on black. */
html body #page > header.topline .global-nav a[aria-current="page"],
html body #page > .topline .global-nav a[aria-current="page"] {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

html body #page > header.topline .global-nav a[aria-current="page"] *,
html body #page > .topline .global-nav a[aria-current="page"] * {
  color: #ffffff !important;
}

/* Final card frame rule: all content tiles use black frames. */
html body :is(main, #main, #content-wrap, [role="main"]) :is(
  .card,
  .area-card,
  .category-card,
  .tool-card-simple,
  .workflow-card,
  .knowledge-block,
  .library-card,
  .tool-card,
  .task-card,
  .entry-card,
  .glossary-card,
  .detail-card,
  .triple-card,
  .sc-box,
  .sc-tip-box,
  .fw-box,
  .glossar-card,
  a[class*="card"],
  div[class*="card"]
) {
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
}

/* Final background correction: frames stay black, surfaces stay white. */
html,
body,
body #page,
body :where(header, main, footer, nav, section, article, aside, div, form, fieldset, label, ul, ol, li, table, thead, tbody, tr, th, td, details, summary) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(
  .card,
  .area-card,
  .category-card,
  .tool-card-simple,
  .workflow-card,
  .knowledge-block,
  .library-card,
  .tool-card,
  .task-card,
  .entry-card,
  .glossary-card,
  .detail-card,
  .triple-card,
  .sc-box,
  .sc-tip-box,
  .fw-box,
  .glossar-card,
  a[class*="card"],
  div[class*="card"]
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #000000 !important;
  border-color: #000000 !important;
}

html body :where(.area-card::before, .category-card::before, .tool-card-simple::before, .workflow-card::before, .knowledge-block::before),
html body :where(.area-card::after, .category-card::after, .tool-card-simple::after, .workflow-card::after, .knowledge-block::after) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(a[aria-current="page"], button.active, .active, .is-active, .selected, .is-selected, [aria-selected="true"]):not(.global-nav a) {
  background: #f2f2f2 !important;
  background-color: #f2f2f2 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

html body #page > header.topline .global-nav a[aria-current="page"],
html body #page > .topline .global-nav a[aria-current="page"] {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

html body #page > header.topline .global-nav a[aria-current="page"] *,
html body #page > .topline .global-nav a[aria-current="page"] * {
  color: #ffffff !important;
}

/* ── THEMENBROWSER HEADLINE FIX ─────────────────────────────────────────────
   Verhindert, dass lange Überschriften im Topic-Browser-Detail-Panel bei
   schmalen Viewports Buchstabe für Buchstabe umbrechen.
   word-break: break-word (aus topic-browser.js inline style) wird hier mit
   höherer Spezifität zurückgesetzt; hyphens: auto liefert sinnvolle
   Silbentrennung stattdessen. Ausschließlich Headline-Elemente im
   Themenbrowser-Detailbereich; keine globale Typografieänderung.
   ─────────────────────────────────────────────────────────────────────────── */

/* Haupttitel im Detailpanel des Themenbrowsers */
html body .kht-browser-detail-title,
html body :is(main, #main, #content-wrap, [role="main"]) .kht-browser-detail-title,
html body .kht-browser .kht-browser-detail-title {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  text-wrap: balance !important;
}

/* h2/h3 in Detail- und Panelbereichen aller Themenbrowser-Seiten */
html body :is(main, #main, #content-wrap, [role="main"])
  :where(#detail h2, #detail h3,
         #detail-content h2, #detail-content h3,
         .panel h2, .panel h3,
         .detail-panel h2, .detail-panel h3,
         .detail-block h2, .detail-block h3,
         .section-detail h2, .section-detail h3,
         .topic-detail h2, .topic-detail h3,
         #browse-view h2, #browse-view h3,
         .kht-browser h2, .kht-browser h3) {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  text-wrap: balance !important;
}

html body .kht-browser :where(.kht-browser-title, .kht-browser-tab, .kht-browser-item-title, .kht-browser-block-label) {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  text-wrap: balance !important;
}

html body .kht-browser .kht-browser-detail-title {
  font-size: clamp(26px, 2.8vw, 44px) !important;
  line-height: 1.08 !important;
}

html body .kht-browser .kht-browser-title {
  font-size: clamp(26px, 2.8vw, 44px) !important;
  line-height: 1.08 !important;
}

html body .kht-browser .kht-browser-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-size: clamp(9px, 0.72vw, 10px) !important;
  letter-spacing: .1em !important;
  line-height: 1.32 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: balance !important;
  overflow: hidden !important;
}

html body .kht-browser .kht-browser-tab span {
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: balance !important;
}

@media (max-width: 900px) {
  html body .kht-browser .kht-browser-detail-title {
    font-size: clamp(24px, 5.5vw, 36px) !important;
  }

  html body .kht-browser .kht-browser-title {
    font-size: clamp(24px, 5.5vw, 36px) !important;
  }
}

@media (max-width: 520px) {
  html body .kht-browser .kht-browser-tabs {
    grid-template-columns: 1fr !important;
  }

  html body .kht-browser .kht-browser-detail {
    padding-inline: 16px !important;
  }

  html body .kht-browser .kht-browser-card {
    padding-inline: 18px !important;
  }

  html body .kht-browser .kht-browser-detail-title {
    font-size: clamp(22px, 7vw, 30px) !important;
    letter-spacing: -.01em !important;
  }

  html body .kht-browser .kht-browser-title {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
}

/* ── GLOBAL PAGE ALIGNMENT + FIXED THEMEBROWSER HEIGHT ───────────────
   One layout source for main pages and subpages:
   - same page width
   - same hero/search/browser vertical rhythm
   - fixed browser panel height with internal scrolling
   ─────────────────────────────────────────────────────────────────── */

:root {
  --kht-page-width: min(var(--content-max, 1320px), calc(100% - var(--gutter, clamp(20px, 5vw, 72px)) - var(--gutter, clamp(20px, 5vw, 72px))));
  --kht-tool-width: var(--kht-page-width);
  --kht-hero-padding-top: clamp(64px, 7vw, 92px);
  --kht-hero-padding-bottom: clamp(42px, 5vw, 64px);
  --kht-browser-height: clamp(720px, calc(100vh - 180px), 960px);
  --kht-browser-head-height: 112px;
  --kht-browser-body-height: calc(var(--kht-browser-height) - var(--kht-browser-head-height));
  --kht-selected-bg: #ffffff;
  --kht-subtle-bg: #fafafa;
  --kht-soft-line: rgba(0, 0, 0, .16);
}

html body #page {
  width: var(--kht-page-width) !important;
  max-width: var(--content-max, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body :where(.site-main, .area-main, #content-wrap, #main, main[role="main"]) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body :is(.site-main, .area-main, #content-wrap, #main, main[role="main"]) > :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: var(--kht-hero-padding-top) !important;
  padding-bottom: var(--kht-hero-padding-bottom) !important;
}

html body :is(.site-main, .area-main, #content-wrap, #main, main[role="main"]) > :where(.search-block, .page-actions) {
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: clamp(36px, 5vw, 56px) !important;
}

html body :is(.site-main, .area-main, #content-wrap, #main, main[role="main"]) > .page-actions .search-block,
html body :is(.site-main, .area-main, #content-wrap, #main, main[role="main"]) > .search-block {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body :is(.site-main, .area-main, #content-wrap, #main, main[role="main"]) > :where(#browse-view, .kht-browser) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

html body .kht-browser .kht-browser-shell,
html body .kht-browser-shell,
html body #browse-view.kht-browser #panel,
html body #browse-view #panel.kht-browser-shell {
  display: flex !important;
  flex-direction: column !important;
  height: var(--kht-browser-height) !important;
  min-height: var(--kht-browser-height) !important;
  max-height: var(--kht-browser-height) !important;
  overflow: hidden !important;
  border-color: #000000 !important;
  background: var(--paper, #ffffff) !important;
}

html body .kht-browser .kht-browser-head,
html body .kht-browser-head,
html body #browse-view.kht-browser #panel-header,
html body #browse-view #panel-header.kht-browser-head {
  flex: 0 0 auto !important;
  min-height: var(--kht-browser-head-height) !important;
  padding-top: 24px !important;
  padding-bottom: 22px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--kht-soft-line) !important;
}

html body .kht-browser .kht-browser-tabs,
html body #browse-view.kht-browser :where(.kht-browser-tabs, #filter-row, #cat-grid) {
  background: var(--kht-subtle-bg) !important;
}

html body .kht-browser .kht-browser-tab:hover,
html body #browse-view.kht-browser :where(.kht-browser-tab, .cat-btn):hover {
  background: var(--paper, #ffffff) !important;
}

html body .kht-browser .kht-browser-tab.is-active,
html body .kht-browser .kht-browser-tab.active,
html body #browse-view.kht-browser :where(.kht-browser-tab.is-active, .kht-browser-tab.active, .cat-btn.active) {
  background: var(--kht-selected-bg) !important;
  color: #000000 !important;
}

html body .kht-browser .kht-browser-body,
html body .kht-browser-body,
html body #browse-view.kht-browser #panel-body,
html body #browse-view #panel-body.tool-browser-body {
  display: grid !important;
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body .kht-browser .kht-browser-list {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-right-color: var(--kht-soft-line) !important;
}

html body .kht-browser .kht-browser-items,
html body .kht-browser .kht-browser-detail,
html body #browse-view.kht-browser :where(#sub-list, #items-list, #topic-list, #cards-list, #detail),
html body #browse-view :where(.tool-browser-sublist, .kht-browser-items, .kht-browser-detail) {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html body .kht-browser .kht-browser-list > .kht-browser-items {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 40px !important;
  scroll-padding-block: 18px !important;
}

html body .kht-browser .kht-browser-card,
html body #browse-view.kht-browser #detail-content {
  max-height: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .kht-browser .kht-browser-item:hover,
html body #browse-view.kht-browser :where(.kht-browser-item, .item-card, .node-btn, .subcat-btn):hover {
  background: var(--paper, #ffffff) !important;
}

html body .kht-browser .kht-browser-item.is-active,
html body .kht-browser .kht-browser-item.active,
html body #browse-view.kht-browser :where(.kht-browser-item.is-active, .kht-browser-item.active, .item-card.active, .node-btn.active, .subcat-btn.active) {
  background: var(--kht-selected-bg) !important;
  box-shadow: inset 4px 0 0 #000000 !important;
}

@media (max-width: 980px) {
  :root {
    --kht-browser-height: auto;
    --kht-browser-body-height: auto;
  }

  /* Drop out of flex/grid entirely at this width, not just switch to
     height:auto. sub-list/items-list/detail all use non-visible overflow,
     and a flex/grid item with non-visible overflow has an automatic
     minimum size of 0 regardless of min-height — so with height:auto the
     whole shell/body collapsed to ~0px in every engine (reproduced
     outside Safari too), hiding the tool-browser content entirely. Plain
     block stacking sizes to content as expected. */
  html body .kht-browser .kht-browser-shell,
  html body .kht-browser-shell,
  html body #browse-view.kht-browser #panel,
  html body #browse-view #panel.kht-browser-shell,
  html body .kht-browser .kht-browser-body,
  html body .kht-browser-body,
  html body #browse-view.kht-browser #panel-body,
  html body #browse-view #panel-body.tool-browser-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* .kht-browser-list is itself display:flex (column) unconditionally, and
     .kht-browser-items inside it is a flex:1 1 0 child with non-visible
     overflow — same automatic-minimum-size collapse one level deeper, so
     the subcategory list clipped to ~40px instead of showing its items.
     Drop it out of flex here too. Written as explicit compound selectors
     (not :where(), which has zero specificity) so this reliably outweighs
     the unconditional ".kht-browser .kht-browser-list" etc. rules above —
     wrapping these in :where() previously lost that specificity fight and
     silently did nothing. */
  html body .kht-browser .kht-browser-list,
  html body .kht-browser .kht-browser-items,
  html body .kht-browser .kht-browser-detail,
  html body #browse-view.kht-browser #sub-list,
  html body #browse-view.kht-browser #items-list,
  html body #browse-view.kht-browser #topic-list,
  html body #browse-view.kht-browser #cards-list,
  html body #browse-view.kht-browser #detail,
  html body #browse-view .tool-browser-sublist,
  html body #browse-view .kht-browser-items,
  html body #browse-view .kht-browser-detail {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #browse-view.kht-browser :where(#items-list, .kht-browser-items) {
    max-height: 340px !important;
  }
}

/* Soft hover shadow for content tiles. */
html body :is(main, #main, #content-wrap, [role="main"]) :is(
  .card,
  .area-card,
  .category-card,
  .tool-card-simple,
  .workflow-card,
  .knowledge-block,
  .library-card,
  .tool-card,
  .task-card,
  .entry-card,
  .glossary-card,
  .detail-card,
  .triple-card,
  .sc-box,
  .sc-tip-box,
  .fw-box,
  .glossar-card,
  a[class*="card"],
  div[class*="card"]
):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :is(
  .card,
  .area-card,
  .category-card,
  .tool-card-simple,
  .workflow-card,
  .knowledge-block,
  .library-card,
  .tool-card,
  .task-card,
  .entry-card,
  .glossary-card,
  .detail-card,
  .triple-card,
  .sc-box,
  .sc-tip-box,
  .fw-box,
  .glossar-card,
  a[class*="card"],
  div[class*="card"]
):focus-visible {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
  outline: none !important;
}

/* ── GLOBAL WHITE BACKGROUND OVERRIDE ─────────────────────────────
   Pages use a clear white ground. Active states stay monochrome and
   content cards remain white for a calm, consistent wireframe surface.
   ─────────────────────────────────────────────────────────────── */
:root {
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --kht-selected-bg: #ffffff;
}

html,
body,
html body,
html body #page {
  background: var(--paper, #ffffff) !important;
  background-color: var(--paper, #ffffff) !important;
}

html body :where(.site-main, .area-main, main, #main, #content-wrap) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(.card, .area-card, .category-card, .tool-card-simple, .workflow-card, .knowledge-block, .library-card, .tool-card, .task-card, .entry-card, .glossary-card, .detail-card, .triple-card, .sc-box, .sc-tip-box, .fw-box, .glossar-card, .search-block, .search-row, #detail-content, .kht-browser-card) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Themebrowser editorial detail mode.
   Keeps overview cards boxed, but lets selected detail articles read like
   magazine pages instead of nested form cards. */
html body :is(main, #main, #content-wrap, [role="main"]) .kht-browser .kht-browser-card,
html body :is(main, #main, #content-wrap, [role="main"]) #browse-view.kht-browser #detail-content {
  max-width: 760px !important;
  border: 0 !important;
  padding: clamp(18px, 3.2vw, 44px) clamp(12px, 2.5vw, 34px) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .kht-browser .kht-browser-card:hover,
html body :is(main, #main, #content-wrap, [role="main"]) .kht-browser .kht-browser-card:focus-visible,
html body :is(main, #main, #content-wrap, [role="main"]) #browse-view.kht-browser #detail-content:hover,
html body :is(main, #main, #content-wrap, [role="main"]) #browse-view.kht-browser #detail-content:focus-visible {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .kht-browser :where(.detail-grid, .tool-detail-grid, .kht-browser-blocks) {
  gap: clamp(20px, 3vw, 34px) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) .kht-browser :where(.detail-grid section, .tool-detail-grid section, .detail-notes, .related-section, .kht-browser-block) {
  min-height: 0 !important;
  padding: clamp(18px, 2vw, 26px) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, .24) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, LATE OVERRIDE ───────────
   Buttons, tabs and navigation controls use Open Sans for clearer
   reading; editorial text and display headlines keep their own voice.
   ─────────────────────────────────────────────────────────────── */
:root {
  --font-ui: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .button,
  .btn,
  .topline nav a,
  .global-nav a,
  .footer-nav a,
  .section-nav-link,
  .tool-secondary-nav a,
  .ia-breadcrumb a,
  .breadcrumb a,
  .kht-browser-tab,
  .kht-browser-tab *,
  .kht-browser-item,
  .kht-browser-item *,
  .cat-btn,
  .cat-btn *,
  .sub-btn,
  .sub-btn *,
  .tab-btn,
  .filter-btn,
  .pw-cat,
  .category-tab,
  .subcat-tab,
  .filter-chip
) {
  font-family: var(--font-ui) !important;
}

html body :where(
  button,
  [role="button"],
  .button,
  .btn,
  .topline nav a,
  .global-nav a,
  .footer-nav a,
  .section-nav-link,
  .tool-secondary-nav a,
  .kht-browser-tab,
  .cat-btn,
  .sub-btn,
  .tab-btn,
  .filter-btn,
  .pw-cat,
  .category-tab,
  .subcat-tab,
  .filter-chip
) {
  font-weight: 700 !important;
  letter-spacing: .045em !important;
}

html body :where(
  .kht-browser-tab-count,
  .kht-browser-item-summary,
  .kht-browser-item-meta,
  .cat-count,
  .item-sub,
  .sec-sub
) {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, SPECIFIC OVERRIDE ───────
   Overrides older mono !important rules on navigation, tabs and
   themebrowser controls.
   ─────────────────────────────────────────────────────────────── */
html body .topline nav a,
html body .global-nav a,
html body .footer-nav a,
html body .section-nav .section-nav-link,
html body .tool-secondary-nav a,
html body .tool-mode-tabs a,
html body .tool-tab-row a,
html body .ia-breadcrumb a,
html body .breadcrumb a,
html body .kht-browser-tabs .kht-browser-tab,
html body .kht-browser-tabs .kht-browser-tab span,
html body .kht-browser-items .kht-browser-item,
html body .kht-browser-items .kht-browser-item *,
html body #cat-grid .cat-btn,
html body #cat-grid .cat-btn *,
html body #sub-list .sub-btn,
html body #sub-list .sub-btn *,
html body #items-list .item-card,
html body #items-list .item-card *,
html body .filter-row button,
html body .filter-row button *,
html body #pw-cat-row .pw-cat,
html body #proc-filter-row .pw-cat {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

html body .topline nav a,
html body .global-nav a,
html body .footer-nav a,
html body .section-nav .section-nav-link,
html body .tool-secondary-nav a,
html body .tool-mode-tabs a,
html body .tool-tab-row a,
html body .kht-browser-tabs .kht-browser-tab,
html body #cat-grid .cat-btn,
html body #sub-list .sub-btn,
html body #items-list .item-card,
html body .filter-row button,
html body #pw-cat-row .pw-cat,
html body #proc-filter-row .pw-cat {
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body .kht-browser-tabs .kht-browser-tab small,
html body .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser-items .kht-browser-item-summary,
html body .kht-browser-items .kht-browser-item-meta,
html body #items-list .item-sub,
html body #cat-grid .cat-count,
html body #sub-list .sec-sub {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, FILTER ROW FIX ────────── */
html body #filter-row .cat-btn,
html body #filter-row .cat-btn *,
html body #filter-row .kht-browser-tab,
html body #filter-row .kht-browser-tab *,
html body header.topline .global-nav a,
html body header.topline .global-nav a *,
html body .topline .global-nav a,
html body .topline .global-nav a * {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body #filter-row .cat-count,
html body #filter-row .sec-sub,
html body #filter-row .kht-browser-tab-count {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, FINAL SPECIFIC FIX ────── */
html body #page > header.topline .global-nav a,
html body #page > header.topline .global-nav a *,
html body #page > .topline .global-nav a,
html body #page > .topline .global-nav a *,
body.tool-rhino #filter-row .cat-btn,
body.tool-rhino #filter-row .cat-btn *,
body.tool-grasshopper #filter-row .cat-btn,
body.tool-grasshopper #filter-row .cat-btn *,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab * {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

body.tool-rhino #filter-row .cat-btn .cat-count,
body.tool-rhino #filter-row .cat-btn .sec-sub,
body.tool-grasshopper #filter-row .cat-btn .cat-count,
body.tool-grasshopper #filter-row .cat-btn .sec-sub,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab small,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}


/* ── OPEN SANS MAIN TYPOGRAPHY — FINE READING WEIGHTS ──────────
   Main typography now uses Open Sans. Descriptive copy and dense
   browser/card summaries use lighter weights for better rhythm.
   ─────────────────────────────────────────────────────────────── */
:root {
  --font-display: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-fine: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kht-content-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body {
  font-family: var(--font-body, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400;
}

html body :where(h1, h2, h3, h4, h5, h6, .hero-title, .page-title, .tool-title, .kht-browser-title) {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

html body :where(
  p,
  li,
  td,
  th,
  label,
  .hero p,
  .page-hero p,
  .tool-hero p,
  .page-intro,
  .hero-copy,
  .lead,
  .intro,
  .card p,
  .area-card p,
  .category-card p,
  .tool-card p,
  .workflow-card p,
  .knowledge-block p,
  .kht-browser-desc,
  .kht-browser-desc p,
  .kht-browser-card p,
  .kht-browser-block p,
  .detail-card p,
  .detail-notes p,
  .tool-detail-copy,
  .tool-detail-copy p
) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html body :where(
  .hero-subtitle,
  .page-subtitle,
  .tool-subtitle,
  .kht-browser-subtitle,
  .kht-browser-card > p:first-of-type,
  .detail-lead,
  .tool-detail-lead
) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 300 !important;
  letter-spacing: -.01em !important;
}

html body :where(
  .kht-browser-tab small,
  .kht-browser-tab-count,
  .cat-count,
  .sec-sub,
  .item-sub,
  .kht-browser-item-summary,
  .kht-browser-item-meta,
  .entry-card small,
  .card-meta,
  .card-subtitle,
  .tool-card-subtitle
) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
}


/* ── OPEN SANS FINE TEXT — SPECIFIC DENSE-SPACE OVERRIDE ─────── */
html body .kht-browser-items .kht-browser-item-summary,
html body .kht-browser-items .kht-browser-item-meta,
html body .kht-browser-tabs .kht-browser-tab small,
html body .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser-tabs .kht-browser-tab-count,
html body #filter-row .cat-btn .cat-count,
html body #filter-row .cat-btn .sec-sub,
html body #filter-row .cat-btn .kht-browser-tab-count,
body.tool-rhino #filter-row .cat-btn .cat-count,
body.tool-rhino #filter-row .cat-btn .sec-sub,
body.tool-grasshopper #filter-row .cat-btn .cat-count,
body.tool-grasshopper #filter-row .cat-btn .sec-sub,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab small,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body #items-list .item-card .item-sub,
html body #items-list .item-card small,
html body .area-card p,
html body .category-card p,
html body .tool-card p,
html body .workflow-card p {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
}

/* GLOBAL HERO TITLES - STRONG OPEN SANS
   Einheitliche Hero-Titel auf allen Haupt- und Unterseiten. */
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) h1,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) h1 .hero-title-slash,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .hero-title,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .page-title,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .tool-title {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.9 !important;
}

html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) h1 em,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .hero-subtitle,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .page-subtitle,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .subtitle,
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) .subheadline {
  font-family: var(--font-body, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
}

/* GLOBAL CARD TITLES - STRONG OPEN SANS
   Einheitliche Kachel-Titel fuer Startseite, Bereichsseiten und Moduluebersichten. */
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(
  .area-card,
  .category-card,
  .knowledge-block,
  .workflow-card,
  .tool-card,
  .tool-card-simple,
  .library-card,
  .task-card,
  .entry-card,
  .glossary-card,
  .detail-card,
  .triple-card,
  .sc-box,
  .fw-box,
  .glossar-card
) :where(.area-title, .card-title, .knowledge-block-title, .workflow-card-title, .tool-card-title, .library-card-title, .task-card-title, .entry-title, h2, h3),
html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(.area-title-slash, .card-title-slash, .area-slash, .area-title .area-slash) {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.95 !important;
}

html body :is(main, #main, .site-main, .area-main, #content-wrap, main[role="main"], [role="main"]) :where(
  .area-card,
  .category-card,
  .knowledge-block,
  .workflow-card,
  .tool-card,
  .tool-card-simple,
  .library-card,
  .task-card,
  .entry-card,
  .glossary-card,
  .detail-card,
  .triple-card,
  .sc-box,
  .fw-box,
  .glossar-card
) :where(.area-desc, .card-desc, .knowledge-block-text, .workflow-card-text, .tool-card-subtitle, p) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* GLOBAL THEMEBROWSER TITLES - STRONG OPEN SANS
   Kategorie- und Headline-Titel in allen Browservarianten kraeftiger setzen.
   .kht-browser-detail-title (Unterpunkt-Headline im Detailpanel) gehoert
   typografisch dazu — gleiche Schrift/Groesse/Gewicht wie die Themenbrowser-
   Headline, sonst wirkt der Detailtitel duenner und in anderer Schrift. */
html body :where(.kht-browser, #browse-view, #panel, .tasks-layout) :where(
  .kht-browser-title,
  .kht-browser-detail-title,
  .kht-browser-head h2,
  .kht-browser-header h2,
  .kht-browser-category-title,
  .browser-title,
  #panel-title,
  #ph-cat,
  #ph-name,
  #cat-title,
  #category-title
) {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.95 !important;
  text-transform: none !important;
}

html body :where(.kht-browser, #browse-view, #panel, .tasks-layout) :where(
  .kht-browser-title,
  .kht-browser-detail-title,
  .kht-browser-head h2,
  .kht-browser-header h2,
  .kht-browser-category-title,
  .browser-title,
  #panel-title,
  #ph-cat,
  #ph-name,
  #cat-title,
  #category-title
) .hero-title-slash {
  font-weight: inherit !important;
  font-variation-settings: inherit !important;
}

/* THEMEBROWSER TITLE FORCE OVERRIDE - GENERATED BROWSERS
   Muss spaete Runtime-Styles aus topic-browser.js und alte Toolbrowser ueberschreiben. */
html body .kht-browser .kht-browser-shell .kht-browser-head .kht-browser-title,
html body .kht-browser .kht-browser-head h2.kht-browser-title,
html body section.kht-browser div.kht-browser-shell div.kht-browser-head h2.kht-browser-title,
html body .kht-browser .kht-browser-detail .kht-browser-detail-title,
html body .kht-browser .kht-browser-card .kht-browser-detail-title,
html body section.kht-browser article.kht-browser-detail h3.kht-browser-detail-title,
html body #browse-view #panel-header.kht-browser-head #ph-cat,
html body #browse-view #panel-header.kht-browser-head #ph-name,
html body #browse-view #panel-header #ph-cat,
html body #browse-view #panel-header #ph-name,
html body #panel #panel-header #panel-title,
html body #panel .kht-browser-head #panel-title,
html body .tasks-layout #panel-title,
html body .tasks-layout .kht-browser-title {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.95 !important;
  text-transform: none !important;
}

/* THEMEBROWSER TAB BARS - DARK TEST
   Kategorie-Buttonleisten: helle Typografie auf schwarzem Grund. */
html body section.kht-browser > .kht-browser-tabs,
html body .kht-browser > .kht-browser-tabs,
html body .kht-browser .kht-browser-tabs,
html body #browse-view.kht-browser #filter-row,
html body #browse-view.kht-browser #cat-grid,
html body #filter-row:has(.cat-btn),
html body #cat-grid:has(.cat-btn) {
  background: #000000 !important;
  border-top: 1px solid #000000 !important;
  border-left: 1px solid #000000 !important;
  border-bottom: 0 !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab,
html body .kht-browser .kht-browser-tabs .kht-browser-tab,
html body #browse-view.kht-browser #filter-row .cat-btn,
html body #browse-view.kht-browser #cat-grid .cat-btn,
html body #filter-row:has(.cat-btn) .cat-btn,
html body #cat-grid:has(.cat-btn) .cat-btn {
  background: #000000 !important;
  color: #d8d8d8 !important;
  border-color: #2f2f2f !important;
  border-right: 1px solid #2f2f2f !important;
  border-bottom: 1px solid #2f2f2f !important;
  box-shadow: none !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab *,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab *,
html body .kht-browser .kht-browser-tabs .kht-browser-tab *,
html body #browse-view.kht-browser #filter-row .cat-btn *,
html body #browse-view.kht-browser #cat-grid .cat-btn *,
html body #filter-row:has(.cat-btn) .cat-btn *,
html body #cat-grid:has(.cat-btn) .cat-btn * {
  color: inherit !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body #browse-view.kht-browser #filter-row .cat-btn .cat-count,
html body #browse-view.kht-browser #cat-grid .cat-btn .cat-count,
html body #filter-row:has(.cat-btn) .cat-btn .cat-count,
html body #cat-grid:has(.cat-btn) .cat-btn .cat-count {
  color: #8f8f8f !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab:hover,
html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab:focus-visible,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab:hover,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab:focus-visible,
html body .kht-browser .kht-browser-tabs .kht-browser-tab:hover,
html body .kht-browser .kht-browser-tabs .kht-browser-tab:focus-visible,
html body #browse-view.kht-browser #filter-row .cat-btn:hover,
html body #browse-view.kht-browser #filter-row .cat-btn:focus-visible,
html body #browse-view.kht-browser #cat-grid .cat-btn:hover,
html body #browse-view.kht-browser #cat-grid .cat-btn:focus-visible,
html body #filter-row:has(.cat-btn) .cat-btn:hover,
html body #filter-row:has(.cat-btn) .cat-btn:focus-visible,
html body #cat-grid:has(.cat-btn) .cat-btn:hover,
html body #cat-grid:has(.cat-btn) .cat-btn:focus-visible {
  background: #111111 !important;
  color: #ffffff !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab.is-active,
html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab.active,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab.is-active,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab.active,
html body .kht-browser .kht-browser-tabs .kht-browser-tab.is-active,
html body .kht-browser .kht-browser-tabs .kht-browser-tab.active,
html body #browse-view.kht-browser #filter-row .cat-btn.active,
html body #browse-view.kht-browser #cat-grid .cat-btn.active,
html body #filter-row:has(.cat-btn) .cat-btn.active,
html body #cat-grid:has(.cat-btn) .cat-btn.active {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: inset 0 -4px 0 #ffffff !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab.is-active .kht-browser-tab-count,
html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab.active .kht-browser-tab-count,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab.is-active .kht-browser-tab-count,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab.active .kht-browser-tab-count,
html body .kht-browser .kht-browser-tabs .kht-browser-tab.is-active .kht-browser-tab-count,
html body .kht-browser .kht-browser-tabs .kht-browser-tab.active .kht-browser-tab-count,
html body #browse-view.kht-browser #filter-row .cat-btn.active .cat-count,
html body #browse-view.kht-browser #cat-grid .cat-btn.active .cat-count,
html body #filter-row:has(.cat-btn) .cat-btn.active .cat-count,
html body #cat-grid:has(.cat-btn) .cat-btn.active .cat-count {
  color: #d8d8d8 !important;
}

/* THEMEBROWSER TABS ATTACHED DARK REFINEMENT
   Tabs und Browser als geschlossener Block, bessere Lesbarkeit auf Schwarz. */
html body section.kht-browser > .kht-browser-tabs,
html body .kht-browser > .kht-browser-tabs,
html body .kht-browser .kht-browser-tabs {
  margin-bottom: 0 !important;
}

html body section.kht-browser > .kht-browser-tabs + .kht-browser-shell,
html body .kht-browser > .kht-browser-tabs + .kht-browser-shell,
html body .kht-browser .kht-browser-tabs + .kht-browser-shell {
  border-top: 0 !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab,
html body .kht-browser .kht-browser-tabs .kht-browser-tab,
html body #browse-view.kht-browser #filter-row .cat-btn,
html body #browse-view.kht-browser #cat-grid .cat-btn,
html body #filter-row:has(.cat-btn) .cat-btn,
html body #cat-grid:has(.cat-btn) .cat-btn {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body #browse-view.kht-browser #filter-row .cat-btn .cat-count,
html body #browse-view.kht-browser #cat-grid .cat-btn .cat-count,
html body #filter-row:has(.cat-btn) .cat-btn .cat-count,
html body #cat-grid:has(.cat-btn) .cat-btn .cat-count {
  color: #cfcfcf !important;
  font-weight: 600 !important;
  font-variation-settings: "wght" 600 !important;
}

/* THEMEBROWSER TAB TYPO SIZE REFINEMENT
   Etwas groessere Tab-Typografie, aber mit Luft fuer lange Kategorien. */
html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab,
html body .kht-browser .kht-browser-tabs .kht-browser-tab,
html body #browse-view.kht-browser #filter-row .cat-btn,
html body #browse-view.kht-browser #cat-grid .cat-btn,
html body #filter-row:has(.cat-btn) .cat-btn,
html body #cat-grid:has(.cat-btn) .cat-btn {
  min-height: 64px !important;
  padding: 13px 14px 12px !important;
  font-size: clamp(10px, 0.78vw, 11px) !important;
  letter-spacing: .085em !important;
  line-height: 1.24 !important;
  white-space: normal !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab > span:first-child,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab > span:first-child,
html body .kht-browser .kht-browser-tabs .kht-browser-tab > span:first-child,
html body #browse-view.kht-browser #filter-row .cat-btn .cat-label,
html body #browse-view.kht-browser #cat-grid .cat-btn .cat-label,
html body #filter-row:has(.cat-btn) .cat-btn .cat-label,
html body #cat-grid:has(.cat-btn) .cat-btn .cat-label {
  max-width: calc(100% - 4px) !important;
  margin-inline: auto !important;
}

html body section.kht-browser > .kht-browser-tabs > .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser > .kht-browser-tabs > .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body #browse-view.kht-browser #filter-row .cat-btn .cat-count,
html body #browse-view.kht-browser #cat-grid .cat-btn .cat-count,
html body #filter-row:has(.cat-btn) .cat-btn .cat-count,
html body #cat-grid:has(.cat-btn) .cat-btn .cat-count {
  margin-top: 4px !important;
  font-size: clamp(8px, 0.62vw, 9px) !important;
  letter-spacing: .09em !important;
  line-height: 1.18 !important;
}

/* TOOLBROWSER FILTERS ATTACHED TO PANEL
   Rhino, Grasshopper und KeyShot: Kategorieleisten direkt an den Browserrahmen. */
html body #browse-view.kht-browser > #filter-row.kht-browser-tabs,
html body #browse-view.kht-browser > #cat-grid.kht-browser-tabs,
html body.tool-rhino #browse-view > #filter-row,
html body.tool-grasshopper #browse-view > #filter-row,
html body.tool-keyshot .kht-browser > .kht-browser-tabs {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body #browse-view.kht-browser > #filter-row.kht-browser-tabs + #panel,
html body #browse-view.kht-browser > #cat-grid.kht-browser-tabs + #panel,
html body.tool-rhino #browse-view > #filter-row + #panel,
html body.tool-grasshopper #browse-view > #filter-row + #panel,
html body.tool-keyshot .kht-browser > .kht-browser-tabs + .kht-browser-shell {
  margin-top: 0 !important;
  border-top: 0 !important;
}

html body #browse-view.kht-browser > #filter-row.kht-browser-tabs,
html body #browse-view.kht-browser > #cat-grid.kht-browser-tabs,
html body.tool-rhino #browse-view > #filter-row,
html body.tool-grasshopper #browse-view > #filter-row,
html body.tool-keyshot .kht-browser > .kht-browser-tabs {
  border-bottom: 0 !important;
}

/* THEMEBROWSER LEFT COLUMN TITLES - STRONGER
   Linke Themenlisten sollen schneller scanbar sein, ohne die Beschreibungstexte zu beschweren. */
html body .kht-browser .kht-browser-list .kht-browser-item-title,
html body .kht-browser .kht-browser-items .kht-browser-item-title,
html body .kht-browser button.kht-browser-item .kht-browser-item-title,
html body #browse-view.kht-browser .item-title,
html body #browse-view.kht-browser .cmd-title,
html body #browse-view.kht-browser .node-title,
html body #browse-view.kht-browser .topic-title {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.01em !important;
}


/* ── TOOL SECONDARY NAV — SHARED BASE (rhino/grasshopper/keyshot family) ──
   Structural/visual rules common to all 9 tool-secondary-nav instances.
   Per-page grid-template-columns / margin / responsive breakpoint stay
   inline (they vary with each page's item count). ─────────────────── */
.tool-secondary-nav {
  display: grid;
  border-top: var(--border-strong);
  border-left: var(--border-strong);
}
.tool-secondary-nav a {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-right: var(--border-strong);
  border-bottom: var(--border-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
}
.tool-secondary-nav a:hover { background: rgba(0, 0, 0, .08); }
.tool-secondary-nav a[aria-current="page"] {
  background: rgba(0, 0, 0, .06);
  box-shadow: inset 0 -3px 0 var(--black);
}

/* ── STRONGER HOVER/ACTIVE OVERLAY — SITE-WIDE ─────────────────
   Several nav/interactive elements relied on --faint (transparent)
   or --surface (#ffffff) for hover feedback, which is invisible on
   the white page background. Give them a real, visible overlay. */
html body :where(.global-nav a:hover, .global-nav a:focus-visible) {
  background: rgba(0, 0, 0, .08) !important;
  color: var(--black) !important;
}
html body :where(.footer-nav a:hover, .footer-nav a:focus-visible) {
  background: rgba(0, 0, 0, .08) !important;
}
html body :where(.tab-btn:hover, .filter-btn:hover, .pill:hover) {
  background: rgba(0, 0, 0, .06) !important;
}
html body :where(.result:hover, .gs-result:hover, .sr-item:hover, .list-row:hover) {
  background: rgba(0, 0, 0, .05) !important;
}
html body :where(#clear-search:hover, #global-search-clear:hover, #clear-search-btn:hover, .search-row button:hover) {
  background: rgba(0, 0, 0, .08) !important;
}
html body :where(.section-nav-link:hover, .section-nav-link:focus-visible) {
  background: rgba(0, 0, 0, .06) !important;
}
html body :where(.ia-breadcrumb a:hover, .ia-breadcrumb a:focus-visible) {
  background: rgba(0, 0, 0, .06) !important;
}

/* ── TOPIC LIST DESCRIPTIONS — MAX 3 LINES ─────────────────────
   Left-column item summaries were unclamped and could run to 5-6
   lines, burying the title. Clamp to 3 lines everywhere. */
html body :where(.kht-browser-item-summary, .item-sub, .sec-sub, .cmd-sub, .node-sub) {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}