/* =========================================================
   Demo-Welt 03 · NORDKANT – Stahl- und Treppenbau
   Bereich: .w-nordkant   ·   Präfix: nw-
   Dunkel, technisch: Werkstatt trifft Konstruktionsbüro.
   Layout ausschließlich über @container stage (…).
   ========================================================= */

/* ---------- Zusatzschrift: Oxanium (kantig, technisch) ---------- */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oxanium-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oxanium-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/oxanium-800.woff2') format('woff2');
}

/* =========================================================
   0 · Marken-Token
   ========================================================= */
.w-nordkant {
  --nw-bg:      #0b0d11;
  --nw-bg-2:    #0e1116;
  --nw-panel:   #13161c;
  --nw-panel-2: #191d25;
  --nw-panel-3: #1f242e;
  --nw-line:    #262c37;
  --nw-line-2:  #323a48;
  --nw-fg:      #e6e9f0;
  --nw-fg-2:    #c3c9d6;
  --nw-muted:   #8a91a1;
  --nw-muted-2: #666d7d;
  --nw-acc:     #5b6cff;
  --nw-acc-2:   #8f9bff;
  --nw-warn:    #ffa53d;
  --nw-good:    #38d39f;

  --nw-ui:   'Oxanium', 'Inter', system-ui, sans-serif;
  --nw-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --nw-txt:  'Inter', system-ui, sans-serif;

  --nw-r:    4px;
  --nw-r-sm: 3px;
  --nw-ease: cubic-bezier(.22, .61, .36, 1);

  --nw-sh-1: 0 1px 0 rgba(255,255,255,.028) inset, 0 1px 2px rgba(0,0,0,.5);
  --nw-sh-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 4px rgba(0,0,0,.42), 0 14px 30px -16px rgba(0,0,0,.85);
  --nw-sh-3: 0 1px 0 rgba(255,255,255,.04) inset, 0 3px 8px rgba(0,0,0,.5), 0 28px 60px -26px rgba(0,0,0,.95);
  --nw-glow: 0 0 0 1px rgba(91,108,255,.34), 0 0 22px -4px rgba(91,108,255,.42);

  --nw-hdr-h: 56px;
  --nw-pad:   clamp(20px, 4cqi, 46px);
  --nw-secy:  clamp(46px, 6.4cqi, 78px);

  /* geteilte Sandbox-Bausteine einfärben */
  --sbx-bg:        #191d25;
  --sbx-fg:        #e6e9f0;
  --sbx-muted:     #8a91a1;
  --sbx-line:      #2e3543;
  --sbx-acc:       #5b6cff;
  --sbx-acc-fg:    #ffffff;
  --sbx-radius:    4px;
  --sbx-radius-sm: 3px;
  --sbx-shadow:    0 2px 6px rgba(0,0,0,.5), 0 22px 46px -18px rgba(0,0,0,.95);
  --sbx-font:      'Oxanium', 'Inter', system-ui, sans-serif;

  background: var(--nw-bg);
  color: var(--nw-fg);
  color-scheme: dark;
}

/* =========================================================
   1 · Grundgerüst
   ========================================================= */
.w-nordkant .nw-page {
  font-family: var(--nw-txt);
  font-size: 15px;
  line-height: 1.6;
  color: var(--nw-fg-2);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.w-nordkant .nw-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--nw-pad);
}

.w-nordkant .nw-main { display: block; min-width: 0; }
.w-nordkant .nw-sec { position: relative; }
.w-nordkant .nw-sec > .nw-wrap { padding-block: var(--nw-secy); }
.w-nordkant .nw-sec + .nw-sec { border-top: 1px solid var(--nw-line); }

.w-nordkant h1,
.w-nordkant h2,
.w-nordkant h3,
.w-nordkant h4 {
  font-family: var(--nw-ui);
  font-weight: 700;
  color: var(--nw-fg);
  margin: 0;
  letter-spacing: -.01em;
}

.w-nordkant p { margin: 0; }

/* Sichtbarer Fokus in der eigenen Palette. Der globale Ring der Hauptseite
   (#1f3fd0) hat auf diesem Grund nur rund 1,9 : 1 Kontrast und verschwindet. */
.w-nordkant :focus-visible {
  outline: 2px solid var(--nw-acc-2);
  outline-offset: 2px;
}
.w-nordkant .nw-swatch:focus-visible { outline-offset: 4px; }

/* Blueprint-Raster – feines Netz, stellenweise stärker, weich auslaufend */
.w-nordkant .nw-bp { position: relative; isolation: isolate; }
.w-nordkant .nw-bp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(91,108,255,.070) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91,108,255,.070) 1px, transparent 1px),
    linear-gradient(to right,  rgba(91,108,255,.135) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(91,108,255,.135) 1px, transparent 1px);
  background-size: 21px 21px, 21px 21px, 105px 105px, 105px 105px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(120% 78% at 22% 12%, #000 6%, rgba(0,0,0,.42) 46%, transparent 82%);
          mask-image: radial-gradient(120% 78% at 22% 12%, #000 6%, rgba(0,0,0,.42) 46%, transparent 82%);
}

/* Kicker / Abschnittsmarke */
.w-nordkant .nw-kick {
  display: inline-flex;
  align-items: center;
  gap: .62em;
  font-family: var(--nw-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nw-muted);
}
.w-nordkant .nw-kick b { color: var(--nw-acc); font-weight: 500; }
.w-nordkant .nw-kick::before {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--nw-acc), rgba(91,108,255,.15));
  flex-shrink: 0;
}

.w-nordkant .nw-sechead { max-width: 60ch; }
.w-nordkant .nw-sechead h2 {
  font-size: clamp(1.42rem, 3.4cqi, 2.1rem);
  line-height: 1.12;
  margin-top: 14px;
}
.w-nordkant .nw-sechead > p {
  margin-top: 13px;
  color: var(--nw-muted);
  font-size: .96rem;
  max-width: 54ch;
}

/* =========================================================
   2 · Kopfzeile
   ========================================================= */
