/* ============================================================
   KNOW/HOW/TO — HOW TO …
   Zweiter, handlungsorientierter Zugang zum bestehenden Wissen (siehe
   how-to/index.html, how-to/alle/index.html und die migrierten
   Workflow-Detailseiten). Bewusst kein Bereichsakzent, keine Fotografie,
   keine Farbverläufe, keine Cards, keine Schatten: die Gestaltung entsteht
   ausschließlich aus Typografie, Größe, Gewicht, Abstand, Raster, Linien,
   Nummerierung und Schwarz/Weiß. Nutzt ausschließlich die vorhandenen
   Fonts (Open Sans, DM Mono) und das vorhandene Spacing-/Type-System —
   siehe tokens/*.css. Header, Footer und Bereichs-Rail bleiben unverändert
   (kht-header-footer.css, kht-dark-shell.css).
   ============================================================ */

/* ── Grund: reines Schwarzweiß, keine Verläufe, kein Rauschen ───────────
   Nur der Seitengrund und der Fokus-/Auswahlring gelten seitenweit; Link-
   Farbe/Unterstreichung bleiben auf den Inhalt (.howto-shell) beschränkt,
   damit Header/Footer/Rail (dunkle Chrome-Leiste, eigene helle Schrift)
   unverändert bleiben — die Spec verlangt sie unverändert (Punkt 17). */
.kht-dark[data-area="howto"]{
  background:var(--paper) !important;
  background-image:none !important;
  background-attachment:scroll;
}
.kht-dark[data-area="howto"] .kht-scanline{ display:none; }
/* Header/Footer/Rail sollen überall dieselbe dunkle Chrome-Leiste mit
   heller Schrift zeigen. Beide stützen sich auf einen halbtransparenten
   dunklen Hintergrund, der auf dem dunklen Seitengrund der übrigen Bereiche
   dunkel bleibt, auf dem hellen HOW-TO-Seitengrund aber durchscheint und
   gräulich-grün wirkt (Header) bzw. das helle Wordmark unsichtbar macht
   (Footer). Feste Hintergrundfarbe erzwingt in beiden Fällen dieselbe
   dunkle Leiste wie in den anderen Bereichen. */
