/* ============================================================
   KNOW/HOW/TO — Dark shell
   Shared structural + interaction CSS for the pages rebuilt from
   design_handoff_knowhowto/prototypes/*.dc.html. Values and tokens
   are read directly off the prototypes; only var(--*) design-system
   tokens carry colour, type, spacing and motion. Area accent comes
   from data-area on an ancestor (see tokens/colors.css).
   ============================================================ */

/* ── Page field ─────────────────────────────────────────────── */
/* Der Grund gehört auf html: sonst malt die Leinwand beim Überscrollen
   das helle --surface-page aus tokens/base.css unter die dunkle Seite. */
html:has(.kht-dark){ background:var(--green-950); }

.kht-dark{
  position:relative;
  width:100%;
  /* clip statt hidden: hidden macht den Wrapper zum Scrollcontainer und
     nimmt dem Kopf sein position:sticky. */
  overflow-x:clip;
  background-color:var(--green-950);
  background-attachment:fixed;
  color:var(--text-inverse);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.kht-dark--5,
.kht-dark.kht-dark--5{
  background-image:
    radial-gradient(42% 28% at 8% 4%, rgba(86,97,80,.55) 0%, rgba(86,97,80,0) 62%),
    radial-gradient(48% 32% at 92% 20%, rgba(61,71,54,.7) 0%, rgba(61,71,54,0) 64%),
    radial-gradient(54% 36% at 10% 54%, rgba(86,97,80,.4) 0%, rgba(86,97,80,0) 62%),
    radial-gradient(62% 36% at 98% 74%, rgba(43,51,37,.9) 0%, rgba(43,51,37,0) 64%),
    radial-gradient(72% 42% at 28% 98%, rgba(86,97,80,.35) 0%, rgba(86,97,80,0) 62%);
}
.kht-dark--4,
.kht-dark.kht-dark--4{
  min-height:100vh;
  background-image:
    radial-gradient(42% 28% at 8% 4%, rgba(86,97,80,.55) 0%, rgba(86,97,80,0) 62%),
    radial-gradient(48% 32% at 92% 20%, rgba(61,71,54,.7) 0%, rgba(61,71,54,0) 64%),
    radial-gradient(62% 36% at 98% 74%, rgba(43,51,37,.9) 0%, rgba(43,51,37,0) 64%),
    radial-gradient(72% 42% at 28% 98%, rgba(86,97,80,.35) 0%, rgba(86,97,80,0) 62%);
}

.kht-dark a{ color:var(--text-accent-inverse); text-decoration:none; border-bottom:0; }
.kht-dark a:hover{ color:var(--accent-bright); }

/* Bereichsübergreifende Seiten (Workflows, Prosaseiten) tragen keinen
   Bereichsakzent — der Akzent wird warmweiß statt neon. */
.kht-dark--neutral{
  --accent:var(--paper);
  --accent-bright:var(--paper);
  --accent-deep:var(--paper-deep);
  --accent-veil:rgba(247,245,239,.14);
  --accent-glass:rgba(247,245,239,.28);
  --accent-glass-strong:rgba(247,245,239,.48);
  --text-accent-inverse:var(--paper);
  --line-accent:rgba(247,245,239,.5);
}

.kht-scanline{
  position:fixed; inset:0; z-index:58; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(0deg, rgba(247,245,239,.05) 0px, rgba(247,245,239,.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 4px);
}

.kht-skiplink{
  position:absolute; left:-9999px; top:0; z-index:90;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--paper-card); color:var(--text-primary); border:1px solid var(--line);
  padding:12px 18px;
}
.kht-skiplink:focus{ left:16px; top:16px; }

.kht-progress{
  position:fixed; left:0; top:0; height:3px; z-index:60;
  background:var(--paper);
  box-shadow:0 0 34px 6px rgba(247,245,239,.35), 0 0 12px 1px rgba(247,245,239,.4);
  width:0%;
  transition:width 60ms linear;
}

/* ── Header ──────────────────────────────────────────────────── */
/* Heller Kopf auf dunkler Seite: eine deckende Papierleiste statt Glas.
   Deckend, weil die Unschärfe oben auf der Seite den dunklen Grund
   durchzieht und den Streifen schmutziggrau werden lässt. Alle Farben
   kommen aus den Tokens — --text-accent ist pro Bereich der 700er
   Tintenton, den es genau dafür gibt: Neon hat auf Warmweiss keinen
   Kontrast. */
.kht-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 clamp(20px,5vw,72px); height:76px;
  background:var(--surface-page);
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px -34px rgba(11,11,9,.9);
}
.kht-header .kht-wordmark{ color:var(--text-primary); }
.kht-header__brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }

/* Bildmarke links im Kopf. Die Variante mit transparentem Grund liegt direkt
   auf --green-950 auf; der weisse Rahmen bleibt die Kante. */
.kht-header__logo{
  display:block;
  height:34px;
  width:auto;
  flex:0 0 auto;
}

.kht-wordmark{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:var(--w-semi);
  letter-spacing:.04em;
  line-height:1;
  color:var(--text-inverse);
  text-transform:uppercase;
  display:inline-block;
  white-space:nowrap;
}
.kht-wordmark--lg{ font-size:19px; }
.kht-wordmark__slash{ color:var(--text-accent-inverse); display:inline-block; letter-spacing:0; margin:0 .035em; }

.kht-header__nav{ display:flex; align-items:center; gap:clamp(8px,1.4vw,20px); }
.kht-header__nav{ min-width:0; }

/* Auf schmalen Schirmen wird der Kopf gestaucht statt gekürzt: die
   Bildmarke trägt den Namen nicht lesbar, die Wortmarke muss also bleiben. */