.w-nordkant .nw-hdr {
  position: sticky;
  top: 0;
  z-index: 25;
  height: var(--nw-hdr-h);
  background: rgba(11, 13, 17, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--nw-line);
}
.w-nordkant .nw-hdr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,108,255,.5) 22%, rgba(91,108,255,.12) 62%, transparent);
}
.w-nordkant .nw-hdr-in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.w-nordkant .nw-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--nw-fg);
  flex-shrink: 0;
}
.w-nordkant .nw-brand svg { width: 22px; height: 22px; display: block; color: var(--nw-acc); }
.w-nordkant .nw-brand-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.w-nordkant .nw-brand-name {
  font-family: var(--nw-ui);
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.w-nordkant .nw-brand-sub {
  font-family: var(--nw-mono);
  font-size: .53rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
  margin-top: 4px;
}

.w-nordkant .nw-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.w-nordkant .nw-navlink {
  font-family: var(--nw-ui);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--nw-muted);
  background: none;
  border: 0;
  border-radius: var(--nw-r-sm);
  padding: .5em .72em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--nw-ease), background-color .2s var(--nw-ease);
}
.w-nordkant .nw-navlink:hover { color: var(--nw-fg); background: rgba(255,255,255,.05); }
.w-nordkant .nw-navlink.is-on { color: var(--nw-acc-2); }

.w-nordkant .nw-burger {
  display: none;
  margin-left: auto;
  width: 36px; height: 32px;
  align-items: center;
  justify-content: center;
  background: var(--nw-panel-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  color: var(--nw-fg);
  cursor: pointer;
}
.w-nordkant .nw-burger svg { width: 15px; height: 15px; display: block; }

/* Kompaktmenü in der Overlay-Ebene */
.w-nordkant .nw-menu {
  position: absolute;
  top: calc(var(--nw-hdr-h) + 8px);
  right: 14px;
  left: 14px;
  z-index: 30;
  background: var(--nw-panel-2);
  border: 1px solid var(--nw-line-2);
  border-radius: var(--nw-r);
  box-shadow: var(--nw-sh-3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s var(--nw-ease), transform .18s var(--nw-ease);
}
.w-nordkant .nw-menu.is-in { opacity: 1; transform: none; }
.w-nordkant .nw-menu button {
  font-family: var(--nw-ui);
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  color: var(--nw-fg-2);
  background: none;
  border: 0;
  border-radius: var(--nw-r-sm);
  padding: .72em .8em;
  cursor: pointer;
}
.w-nordkant .nw-menu button:hover { background: rgba(91,108,255,.14); color: var(--nw-fg); }

/* =========================================================
   3 · Schaltflächen
   ========================================================= */
.w-nordkant .nw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--nw-ui);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  padding: .92em 1.35em;
  border-radius: var(--nw-r);
  border: 1px solid var(--nw-line-2);
  background: var(--nw-panel-2);
  color: var(--nw-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--nw-ease), border-color .2s var(--nw-ease),
              color .2s var(--nw-ease), transform .2s var(--nw-ease), box-shadow .2s var(--nw-ease);
}
.w-nordkant .nw-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.w-nordkant .nw-btn:hover { transform: translateY(-1px); border-color: var(--nw-acc); }
.w-nordkant .nw-btn:active { transform: translateY(0); }

.w-nordkant .nw-btn--pri {
  background: linear-gradient(180deg, #6b7aff, #4b5cf0);
  border-color: #6b7aff;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 6px 18px -8px rgba(91,108,255,.9);
}
.w-nordkant .nw-btn--pri:hover { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 26px -8px rgba(91,108,255,1); }

.w-nordkant .nw-btn--gho { background: transparent; color: var(--nw-fg-2); }
.w-nordkant .nw-btn--gho:hover { background: rgba(255,255,255,.045); color: var(--nw-fg); }

.w-nordkant .nw-btn--sm { font-size: .7rem; padding: .62em .9em; letter-spacing: .09em; }
.w-nordkant .nw-btn--wide { width: 100%; }
.w-nordkant .nw-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.w-nordkant .nw-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--nw-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nw-acc-2);
  cursor: pointer;
  border-bottom: 1px solid rgba(143,155,255,.3);
  transition: border-color .2s var(--nw-ease), color .2s var(--nw-ease);
}
.w-nordkant .nw-link:hover { border-color: var(--nw-acc-2); color: #fff; }

/* =========================================================
   4 · Startbereich
   ========================================================= */
.w-nordkant .nw-hero { position: relative; overflow: hidden; }
.w-nordkant .nw-hero::after {
  content: '';
  position: absolute;
  top: -160px; right: -120px;
  width: 520px; height: 460px;
  background: radial-gradient(ellipse at center, rgba(91,108,255,.24), rgba(91,108,255,.05) 48%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.w-nordkant .nw-hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4cqi, 48px);
  align-items: center;
  padding-block: clamp(34px, 5cqi, 56px) clamp(30px, 4.4cqi, 50px);
}
.w-nordkant .nw-h1 {
  font-size: clamp(1.85rem, 5.1cqi, 3.05rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  font-weight: 800;
  margin-top: 16px;
  text-wrap: balance;
}
.w-nordkant .nw-h1 em {
  font-style: normal;
  color: var(--nw-acc-2);
  text-shadow: 0 0 32px rgba(91,108,255,.5);
}
.w-nordkant .nw-hero-lead {
  margin-top: 16px;
  font-size: clamp(.94rem, 1.7cqi, 1.04rem);
  color: var(--nw-muted);
  max-width: 46ch;
}
.w-nordkant .nw-hero-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.w-nordkant .nw-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  background: var(--nw-line);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  overflow: hidden;
}
.w-nordkant .nw-stat { background: var(--nw-panel); padding: 12px 13px 13px; min-width: 0; }
.w-nordkant .nw-stat b {
  display: block;
  font-family: var(--nw-mono);
  font-size: clamp(.98rem, 2.1cqi, 1.2rem);
  font-weight: 500;
  color: var(--nw-fg);
  letter-spacing: -.01em;
}
.w-nordkant .nw-stat span {
  display: block;
  margin-top: 5px;
  font-family: var(--nw-mono);
  font-size: .57rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
  line-height: 1.35;
}

.w-nordkant .nw-hero-art {
  position: relative;
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  background:
    linear-gradient(180deg, rgba(25,29,37,.9), rgba(11,13,17,.9));
  padding: 12px;
  box-shadow: var(--nw-sh-2);
  overflow: hidden;
}
.w-nordkant .nw-hero-art svg { width: 100%; height: auto; display: block; }
.w-nordkant .nw-hero-art figcaption {
  position: absolute;
  left: 14px; bottom: 10px;
  font-family: var(--nw-mono);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
}
.w-nordkant .nw-hero-art .nw-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(91,108,255,.55);
}
.w-nordkant .nw-hero-art .nw-corner.tl { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.w-nordkant .nw-hero-art .nw-corner.br { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }

/* Zeichenanimation der Linien */
.w-nordkant .nw-ink {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: nw-draw 1.5s var(--nw-ease) forwards;
}
@keyframes nw-draw { to { stroke-dashoffset: 0; } }

/* =========================================================
   5 · Karten
   ========================================================= */
.w-nordkant .nw-card {
  position: relative;
  background: var(--nw-panel);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  box-shadow: var(--nw-sh-1);
  min-width: 0;
}
.w-nordkant .nw-card-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nw-line);
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
}
.w-nordkant .nw-card-hd h3 {
  font-family: var(--nw-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--nw-muted);
}
.w-nordkant .nw-card-hd .nw-tag {
  margin-left: auto;
  font-family: var(--nw-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--nw-acc-2);
  border: 1px solid rgba(91,108,255,.32);
  background: rgba(91,108,255,.1);
  border-radius: var(--nw-r-sm);
  padding: 2px 7px;
  white-space: nowrap;
}
.w-nordkant .nw-card-bd { padding: 16px; }

