/* Newsroom im Startseiten-Design (23.10.2026): Uebersicht und Einzelbeitrag.
   Kopf, Fuss, Buttons und Farben kommen aus landing-v4.css, produkt.css (Hero, Raster) und
   server/seiten-huelle.js; hier steht nur die Chronik: Schiene mit Datum, Wirkungsbalken, Filter,
   Beitragskoerper und Abbildungen. Die Wirkung (1 bis 4) faerbt von Grau bis Violett. */
.nw,.np{--tint:143,122,201;--nw-violet:#b3b3af;--rule-soft:#f2f2f01c;--nw-ui:220ms;--nw-fast:150ms}
.nw :focus-visible,.np :focus-visible{outline:2px solid #b3b3af;outline-offset:4px;border-radius:8px}

.nw-main,.np-main{padding:clamp(34px,6vw,72px) 0 24px}
.nw-head{max-width:64ch}
.nw-kicker{margin:0 0 16px;font:11px/1.5 var(--mono);color:var(--dim);letter-spacing:.04em}
.nw-head h1{margin:0 0 18px;font-size:clamp(40px,5.2vw,66px);font-weight:550;letter-spacing:-.026em;line-height:1.06}
.nw-lede{font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.nw-filter{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0}
.nw-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px;border:1px solid #f2f2f027;border-radius:8px;font-size:13px;color:var(--muted);transition:background-color .2s,color .2s,border-color .2s}
.nw-chip span{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.nw-chip.is-on{background:#f2f2f018;border-color:#f2f2f070;color:var(--text)}
.nw-scale{max-width:74ch;margin:16px 0 0;font-size:12px;line-height:1.6;color:var(--dim)}

.nw-rail{--rail:5.5rem;list-style:none;margin:28px 0 0;padding:0}
.nw-year{padding:28px 0 12px;font:12px var(--mono);color:var(--muted)}
.nw-entry{--impact-color:#9698a7}
.nw-entry[data-impact='2'],.nw-impact[data-impact='2']{--impact-color:#aaa1c8}
.nw-entry[data-impact='3'],.nw-impact[data-impact='3']{--impact-color:#b3a3ea}
.nw-entry[data-impact='4'],.nw-impact[data-impact='4']{--impact-color:#bba9f2}
.nw-entry>a{position:relative;isolation:isolate;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start;padding:26px 16px 26px 0;border-top:1px solid var(--line);border-radius:0 14px 14px 0;color:inherit}
.nw-entry>a::after{content:"";position:absolute;inset:0 0 0 var(--rail);z-index:-1;border-radius:14px;background:#f2f2f00c;opacity:0;transform:translateX(-4px);transition:opacity var(--nw-fast),transform var(--nw-ui) var(--ease)}
.nw-date,.np-date{display:flex;flex-direction:column;gap:5px;padding:3px 20px 0 0;font-variant-numeric:tabular-nums}
.nw-date b,.np-date b{font-size:24px;font-weight:500;line-height:1;color:#b3b3af}
.nw-date i,.np-date i{font:normal 11px var(--mono);color:var(--dim)}
.nw-text{min-width:0;padding-left:20px;border-left:2px solid var(--impact-color)}
.nw-entry-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 10px}
.nw-cat,.np-cat{font-size:12px;color:var(--muted)}
.nw-title{display:block;max-width:42ch;font-size:clamp(21px,2.4vw,27px);font-weight:540;line-height:1.25;letter-spacing:-.026em;text-wrap:pretty}
.nw-lead{display:block;margin-top:10px;max-width:72ch;font-size:15px;line-height:1.65;color:var(--muted)}
.nw-effect{display:block;margin-top:12px;font-size:13px;line-height:1.6;color:var(--impact-color)}
.nw-impact{--impact-color:#9698a7;display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--impact-color)}
.nw-impact-bars{display:inline-flex;gap:3px;flex-shrink:0}
.nw-impact-bars i{width:5px;height:12px;border-radius:8px;background:#ffffff1a}
.nw-impact-bars .is-filled{background:var(--impact-color)}
.nw-language-notice{display:block;margin:16px 0 0;font-size:12px;color:var(--muted)}
.nw-leer{margin-top:40px;color:var(--muted)}
.nw-fine{max-width:1120px;width:calc(100% - 88px);margin:8px auto 40px;font-size:12px;line-height:1.7;color:var(--dim)}
.nw-fine a{color:#b3b3af;text-decoration:underline;text-decoration-color:#f2f2f066;text-underline-offset:3px}

/* Einzelbeitrag */
.np-art{max-width:84ch}
.np-back{display:none}
.np-head{--rail:5.5rem;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);margin-bottom:36px}
.np-headtext{min-width:0;padding-left:20px}
.np-cat{margin:0 0 14px}
.np-art h1{margin:0 0 24px;font-size:clamp(30px,4.6vw,52px);font-weight:550;line-height:1.08;letter-spacing:-.026em;text-wrap:balance}
.np-lead{font-size:clamp(17px,2.2vw,21px);line-height:1.55;color:#b3b3af}
.np-impact{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.np-impact p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.np-body{margin-left:calc(5.5rem + 20px);max-width:68ch;font-size:16.5px;line-height:1.75;color:var(--muted);overflow-wrap:anywhere}
.np-body p{margin:0 0 1.3em}
.np-body-plain{white-space:pre-line}
.np-body h2{margin:2em 0 .7em;font-size:clamp(22px,2.6vw,27px);font-weight:540;line-height:1.25;letter-spacing:-.026em;color:var(--text)}
.np-body h3{margin:1.7em 0 .6em;font-size:19px;font-weight:540;color:var(--text)}
.np-body ul,.np-body ol{margin:0 0 1.4em;padding-left:1.2em}
.np-body li{margin:0 0 .6em}
.np-body strong{font-weight:560;color:var(--text)}
.np-body a{color:#b3b3af;text-decoration:underline;text-decoration-color:#f2f2f066;text-underline-offset:4px}
.np-body a:hover{color:#ffffff}
.np-body code{padding:2px 6px;border-radius:8px;background:#ffffff0d;font:.86em var(--mono);color:#b3b3af}
.np-body pre{max-width:100%;overflow-x:auto;padding:16px;border:1px solid var(--line);border-radius:8px;background:#14141b}
.np-body pre code{padding:0;background:none}
.np-body img,.np-body video{max-width:100%;height:auto;border-radius:12px}
.np-body table{display:block;max-width:100%;overflow-x:auto}
.np-entwurf{margin:0 0 24px;padding:14px 18px;border:1px solid #f2f2f042;border-radius:8px;color:var(--muted)}

/* Abbildungen: ein Bild aus /img oder /news-media, oder ein Diagramm als Inline-SVG im Stil der Doku
   (.doc-diagram, tools/docs-diagrams.mjs). Die Doku-SVG malt mit den Variablen unten; hier zeigen sie
   auf die Tokens der Startseite, so folgt das Diagramm dem Design der Seite. */
.np-body figure{--panel:#1b1b24;--rule:#f2f2f038;--rule-soft:#f2f2f01c;--paper:#f2f2f0;--g1:#b3b3af;--g2:#b3b3af;--g3:#8f8f8a;--ink:#14141b;
  margin:2em 0;padding:0}
.np-body figure img{display:block;width:100%;border:1px solid var(--line)}
.np-body figure .dg-scroll,.np-body figure.doc-diagram>svg{border:1px solid var(--line);border-radius:10px;background:#14141b}
.np-body figure .dg-scroll{overflow-x:auto;padding:clamp(10px,2vw,16px)}
.np-body figure svg{display:block;height:auto;margin:0 auto;max-width:100%;border-radius:0}
.np-body .doc-diagram svg{width:var(--dg-w,100%);min-width:calc(var(--dg-w,100%) * .92)}
.np-body figcaption{margin:12px 0 0;max-width:64ch;font:11.5px/1.55 var(--mono);letter-spacing:.03em;color:var(--dim)}
.np-body .dg-text{margin:12px 0 0;font-size:14px;color:var(--muted)}
.np-body .dg-text summary{display:inline-block;min-height:28px;padding:6px 0;cursor:pointer;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.np-body .dg-text summary:hover{color:var(--text)}
.np-body .dg-text ol{max-width:64ch;margin:8px 0 0;padding-left:22px;line-height:1.55}
.np-body .dg-text li{margin:0 0 8px}

/* Diagramme aus dem Renderer (tools/news-render.mjs): <figure class="news-diagram"> mit nacktem <svg>. Die Schrift
   steht im style der SVG (Barlow, Fallback system-ui); die Textfassung im details haelt den Inhalt ohne Bild lesbar. */
.np-body .news-diagram>svg{display:block;max-width:100%;height:auto;margin:0 auto;padding:clamp(8px,2vw,16px);border:1px solid var(--line);border-radius:10px;background:#14141b}
.np-body .news-diagram details{margin:12px 0 0;font-size:14px;color:var(--muted)}
.np-body .news-diagram summary{display:inline-block;min-height:28px;padding:6px 0;cursor:pointer;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.np-body .news-diagram summary:hover{color:var(--text)}
.np-body .news-diagram ul,.np-body .news-diagram ol{max-width:64ch;margin:8px 0 0;padding-left:22px;line-height:1.55}
.np-body .news-diagram li{margin:0 0 8px}

/* Vor und zurueck */
.np-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1120px;width:calc(100% - 88px);margin:12px auto 48px}
.np-nav span:empty{display:none}
.np-prev,.np-next{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid #f2f2f027;border-radius:10px;transition:border-color .2s,background-color .2s}
.np-next{grid-column:2;text-align:right}
.np-prev{grid-column:1}
.np-nav i{font:normal 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.np-nav b{font-size:15px;font-weight:540;line-height:1.4;letter-spacing:-.01em}

.nw-entry>a:focus-visible::after{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .nw-entry>a:hover::after{opacity:1;transform:none}
  .nw-entry>a:hover .nw-title{color:var(--impact-color)}
  .nw-chip:hover{background:#f2f2f00a;border-color:#f2f2f063;color:var(--text)}
  .np-prev:hover,.np-next:hover{border-color:#f2f2f063;background:#f2f2f00a}
}
@media (max-width:900px){.np-nav,.nw-fine{width:calc(100% - 48px)}}
@media (max-width:720px){
  .np-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:16px;font-size:14px;color:#b3b3af}
  .nw-entry-meta{justify-content:flex-start}
}
@media (max-width:650px){
  .nw-main,.np-main{padding-top:24px}
  .nw-head h1{margin-bottom:12px;font-size:36px}
  .nw-lede{font-size:16px}
  .nw-filter{gap:6px;margin-top:22px}
  .nw-rail{--rail:0rem;margin-top:20px}
  .nw-entry[data-impact]:not([data-impact='0']) .nw-lead{display:none}
  .nw-entry>a,.np-head{display:block;padding-right:0}
  .nw-date,.np-date{flex-direction:row;align-items:baseline;padding:0 0 14px}
  .nw-date b,.np-date b{font-size:14px}
  .nw-text{display:block;padding-left:14px}
  .np-headtext{padding-left:0}
  .np-body{margin-left:0;font-size:16px}
  .nw-entry>a::after{inset-inline-start:0}
  .np-nav,.nw-fine{width:calc(100% - 36px)}
  .np-nav{grid-template-columns:minmax(0,1fr)}
  .np-next,.np-prev{grid-column:auto;text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .nw *,.nw *::before,.nw *::after,.np *,.np *::before,.np *::after{animation: none !important;transition:none!important}
  .nw-entry>a::after{transform:none}
}