.kht-dark[data-area="howto"] .kht-site-header,
.kht-dark[data-area="howto"] .kht-site-footer{ background-color:#141810; }
.kht-dark[data-area="howto"] ::selection{ background:var(--black); color:var(--paper); }
.howto-shell a{ color:var(--black); border-bottom:1px solid var(--black); text-decoration:none; }
.howto-shell a:hover{ color:var(--black); border-bottom-width:2px; }
/* Toolbox-Links führen ausnahmslos nach /create (Rhino/Grasshopper/KeyShot
   Themebrowser) — die einzige Stelle, an der HOW TO die Bereichsfarbe des
   Wissenskontexts als kleine funktionale Markierung übernimmt. Der
   HOW TO Grundkörper bleibt schwarz/warmweiß. */
.howto-shell a.howto-tool-link,
.howto-shell a.howto-tool-link:hover{ color:var(--neon-ink); border-bottom-color:var(--neon-ink); }
.howto-shell :focus-visible{ outline:2px solid var(--black); outline-offset:3px; }
.howto-shell .howto-inverse :focus-visible{ outline-color:var(--paper); }

/* Mobile Kopfzeile: der volle, lange How-To-Titel im Breadcrumb würde dort
   zweizeilig umbrechen und den Sticky-Header unverhältnismäßig hoch
   wirken lassen — der vollständige Titel steht ohnehin riesig gleich
   darunter auf der Seite. Unter 760px genügt "HOW TO 013". */
.howto-crumb-short{ display:none; }
@media (max-width:759px){
  [data-area="howto"] .howto-crumb-full{ display:none; }
  [data-area="howto"] .howto-crumb-short{ display:inline; }
}

.howto{ font-family:var(--font-body); }
.howto *{ box-sizing:border-box; }
/* max-width includes the horizontal padding (content-max + 2×gutter) so the
   rendered text column matches the site's other "hero-family" containers
   (ambient section padding + unpadded inner max-width:content-max) at every
   viewport, instead of the two tokens being counted twice here. */
.howto-shell{ max-width:calc(var(--content-max) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); color:var(--black); }

/* Sicherheitsabstand für jedes Sprungziel (Inhaltsverzeichnis, Vor/Zurück):
   der Sticky-Header (84px, mobil 72px) darf eine angesprungene Headline nie
   überdecken — Header → Abstand → Kapitelnummer → Headline bleibt so auch
   beim Ankerwechsel verbindlich, nicht nur beim ersten Laden der Seite. */
.howto-shell [id]{ scroll-margin-top:140px; }

/* ── Kicker / mono labels ──────────────────────────────────────────────── */
.howto-kicker{
  display:block; font-family:var(--font-mono); font-size:var(--t-label-lg); font-weight:400;
  letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:var(--black);
}
.howto-kicker--muted{ opacity:.6; }

/* ── HOME: Hero ─────────────────────────────────────────────────────────
   Kein Bildmotiv. Die obere Fläche besteht vollständig aus Typografie. */
.howto-hero{ padding:clamp(48px,9vw,120px) 0 clamp(28px,4vw,48px); }
.howto-hero__eyebrow{ margin:0 0 clamp(18px,3vw,32px); }
.howto-hero__title{
  margin:0; font-family:var(--font-hero); font-weight:400; text-transform:uppercase;
  font-size:var(--t-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero);
}
.howto-hero__title span{ display:block; }
.howto-hero__title .howto-hero__lede{ font-size:var(--t-hero-sub); letter-spacing:var(--ls-hero); opacity:.55; }
/* Extra breathing room around the slash only — the shared --ls-hero
   tracking stays tight everywhere else in the wordmark. display:inline
   overrides `.howto-hero__title span{display:block}` above, which would
   otherwise force this nested span onto its own line. */
.howto-hero__lede .howto-slash-gap{ display:inline; margin:0 .07em; }
.howto-hero__sub{
  max-width:var(--measure); margin:clamp(20px,3vw,32px) 0 0;
  font-size:var(--t-lead); line-height:1.68; font-weight:400; color:var(--black);
}

/* ── HOME: große Suche ("Ich möchte …") ───────────────────────────────── */
.howto-search{ margin:clamp(24px,4vw,44px) 0 0; }
.howto-search__form{
  display:flex; align-items:flex-end; gap:16px; border-bottom:3px solid var(--black); padding-bottom:14px;
}
.howto-search__input{
  flex:1; min-width:0; border:0; background:none; padding:0; margin:0; color:var(--black);
  font-family:var(--font-display); font-weight:300; font-size:clamp(24px,4.4vw,44px);
  line-height:1.1; letter-spacing:-.01em;
}
.howto-search__input::placeholder{ color:rgba(11,11,9,.42); }
.howto-search__submit{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:var(--hit-min);
  border:0; background:none; padding:6px 0; color:var(--black); cursor:pointer;
  font-family:var(--font-mono); font-size:var(--t-label-lg); letter-spacing:var(--ls-label-wide); text-transform:uppercase;
}
.howto-search__submit svg{ width:20px; height:20px; }
.howto-search__hint{
  margin:12px 0 0; font-family:var(--font-body); font-size:var(--t-small);
  color:rgba(11,11,9,.55);
}
.howto-search__results{ margin-top:28px; }

/* ── HOME + ALLE: nummerierter Index ──────────────────────────────────── */
.howto-index{ margin:clamp(56px,9vw,104px) 0; border-top:2px solid var(--black); }
.howto-index__row{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:baseline; gap:clamp(12px,2.4vw,32px);
  padding:clamp(18px,3vw,30px) 0; border-bottom:1px solid var(--black);
  text-decoration:none; color:var(--black); transition:background-color 120ms ease,color 120ms ease;
}
/* `.howto-shell a:hover{color:var(--black)}` (1 class + 1 type + :hover) would
   otherwise outrank a bare `.howto-index__row:hover` (2 classes) since it adds
   a type selector; the extra `.howto-shell` ancestor class restores the win. */
.howto-shell .howto-index__row:hover,
.howto-shell .howto-index__row:focus-visible{ background:var(--black); color:var(--paper); }
.howto-index__row:hover .howto-index__count,
.howto-index__row:focus-visible .howto-index__count,
.howto-index__row:hover .howto-index__terms,
.howto-index__row:focus-visible .howto-index__terms{ color:inherit; opacity:.72; }
.howto-index__num{
  font-family:var(--font-mono); font-weight:400; font-size:clamp(22px,3.4vw,40px);
  letter-spacing:0; min-width:2ch; padding-left:10px;
}
.howto-index__body{ min-width:0; }
.howto-index__name{
  display:block; font-family:var(--font-hero); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,5vw,64px); line-height:.92; letter-spacing:.005em;
}
.howto-index__terms{
  display:block; margin-top:6px; font-size:var(--t-body); font-weight:400; color:rgba(11,11,9,.62);
}
.howto-index__count{
  font-family:var(--font-mono); font-size:var(--t-label-lg); letter-spacing:var(--ls-label);
  color:rgba(11,11,9,.62); white-space:nowrap;
}
.howto-index__arrow{ flex:0 0 auto; width:22px; height:22px; }
.howto-index__arrow svg{ display:block; width:100%; height:100%; }

