/* Der NEWSROOM: die Uebersicht (.nw) und ein Beitrag (.np).
   ================================================================================================

   Die Tokens kommen aus docs-shell.css (.ds) und werden hier NICHT neu erfunden: Tinte und Papier,
   drei warme Graustufen, Haarlinien, Barlow fuer Text und Geist Mono fuer jede Beschriftung. Keine
   Akzentfarbe — Betonung ist Helligkeit. Eine zweite Palette fuer den Newsroom haette ihn wie ein
   fremdes Produkt aussehen lassen, und das ist genau das, was eine Nachrichtenseite nicht darf: sie
   soll beweisen, dass hier jemand ist, nicht dass hier noch jemand anderes ist.

   ── Warum ein Register und kein Kartenraster ──────────────────────────────────────────────────

   Ein Newsroom wird der REIHE NACH gelesen. Die Reihenfolge ist die Information: wie lange nichts
   passiert ist, was am selben Tag zusammen passiert ist, wie oft korrigiert wird. Ein Kartenraster
   wirft das weg — es legt gleich grosse Kacheln nebeneinander, und das Auge muss das Datum erst
   suchen. Also eine durchgehende Haarlinie mit einem Strich je Eintrag und dem Datum am Rand: die
   Abstaende zwischen den Meldungen sieht man, bevor man eine einzige gelesen hat.

   Die Schiene ist das einzige Auffaellige an dieser Seite. Alles andere bleibt still — keine
   Trennlinien zwischen den Zeilen (die Striche tun das schon), keine Rahmen, keine Rundungen,
   keine Schatten. */

/* ---------- Uebersicht ---------- */

.nw-main {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: clamp(30px, 6vw, 68px) var(--pad) 0;
}

.nw-head { max-width: 62ch; }

.nw-kicker {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--g3);
}

.nw-head h1 {
  margin: 0 0 .45em;
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.nw-lede {
  margin: 0;
  font-size: clamp(16px, 2.2vw, 18.5px);
  line-height: 1.6;
  color: var(--g1);
  text-wrap: pretty;
}

/* Die Schiene. `--rail` ist zugleich die Breite der Datumsspalte und die x-Lage der Linie —
   ein Wert, damit Strich und Datum nicht auseinanderlaufen koennen. */
.nw-rail {
  --rail: 5.5rem;
  position: relative;
  list-style: none;
  margin: clamp(38px, 7vw, 72px) 0 0;
  padding: 0;
}

.nw-rail::before {
  content: '';
  position: absolute;
  left: var(--rail);
  top: .6rem;
  bottom: 1.4rem;
  width: 1px;
  background: var(--rule-soft);
}

.nw-entry > a {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
  padding: 22px 0;
  color: inherit;
  text-decoration: none;
}

/* Der Strich auf der Schiene. Er sitzt auf der Grundlinie der Rubrikzeile, nicht auf der der
   Ueberschrift: die Rubrik ist die erste Zeile des Eintrags, und ein Strich, der irgendwo in der
   Mitte haengt, zeigt auf nichts. */
.nw-entry > a::before {
  content: '';
  position: absolute;
  left: calc(var(--rail) - 6px);
  top: calc(22px + .55em);
  width: 13px;
  height: 1px;
  background: var(--g3);
  transition: background .18s ease;
}

.nw-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-right: 21px;
  padding-top: .05em;
}

.nw-date b {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--g1);
  transition: color .18s ease;
}

.nw-date i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g3);
}

.nw-text {
  display: block;
  padding-left: 26px;
  min-width: 0;
}

.nw-cat {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: 7px;
}

.nw-title {
  display: block;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--paper);
  text-wrap: balance;
}

.nw-lead {
  display: block;
  margin-top: 8px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--g3);
  text-wrap: pretty;
  transition: color .18s ease;
}

/* Betonung ist Helligkeit: beim Zeigen wird die Zeile heller, nicht bunt. */
.nw-entry > a:hover .nw-lead,
.nw-entry > a:focus-visible .nw-lead { color: var(--g1); }
.nw-entry > a:hover .nw-date b,
.nw-entry > a:focus-visible .nw-date b { color: var(--paper); }
.nw-entry > a:hover::before,
.nw-entry > a:focus-visible::before { background: var(--paper); }
.nw-entry > a:hover .nw-title,
.nw-entry > a:focus-visible .nw-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Die Jahresmarke. Eine Zaesur, kein Eintrag — deshalb aria-hidden im Markup: eine Vorlesesoftware
   liest ohnehin jedes Datum vollstaendig vor, und "2026" dazwischen waere doppelt. */