/* =========================================================
   6 · Konfigurator – Arbeitsbereich
   ========================================================= */
.w-nordkant .nw-cfg {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 28px;
}
.w-nordkant .nw-cfg-a {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px;
  min-width: 0;
}
.w-nordkant .nw-cfg-b { display: flex; flex-direction: column; min-width: 0; }

/* ---- Zeichnung ---- */
.w-nordkant .nw-draw { display: flex; flex-direction: column; overflow: hidden; }
.w-nordkant .nw-draw .nw-card-bd {
  padding: 8px 10px 4px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(91,108,255,.06), transparent 62%),
    var(--nw-bg-2);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--nw-line);
}
.w-nordkant .nw-draw svg { width: 100%; height: auto; display: block; }

.w-nordkant .nw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 16px 12px;
}
.w-nordkant .nw-legend div {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--nw-mono);
  font-size: .6rem;
  letter-spacing: .07em;
  color: var(--nw-muted);
  min-width: 0;
}
.w-nordkant .nw-legend i {
  width: 9px; height: 9px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.22);
  flex-shrink: 0;
}
.w-nordkant .nw-legend b { color: var(--nw-fg-2); font-weight: 500; }

/* Wischanimation beim Neuzeichnen */
.w-nordkant .nw-drawin { animation: nw-wipe .62s var(--nw-ease) both; }
@keyframes nw-wipe {
  from { clip-path: inset(0 100% 0 0); opacity: .2; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
.w-nordkant .nw-stagger { animation: nw-pop .34s var(--nw-ease) both; }
@keyframes nw-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Kennwerte („Messgerät“) ---- */
.w-nordkant .nw-gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--nw-line);
  border-bottom: 1px solid var(--nw-line);
}
.w-nordkant .nw-gauge {
  background: var(--nw-panel);
  padding: 11px 13px 12px;
  min-width: 0;
  position: relative;
  transition: background-color .3s var(--nw-ease);
}
.w-nordkant .nw-gauge.is-warn { background: linear-gradient(180deg, rgba(255,165,61,.09), rgba(255,165,61,.03)); }
.w-nordkant .nw-gauge::after {
  content: '';
  position: absolute;
  left: 0; top: 11px; bottom: 12px;
  width: 2px;
  background: var(--nw-line-2);
  transition: background-color .3s var(--nw-ease);
}
/* Reihenfolge zählt: ein Kennwert kann zugleich Schlüsselwert und Warnung
   sein – dann muss die Warnfarbe gewinnen, nicht die Akzentfarbe. */
.w-nordkant .nw-gauge.is-key::after { background: var(--nw-acc); }
.w-nordkant .nw-gauge.is-warn::after { background: var(--nw-warn); }

.w-nordkant .nw-g-lab {
  display: block;
  font-family: var(--nw-mono);
  font-size: .55rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-nordkant .nw-g-val {
  display: flex;
  align-items: baseline;
  gap: .3em;
  margin-top: 6px;
  min-width: 0;
}
.w-nordkant .nw-g-num {
  font-family: var(--nw-mono);
  font-weight: 500;
  font-size: clamp(1.02rem, 2.3cqi, 1.28rem);
  font-variant-numeric: tabular-nums;
  color: var(--nw-fg);
  letter-spacing: -.02em;
}
.w-nordkant .nw-gauge.is-warn .nw-g-num { color: var(--nw-warn); }
.w-nordkant .nw-g-unit {
  font-family: var(--nw-mono);
  font-size: .63rem;
  color: var(--nw-muted-2);
}

.w-nordkant .nw-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1px;
  background: var(--nw-line);
}
.w-nordkant .nw-summary-row > div { background: var(--nw-panel); padding: 12px 13px 13px; min-width: 0; }
.w-nordkant .nw-price {
  background: linear-gradient(180deg, rgba(91,108,255,.11), rgba(91,108,255,.03)) !important;
}
.w-nordkant .nw-price .nw-g-num { font-size: clamp(1rem, 2.2cqi, 1.24rem); color: var(--nw-acc-2); }
.w-nordkant .nw-price small {
  display: block;
  margin-top: 5px;
  font-family: var(--nw-txt);
  font-size: .67rem;
  color: var(--nw-muted-2);
  line-height: 1.4;
}