/* ── ALLE: Kopf, Filter, Suche ────────────────────────────────────────── */
.howto-listhead{ padding:clamp(40px,7vw,80px) 0 clamp(14px,2vw,20px); }
.howto-listhead__title{
  margin:clamp(10px,2vw,18px) 0 0; font-family:var(--font-hero); font-weight:400; text-transform:uppercase;
  font-size:var(--t-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero);
}

.howto-filters{ margin:clamp(16px,2.6vw,26px) 0; }
.howto-filter-group{ margin:0 0 18px; }
.howto-filter-group__label{
  display:block; margin:0 0 10px; font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label-wide);
  text-transform:uppercase; color:rgba(11,11,9,.55);
}
.howto-filter-list{ display:flex; flex-wrap:wrap; gap:4px 28px; list-style:none; margin:0; padding:0; }
.howto-filter-btn{
  display:inline-flex; align-items:center; min-height:var(--hit-min); padding:6px 0; border:0; border-bottom:2px solid transparent;
  background:none; color:var(--black); font-family:var(--font-mono); font-size:var(--t-label-lg);
  letter-spacing:var(--ls-label); text-transform:uppercase; cursor:pointer;
}
.howto-filter-btn:hover{ border-bottom-color:rgba(11,11,9,.35); }
.howto-filter-btn[aria-pressed="true"]{ border-bottom-color:var(--black); font-weight:var(--w-medium); }

/* Sekundäre Filter (Werkzeug/Verfahren/Niveau/Dauer) bleiben eingeklappt,
   bis sie gebraucht werden — sonst wirkt die Seite mit allen fünf
   Filtergruppen auf einmal überladen. Öffnet sich von selbst, sobald ein
   Filter darin aktiv ist (siehe kht-howto-index.js). */
.howto-filters-more{ margin:4px 0 0; }
.howto-filters-more__summary{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--hit-min); padding:4px 0;
  cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:var(--t-label-lg);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:rgba(11,11,9,.7);
}
.howto-filters-more__summary::-webkit-details-marker{ display:none; }
.howto-filters-more__summary::before{ content:'+'; font-size:1.1em; }
.howto-filters-more[open] .howto-filters-more__summary::before{ content:'–'; }
.howto-filters-more__summary:hover{ color:var(--black); }
.howto-filters-more__body{ margin-top:14px; padding-top:4px; }

.howto-searchbar{ display:flex; align-items:center; gap:12px; border-bottom:2px solid var(--black); padding-bottom:10px; margin:28px 0 8px; }
.howto-searchbar input{
  flex:1; min-width:0; border:0; background:none; padding:6px 0; color:var(--black);
  font-family:var(--font-body); font-size:var(--t-body-lg);
}
.howto-searchbar input::placeholder{ color:rgba(11,11,9,.42); }
.howto-searchbar__icon{ font-size:18px; opacity:.6; }
.howto-searchbar button{ border:0; background:none; color:var(--black); font-size:16px; cursor:pointer; min-width:var(--hit-min); min-height:var(--hit-min); }

.howto-status{ margin:0 0 8px; font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label); color:rgba(11,11,9,.55); }

/* ── ALLE: Liste ohne Cards ───────────────────────────────────────────── */
.howto-list{ border-top:2px solid var(--black); }
.howto-listrow-head{
  display:grid; grid-template-columns:3.5rem 1fr 14rem 8rem 2rem; gap:16px; padding:10px 0;
  font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase;
  color:rgba(11,11,9,.55); border-bottom:1px solid var(--black);
}
.howto-row{
  display:grid; grid-template-columns:3.5rem 1fr 14rem 8rem 2rem; align-items:center; gap:16px;
  padding:clamp(16px,2.4vw,24px) 0; border-bottom:1px solid var(--black); text-decoration:none; color:var(--black);
  transition:background-color 120ms ease,color 120ms ease;
}
/* Same `.howto-shell a:hover` specificity issue as .howto-index__row above. */
.howto-shell .howto-row:hover,
.howto-shell .howto-row:focus-visible{ background:var(--black); color:var(--paper); }
.howto-row__num{ font-family:var(--font-mono); font-size:var(--t-body-lg); padding-left:10px; }
.howto-listrow-head span:first-child{ padding-left:10px; }
.howto-row__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2vw,22px); line-height:1.2; min-width:0; }
.howto-row__tools{ font-family:var(--font-mono); font-size:var(--t-small); letter-spacing:var(--ls-label); text-transform:uppercase; opacity:.72; }
.howto-row__time{ font-family:var(--font-mono); font-size:var(--t-small); letter-spacing:var(--ls-label); text-transform:uppercase; opacity:.72; white-space:nowrap; }
.howto-row__arrow{ justify-self:end; width:18px; height:18px; }
.howto-row__arrow svg{ display:block; width:100%; height:100%; }