@media (max-width:600px){
  .kht-header{ gap:12px; padding:0 20px; }
  .kht-header__brand{ gap:8px; min-width:0; }
  .kht-header__logo{ height:26px; }
  .kht-wordmark{ font-size:13px; letter-spacing:.02em; }
  /* Pillen einzeilig halten, sonst sprengen sie die 76px Kopfhöhe. */
  .kht-pill{ padding:9px 10px; }
  .kht-pill__label{ font-size:12px; white-space:nowrap; }
  /* Reicht die Breite trotzdem nicht, wandert die Navigation seitlich
     weiter, statt Einträge unsichtbar abzuschneiden. Die Marke bleibt
     stehen. */
  .kht-header__brand{ flex:0 0 auto; }
  .kht-header__nav{ flex:0 1 auto; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .kht-header__nav::-webkit-scrollbar{ display:none; }
}

.kht-pill{
  display:inline-flex; align-items:center;
  transform:none;
  border:1px solid transparent;
  padding:11px 18px;
  color:var(--graygreen-300);
  background:transparent;
  cursor:pointer;
  font:inherit;
  transition:background var(--dur) var(--ease-standard), border-color var(--dur) var(--ease-standard);
}
.kht-pill:hover{ border-color:rgba(247,245,239,.22); background:var(--accent-veil); color:var(--graygreen-300); }
.kht-pill__label{ display:block; transform:none; font-size:15px; color:inherit; }

/* Die Pillen im hellen Kopf — dieselbe Form, auf Tinte statt auf Papierweiss. */
.kht-header .kht-pill{ color:var(--text-body); }
.kht-header .kht-pill:hover{ border-color:var(--line); background:var(--accent-veil); color:var(--text-primary); }

.kht-pill--active{
  --pa:var(--accent); --pg:var(--accent-glass);
  background:linear-gradient(168deg, rgba(247,245,239,.18) 0%, rgba(247,245,239,.07) 55%, rgba(247,245,239,.02) 100%);
  border:1px solid rgba(247,245,239,.3);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.24), inset 0 -3px 0 var(--pa), 0 0 60px -14px var(--pg);
  cursor:default;
}
.kht-pill--active:hover{ background:linear-gradient(168deg, rgba(247,245,239,.18) 0%, rgba(247,245,239,.07) 55%, rgba(247,245,239,.02) 100%); }
.kht-pill--active .kht-pill__label{ color:var(--text-inverse); }
.kht-pill--neutral{ --pa:var(--paper); --pg:rgba(247,245,239,.24); }

.kht-header .kht-pill--active,
.kht-header .kht-pill--active:hover{
  background:linear-gradient(168deg, rgba(20,23,15,.06) 0%, rgba(20,23,15,.02) 55%, rgba(20,23,15,0) 100%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--paper-card), inset 0 -3px 0 var(--pa), 0 0 60px -18px var(--pg);
}
.kht-header .kht-pill--active .kht-pill__label{ color:var(--text-primary); }
/* --paper als Unterkante wäre auf Papier unsichtbar. */
.kht-header .kht-pill--neutral{ --pa:var(--text-primary); --pg:rgba(20,23,15,.2); }

/* ── Breadcrumb (browser-page hero) ─────────────────────────── */
.kht-crumb{
  margin:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400);
}
.kht-crumb a{ color:var(--green-400); }
.kht-crumb a:hover{ color:var(--accent-bright); }

/* ── Slash mark ──────────────────────────────────────────────── */
.kht-slash{
  display:inline-block; flex:0 0 auto;
  background:var(--accent);
  transform:skewX(-14deg);
  vertical-align:middle;
}
.kht-slash--paper{ background:var(--paper); }

.kht-slash--hero{
  width:.14em; height:.76em;
  box-shadow:0 0 120px var(--accent-glass), 0 0 56px var(--accent-veil), 0 0 20px var(--accent-veil);
}
.kht-slash--hero.kht-slash--paper{
  box-shadow:0 0 120px rgba(247,245,239,.32), 0 0 56px rgba(247,245,239,.22), 0 0 20px rgba(247,245,239,.16);
}
.kht-slash--section{
  width:.14em; height:.76em;
  box-shadow:0 0 90px var(--accent-glass), 0 0 44px var(--accent-veil), 0 0 16px var(--accent-veil);
}
.kht-slash--section.kht-slash--paper{
  box-shadow:0 0 100px rgba(247,245,239,.3), 0 0 48px rgba(247,245,239,.2), 0 0 18px rgba(247,245,239,.16);
}
.kht-slash--tile{ width:.13em; height:.72em; box-shadow:0 0 40px var(--accent-glass); }
.kht-slash--block{ width:.13em; height:.72em; box-shadow:0 0 44px var(--accent-glass); }
.kht-slash--detail{ width:.13em; height:.72em; box-shadow:0 0 60px var(--accent-glass), 0 0 24px var(--accent-veil); }