.w-nordkant .nw-formula {
  padding: 11px 16px 13px;
  border-top: 1px solid var(--nw-line);
  background: var(--nw-bg-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.w-nordkant .nw-formula code {
  font-family: var(--nw-mono);
  font-size: .68rem;
  color: var(--nw-muted);
  letter-spacing: .01em;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.w-nordkant .nw-formula code::-webkit-scrollbar { display: none; }
.w-nordkant .nw-formula code b { color: var(--nw-fg-2); font-weight: 500; }
.w-nordkant .nw-formula code i { color: var(--nw-acc-2); font-style: normal; }

/* ---- Normprüfung ---- */
.w-nordkant .nw-verdict {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--nw-line);
  background: linear-gradient(180deg, rgba(56,211,159,.09), transparent);
}
.w-nordkant .nw-verdict.is-warn { background: linear-gradient(180deg, rgba(255,165,61,.11), transparent); }
.w-nordkant .nw-verdict-ico {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(56,211,159,.16);
  color: var(--nw-good);
  border: 1px solid rgba(56,211,159,.4);
  margin-top: 1px;
}
.w-nordkant .nw-verdict.is-warn .nw-verdict-ico {
  background: rgba(255,165,61,.16);
  color: var(--nw-warn);
  border-color: rgba(255,165,61,.42);
}
.w-nordkant .nw-verdict-ico svg { width: 12px; height: 12px; display: block; }
/* Nur der Textblock – nicht das Symbol daneben. Ein bloßes
   „.nw-verdict span“ träfe auch .nw-verdict-ico und würde dessen
   Zentrierung und Farbe überschreiben. */
.w-nordkant .nw-verdict-txt b {
  display: block;
  font-family: var(--nw-ui);
  font-size: .92rem;
  font-weight: 700;
  color: var(--nw-fg);
  line-height: 1.3;
}
.w-nordkant .nw-verdict-txt span {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  color: var(--nw-muted);
  line-height: 1.45;
}

.w-nordkant .nw-checks { display: flex; flex-direction: column; }
.w-nordkant .nw-chk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(38,44,55,.6);
}
.w-nordkant .nw-chk:last-child { border-bottom: 0; }
.w-nordkant .nw-chk-name {
  font-family: var(--nw-mono);
  font-size: .63rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--nw-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w-nordkant .nw-chk-range {
  font-family: var(--nw-mono);
  font-size: .63rem;
  color: var(--nw-muted-2);
  white-space: nowrap;
}
.w-nordkant .nw-chk-val {
  font-family: var(--nw-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--nw-good);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.w-nordkant .nw-chk.is-warn .nw-chk-val { color: var(--nw-warn); }
.w-nordkant .nw-chk-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

.w-nordkant .nw-notes { display: flex; flex-direction: column; gap: 8px; padding: 13px 16px 15px; border-top: 1px solid var(--nw-line); }
.w-nordkant .nw-note {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  font-size: .82rem;
  line-height: 1.5;
  color: #f0d7b4;
  background: rgba(255,165,61,.07);
  border: 1px solid rgba(255,165,61,.34);
  border-radius: var(--nw-r-sm);
  padding: 9px 11px;
}
.w-nordkant .nw-note.is-good {
  color: #bfe8d8;
  background: rgba(56,211,159,.06);
  border-color: rgba(56,211,159,.32);
}
.w-nordkant .nw-note svg { width: 14px; height: 14px; margin-top: 3px; color: var(--nw-warn); }
.w-nordkant .nw-note.is-good svg { color: var(--nw-good); }
.w-nordkant .nw-note b { color: #fff; font-weight: 600; }
.w-nordkant .nw-note .nw-fix {
  display: inline-block;
  margin-top: 7px;
  font-family: var(--nw-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0b0d11;
  background: var(--nw-warn);
  border: 0;
  border-radius: var(--nw-r-sm);
  padding: .48em .8em;
  cursor: pointer;
  transition: filter .2s var(--nw-ease);
}
.w-nordkant .nw-note .nw-fix:hover { filter: brightness(1.12); }

/* =========================================================
   7 · Bedienelemente
   ========================================================= */
.w-nordkant .nw-ctrls {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.w-nordkant .nw-ctrl { padding: 14px 16px; border-bottom: 1px solid var(--nw-line); }
.w-nordkant .nw-ctrl-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.w-nordkant .nw-ctrl-lab {
  font-family: var(--nw-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nw-muted);
}
.w-nordkant .nw-ctrl-val {
  font-family: var(--nw-mono);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--nw-fg);
  white-space: nowrap;
}
.w-nordkant .nw-ctrl-val small { color: var(--nw-muted-2); font-size: .72em; margin-left: .25em; }
.w-nordkant .nw-ctrl-hint {
  margin-top: 8px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--nw-muted-2);
}

/* ---- Kacheln (Bauart) ---- */
.w-nordkant .nw-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.w-nordkant .nw-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 9px 9px;
  background: var(--nw-panel-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  color: var(--nw-muted);
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: border-color .2s var(--nw-ease), background-color .2s var(--nw-ease),
              color .2s var(--nw-ease), transform .2s var(--nw-ease);
}
.w-nordkant .nw-tile:hover { border-color: var(--nw-line-2); transform: translateY(-1px); color: var(--nw-fg-2); }
.w-nordkant .nw-tile-ico { display: block; width: 100%; min-width: 0; flex-shrink: 0; }
.w-nordkant .nw-tile-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.w-nordkant .nw-tile svg { width: 100%; height: 30px; display: block; color: currentColor; }
.w-nordkant .nw-tile b {
  font-family: var(--nw-ui);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
  overflow-wrap: anywhere;
}
/* Nur die Unterzeile. „.nw-tile span“ träfe auch .nw-tile-txt und
   vererbte Versalien plus Sperrung an das <b> – „VIERTELGEWENDELT“
   bräche dann mitten im Wort um. */
.w-nordkant .nw-tile-txt span {
  font-family: var(--nw-mono);
  font-size: .53rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
  line-height: 1.3;
}
.w-nordkant .nw-tile[aria-checked="true"] {
  background: linear-gradient(180deg, rgba(91,108,255,.2), rgba(91,108,255,.06));
  border-color: var(--nw-acc);
  color: var(--nw-fg);
  box-shadow: var(--nw-glow);
}
.w-nordkant .nw-tile[aria-checked="true"] .nw-tile-txt span { color: var(--nw-acc-2); }

/* ---- Segmentwahl ---- */
.w-nordkant .nw-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
}
.w-nordkant .nw-seg-btn {
  font-family: var(--nw-mono);
  font-size: .74rem;
  font-weight: 500;
  color: var(--nw-muted);
  background: transparent;
  border: 0;
  border-radius: var(--nw-r-sm);
  padding: .58em .3em;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  transition: background-color .18s var(--nw-ease), color .18s var(--nw-ease);
}
.w-nordkant .nw-seg-btn:hover { color: var(--nw-fg); background: rgba(255,255,255,.045); }
.w-nordkant .nw-seg-btn[aria-checked="true"] {
  background: var(--nw-acc);
  color: #fff;
  box-shadow: 0 2px 10px -3px rgba(91,108,255,.9);
}

/* ---- Schieberegler (eigener Baustein) ---- */
.w-nordkant .nw-sl { padding: 4px 0 0; }
.w-nordkant .nw-sl-rail {
  position: relative;
  height: 30px;
  padding-inline: 13px;
  display: flex;
  align-items: center;
  cursor: grab;
  touch-action: none;
  border-radius: var(--nw-r-sm);
}
.w-nordkant .nw-sl-rail.is-drag { cursor: grabbing; }
.w-nordkant .nw-sl-track {
  position: absolute;
  left: 13px; right: 13px;
  height: 4px;
  border-radius: 2px;
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
}
.w-nordkant .nw-sl-fill {
  position: absolute;
  left: 13px;
  height: 4px;
  border-radius: 2px;
  width: calc((100% - 26px) * var(--p, 0));
  background: linear-gradient(90deg, rgba(91,108,255,.35), var(--nw-acc));
  box-shadow: 0 0 12px rgba(91,108,255,.55);
  transition: width .12s linear;
}
.w-nordkant .nw-sl-rail.is-drag .nw-sl-fill { transition: none; }
.w-nordkant .nw-sl-ticks {
  position: absolute;
  left: 13px; right: 13px;
  top: 20px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.w-nordkant .nw-sl-ticks i { width: 1px; height: 4px; background: var(--nw-line-2); }
.w-nordkant .nw-sl-ticks i.is-major { height: 7px; background: var(--nw-muted-2); }
.w-nordkant .nw-sl-knob {
  position: absolute;
  top: 50%;
  left: calc(13px + (100% - 26px) * var(--p, 0));
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: var(--nw-r-sm);
  background: linear-gradient(180deg, #2a3140, #1a1f28);
  border: 1px solid var(--nw-acc);
  box-shadow: 0 0 0 4px rgba(91,108,255,.14), 0 3px 10px rgba(0,0,0,.7);
  display: grid;
  place-items: center;
  gap: 2px;
  transition: left .12s linear, box-shadow .2s var(--nw-ease), transform .15s var(--nw-ease);
  pointer-events: none;
}
.w-nordkant .nw-sl-rail.is-drag .nw-sl-knob { transition: box-shadow .2s var(--nw-ease); }
.w-nordkant .nw-sl-knob::before,
.w-nordkant .nw-sl-knob::after {
  content: '';
  width: 8px; height: 1px;
  background: rgba(143,155,255,.75);
}
.w-nordkant .nw-sl-rail:hover .nw-sl-knob,
.w-nordkant .nw-sl-rail.is-drag .nw-sl-knob {
  box-shadow: 0 0 0 6px rgba(91,108,255,.2), 0 4px 14px rgba(0,0,0,.8);
}
.w-nordkant .nw-sl-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-inline: 2px;
  font-family: var(--nw-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--nw-muted-2);
}

/* ---- Farbtöne ---- */
.w-nordkant .nw-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.w-nordkant .nw-swatch {
  position: relative;
  width: 30px; height: 30px;
  border-radius: var(--nw-r-sm);
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
  padding: 0;
  transition: transform .18s var(--nw-ease), box-shadow .18s var(--nw-ease);
}
.w-nordkant .nw-swatch:hover { transform: translateY(-2px); }
.w-nordkant .nw-swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--nw-bg), 0 0 0 3px var(--nw-acc);
}
.w-nordkant .nw-swatch[aria-checked="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.w-nordkant .nw-swatch-name {
  font-family: var(--nw-mono);
  font-size: .62rem;
  color: var(--nw-muted);
  margin-top: 9px;
  display: block;
}
.w-nordkant .nw-swatch-name b { color: var(--nw-fg-2); font-weight: 500; }

.w-nordkant .nw-ctrl-act {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  background: linear-gradient(180deg, transparent, rgba(91,108,255,.05));
}
.w-nordkant .nw-ctrl-act .nw-row { display: flex; gap: 8px; }
.w-nordkant .nw-ctrl-act .nw-row > * { flex: 1; min-width: 0; }

/* =========================================================
   8 · Gesicherte Konfigurationen
   ========================================================= */
.w-nordkant .nw-saved { margin-top: 14px; }
.w-nordkant .nw-saved-list {
  display: grid;
  /* minmax() darf nicht in minmax() stecken – sonst fällt die ganze
     Deklaration aus und das Raster bleibt einspaltig. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 218px), 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
}
.w-nordkant .nw-scard {
  position: relative;
  background: var(--nw-panel-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  padding: 12px 12px 11px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s var(--nw-ease), transform .2s var(--nw-ease), box-shadow .2s var(--nw-ease);
}
.w-nordkant .nw-scard:hover { border-color: var(--nw-line-2); transform: translateY(-2px); box-shadow: var(--nw-sh-2); }
.w-nordkant .nw-scard.is-cur { border-color: var(--nw-acc); box-shadow: var(--nw-glow); }
.w-nordkant .nw-scard-top { display: flex; align-items: center; gap: 8px; }
.w-nordkant .nw-scard-code {
  font-family: var(--nw-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--nw-acc-2);
}
.w-nordkant .nw-scard-date {
  margin-left: auto;
  font-family: var(--nw-mono);
  font-size: .58rem;
  color: var(--nw-muted-2);
  white-space: nowrap;
}
.w-nordkant .nw-scard b {
  font-family: var(--nw-ui);
  font-size: .86rem;
  font-weight: 700;
  color: var(--nw-fg);
  line-height: 1.2;
}
.w-nordkant .nw-scard-spec {
  font-family: var(--nw-mono);
  font-size: .62rem;
  line-height: 1.6;
  color: var(--nw-muted);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.w-nordkant .nw-scard-act { display: flex; gap: 6px; margin-top: auto; padding-top: 3px; }
.w-nordkant .nw-icobtn {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r-sm);
  color: var(--nw-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .18s var(--nw-ease), border-color .18s var(--nw-ease), background-color .18s var(--nw-ease);
}
.w-nordkant .nw-icobtn svg { width: 13px; height: 13px; display: block; }
.w-nordkant .nw-icobtn:hover { color: #ff8b7a; border-color: rgba(255,139,122,.5); background: rgba(255,139,122,.08); }

.w-nordkant .nw-empty {
  padding: 22px 16px 24px;
  text-align: center;
  font-size: .85rem;
  color: var(--nw-muted-2);
  line-height: 1.55;
}
.w-nordkant .nw-empty svg { width: 26px; height: 26px; color: var(--nw-line-2); margin-bottom: 8px; }

/* =========================================================
   9 · Anfrage
   ========================================================= */
.w-nordkant .nw-req {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 28px;
}
.w-nordkant .nw-req > .nw-card { display: flex; flex-direction: column; }
.w-nordkant .nw-sum { display: flex; flex-direction: column; flex: 1; }
.w-nordkant .nw-sum-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(38,44,55,.55);
}
.w-nordkant .nw-sum-row:last-child { border-bottom: 0; }
.w-nordkant .nw-sum-row dt {
  font-family: var(--nw-mono);
  font-size: .61rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
  min-width: 0;
}
.w-nordkant .nw-sum-row dd {
  margin: 0;
  font-family: var(--nw-mono);
  font-size: .76rem;
  color: var(--nw-fg-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.w-nordkant .nw-sum-row.is-hi { background: rgba(91,108,255,.07); }
.w-nordkant .nw-sum-row.is-hi dd { color: var(--nw-acc-2); }
.w-nordkant .nw-sum-foot {
  margin-top: auto;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--nw-line);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--nw-muted-2);
}

.w-nordkant .nw-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.w-nordkant .nw-fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.w-nordkant .nw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.w-nordkant .nw-field.is-full { grid-column: 1 / -1; }
.w-nordkant .nw-field label,
.w-nordkant .nw-flabel {
  font-family: var(--nw-mono);
  font-size: .58rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--nw-muted);
}
.w-nordkant .nw-field label span { color: var(--nw-acc); }
.w-nordkant .nw-input,
.w-nordkant .nw-area {
  width: 100%;
  font-family: var(--nw-ui);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--nw-fg);
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  padding: .68em .8em;
  transition: border-color .18s var(--nw-ease), box-shadow .18s var(--nw-ease), background-color .18s var(--nw-ease);
}
/* Kein Zieh-Griff des Browsers: das Feld waechst mit dem Text. */
.w-nordkant .nw-area {
  resize: none;
  overflow-y: auto;
  min-height: 78px;
  max-height: 190px;
  font-family: var(--nw-txt);
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 233, 240, .24) transparent;
}
.w-nordkant .nw-area::-webkit-resizer { display: none; }
.w-nordkant .nw-area::-webkit-scrollbar { width: 10px; }
.w-nordkant .nw-area::-webkit-scrollbar-track { background: transparent; }
.w-nordkant .nw-area::-webkit-scrollbar-thumb {
  background: rgba(230, 233, 240, .24); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
.w-nordkant .nw-input::placeholder,
.w-nordkant .nw-area::placeholder { color: var(--nw-muted-2); }
.w-nordkant .nw-input:focus,
.w-nordkant .nw-area:focus {
  border-color: var(--nw-acc);
  background: var(--nw-panel-2);
  box-shadow: 0 0 0 3px rgba(91,108,255,.16);
}
.w-nordkant .nw-input[aria-invalid="true"],
.w-nordkant .nw-area[aria-invalid="true"] { border-color: #ff7a66; background: rgba(255,122,102,.05); }
.w-nordkant .nw-err {
  font-family: var(--nw-mono);
  font-size: .63rem;
  color: #ff9b8a;
  letter-spacing: .04em;
}
.w-nordkant .nw-form-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.w-nordkant .nw-form-foot p { font-size: .72rem; color: var(--nw-muted-2); line-height: 1.5; flex: 1; min-width: 150px; }

.w-nordkant .nw-done { padding: 26px 20px 28px; text-align: center; }
.w-nordkant .nw-done-mark {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--nw-good);
  background: rgba(56,211,159,.12);
  border: 1px solid rgba(56,211,159,.4);
  animation: nw-pop .4s var(--nw-ease) both;
}
.w-nordkant .nw-done-mark svg { width: 20px; height: 20px; }
.w-nordkant .nw-done h4 { font-size: 1.05rem; }
.w-nordkant .nw-done > p { margin-top: 9px; font-size: .86rem; color: var(--nw-muted); max-width: 44ch; margin-inline: auto; }
.w-nordkant .nw-vorgang {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  padding: 11px 22px;
  border: 1px dashed var(--nw-line-2);
  border-radius: var(--nw-r);
  background: var(--nw-bg-2);
}
.w-nordkant .nw-vorgang span {
  font-family: var(--nw-mono);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
}
.w-nordkant .nw-vorgang b {
  font-family: var(--nw-mono);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--nw-acc-2);
}