.howto-empty{ padding:clamp(40px,6vw,72px) 0; text-align:left; }
.howto-empty h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(24px,3vw,32px); }
.howto-empty p{ margin:10px 0 20px; color:rgba(11,11,9,.65); }
.howto-empty button{
  border:1px solid var(--black); background:var(--paper); color:var(--black); padding:10px 18px;
  font-family:var(--font-mono); font-size:var(--t-label-lg); letter-spacing:var(--ls-label); text-transform:uppercase; cursor:pointer;
}
.howto-empty button:hover{ background:var(--black); color:var(--paper); }

/* ── DETAIL: Kopf ──────────────────────────────────────────────────────── */
.howto-detail__crumb{ padding:clamp(28px,5vw,56px) 0 0; }
.howto-detail__crumb .howto-kicker{ margin-bottom:8px; }
.howto-detail__mapping{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label-wide); color:rgba(11,11,9,.55); text-transform:uppercase; }
.howto-detail__title{
  margin:14px 0 0; font-family:var(--font-hero); font-weight:400; text-transform:uppercase;
  font-size:var(--t-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero);
}
.howto-detail__title span{ display:block; }
.howto-detail__meta{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:clamp(20px,3vw,32px) 0 0; padding:18px 0;
  border-top:1px solid var(--black); border-bottom:1px solid var(--black);
  font-family:var(--font-mono); font-size:var(--t-label-lg); letter-spacing:var(--ls-label); text-transform:uppercase;
}
.howto-detail__meta span{ display:inline-block; }

/* ── DETAIL: ZIEL / DU BRAUCHST / ERGEBNIS ────────────────────────────── */
.howto-intro{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin:clamp(32px,5vw,56px) 0; background:var(--black); }
.howto-intro__block{ background:var(--paper); color:var(--black); padding:clamp(22px,3vw,32px); }
.howto-intro__block--flat{ background:var(--black); color:var(--paper); }
.howto-intro__label{ display:block; margin:0 0 12px; font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase; opacity:.6; }
.howto-intro__block--flat .howto-intro__label{ opacity:.72; }
.howto-intro__block p,
.howto-intro__block li{ margin:0 0 8px; font-size:var(--t-body); line-height:var(--lh-body); }
.howto-intro__block ul{ margin:0; padding:0 0 0 1.1em; }

/* ── DETAIL: reduziertes Inhaltsverzeichnis ─────────────────────────────
   Sieben Wörter, keine Cards: ein Sprungregister für alle, die den
   Workflow zum zweiten Mal benutzen und nur noch einen Schritt suchen. */
.howto-toc{
  display:flex; flex-wrap:wrap; margin:clamp(28px,4vw,44px) 0 0;
  padding:12px 0; border-top:1px solid var(--black); border-bottom:1px solid var(--black);
}
.howto-toc__item{
  display:inline-flex; align-items:baseline; gap:7px; padding:6px 16px 6px 0; margin-right:12px;
  font-family:var(--font-mono); font-size:var(--t-label-lg); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--black); text-decoration:none; border-bottom:0;
}
.howto-toc__item:hover,
.howto-toc__item:focus-visible{ text-decoration:underline; }
.howto-toc__num{ opacity:.5; }

/* ── DETAIL: Arbeitsschritte ───────────────────────────────────────────
   Jeder Schritt liest sich wie eine eigene Journal-Doppelseite: eine
   Kapitelzeile mit Vor/Zurück, die Headline nimmt sich den Raum, darunter
   ein asymmetrisches Raster statt einer einzelnen langen Textspalte —
   links der Ablauf (WAS/WARUM), rechts die Kontrollinformation
   (WERKZEUG/GUTES ERGEBNIS/TYPISCHER FEHLER), damit der Text auch beim
   zweiten Lesen gezielt überflogen werden kann. */