/* ── Hero (area page) ────────────────────────────────────────── */
.kht-hero{
  position:relative;
  padding:clamp(44px,6vw,84px) clamp(20px,5vw,72px) clamp(36px,4vw,56px);
  background:
    radial-gradient(86% 66% at 76% 8%, var(--accent-glass) 0%, var(--accent-veil) 38%, rgba(0,0,0,0) 78%),
    radial-gradient(90% 65% at 10% 96%, rgba(247,245,239,.07) 0%, rgba(247,245,239,0) 62%);
}
.kht-hero__inner{ max-width:var(--content-max); margin:0 auto; }
.kht-hero__eyebrow{
  margin:0 0 clamp(36px,5vw,72px);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400);
}
.kht-hero__row{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:clamp(12px,2vw,28px); }
.kht-hero__title{
  display:flex; align-items:center; gap:.12em; margin:0;
  font-size:clamp(44px,8vw,120px); font-weight:800; line-height:.88; letter-spacing:-.05em; color:var(--text-inverse);
}
.kht-hero__subtitle{ font-size:clamp(20px,2.6vw,32px); font-weight:300; color:var(--graygreen-300); padding-bottom:.4em; }
.kht-hero__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,64px);
  margin-top:clamp(32px,4vw,56px);
}
.kht-hero__question{ margin:0; font-size:clamp(26px,3.2vw,40px); font-weight:300; line-height:1.15; letter-spacing:-.02em; color:var(--text-inverse); }
.kht-hero__lead{ margin:0; max-width:34rem; font-size:17px; font-weight:300; line-height:1.6; color:var(--graygreen-300); text-wrap:pretty; }
.kht-hero__lead--wide{ max-width:680px; margin-top:clamp(28px,3.4vw,44px); font-size:18px; }
.kht-hero__stats{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  margin-top:clamp(40px,6vw,88px); padding-top:16px; border-top:1.5px solid rgba(247,245,239,.22);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400);
}

/* ── Browser-page hero (Rhino / Akquise / Workflows / Euregio) ─ */
/* Kein position:relative: der Schein soll sich am Seitenrahmen .kht-dark
   ausrichten, nicht an der Inhaltsspalte. Die Kinder bringen ihr eigenes
   position:relative mit und liegen deshalb weiter darüber. */
.kht-bhero{ padding:clamp(32px,5vw,64px) 0 clamp(28px,4vw,44px); border-bottom:1.5px solid rgba(247,245,239,.22); }
/* Bis unter den Kopf und über die volle Breite — wie der Verlauf der
   Bereichsseiten. Vorher sass er in der Spalte und begann erst unterhalb
   des Kopfes, was ein dunkles Band mit harter Oberkante ergab. */
.kht-bhero__glow{
  position:absolute; inset:0 0 auto 0; height:clamp(380px,34vw,520px); pointer-events:none;
  background:radial-gradient(60% 70% at 72% 10%, var(--accent-glass) 0%, var(--accent-veil) 40%, rgba(0,0,0,0) 78%);
}
.kht-bhero__glow--wf{ background:radial-gradient(64% 72% at 72% 8%, rgba(247,245,239,.14) 0%, rgba(247,245,239,.05) 40%, rgba(247,245,239,0) 78%); }
.kht-bhero__row{ position:relative; display:flex; align-items:flex-end; flex-wrap:wrap; gap:clamp(12px,2vw,28px); }
.kht-bhero__title{
  display:flex; align-items:center; gap:.12em; margin:0;
  font-size:clamp(44px,8vw,120px); font-weight:800; line-height:.88; letter-spacing:-.05em; color:var(--text-inverse);
}
.kht-bhero__lead{ position:relative; max-width:680px; margin:clamp(24px,3vw,36px) 0 0; font-size:18px; font-weight:300; line-height:1.6; color:var(--graygreen-300); text-wrap:pretty; }
.kht-bhero__note{ position:relative; margin:16px 0 0; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-400); }

/* ── Tile grid ───────────────────────────────────────────────── */
.kht-tiles{
  max-width:var(--content-max); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.kht-tile{
  display:flex; flex-direction:column; gap:14px;
  margin:-1px 0 0 -1px; padding:clamp(22px,2.4vw,30px);
  border:1px solid rgba(247,245,239,.16);
  background:linear-gradient(168deg, rgba(247,245,239,.10) 0%, rgba(247,245,239,.04) 55%, rgba(247,245,239,.01) 100%);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.14);
  color:var(--text-inverse);
  transition:background 160ms ease, box-shadow 180ms ease, border-color 160ms ease;
}
.kht-tile:hover{
  background:linear-gradient(168deg, rgba(247,245,239,.18) 0%, rgba(247,245,239,.07) 55%, var(--accent-veil) 100%);
  border-color:rgba(247,245,239,.3);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.24), inset 0 -3px 0 var(--accent), 0 0 90px -26px var(--accent), 0 0 30px -14px var(--accent-glass);
  color:var(--text-inverse);
}
.kht-tile__kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-400); }
.kht-tile__title{
  color:var(--text-inverse);
  display:flex; align-items:baseline; gap:.14em; font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.035em; line-height:1.05;
}
.kht-tile__desc{ max-width:34rem; font-size:15px; font-weight:300; line-height:1.55; color:var(--graygreen-300); }
.kht-tile__tags{ margin-top:auto; padding-top:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-500); }

/* ── Knowledge block ─────────────────────────────────────────── */
.kht-knowledge{
  max-width:var(--content-max); margin:0 auto; padding:clamp(28px,4vw,48px);
  border:1px solid rgba(247,245,239,.22);
  background:linear-gradient(168deg, rgba(247,245,239,.10) 0%, rgba(247,245,239,.03) 60%, rgba(247,245,239,.01) 100%);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.18);
}
.kht-knowledge__kicker{ margin:0; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-400); }
.kht-knowledge__title{
  display:flex; align-items:baseline; gap:.12em; margin:16px 0 0;
  font-size:clamp(24px,2.8vw,36px); font-weight:800; letter-spacing:-.035em; color:var(--text-inverse);
}
.kht-knowledge__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(20px,3vw,40px); margin-top:clamp(24px,3vw,36px); }
.kht-knowledge__item{ margin:0; font-size:16px; font-weight:300; line-height:1.6; color:var(--graygreen-300); }
.kht-knowledge__item .kht-dot{ color:var(--accent); }