.nw-year {
  position: relative;
  padding: 30px 0 6px;
}

.nw-year span {
  position: absolute;
  left: 0;
  width: var(--rail);
  padding-right: 21px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--g2);
}

.nw-year::before {
  content: '';
  position: absolute;
  left: calc(var(--rail) - 10px);
  top: calc(30px + .45em);
  width: 21px;
  height: 1px;
  background: var(--rule);
}

/* Schmale Fenster: die Schiene faellt weg. Auf 360 Pixeln kostet eine 5,5-rem-Spalte ein Drittel
   der Zeilenbreite, und ein Register, dessen Text nur noch vierzig Zeichen breit ist, liest sich
   schlechter als eine schlichte Liste. Dann uebernehmen Haarlinien die Gliederung. */
@media (max-width: 640px) {
  .nw-rail { --rail: 0rem; }
  .nw-rail::before { display: none; }
  .nw-entry > a { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .nw-entry > a::before { display: none; }
  .nw-entry + .nw-entry > a { border-top: 1px solid var(--rule-soft); }
  .nw-date {
    flex-direction: row;
    align-items: baseline;
    gap: .5em;
    padding: 0 0 9px;
  }
  .nw-date b { font-size: 14px; }
  .nw-text { padding-left: 0; }
  .nw-year { padding: 26px 0 4px; }
  .nw-year::before { display: none; }
  .nw-year span { position: static; width: auto; padding: 0; text-align: left; display: block; }
}

/* ---------- ein Beitrag ---------- */

.np-main {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: clamp(30px, 6vw, 68px) var(--pad) 0;
}

.np-art { max-width: 72ch; }

/* §Die Schiene der Uebersicht, hier fortgesetzt.
   `--rail` traegt denselben Wert wie dort und aus demselben Grund: es ist zugleich die Breite der
   Datumsspalte und die x-Lage der Linie. Ein Eintrag oeffnet sich damit an Ort und Stelle, statt
   durch eine andere Zeichnung ersetzt zu werden. */
.np-head {
  --rail: 5.5rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
  margin: 0 0 clamp(26px, 4vw, 40px);
}

/* Der Strich sitzt auf der Grundlinie der Rubrikzeile, genau wie in der Uebersicht. */
.np-head::before {
  content: '';
  position: absolute;
  left: calc(var(--rail) - 6px);
  top: .55em;
  width: 13px;
  height: 1px;
  background: var(--paper);
}

/* Ein SPUR, keine durchgehende Linie: hier steht ein einziger Eintrag, und eine Schiene ueber die
   ganze Seite versprae­che eine Reihe, die es auf dieser Seite nicht gibt. Sie endet unter dem
   Vorspann. */
.np-head::after {
  content: '';
  position: absolute;
  left: var(--rail);
  top: calc(.55em + 6px);
  bottom: .2em;
  width: 1px;
  background: var(--rule-soft);
}

.np-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-right: 21px;
  padding-top: .05em;
}

.np-date b {
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.np-date i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g3);
}

/* Derselbe Einzug wie `.nw-text`. Die Ueberschrift beginnt damit auf derselben Senkrechten wie der
   Titel in der Zeile, aus der man gekommen ist. */
.np-headtext { padding-left: 26px; min-width: 0; }

.np-cat {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--g3);
}

.np-art h1 {
  margin: 0 0 .5em;
  font-size: clamp(28px, 5.4vw, 46px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Der Vorspann steht auf Papierhelligkeit, der Rumpf eine Stufe darunter. Das ist die ganze
   Hierarchie dieser Seite — sie braucht keine zweite Schriftgroesse dafuer. */
.np-lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.55;
  color: var(--paper);
  text-wrap: pretty;
}

.np-body {
  margin-left: calc(5.5rem + 26px);
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--g1);
}

.np-body p { margin: 0 0 1.25em; text-wrap: pretty; }