.howto-steps{ margin:clamp(48px,7vw,88px) 0; border-top:2px solid var(--black); }
.howto-step{
  padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);
  border-bottom:1px solid var(--black);
}
.howto-step__chapter{
  display:flex; align-items:center; gap:16px; margin:0 0 clamp(20px,3vw,28px);
  font-family:var(--font-mono); font-weight:400; font-size:var(--t-label-lg);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:rgba(11,11,9,.55);
}
.howto-step__navlink{
  color:var(--black); border-bottom:0; text-decoration:none; font-size:1.15em; line-height:1; padding:4px; margin:-4px;
}
.howto-step__navlink:hover,
.howto-step__navlink:focus-visible{ opacity:.6; }
.howto-step__title{
  margin:0 0 clamp(28px,4.5vw,48px); max-width:20ch; font-family:var(--font-hero); font-weight:400; text-transform:uppercase;
  font-size:clamp(38px,6.4vw,76px); line-height:var(--lh-hero); letter-spacing:var(--ls-hero);
}
.howto-step__body{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px); }
.howto-step__section{ max-width:var(--measure-lead); margin:0 0 clamp(20px,3vw,28px); }
.howto-step__section:last-child{ margin-bottom:0; }
.howto-step__label{ display:block; margin:0 0 8px; font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:rgba(11,11,9,.55); }
.howto-step__section p,
.howto-step__section li{ margin:0 0 8px; font-size:var(--t-body-lg); line-height:var(--lh-lead); color:var(--black); }
.howto-step__section code{ font-family:var(--font-mono); font-size:.94em; background:rgba(11,11,9,.06); padding:.05em .35em; }
.howto-step__more{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--font-mono); font-size:var(--t-label-lg); letter-spacing:var(--ls-label); text-transform:uppercase; }
@media (min-width:860px){
  .howto-step__body{ grid-template-columns:2fr 1fr; align-items:start; }
  .howto-step__aside{ border-left:1px solid var(--black); padding-left:clamp(24px,3vw,36px); }
  .howto-step__aside .howto-step__section{ max-width:none; }
}
/* Unter 860px steht die Kontrollspalte (Werkzeug/Gutes Ergebnis/Typischer
   Fehler) unter dem Ablauf. Eine Linie davor genügt, um sie als
   zusammengehörigen Block abzusetzen — ohne daraus eine Card zu machen. */
@media (max-width:859px){
  .howto-step__aside{ margin-top:clamp(4px,1.5vw,12px); padding-top:clamp(20px,3vw,28px); border-top:1px solid var(--black); }
}

/* ── DETAIL: ALS NÄCHSTES ─────────────────────────────────────────────── */
.howto-next{ margin:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px); border-top:2px solid var(--black); }
.howto-next__label{ display:block; margin:20px 0 0; font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:rgba(11,11,9,.55); }
.howto-next__row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(16px,2.4vw,22px) 0;
  border-bottom:1px solid var(--black); text-decoration:none; color:var(--black);
  font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.2vw,26px);
}
/* Same `.howto-shell a:hover` specificity issue as .howto-index__row above. */
.howto-shell .howto-next__row:hover,
.howto-shell .howto-next__row:focus-visible{ background:var(--black); color:var(--paper); }
.howto-next__row svg{ flex:0 0 auto; width:18px; height:18px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .howto-listrow-head,.howto-row{ grid-template-columns:2.4rem 1fr auto; }
  .howto-listrow-head span:nth-child(4),.howto-listrow-head span:nth-child(5),
  .howto-row__tools{ display:none; }
  .howto-row__time{ text-align:right; }
}
@media (max-width:640px){
  .howto-index__row{ grid-template-columns:auto 1fr; row-gap:6px; }
  .howto-index__count,.howto-index__arrow{ grid-column:2; justify-self:start; }
  .howto-listrow-head{ display:none; }
  .howto-row{ grid-template-columns:1fr auto; row-gap:4px; }
  .howto-row__num{ grid-column:1; }
  .howto-row__title{ grid-column:1 / -1; }
  .howto-row__time{ grid-column:1; text-align:left; }
  .howto-row__arrow{ grid-column:2; grid-row:1; }
  .howto-intro{ grid-template-columns:1fr; }
  .howto-search__form{ flex-direction:column; align-items:stretch; gap:12px; }
}
@media (prefers-reduced-motion:reduce){
  .howto-index__row,.howto-row,.howto-next__row{ transition:none; }
}