/* ── Crosslink ───────────────────────────────────────────────── */
.kht-crosslink{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--content-max); margin:0 auto; padding:clamp(24px,3vw,40px);
  border:1px solid rgba(247,245,239,.22);
  background:radial-gradient(70% 120% at 92% 50%, var(--accent-veil) 0%, rgba(0,0,0,0) 70%), linear-gradient(168deg, rgba(247,245,239,.08) 0%, rgba(247,245,239,.02) 100%);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.16);
  color:var(--text-inverse);
  transition:box-shadow 180ms ease, border-color 160ms ease;
}
.kht-crosslink:hover{ border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(247,245,239,.22), 0 0 90px -26px var(--accent); color:var(--text-inverse); }
.kht-crosslink__kicker{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-400); }
.kht-crosslink__title{ display:flex; align-items:baseline; gap:.12em; margin-top:12px; font-size:clamp(24px,2.8vw,36px); font-weight:800; letter-spacing:-.035em; }
.kht-crosslink__sub{ display:block; margin-top:10px; font-size:16px; font-weight:300; color:var(--graygreen-300); }
.kht-crosslink__arrow{ font-size:28px; color:var(--graygreen-300); }

/* ── Skewed glass chip / button ──────────────────────────────── */
.kht-chip{
  display:inline-flex; align-items:center; transform:none;
  background:linear-gradient(168deg, rgba(247,245,239,.16) 0%, rgba(247,245,239,.06) 55%, rgba(247,245,239,.02) 100%);
  border:1px solid rgba(247,245,239,.22);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.24), 0 14px 30px -18px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:9px 16px; cursor:pointer;
  transition:background 140ms ease, border-color 140ms ease, box-shadow 160ms ease;
  font:inherit; color:inherit;
}
.kht-chip:hover{
  background:var(--accent-glass); border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.3), 0 0 0 1px var(--accent-veil), 0 20px 70px -22px var(--accent), 0 0 34px -10px var(--accent-glass);
  color:inherit;
}
.kht-chip__label{ display:block; transform:none; font-family:var(--font-body); font-size:14px; color:var(--graygreen-300); }
.kht-chip--lg .kht-chip__label{ font-size:15px; color:var(--text-inverse); }
.kht-chip--lg{ padding:13px 22px; }

/* ── Underline arrow link ────────────────────────────────────── */
.kht-arrow-link{
  display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:320px;
  padding:14px 0; border-bottom:1.5px solid rgba(247,245,239,.22); font-size:17px; color:var(--text-inverse);
  transition:border-color 140ms ease, color 140ms ease;
}
.kht-arrow-link:hover{ border-color:var(--neon-600); color:var(--accent-deep); }
.kht-arrow-link--section{ max-width:300px; margin-top:32px; padding:12px 0; font-size:16px; }
.kht-arrow-link--section:hover{ border-color:var(--line-accent); color:var(--text-accent-inverse); }
.kht-arrow-link__icon{ font-size:20px; color:var(--green-400); }

/* ── Footer ──────────────────────────────────────────────────── */
.kht-footer{
  padding:clamp(40px,5vw,72px) clamp(20px,5vw,72px) 32px;
  background:linear-gradient(180deg, rgba(247,245,239,.06) 0%, rgba(247,245,239,.02) 100%);
  border-top:1px solid rgba(247,245,239,.16);
}
.kht-footer__inner{ max-width:var(--content-max); margin:0 auto; }
.kht-footer__row{ display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:center; }
.kht-footer__links{ display:flex; flex-wrap:wrap; gap:16px 24px; margin-left:auto; justify-content:flex-end; }
.kht-footer__links a{ font-size:15px; color:var(--graygreen-300); }
.kht-footer__links a:hover{ color:var(--paper); }
.kht-footer__meta{ display:none; }

.kht-footer__top{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,4vw,56px); align-items:center;
}
.kht-footer__tagline{ margin:0; font-size:clamp(20px,2.2vw,28px); font-weight:300; line-height:1.25; letter-spacing:-.02em; color:var(--text-inverse); }
.kht-footer__bottom{
  display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between;
  margin-top:clamp(40px,5vw,72px); padding-top:18px; border-top:1px solid rgba(247,245,239,.14);
}

/* ============================================================
   Themenbrowser (Rhino / Akquise / Euregio Aktuell)
   ============================================================ */
.kht-search{
  display:flex; align-items:center; gap:16px; margin-top:clamp(28px,4vw,44px);
  padding:14px 18px; border:1.5px solid rgba(247,245,239,.22);
  background:linear-gradient(168deg, rgba(247,245,239,.10) 0%, rgba(247,245,239,.03) 100%);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.16);
  transition:border-color 140ms ease;
}
.kht-search:focus-within{ border-color:var(--accent); }
.kht-search__label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-400); }
.kht-search__icon{ font-size:20px; color:var(--graygreen-300); }
.kht-search__input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
  font-family:var(--font-body); font-size:17px; font-weight:300; color:var(--text-inverse);
}
.kht-search__input::placeholder{ color:var(--green-500); }
/* Das native Löschkreuz der Suchfelder entfällt — die Seite bringt ein
   eigenes, das zur Typografie passt. */
.kht-dark input[type="search"]::-webkit-search-cancel-button,
.kht-dark input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.kht-search__clear{ background:none; border:0; cursor:pointer; font-size:18px; color:var(--green-400); }
.kht-search__clear:hover{ color:var(--accent-bright); }