.w-nordkant .nw-reqlist { padding: 6px 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.w-nordkant .nw-reqitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--nw-panel-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r-sm);
  font-size: .77rem;
}
.w-nordkant .nw-reqitem code {
  font-family: var(--nw-mono);
  font-size: .72rem;
  color: var(--nw-good);
  letter-spacing: .05em;
}
.w-nordkant .nw-reqitem span { color: var(--nw-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-nordkant .nw-reqitem em {
  font-style: normal;
  font-family: var(--nw-mono);
  font-size: .6rem;
  color: var(--nw-muted-2);
  white-space: nowrap;
}

/* =========================================================
   10 · Referenzen
   ========================================================= */
.w-nordkant .nw-refs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.w-nordkant .nw-ref {
  display: flex;
  flex-direction: column;
  background: var(--nw-panel);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  overflow: hidden;
  min-width: 0;
  transition: border-color .25s var(--nw-ease), transform .25s var(--nw-ease), box-shadow .25s var(--nw-ease);
}
.w-nordkant .nw-ref:hover { border-color: rgba(91,108,255,.55); transform: translateY(-3px); box-shadow: var(--nw-sh-3); }
.w-nordkant .nw-ref-art {
  position: relative;
  background: var(--nw-bg-2);
  border-bottom: 1px solid var(--nw-line);
  padding: 10px;
}
.w-nordkant .nw-ref-art svg { width: 100%; height: auto; display: block; }
.w-nordkant .nw-ref-art .nw-ref-no {
  position: absolute;
  top: 9px; right: 11px;
  font-family: var(--nw-mono);
  font-size: .57rem;
  letter-spacing: .14em;
  color: var(--nw-muted-2);
}
.w-nordkant .nw-ref-bd { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.w-nordkant .nw-ref-bd h3 { font-size: .98rem; line-height: 1.2; }
.w-nordkant .nw-ref-place {
  font-family: var(--nw-mono);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--nw-acc-2);
  margin-top: 6px;
}
/* Eigene Klasse statt „.nw-ref-bd > p“: jener Selektor war spezifischer als
   .nw-ref-place und hat dessen Größe und Akzentfarbe überschrieben.
   flex-grow schiebt die Kennwerte nach unten – die Karten schließen bündig ab. */
.w-nordkant .nw-ref-txt {
  margin-top: 9px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--nw-muted);
  flex: 1 1 auto;
}
.w-nordkant .nw-ref-specs {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--nw-line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.w-nordkant .nw-ref-specs div { font-family: var(--nw-mono); font-size: .6rem; color: var(--nw-muted-2); }
.w-nordkant .nw-ref-specs b { color: var(--nw-fg-2); font-weight: 500; }

/* =========================================================
   11 · Fertigung / Ablauf
   ========================================================= */
.w-nordkant .nw-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
  counter-reset: nwstep;
}
.w-nordkant .nw-step {
  position: relative;
  padding: 16px 13px 15px;
  background: var(--nw-panel);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-r);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--nw-ease), background-color .3s var(--nw-ease);
}
/* Beim Ueberfahren faerbt sich der ganze Rahmen, nicht ein Streifen an einer Kante. */
.w-nordkant .nw-step:hover { border-color: var(--nw-acc); background: var(--nw-panel-2); }
.w-nordkant .nw-step-n {
  font-family: var(--nw-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--nw-acc);
}
.w-nordkant .nw-step h3 { font-size: .92rem; margin-top: 9px; line-height: 1.22; }
.w-nordkant .nw-step p { margin-top: 8px; font-size: .8rem; line-height: 1.5; color: var(--nw-muted); }
.w-nordkant .nw-step-t {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--nw-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--nw-muted-2);
}
.w-nordkant .nw-step-t b { color: var(--nw-fg-2); font-weight: 500; }