.np-body h2 {
  margin: 2.3em 0 .8em;
  padding-top: 1.15em;
  border-top: 1px solid var(--rule-soft);
  font-size: clamp(18px, 2.3vw, 21px);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--paper);
  text-wrap: balance;
}

.np-body h3 {
  margin: 1.8em 0 .55em;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.008em;
  line-height: 1.35;
  color: var(--paper);
}

.np-body ul { margin: 0 0 1.25em; padding-left: 1.15em; }
.np-body li { margin: 0 0 .7em; }
.np-body li::marker { color: var(--g3); }

.np-body strong { color: var(--paper); font-weight: 500; }
.np-body em { font-style: italic; color: var(--g1); }

.np-body code {
  font-family: var(--mono);
  font-size: .88em;
  color: var(--paper);
  background: var(--panel);
  padding: .12em .4em;
  border: 1px solid var(--rule-soft);
}

.np-body a, .nw-lede a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--g3);
  transition: text-decoration-color .18s ease;
}
.np-body a:hover, .nw-lede a:hover { text-decoration-color: var(--paper); }

/* Beide Seiten enden mit der Fusszeile der Huelle; sie braucht etwas Luft nach dem letzten Absatz. */
.nw-main, .np-main { padding-bottom: clamp(34px, 6vw, 60px); }

@media (prefers-reduced-motion: reduce) {
  .nw-entry > a::before,
  .nw-date b,
  .nw-lead,
  .np-body a,
  .nw-lede a { transition: none; }
}

/* ---------- Entwurf und leere Uebersicht ---------- */

/* §Ein Entwurf sieht aus wie das Ergebnis, mit genau einem Unterschied.
   Eine Vorschau, die anders aussieht als die spaetere Seite, beweist nichts ueber sie. Also
   dieselbe Zeichnung, plus eine Zeile, die sagt, woran man ist — in der Sprache der Seite: eine
   Haarlinie und Mono, keine Warnfarbe. Die Seite hat keine Akzentfarbe, und ein farbiger Balken
   laese hier wie ein Defekt. */
.np-entwurf {
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 11px 16px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g1);
  max-width: 72ch;
}

/* Eine leere Uebersicht ist kein Fehler, sondern ein Anfang — und sie sagt das, statt zu schweigen. */
.nw-leer {
  margin: clamp(38px, 7vw, 72px) 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--g2);
}

/* Schmale Fenster: die Schiene faellt weg — derselbe Punkt und derselbe Grund wie in der
   Uebersicht. Ein anderer Punkt hier hiesse, dass die beiden Seiten sich auf halber Strecke
   widersprechen. */
@media (max-width: 640px) {
  .np-head {
    --rail: 0rem;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: clamp(20px, 4vw, 30px);
  }
  .np-head::before, .np-head::after { display: none; }
  .np-date {
    flex-direction: row;
    align-items: baseline;
    gap: .5em;
    padding: 0 0 11px;
  }
  .np-date b { font-size: 14px; }
  .np-headtext { padding-left: 0; }
  .np-body { margin-left: 0; }
}

/* ---------- Der Filter, und wie sich diese Seite bewegt ----------------------------------------

   VERLANGT AM 08.09.2026: „news page aktualisieren und besser gestalten mit animierten
   hintergruenden bei aktionen".

   ── Warum die Bewegung aus der SCHIENE kommt ──────────────────────────────────────────────────

   Weil sie das einzige Auffaellige an dieser Seite ist (siehe oben). Eine Aufhellung, die von
   irgendwo einschwebt, waere ein zweites auffaelliges Ding neben dem ersten; eine, die vom Strich
   nach aussen laeuft, ist dasselbe Ding, das antwortet. Der Strich zeigt ohnehin schon auf die
   Zeile — jetzt faerbt er sie.

   ── Warum NICHTS beim Laden passiert ──────────────────────────────────────────────────────────

   Bewegung „bei Aktionen" heisst: wenn jemand etwas tut. Eine Einblendung beim Laden ist keine
   Antwort auf eine Handlung, sondern eine Verzoegerung des Textes — und im ersten Standbild, das
   ein geteilter Link und ein Vorschaubild zeigen, steht dann nichts. Ein Newsroom, dessen Meldungen
   erst nach 300 ms erscheinen, ist ein Newsroom, der langsamer wirkt, als er ist.

   ── Warum keine Farbe ─────────────────────────────────────────────────────────────────────────

   `news.css` haelt fest: keine Akzentfarbe, Betonung ist Helligkeit. Die Aufhellung ist deshalb
   ein Verlauf aus `--paper` mit sehr kleiner Deckkraft — sie faerbt nicht, sie hebt.

   `--paper` und NICHT `--ink`: der Grund dieser Seite IST `--ink` (#0a0a0a), die Schrift ist
   `--paper` (#f2f2f0). Die erste Fassung mischte zu `--ink` — Schwarz auf Schwarz, eine Bewegung,
   die man nur im Quelltext sieht. */