.kht-hits{ margin-top:18px; border:1px solid rgba(247,245,239,.22); background:rgba(20,24,16,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.kht-hits__head{ padding:12px 16px; border-bottom:1px solid rgba(247,245,239,.14); font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-400); }
.kht-hits__row{
  display:grid; width:100%; text-align:left; margin:-1px 0 0 -1px; border:1px solid rgba(247,245,239,.22);
  background:transparent; cursor:pointer; padding:0; transition:background 140ms ease; font:inherit; color:inherit;
}
.kht-hits__row:hover{ background:rgba(247,245,239,.06); }
.kht-hits__empty{ padding:16px; font-size:14px; font-weight:300; color:var(--graygreen-300); }
.kht-hits__row > span{ padding:12px 14px; }
.kht-hits--rhino .kht-hits__row{ grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(0,150px); }
.kht-hits--rhino .kht-hits__row .hn{ font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--text-inverse); }
.kht-hits--rhino .kht-hits__row .hs{ font-size:13px; line-height:1.45; color:var(--graygreen-300); }
.kht-hits--rhino .kht-hits__row .hc{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-500); }
.kht-hits--flat .kht-hits__row{ grid-template-columns:minmax(0,1fr) minmax(0,170px); }
.kht-hits--flat .kht-hits__row .hn{ font-size:14px; color:var(--text-inverse); }
.kht-hits--flat .kht-hits__row .hc{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-500); }

.kht-catbar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:clamp(24px,3vw,40px); border:1px solid rgba(247,245,239,.22);
  background:rgba(20,24,16,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.kht-catbar__btn{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-width:0; min-height:62px; margin:-1px 0 0 -1px; padding:12px 14px;
  border:1px solid rgba(247,245,239,.28); background:transparent; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:background 140ms ease, box-shadow 160ms ease; color:var(--graygreen-300);
}
.kht-catbar__btn:hover{ background-color:rgba(247,245,239,.07); }
.kht-catbar__btn .cc{ font-size:9px; letter-spacing:.06em; opacity:.7; }
.kht-catbar__btn--active{
  color:var(--text-inverse); background-color:var(--accent-veil);
  box-shadow:inset 0 -3px 0 var(--accent), 0 0 70px -22px var(--accent);
}

.kht-subbar{ display:flex; flex-wrap:wrap; margin-top:16px; border:1px solid rgba(247,245,239,.22); border-bottom:0; background:rgba(247,245,239,.04); }
.kht-subbar__btn{
  position:relative; flex:1 1 auto; min-width:160px; text-align:left; margin:-1px 0 0 -1px; padding:14px 18px;
  border:1px solid rgba(247,245,239,.28); cursor:pointer; background:transparent;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  transition:background 140ms ease; color:var(--green-400);
}
.kht-subbar__btn:hover{ background:rgba(247,245,239,.07); }
.kht-subbar__btn--active{ color:var(--text-inverse); box-shadow:inset 0 -3px 0 var(--accent); }

.kht-tb{
  display:flex; flex-direction:column;
  border:1.5px solid rgba(247,245,239,.22);
  background:rgba(20,24,16,.5);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.16), 0 40px 90px -60px rgba(0,0,0,1);
  height:clamp(560px,76vh,880px);
  overflow:hidden;
}
.kht-tb--3col{ height:clamp(520px,72vh,820px); }
.kht-tb__head{
  display:flex; flex-direction:column; justify-content:center; gap:8px; flex:0 0 auto;
  min-height:104px; padding:22px 28px; border-bottom:1.5px solid rgba(247,245,239,.22);
}
.kht-tb--3col .kht-tb__head{ min-height:92px; gap:6px; }
.kht-tb__kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-400); }
.kht-tb__title{ font-size:clamp(19px,2.1vw,25px); font-weight:700; letter-spacing:-.02em; color:var(--text-inverse); }
.kht-tb__desc{ max-width:70ch; font-size:14px; font-weight:300; line-height:1.5; color:var(--green-400); }

.kht-tb__body{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); flex:1 1 0; min-height:0; overflow:hidden; }
.kht-tb--3col .kht-tb__body{ grid-template-columns:minmax(0,340px) minmax(0,1fr); }

.kht-tb__list{ border-right:1px solid rgba(247,245,239,.16); background:rgba(0,0,0,.18); height:100%; overflow-y:auto; }
.kht-tb__item{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center;
  width:100%; min-height:86px; text-align:left; margin:-1px 0 0 -1px; padding:14px 18px;
  border:1px solid rgba(247,245,239,.2); cursor:pointer; background:transparent;
  transition:background 140ms ease, box-shadow 160ms ease; font:inherit; color:inherit;
}
.kht-tb--3col .kht-tb__item{ min-height:78px; }
.kht-tb__item:hover{ background:rgba(247,245,239,.07); }
.kht-tb__item--active{ background:var(--accent-veil); box-shadow:inset 4px 0 0 var(--accent); }
.kht-tb__item-name{ display:block; font-size:14px; font-weight:600; line-height:1.3; color:var(--text-inverse); }
.kht-tb__item-short{ display:block; margin-top:5px; font-size:12px; line-height:1.4; color:var(--green-400); }
.kht-tb__item-index{ font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; color:var(--green-500); }

.kht-tb__detail{ height:100%; overflow-y:auto; padding:clamp(24px,3.4vw,52px); }
.kht-tb__card{
  max-width:820px; padding:clamp(24px,2.6vw,36px);
  border:1px solid rgba(247,245,239,.18);
  background:linear-gradient(168deg, rgba(247,245,239,.10) 0%, rgba(247,245,239,.03) 60%, rgba(247,245,239,.01) 100%);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.18);
}
.kht-tb__path{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400); margin-bottom:14px; }
.kht-tb__card-title{
  display:flex; align-items:baseline; gap:.14em; margin:0;
  font-size:clamp(23px,2.4vw,36px); font-weight:800; line-height:1.06; letter-spacing:-.035em; color:var(--text-inverse); text-wrap:pretty;
}
.kht-tb__card-alias{ margin:10px 0 0; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--green-400); }
.kht-tb__card-desc{ max-width:760px; margin:20px 0 0; padding-top:20px; border-top:1px solid rgba(247,245,239,.16); font-size:17px; font-weight:300; line-height:1.6; color:var(--graygreen-300); text-wrap:pretty; }