/* =========================================================
   12 · Fußzeile
   ========================================================= */
.w-nordkant .nw-ftr {
  margin-top: auto;
  border-top: 1px solid var(--nw-line);
  background: var(--nw-bg-2);
}
.w-nordkant .nw-ftr-in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 26px;
  padding-block: clamp(28px, 4cqi, 44px) 20px;
}
.w-nordkant .nw-ftr-col h4 {
  font-family: var(--nw-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
  margin-bottom: 12px;
}
.w-nordkant .nw-ftr-col p { font-size: .82rem; line-height: 1.65; color: var(--nw-muted); }
.w-nordkant .nw-ftr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.w-nordkant .nw-ftr-col li { font-size: .82rem; color: var(--nw-muted); }
.w-nordkant .nw-ftr-col .nw-navlink { padding: 0; font-family: var(--nw-txt); font-size: .82rem; }
.w-nordkant .nw-ftr-col .nw-navlink:hover { background: none; }
.w-nordkant .nw-ftr-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.w-nordkant .nw-ftr-brand svg { width: 20px; height: 20px; color: var(--nw-acc); }
.w-nordkant .nw-ftr-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-block: 14px 22px;
  border-top: 1px solid var(--nw-line);
  font-family: var(--nw-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nw-muted-2);
}
.w-nordkant .nw-ftr-bottom .nw-demo {
  color: var(--nw-acc-2);
  border: 1px solid rgba(91,108,255,.3);
  background: rgba(91,108,255,.08);
  border-radius: 999px;
  padding: 3px 10px;
}

