/* Shared site chrome. Specification: /header_footer_design.md. */
:root {
  --chrome-ink:#f7f5ef;
  --chrome-muted:#8c9885;
  --chrome-separator:#6e7b68;
  --chrome-link:#acb3a4;
}
.kht-dark[data-area="create"] {--accent:#f0ff1f;--accent-glass:rgba(240,255,31,.22);--chrome-glow:rgba(240,255,31,.35)}
.kht-dark[data-area="make"] {--accent:#f3ae51;--accent-glass:rgba(243,174,81,.28);--chrome-glow:rgba(243,174,81,.35)}
.kht-dark[data-area="show"] {--accent:#e84fa0;--accent-glass:rgba(232,79,160,.28);--chrome-glow:rgba(232,79,160,.35)}
.kht-dark[data-area="sell"] {--accent:#f04c4a;--accent-glass:rgba(240,76,74,.28);--chrome-glow:rgba(240,76,74,.35)}
.kht-dark[data-area="care"] {--accent:#c8ad5a;--accent-glass:rgba(200,173,90,.28);--chrome-glow:rgba(200,173,90,.35)}
.kht-dark[data-area="explore"] {--accent:#2cd6b7;--accent-glass:rgba(44,214,183,.28);--chrome-glow:rgba(44,214,183,.35)}
.kht-dark[data-area="home"],.kht-dark[data-area="workflows"],.kht-dark[data-area="howto"] {--accent:#f7f5ef;--accent-glass:rgba(247,245,239,.28);--chrome-glow:rgba(247,245,239,.35)}
.kht-site-header,.kht-site-footer {box-sizing:border-box;border-radius:0;font-family:'Open Sans',sans-serif;}
.kht-site-header {
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:32px;height:84px;padding:0 clamp(20px,5vw,72px);
  background:rgba(20,24,16,.55);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:2px solid var(--accent);
  box-shadow:inset 0 1px 0 rgba(247,245,239,.14),0 1px 40px var(--chrome-glow);
}
.kht-dark .kht-site-brand {
  display:inline-flex;flex-direction:column;gap:4px;flex-shrink:0;width:max-content;
  color:var(--chrome-ink);text-decoration:none;border:0;background:none;
}
.kht-site-wordmark {font-family:'Open Sans',sans-serif;font-size:17px;font-weight:800;letter-spacing:.14em;line-height:1;white-space:nowrap;}
.kht-site-payoff {display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:10.5px;font-weight:300;letter-spacing:.06em;line-height:1;color:var(--chrome-muted);}
.kht-site-path {display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:15px;min-width:0;line-height:1.3;text-transform:none;}
.kht-dark .kht-site-path a {padding:6px 9px;color:var(--chrome-muted);text-decoration:none;border:0;background:none;}
.kht-dark .kht-site-path a.kht-site-path__parent {text-decoration:underline;text-decoration-color:var(--chrome-separator);text-underline-offset:3px;}
.kht-site-path__parent,.kht-site-path__separator {flex-shrink:0;white-space:nowrap;}
.kht-site-path__separator {color:var(--chrome-separator);}
/* Vor der aktuellen Station steht schon der farbige Slash-Block — der graue
   Trenner davor entfiele sonst doppelt (Spec: "davor der Slash-Block"). */
.kht-site-path__separator:has(+ .kht-site-path__current) {display:none;}
.kht-site-path__current {display:inline-flex;align-items:center;gap:.2em;padding:6px 9px;font-weight:700;color:var(--chrome-ink);min-width:0;}
.kht-site-path__label {overflow-wrap:normal;word-break:normal;hyphens:none;}
.kht-site-slash {display:inline-block;flex:0 0 .16em;width:.16em;height:.86em;background:var(--accent);transform:skewX(-14deg);box-shadow:0 0 30px var(--accent-glass);}
.kht-dark .kht-site-path__back {display:none;}
.kht-site-footer-edge {height:2px;background:var(--accent);box-shadow:0 -1px 40px var(--chrome-glow);border-radius:0;}
.kht-site-footer {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px;border:0;background:linear-gradient(180deg,rgba(247,245,239,.06) 0%,rgba(247,245,239,.02) 100%);}
.kht-site-footer .kht-site-wordmark {font-size:16px;}
/* Header and footer share one left/right edge on every page: the edge of the centred content column (max --content-max), so the wordmark
   sits at the same position in the header and in the footer, and on every page. The header right edge lines up with the area rail (from 1241px). */
.kht-dark {--kht-pad:clamp(20px,5vw,72px);--kht-edge-x:calc(var(--kht-pad) + max(0px,(100% - 2 * var(--kht-pad) - var(--content-max,1320px)) / 2));}
.kht-site-header,.kht-site-footer {padding-inline:var(--kht-edge-x);}
@media(min-width:1241px) {.kht-dark .kht-site-header {padding-right:var(--rail-right,calc(clamp(4px,.7vw,12px) + 30px));}}
.kht-site-footer-links {display:flex;flex-wrap:wrap;gap:14px 22px;font-size:14px;}
.kht-dark .kht-site-footer-links a {color:var(--chrome-link);text-decoration:none;border:0;background:none;}
.kht-dark .kht-site-header a,.kht-dark .kht-site-footer a {transition:color 140ms ease;border-radius:0;}
.kht-dark .kht-site-header a:hover,.kht-dark .kht-site-footer a:hover {color:var(--chrome-ink);text-decoration:none;}
.kht-dark .kht-site-header a:focus-visible,.kht-dark .kht-site-footer a:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
@media(max-width:759px) {
  .kht-site-header {height:72px;gap:16px;}
  .kht-site-header .kht-site-wordmark {font-size:15px;}
  .kht-site-payoff {font-size:9.5px;}
  .kht-site-path__parent,.kht-site-path__separator {display:none;}
  .kht-dark .kht-site-path__back {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;box-sizing:border-box;}
  .kht-site-path__current {padding-inline:2px;}
  .kht-site-path__label {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
  .kht-site-footer {flex-direction:column;align-items:flex-start;}
  .kht-site-footer-links a {display:inline-flex;align-items:center;min-height:44px;}
}
@media(max-width:479px) {
  .kht-site-payoff {display:none;}
  .kht-site-header {gap:8px;}
  .kht-dark .kht-site-path__back {padding-inline:4px;}
}
@media(prefers-reduced-motion:reduce) {
  .kht-dark .kht-site-header a,.kht-dark .kht-site-footer a {transition:none;}
}

/* ============================================================
   Area rail: fixed at the right edge, vertically centred, on every page (hidden below 1241px by kht-dark-shell.css).
   Small mono labels, the current area in its own colour, hover in the colour of the target area.
   ============================================================ */
.kht-dark .kht-rail{ right:var(--rail-right,calc(clamp(4px,.7vw,12px) + 30px)); }
.kht-dark .kht-rail__btn{ text-decoration:none; color:var(--rail-color,var(--green-400)); gap:6px; min-width:0; font-size:10.5px; opacity:1; transition:color 140ms ease,transform 140ms ease; }
.kht-dark .kht-rail__btn:last-child{ margin-top:12px; }
.kht-dark .kht-rail__btn:hover,
.kht-dark .kht-rail__btn:focus-visible{ color:var(--area-color,#fff); transform:translateX(-4px); }
.kht-dark .kht-rail__bar{ width:10px; }
.kht-dark .kht-rail__btn--active .kht-rail__bar,
.kht-dark .kht-rail__btn:hover .kht-rail__bar,
.kht-dark .kht-rail__btn:focus-visible .kht-rail__bar{ width:24px; }
.kht-dark .kht-rail__btn:focus-visible{ outline:2px solid #fff; outline-offset:5px; }
@media(prefers-reduced-motion:reduce){ .kht-dark .kht-rail__btn,.kht-dark .kht-rail__bar{ transition:none; } .kht-dark .kht-rail__btn:hover,.kht-dark .kht-rail__btn:focus-visible{ transform:none; } }