.kht-tb__blocks{ display:flex; flex-direction:column; gap:20px; margin-top:26px; }
.kht-tb__block{ padding:18px 20px; border:1px solid rgba(247,245,239,.18); background:rgba(0,0,0,.25); }
.kht-tb__block-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:12px; }
.kht-tb__block-text{ margin:0; font-size:15px; font-weight:300; line-height:1.6; color:var(--graygreen-300); text-wrap:pretty; }
.kht-tb__block-list{ display:flex; flex-direction:column; gap:9px; }
.kht-tb__block-li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; }
.kht-tb__block-li .kht-dot{ color:var(--accent); font-weight:700; }
.kht-tb__block-li span:last-child{ font-size:15px; font-weight:300; line-height:1.55; color:var(--graygreen-300); }

.kht-tb__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.kht-tag{
  display:inline-flex; transform:skewX(-12deg);
  background:linear-gradient(168deg, rgba(247,245,239,.16) 0%, rgba(247,245,239,.05) 100%);
  border:1px solid rgba(247,245,239,.22); padding:8px 14px;
}
.kht-tag span{ display:block; transform:skewX(12deg); font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--graygreen-300); }

.kht-tb__command{ margin-top:24px; padding:18px 20px; border:1px solid rgba(247,245,239,.18); background:rgba(0,0,0,.25); }
.kht-tb__command-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400); margin-bottom:10px; }
.kht-tb__command code{ font-family:var(--font-mono); font-size:14px; color:var(--accent-bright); }

/* Euregio Aktuell: meta grid + action link inside the detail card */
.kht-tb__meta-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0 0; padding-top:20px; border-top:1px solid rgba(247,245,239,.16); }
.kht-tb__meta-item{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kht-tb__meta-label{ font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400); }
.kht-tb__meta-value{ font-size:14px; line-height:1.4; color:var(--graygreen-300); }
.kht-tb__meta-value--strong{ font-weight:700; color:var(--text-inverse); }
.kht-tb__actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px; }
.kht-tb__eu-link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--text-accent-inverse);
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--accent-glass-strong);
}
.kht-tb__eu-link:hover{ color:var(--accent-bright); }
.kht-tb__eu-arrow{ font-size:15px; transition:transform .18s ease; }
.kht-tb__eu-link:hover .kht-tb__eu-arrow{ transform:translate(3px,-3px); }

.kht-tb__empty{ padding:40px 22px; font-size:14px; color:var(--green-400); }

/* City select (Euregio Aktuell) */
.kht-select-wrap{ position:relative; max-width:320px; margin-top:16px; }
.kht-select-wrap::after{ content:"▾"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--graygreen-300); font-size:11px; pointer-events:none; }
.kht-select{
  display:block; width:100%; min-height:48px; margin:0; padding:12px 40px 12px 16px;
  border:1.5px solid rgba(247,245,239,.22); border-radius:0;
  background:rgba(20,24,16,.55); color:var(--text-inverse);
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.kht-select:hover, .kht-select:focus-visible{ border-color:var(--accent); outline:none; }
.kht-select option{ background:var(--green-950); color:var(--text-inverse); }
.kht-select-row{ margin-top:16px; }
.kht-select-row[hidden]{ display:none; }

/* Stacked layout for the Themenbrowser below ~800px — list above detail,
   both scroll on their own instead of sharing a fixed-height row. */
@media (max-width:800px){
  .kht-tb{ height:auto; max-height:none; }
  .kht-tb__body{ display:block; flex:0 0 auto; overflow:visible; }
  .kht-tb__list{ display:block; border-right:0; border-bottom:1px solid rgba(247,245,239,.16); height:auto; max-height:44vh; }
  .kht-tb__detail{ display:block; height:auto; max-height:none; padding:clamp(20px,5vw,32px); }
  .kht-tb__card{ max-width:none; }
}

/* ============================================================
   Workflows index
   ============================================================ */
.kht-wf-toolbar{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,360px);
  margin-top:clamp(28px,4vw,48px); border:1.5px solid rgba(247,245,239,.22);
  background:rgba(20,24,16,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.16);
}
.kht-wf-cats{ display:flex; flex-wrap:wrap; border-right:1px solid rgba(247,245,239,.16); }
.kht-wf-cat-btn{
  flex:1 1 auto; min-width:92px; margin:-1px 0 0 -1px; padding:16px 14px;
  border:1px solid rgba(247,245,239,.28); background:transparent; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  transition:background 140ms ease, box-shadow 160ms ease; color:var(--graygreen-300);
}
.kht-wf-cat-btn:hover{ background-color:rgba(247,245,239,.08); }
.kht-wf-cat-btn--active{ color:var(--text-inverse); background-color:rgba(247,245,239,.12); box-shadow:inset 0 -3px 0 var(--paper); }
.kht-wf-search{ display:flex; align-items:center; gap:12px; padding:12px 16px; transition:background 140ms ease; }
.kht-wf-search:focus-within{ background:rgba(247,245,239,.06); }
.kht-wf-search__icon{ font-size:19px; color:var(--graygreen-300); }
.kht-wf-search input{ flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none; font-family:var(--font-body); font-size:15px; font-weight:300; color:var(--text-inverse); }
.kht-wf-search input::placeholder{ color:var(--green-500); }
.kht-wf-search button{ background:none; border:0; cursor:pointer; font-size:17px; color:var(--green-400); }
.kht-wf-search button:hover{ color:var(--paper); }

.kht-wf-status{ margin:14px 0 0; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-400); }

