/* ===========================================================
   NACHSICHT — Artefakt-Stylesheet
   Ergaenzt mzone-ui@1.5.0. Alle eigenen Klassen: ns-*
   =========================================================== */

:root{
  --ns-max: 1080px;
  --ns-ink-ghost: color-mix(in srgb, var(--mz-text-muted) 22%, transparent);
  --ns-raw: var(--mz-accent);
  --ns-soft: color-mix(in srgb, var(--mz-info) 55%, var(--mz-text-muted));
}

/* ---------- Grundgeruest ---------- */
.mz-page{ max-width: var(--ns-max); }
.ns-mono{ font-family: var(--mz-mono); font-size:.82em; letter-spacing:.04em; }
.ns-up{ text-transform: uppercase; letter-spacing:.18em; }

/* ---------- Eintrittstor ---------- */
.ns-gate{
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--mz-accent) 9%, transparent), transparent 60%),
    var(--mz-bg);
  transition:opacity .55s ease, visibility .55s;
}
.ns-gate[hidden-soft]{ opacity:0; visibility:hidden; pointer-events:none; }
.ns-gate__box{
  max-width:520px; width:100%;
  border:1px solid var(--mz-border);
  background:var(--mz-surface);
  border-radius:var(--mz-radius);
  padding:28px 24px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  animation: ns-gate-in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ns-gate-in{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1;transform:none;} }
.ns-gate__mark{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.ns-gate__acts{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.ns-gate__fine{ margin-top:16px; font-size:.72rem; line-height:1.55; color:var(--mz-text-muted); font-family:var(--mz-mono); }

/* ---------- HUD ---------- */
.ns-hud{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; gap:12px;
  padding:9px 14px;
  border-bottom:1px solid var(--mz-border);
  background:color-mix(in srgb, var(--mz-bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.ns-hud__brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.ns-hud__name{ font-family:var(--mz-mono); font-size:.72rem; letter-spacing:.22em; color:var(--mz-text-strong); text-transform:uppercase; }
.ns-hud__spacer{ flex:1; }
.ns-hud__slot{ display:flex; align-items:center; gap:10px; }
.ns-hud__num{ font-family:var(--mz-mono); font-size:.7rem; color:var(--mz-text-muted); white-space:nowrap; }
.ns-hud__num b{ color:var(--mz-text-strong); font-weight:600; }
@media (max-width:720px){ .ns-hud__num--wide{ display:none; } }

/* Serenitaets-Anzeige */
.ns-gauge{ display:flex; align-items:center; gap:7px; }
.ns-gauge svg{ display:block; }
.ns-gauge__val{ font-family:var(--mz-mono); font-size:.78rem; font-weight:600; color:var(--mz-ok); transition:color .4s; }
body.ns-raw .ns-gauge__val{ color:var(--ns-raw); }

/* Kippschalter Rohsignal */
.ns-switch{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--mz-border); border-radius:999px;
  padding:5px 11px 5px 8px; cursor:pointer;
  background:var(--mz-surface-alt); color:var(--mz-text);
  font-family:var(--mz-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .25s, color .25s, background .25s;
  white-space:nowrap;
}
.ns-switch:hover{ border-color:var(--mz-text-muted); }
.ns-switch__led{
  width:8px; height:8px; border-radius:50%;
  background:var(--mz-ok); box-shadow:0 0 0 0 color-mix(in srgb, var(--mz-ok) 60%, transparent);
  animation: ns-pulse 2.6s ease-out infinite;
}
@keyframes ns-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--mz-ok) 55%, transparent);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
body.ns-raw .ns-switch{ border-color:var(--ns-raw); color:var(--ns-raw); background:var(--mz-danger-bg); }
body.ns-raw .ns-switch__led{ background:var(--ns-raw); animation-duration:.9s; }

/* ---------- Hero ---------- */
.ns-hero{
  position:relative; overflow:hidden;
  min-height:clamp(460px, 82vh, 780px);
  display:flex; align-items:center;
  border-bottom:1px solid var(--mz-border);
}
.ns-hero__inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--ns-max); margin:0 auto; padding:56px 20px;
}
.ns-hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mz-bg) 55%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--mz-bg) 88%, transparent) 100%);
}
.ns-hero__title{
  font-size:clamp(3.1rem, 15vw, 9.5rem);
  line-height:.84; font-weight:800;
  letter-spacing:-.045em;
  margin:.12em 0 .18em;
  color:var(--mz-text-strong);
}
.ns-hero__title span{ color:var(--mz-accent); }
.ns-hero__claim{
  font-size:clamp(1rem, 2.6vw, 1.35rem);
  max-width:46ch; color:var(--mz-text); line-height:1.5;
}
.ns-hero__rule{ height:1px; background:linear-gradient(90deg, var(--mz-accent), transparent); margin:26px 0 20px; }
.ns-hero__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }

/* ---------- Aktenkopf ---------- */
.ns-dossier{ margin:34px 0 8px; }

/* ---------- Kapitel ---------- */
.ns-chapter{ position:relative; margin:78px 0 0; scroll-margin-top:72px; }
.ns-chapter__head{ position:relative; margin-bottom:26px; padding-top:34px; }
.ns-chapter__num{
  position:absolute; top:-14px; left:-6px; z-index:0;
  font-family:var(--mz-mono); font-weight:800;
  font-size:clamp(4.2rem, 15vw, 8.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--ns-ink-ghost);
  pointer-events:none; user-select:none;
}
.ns-chapter__eyebrow{ position:relative; z-index:1; }
.ns-chapter__title{
  position:relative; z-index:1;
  font-size:clamp(1.7rem, 5.2vw, 2.9rem); line-height:1.08;
  letter-spacing:-.02em; font-weight:700;
  color:var(--mz-text-strong); margin:.15em 0 0;
}
.ns-chapter__bar{ height:2px; width:64px; background:var(--mz-accent); margin-top:18px; }

.ns-prose p{ font-size:1.055rem; line-height:1.78; margin:0 0 1.15em; }
.ns-prose p.ns-lead::first-letter{
  float:left; font-size:3.5em; line-height:.78; padding:.06em .1em 0 0;
  font-weight:800; color:var(--mz-accent);
}
.ns-prose .ns-beat{
  display:block; text-align:center; color:var(--mz-text-muted);
  letter-spacing:.7em; margin:2.2em 0; font-size:.8rem;
}

/* ---------- Der Filter-Span ---------- */
.ns-f{
  position:relative;
  background:linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--mz-info) 26%, transparent) 62%);
  border-radius:2px;
  transition:background .3s, color .3s;
  cursor:help;
}
.ns-f::after{
  content:"◆"; font-size:.5em; vertical-align:super;
  color:var(--ns-soft); margin-left:2px; opacity:.7;
}
body.ns-raw .ns-f{
  background:var(--mz-danger-bg);
  color:var(--ns-raw);
  box-shadow:inset 0 0 0 1px var(--mz-danger-border);
  padding:0 3px;
}
body.ns-raw .ns-f::after{ content:"▲"; color:var(--ns-raw); }
.ns-f.ns-f--scrambling{ font-family:var(--mz-mono); color:var(--ns-raw); opacity:.9; }

/* ---------- Artefakte im Fliesstext ---------- */
.ns-art{ margin:34px 0; }
.ns-art__cap{
  font-family:var(--mz-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mz-text-muted); margin-bottom:9px;
}

.ns-diff{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px){ .ns-diff{ grid-template-columns:1fr; } }
.ns-diff__col{
  border:1px solid var(--mz-border); border-radius:var(--mz-radius);
  background:var(--mz-surface); padding:16px; position:relative; overflow:hidden;
}
.ns-diff__col--raw{ border-color:var(--mz-danger-border); background:var(--mz-danger-bg); }
.ns-diff__col--out{ border-color:var(--mz-ok-border); background:var(--mz-ok-bg); }
.ns-diff__hd{
  font-family:var(--mz-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mz-text-muted); margin-bottom:10px; display:flex; justify-content:space-between; gap:8px;
}
.ns-diff__line{ font-size:.96rem; line-height:1.6; margin:0 0 .55em; }
.ns-diff__col--raw .ns-diff__line{ color:var(--mz-danger); }
.ns-diff__col--out .ns-diff__line{ color:var(--mz-text-strong); }
.ns-diff__arrow{
  display:flex; align-items:center; justify-content:center;
  grid-column:1 / -1; color:var(--mz-text-muted); font-family:var(--mz-mono); font-size:.66rem;
}

/* Log / Terminal */
.ns-log{
  border:1px solid var(--mz-border); border-radius:var(--mz-radius);
  background:var(--mz-surface-alt); padding:14px 16px;
  font-family:var(--mz-mono); font-size:.74rem; line-height:1.85;
  overflow-x:auto; color:var(--mz-text-muted);
}
.ns-log b{ color:var(--mz-text-strong); font-weight:600; }
.ns-log .a{ color:var(--mz-accent); }
.ns-log .o{ color:var(--mz-ok); }
.ns-log .w{ color:var(--mz-warn); }
.ns-log .i{ color:var(--mz-info); }
.ns-log__row{ display:block; white-space:pre; }

