/* WIREFRAME — section-skins: alle Farben entfernt */

body.create-detail-page,
body.make-detail-page,
body.impact-detail-page,
body.impact-detail-page:not(.make-detail-page) {
  --skin-bg: #ffffff;
  --skin-panel: rgba(0,0,0,.04);
  --skin-panel-strong: rgba(0,0,0,.07);
  --skin-line: rgba(0,0,0,.15);
  --skin-line-soft: rgba(0,0,0,.10);
  --skin-text: #000000;
  --skin-muted: rgba(0,0,0,.60);
  --skin-quiet: rgba(0,0,0,.40);
  --skin-accent: #000000;
  --skin-search-shadow: rgba(0,0,0,.06);
  --skin-search-glow: rgba(0,0,0,.04);
  --black: #000000;
  --white: #ffffff;
  --paper: #ffffff;
  --ink: #000000;
  --mid: #000000;
  --pale: #000000;
  --accent: #000000;
  --border: 1px solid rgba(0,0,0,.13);
  --border-strong: 1.5px solid #000000;
  --hover-bg: #ffffff;
  background: #ffffff !important;
  color: #000000 !important;
}

body.create-detail-page::before,
body.create-detail-page::after,
body.make-detail-page::before,
body.make-detail-page::after,
body.impact-detail-page::before,
body.impact-detail-page::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.create-detail-page #page,
body.make-detail-page #page,
body.impact-detail-page #page {
  background: transparent !important;
}

body.create-detail-page .topline,
body.make-detail-page .topline,
body.impact-detail-page .topline,
body.create-detail-page .footer,
body.make-detail-page .footer,
body.impact-detail-page .footer {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body.create-detail-page .search-row,
body.make-detail-page .search-row,
body.impact-detail-page .search-row {
  background: transparent !important;
  border: 1.5px solid #000000 !important;
}

body.create-detail-page .global-nav,
body.make-detail-page .global-nav,
body.impact-detail-page .global-nav {
  background: #ffffff !important;
  border-color: #000000 !important;
}

body.create-detail-page .global-nav a,
body.make-detail-page .global-nav a,
body.impact-detail-page .global-nav a {
  color: #000000 !important;
  border-color: #000000 !important;
}

body.create-detail-page .global-nav a:hover,
body.create-detail-page .global-nav a[aria-current="page"],
body.make-detail-page .global-nav a:hover,
body.make-detail-page .global-nav a[aria-current="page"],
body.impact-detail-page .global-nav a:hover,
body.impact-detail-page .global-nav a[aria-current="page"] {
  background: transparent !important;
  color: #000000 !important;
  text-decoration: underline !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: #ffffff !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: #ffffff !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: #ffffff !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: #ffffff !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 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;
}