.kht-wf-head, .kht-wf-row{
  display:grid; grid-template-columns:56px 104px minmax(180px,1.3fr) minmax(220px,1.6fr) 150px 160px; gap:16px;
}
.kht-wf-head{
  margin-top:22px; padding:0 8px 10px; border-bottom:2px solid rgba(247,245,239,.3);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--green-400);
}
.kht-wf-row{
  align-items:center; padding:18px 8px; border-bottom:1px solid rgba(247,245,239,.14);
  color:var(--text-inverse); transition:background 140ms ease, box-shadow 160ms ease;
}
.kht-wf-row:hover{
  background:linear-gradient(90deg, rgba(247,245,239,.10) 0%, rgba(247,245,239,.02) 60%);
  box-shadow:inset 3px 0 0 var(--paper), 0 0 90px -26px rgba(247,245,239,.5);
  color:var(--text-inverse);
}
.kht-wf-row .wf-nr{ font-family:var(--font-mono); font-size:14px; font-weight:500; color:var(--green-400); }
.kht-wf-row .wf-cat{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--green-400); }
.kht-wf-row .wf-title{ font-size:17px; font-weight:700; line-height:1.25; letter-spacing:-.015em; }
.kht-wf-row .wf-result{ font-size:13.5px; font-weight:300; line-height:1.5; color:var(--graygreen-300); }
.kht-wf-row .wf-software{ font-size:13px; font-weight:300; color:var(--graygreen-300); }
.kht-wf-row .wf-meta{ font-family:var(--font-mono); font-size:11px; color:var(--green-400); }

.kht-wf-empty{ margin-top:40px; padding:48px 8px; border-top:2px solid rgba(247,245,239,.3); }
.kht-wf-empty h2{ margin:0; font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; color:var(--text-inverse); }
.kht-wf-empty p{ margin:10px 0 0; font-size:15px; font-weight:300; color:var(--graygreen-300); }
.kht-wf-empty button{
  display:inline-flex; margin-top:18px; transform:none;
  background:linear-gradient(168deg, rgba(247,245,239,.18) 0%, rgba(247,245,239,.06) 100%);
  border:1px solid rgba(247,245,239,.3); padding:12px 18px; cursor:pointer;
}
.kht-wf-empty button:hover{ background:rgba(247,245,239,.24); }
.kht-wf-empty button span{ display:block; transform:none; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-inverse); }

@media (max-width:900px){
  .kht-wf-toolbar{ grid-template-columns:1fr; }
  .kht-wf-cats{ border-right:0; border-bottom:1px solid rgba(247,245,239,.16); }
  .kht-wf-head, .kht-wf-row{ grid-template-columns:40px 90px minmax(140px,1fr) minmax(160px,1.3fr); }
  .kht-wf-head span:nth-child(5), .kht-wf-head span:nth-child(6),
  .kht-wf-row .wf-software, .kht-wf-row .wf-meta{ display:none; }
}
@media (max-width:600px){
  .kht-wf-head{ display:none; }
  .kht-wf-row{ grid-template-columns:1fr; gap:6px; padding:16px 8px; }
}

/* ============================================================
   Home page — scroll rail, sections, workflow teaser
   ============================================================ */
.kht-rail{ position:fixed; right:clamp(10px,1.6vw,24px); top:50%; transform:translateY(-50%); z-index:55; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.kht-rail__btn{
  display:flex; align-items:center; justify-content:flex-end; gap:10px; width:132px; padding:7px 0;
  background:none; border:0; cursor:pointer; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity 140ms ease, color 140ms ease; color:var(--green-500); opacity:.55;
}
.kht-rail__btn--active{ opacity:1; }
.kht-rail__bar{ display:block; height:2px; background:currentColor; width:14px; transition:width 180ms cubic-bezier(.22,1,.36,1); }
.kht-rail__btn--active .kht-rail__bar{ width:34px; }
@media (max-width:1240px){ .kht-rail{ display:none; } }

.kht-home-hero{
  position:relative; padding:clamp(56px,8vw,104px) clamp(20px,5vw,72px) clamp(36px,4vw,56px);
  background:radial-gradient(86% 66% at 76% 8%, rgba(247,245,239,.12) 0%, rgba(247,245,239,.05) 38%, rgba(247,245,239,0) 78%), radial-gradient(90% 65% at 10% 96%, rgba(247,245,239,.07) 0%, rgba(247,245,239,0) 62%);
}
.kht-home-hero__inner{ max-width:var(--content-max); margin:0 auto; }
.kht-home-hero__eyebrow{ margin:0 0 clamp(48px,7vw,96px); font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400); }
.kht-home-hero h1{ margin:0; font-size:clamp(36px,6.2vw,104px); font-weight:800; line-height:.9; letter-spacing:-.05em; color:var(--text-inverse); }
.kht-home-hero h1 .line2{ display:block; padding-left:clamp(0px,5vw,88px); }
.kht-home-hero__cta-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(24px,4vw,64px); align-items:end; margin-top:clamp(48px,6vw,84px); }
.kht-home-hero__cta-row p{ margin:0; max-width:520px; font-size:18px; font-weight:300; line-height:1.6; color:var(--graygreen-300); text-wrap:pretty; }