/* =========================================================
   13 · Sandbox-Bausteine an die Welt angleichen
   ========================================================= */
.w-nordkant .sbx-select-btn {
  font-family: var(--nw-ui);
  font-weight: 500;
  background: var(--nw-bg-2);
  border-color: var(--nw-line);
  padding: .7em .85em;
}
.w-nordkant .sbx-select-btn:hover { border-color: var(--nw-line-2); }
.w-nordkant .sbx-select-btn[aria-expanded="true"] { border-color: var(--nw-acc); }
.w-nordkant .sbx-opt-hint { font-family: var(--nw-mono); font-size: .66rem; }
.w-nordkant .sbx-select { width: 100%; }
.w-nordkant .sbx-dialog-title { font-family: var(--nw-ui); font-weight: 700; }
.w-nordkant .sbx-dialog-badge { font-family: var(--nw-mono); border-radius: var(--nw-r-sm); }
.w-nordkant .sbx-btn { font-family: var(--nw-ui); text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; }
.w-nordkant .sbx-toast { font-family: var(--nw-ui); border-radius: var(--nw-r); background: rgba(19,22,28,.97); }

/* =========================================================
   14 · Container-Abstufungen (Bühne: 1270 / 834 / 390 px)
   ========================================================= */
@container stage (max-width: 1040px) {
  .w-nordkant .nw-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-nordkant .nw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-nordkant .nw-cfg { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* 860 statt 820: der Tablet-Rahmen ist 834 px breit, der Container darin 832 px. */
@container stage (max-width: 860px) {
  /* Der Container selbst lässt sich nicht abfragen – daher auf .nw-page setzen. */
  .w-nordkant .nw-page { --nw-hdr-h: 52px; }
  /* Das Menü liegt in der Overlay-Ebene, also außerhalb von .nw-page –
     dort greift die Variable oben nicht. Abstand daher direkt setzen. */
  .w-nordkant .nw-menu { top: 60px; }
  .w-nordkant .nw-navlink { font-size: .76rem; padding: .5em .55em; }

  .w-nordkant .nw-hero-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .w-nordkant .nw-hero-art { order: 2; }

  /* Zeichnung nach oben; klebend nur, wenn sie in die Bühne passt (Klasse aus JS) */
  .w-nordkant .nw-cfg { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-cfg-a { display: contents; }
  .w-nordkant .nw-draw { order: 1; }
  .w-nordkant .nw-draw.is-stick {
    position: sticky;
    top: var(--nw-hdr-h);
    z-index: 6;
    box-shadow: var(--nw-sh-3);
  }
  .w-nordkant .nw-kenn { order: 2; }
  .w-nordkant .nw-cfg-b { order: 3; }
  .w-nordkant .nw-norm { order: 4; }

  .w-nordkant .nw-req { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .w-nordkant .nw-ftr-col:first-child { grid-column: 1 / -1; }
}

@container stage (max-width: 640px) {
  .w-nordkant .nw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container stage (max-width: 560px) {
  .w-nordkant .nw-page { --nw-pad: 16px; --nw-secy: 40px; font-size: 14.5px; }

  .w-nordkant .nw-nav { display: none; }
  .w-nordkant .nw-burger { display: inline-flex; }
  .w-nordkant .nw-brand-sub { display: none; }

  /* auf Handybreite nie klebend – die Zeichnung nähme sonst die halbe Höhe */
  .w-nordkant .nw-draw.is-stick { position: static; box-shadow: var(--nw-sh-1); }

  .w-nordkant .nw-hero::after { width: 320px; height: 300px; right: -100px; }
  .w-nordkant .nw-stats { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .w-nordkant .nw-stat span { margin-top: 0; text-align: right; }

  .w-nordkant .nw-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-nordkant .nw-summary-row { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-refs { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-fgrid { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-ftr-in { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-tiles { grid-template-columns: minmax(0, 1fr); }
  .w-nordkant .nw-tile { flex-direction: row; align-items: center; gap: 12px; padding: 9px 11px; }
  .w-nordkant .nw-tile-ico { width: 46px; }
  .w-nordkant .nw-tile svg { height: 26px; }
  .w-nordkant .nw-chk { grid-template-columns: minmax(0, 1fr) auto; }
  .w-nordkant .nw-chk-range { display: none; }
  .w-nordkant .nw-ctrl-act .nw-row { flex-direction: column; }
  .w-nordkant .nw-saved-list { grid-template-columns: minmax(0, 1fr); }
}

@container stage (max-width: 400px) {
  .w-nordkant .nw-legend { gap: 5px 11px; }
  .w-nordkant .nw-ref-specs { gap: 3px 10px; }

  /* Sehr schmale Rahmen (Besucher mit 320-px-Bildschirm): die gesperrten
     Mono-Beschriftungen und die Kartenköpfe würden sonst beschnitten. */
  .w-nordkant .nw-g-lab { letter-spacing: .08em; overflow-wrap: anywhere; }
  .w-nordkant .nw-card-hd { flex-wrap: wrap; row-gap: 5px; }
  .w-nordkant .nw-card-hd h3 { letter-spacing: .12em; }
  .w-nordkant .nw-card-hd .nw-tag { margin-left: 0; }
  .w-nordkant .nw-tag { max-width: 100%; overflow-wrap: anywhere; }
  /* Die Rechenzeile ist sonst waagerecht scrollbar – bei dieser Breite
     bliebe die halbe Formel unsichtbar hinter einer verborgenen Leiste. */
  .w-nordkant .nw-formula code {
    white-space: normal;
    overflow-x: visible;
    overflow-wrap: anywhere;
    line-height: 1.7;
  }
}

/* =========================================================
   15 · Bewegung sparsam
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .w-nordkant .nw-ink { animation: none; stroke-dashoffset: 0; }
  .w-nordkant .nw-drawin,
  .w-nordkant .nw-stagger,
  .w-nordkant .nw-done-mark { animation: none; }
  .w-nordkant *,
  .w-nordkant *::before,
  .w-nordkant *::after { transition-duration: .001ms !important; }
}

/* =========================================================
   Markierung, Schreibmarke und Autofill in dieser Welt
   Chrome legt in automatisch ausgefuellte Felder sonst eine helle
   Fuellung, die im dunklen Formular sofort auffaellt.
   ========================================================= */
.w-nordkant ::selection { background: var(--nw-acc); color: #fff; }
.w-nordkant ::-moz-selection { background: var(--nw-acc); color: #fff; }
.w-nordkant input, .w-nordkant textarea { caret-color: var(--nw-acc); }
.w-nordkant { accent-color: var(--nw-acc); }

.w-nordkant .nw-input:-webkit-autofill,
.w-nordkant .nw-input:-webkit-autofill:hover,
.w-nordkant .nw-area:-webkit-autofill {
  -webkit-text-fill-color: var(--nw-fg);
  -webkit-box-shadow: 0 0 0 40px var(--nw-bg-2) inset;
  box-shadow: 0 0 0 40px var(--nw-bg-2) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.w-nordkant .nw-input:-webkit-autofill:focus,
.w-nordkant .nw-area:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--nw-panel-2) inset;
  box-shadow: 0 0 0 40px var(--nw-panel-2) inset;
}