/* Chat-Attrappe */
.ns-chat{
  border:1px solid var(--mz-border); border-radius:var(--mz-radius);
  background:var(--mz-surface); overflow:hidden; max-width:520px; margin:0 auto;
}
.ns-chat__hd{
  display:flex; align-items:center; gap:9px; padding:11px 14px;
  border-bottom:1px solid var(--mz-border-soft); background:var(--mz-surface-alt);
}
.ns-chat__av{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--mz-special), var(--mz-info));
  display:grid; place-items:center; font-size:.66rem; font-weight:700; color:#0b0f14;
}
.ns-chat__who{ font-size:.86rem; color:var(--mz-text-strong); font-weight:600; }
.ns-chat__sub{ font-family:var(--mz-mono); font-size:.62rem; color:var(--mz-ok); }
.ns-chat__body{ padding:16px 14px; display:flex; flex-direction:column; gap:10px; min-height:120px; }
.ns-bubble{
  max-width:82%; padding:10px 13px; border-radius:14px;
  font-size:.93rem; line-height:1.5;
  animation: ns-bub .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ns-bub{ from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1;transform:none;} }
.ns-bubble--me{ align-self:flex-end; background:var(--mz-surface-alt); border:1px solid var(--mz-border); color:var(--mz-text); }
.ns-bubble--me.is-raw{ border-color:var(--mz-danger-border); background:var(--mz-danger-bg); color:var(--mz-danger); font-family:var(--mz-mono); font-size:.84rem; }
.ns-bubble--them{ align-self:flex-start; background:color-mix(in srgb, var(--mz-info) 16%, var(--mz-surface)); border:1px solid color-mix(in srgb, var(--mz-info) 32%, transparent); color:var(--mz-text-strong); }
.ns-bubble__sys{
  align-self:center; font-family:var(--mz-mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--mz-text-muted); text-transform:uppercase; background:none; border:none; padding:2px 0;
}
.ns-chat__foot{ padding:11px 14px; border-top:1px solid var(--mz-border-soft); display:flex; gap:8px; }
.ns-typing{ display:inline-flex; gap:4px; align-items:center; }
.ns-typing i{ width:5px; height:5px; border-radius:50%; background:var(--mz-text-muted); animation:ns-dot 1.2s infinite; }
.ns-typing i:nth-child(2){ animation-delay:.18s; } .ns-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes ns-dot{ 0%,60%,100%{opacity:.25; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);} }

/* Zitat-Block */
.ns-quote{
  border-left:2px solid var(--mz-accent);
  padding:6px 0 6px 18px; margin:30px 0;
  font-size:1.16rem; line-height:1.6; color:var(--mz-text-strong); font-style:italic;
}
.ns-quote cite{ display:block; margin-top:8px; font-style:normal; font-family:var(--mz-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mz-text-muted); }

/* AGB-Kasten */
.ns-tos{
  border:1px dashed var(--mz-border); border-radius:var(--mz-radius-sm);
  padding:14px 16px; font-size:.78rem; line-height:1.7; color:var(--mz-text-muted);
  font-family:var(--mz-mono); background:var(--mz-surface-alt);
}
.ns-tos b{ color:var(--mz-text); }

/* Scanlines im Rohmodus */
.ns-scan{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0;
  transition:opacity .5s ease;
  background:repeating-linear-gradient(180deg, rgba(255,59,47,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
body.ns-raw .ns-scan{ opacity:1; }
body.ns-raw{ animation: ns-shudder .18s steps(2) 1; }
@keyframes ns-shudder{ 50%{ transform:translateX(1.5px);} }

/* Fussbereich */
.ns-end{ text-align:center; margin:96px 0 40px; }
.ns-end__word{
  font-family:var(--mz-mono); letter-spacing:.5em; font-size:.8rem;
  color:var(--mz-text-muted); text-transform:uppercase;
}
.ns-end__rule{ height:1px; background:var(--mz-border); margin:22px auto; max-width:220px; }

.ns-credits{ margin-top:64px; }
.ns-credits .mz-collapse{ margin-bottom:8px; }

@media (prefers-reduced-motion: reduce){
  .ns-gate__box, .ns-bubble{ animation:none; }
  .ns-switch__led{ animation:none; }
  body.ns-raw{ animation:none; }
}