.kht-home-area{
  position:relative; padding:clamp(64px,8vw,120px) clamp(20px,5vw,72px);
}
.kht-home-area--l{ background:radial-gradient(80% 62% at 6% 8%, var(--accent-glass) 0%, var(--accent-veil) 36%, rgba(0,0,0,0) 78%), radial-gradient(70% 50% at 94% 92%, rgba(247,245,239,.06) 0%, rgba(247,245,239,0) 62%); }
.kht-home-area--r{ background:radial-gradient(80% 62% at 94% 8%, var(--accent-glass) 0%, var(--accent-veil) 36%, rgba(0,0,0,0) 78%), radial-gradient(70% 50% at 6% 92%, rgba(247,245,239,.06) 0%, rgba(247,245,239,0) 62%); }
.kht-home-area--explore{ background:radial-gradient(84% 64% at 94% 8%, var(--accent-glass) 0%, var(--accent-veil) 36%, rgba(0,0,0,0) 78%), radial-gradient(70% 50% at 6% 92%, rgba(247,245,239,.06) 0%, rgba(247,245,239,0) 62%); }
.kht-home-area__title--sm{ font-size:clamp(40px,7.4vw,108px); }
.kht-home-area__inner{ max-width:var(--content-max); margin:0 auto; }
.kht-home-area__eyebrow-row{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-top:18px; border-top:1.5px solid rgba(247,245,239,.22);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-400);
}
.kht-home-area__title-row{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:clamp(12px,2vw,28px); margin-top:clamp(28px,4vw,48px); }
.kht-home-area__title{
  display:flex; align-items:center; gap:.12em; margin:0; font-size:clamp(44px,8vw,116px); font-weight:800; line-height:.88; letter-spacing:-.05em; color:var(--text-inverse);
}
.kht-home-area__subtitle{ font-size:clamp(20px,2.6vw,32px); font-weight:300; color:var(--graygreen-300); padding-bottom:.4em; }
.kht-home-area__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,64px); margin-top:clamp(28px,4vw,52px); }
.kht-home-area__question{ margin:0; font-size:clamp(26px,3.2vw,40px); font-weight:300; line-height:1.15; letter-spacing:-.02em; color:var(--text-inverse); }
.kht-home-area__desc{ margin:0; max-width:34rem; font-size:17px; font-weight:300; line-height:1.6; color:var(--graygreen-300); text-wrap:pretty; }
.kht-home-area__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

.kht-home-wf{
  padding:clamp(64px,8vw,120px) clamp(20px,5vw,72px);
  background:radial-gradient(100% 80% at 84% -8%, rgba(247,245,239,.16) 0%, rgba(247,245,239,.06) 40%, rgba(247,245,239,0) 80%), radial-gradient(70% 50% at 0% 100%, rgba(247,245,239,.10) 0%, rgba(247,245,239,0) 60%), var(--surface-dark-soft);
  color:var(--text-inverse);
}
.kht-home-wf__inner{ max-width:var(--content-max); margin:0 auto; }
.kht-home-wf__kicker{ margin:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-inverse-muted); }
.kht-home-wf__title{ display:flex; align-items:center; gap:.12em; margin:clamp(24px,3vw,40px) 0 0; font-size:clamp(40px,7.4vw,108px); font-weight:800; line-height:.88; letter-spacing:-.05em; color:var(--text-inverse); }
.kht-home-wf__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,4vw,64px); margin-top:clamp(28px,4vw,48px); }
.kht-home-wf__grid .q{ margin:0; font-size:clamp(24px,2.8vw,34px); font-weight:300; letter-spacing:-.02em; color:var(--text-inverse); }
.kht-home-wf__grid .d{ margin:0; max-width:34rem; font-size:17px; font-weight:300; line-height:1.6; color:var(--text-inverse-muted); text-wrap:pretty; }
.kht-home-wf__rows{ margin-top:clamp(40px,6vw,80px); border-top:1px solid var(--line-inverse); }
.kht-home-wf__row{
  display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr) 40px; align-items:center; gap:16px;
  padding:clamp(18px,2.4vw,28px) 12px; border-bottom:1px solid var(--line-inverse); color:var(--text-inverse);
  transition:background 140ms ease, box-shadow 140ms ease;
}
.kht-home-wf__row:hover{
  background:linear-gradient(90deg, rgba(247,245,239,.10) 0%, rgba(247,245,239,.02) 60%);
  box-shadow:inset 3px 0 0 var(--accent), 0 0 90px -26px var(--accent-glass), 0 0 30px -14px var(--accent-glass);
  color:var(--text-inverse);
}
.kht-home-wf__row .n{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-inverse-muted); }
.kht-home-wf__row .t{ font-size:clamp(20px,2.2vw,28px); font-weight:300; letter-spacing:-.02em; }
.kht-home-wf__row .a{ justify-self:end; font-size:20px; color:var(--text-inverse-muted); }
.kht-home-wf__disclaimer{ margin:24px 0 0; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--text-inverse-muted); }


/* Legible navigation and reference text. */
.kht-rail__btn{ font-size:12px; opacity:1; }
.kht-tb__item-short,.kht-tb__block-text{ font-weight:400; }
.kht-tb__block-label,.kht-tb__path,.kht-tb__item-index{ font-size:12px; }
.kht-tb__blocks a{ color:var(--accent,var(--paper)); text-decoration:underline; text-underline-offset:3px; }
.kht-tb__blocks a:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }

/* Shared command diagrams: input, operation and result. */
.kht-dark .kht-command-figure{margin:24px 0 28px;}
.kht-command-figure__pair{display:flex;flex-wrap:wrap;gap:16px;}
.kht-command-figure__panel{flex:1 1 180px;min-width:0;}
.kht-command-figure__panel svg{display:block;width:100%;height:auto;max-height:300px;}
.kht-dark .kht-command-figure__label{margin:0 0 8px;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-inverse);}
.kht-dark .kht-command-figure figcaption p{margin:10px 0;font-size:14px;font-weight:400;line-height:1.6;}
.kht-dark .kht-command-figure__legend{color:var(--graygreen-300);}
.kht-command-figure__legend span{color:var(--neon-400,#dcfb55);}
.kht-dark .kht-command-figure a{font-size:13px;color:var(--text-inverse);text-decoration:underline;text-underline-offset:3px;}
.kht-dark .kht-command-figure a:hover{color:var(--neon-400,#dcfb55);}

/* Cross-area navigation keeps only its slash in the destination accent. */
.kht-dark .kht-crosslink__title{color:var(--text-inverse);}