/* Die Filterleiste. Links und keine Knoepfe: diese Seite hat kein JavaScript, und ein `<button>`
   ohne Formular waere ein Bedienelement, das nichts tut. */
.nw-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: clamp(26px, 4vw, 38px) 0 0;
}

.nw-chip {
  --wisch: 0;                       /* 0..1 — wie weit die Fuellung eingelaufen ist */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  padding: 6px 13px;
  border: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g2);
  text-decoration: none;
  overflow: hidden;
  transition: color .2s ease, border-color .2s ease;
}

.nw-chip span {
  font-variant-numeric: tabular-nums;
  color: var(--g3);
  transition: color .2s ease;
}

/* Die Fuellung laeuft von LINKS ein, in Leserichtung. Sie sitzt hinter dem Text (`z-index: -1`)
   und wird skaliert, nicht in der Breite animiert: eine Breitenanimation laesst den Browser bei
   jedem Bild neu umbrechen, und die Schrift daneben zittert. */
.nw-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--paper) 8%, transparent);
  transform: scaleX(var(--wisch));
  transform-origin: left center;
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

.nw-chip:hover,
.nw-chip:focus-visible { --wisch: 1; color: var(--paper); border-color: var(--rule); }
.nw-chip:hover span,
.nw-chip:focus-visible span { color: var(--g2); }

/* Die gewaehlte Rubrik ist gefuellt und bleibt es. Kein Umriss zusaetzlich: zwei Zeichen fuer
   denselben Zustand sind eines zu viel. */
.nw-chip.is-on {
  --wisch: 1;
  color: var(--paper);
  border-color: var(--rule);
}
.nw-chip.is-on::before { background: color-mix(in oklab, var(--paper) 13%, transparent); }

/* ---------- Der Eintrag antwortet ---------- */

/* Die Aufhellung. Sie beginnt an der Schiene und laeuft nach rechts aus — deshalb ein Verlauf und
   keine Flaeche: eine Flaeche mit harter Kante waere ein Kasten, und diese Seite hat keine. */
.nw-entry > a::after {
  content: '';
  position: absolute;
  inset: 4px calc(var(--rail) * -1) 4px calc(var(--rail) - 6px);
  z-index: -1;
  background: linear-gradient(to right,
              color-mix(in oklab, var(--paper) 7%, transparent) 0%,
              color-mix(in oklab, var(--paper) 3%, transparent) 45%,
              transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}

.nw-entry > a { isolation: isolate; }

.nw-entry > a:hover::after,
.nw-entry > a:focus-visible::after { transform: scaleX(1); opacity: 1; }

/* Und der Strich waechst mit. Er ist der Ursprung der Bewegung, also gehoert er dazu. */
.nw-entry > a::before {
  transition: background .18s ease, width .3s cubic-bezier(.22, .61, .36, 1);
}
.nw-entry > a:hover::before,
.nw-entry > a:focus-visible::before { width: 22px; background: var(--paper); }

/* ---------- Wer keine Bewegung will, bekommt keine ---------- */

/* Aber die Zustaende bleiben unterscheidbar. Eine Vorgabe, die Bewegung abschaltet UND die
   Rueckmeldung mit, macht die Seite fuer genau die Leute schlechter, die sie gesetzt haben. */
@media (prefers-reduced-motion: reduce) {
  .nw-chip,
  .nw-chip::before,
  .nw-chip span,
  .nw-entry > a::before,
  .nw-entry > a::after { transition-duration: .01ms; }
}

@media (max-width: 640px) {
  .nw-filter { gap: 6px; }
  .nw-chip { padding: 5px 10px; font-size: 10.5px; }
}