/* 404 „Seite nicht gefunden“ (B10) · Owner: wdf-design-system (P9-G0; P9-5-FG: nur Tokens)
   Text mit Hauptaktion + Rückweg, daneben ein App-Fenster im Leerzustand mit den drei Bereichen der Startseite. */
.nf__grid { row-gap: var(--s-6); }
.nf__text { display: grid; gap: var(--s-4); justify-items: start; align-content: start; min-width: 0; }
.nf__title { margin-top: calc(-1 * var(--s-2)); }
.nf__cta { width: 100%; margin-top: var(--s-2); }
.nf__home { width: 100%; }

.nf-app__code { margin-left: auto; font-size: var(--fs-mono); color: var(--color-text-muted); }
.nf-app__empty { gap: var(--s-2); }
.nf-app__state { display: flex; align-items: center; gap: var(--s-2); color: var(--color-text); }
.nf-app__state strong { font-weight: var(--fw-semibold); }
.nf-app__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: calc(var(--s-6) + var(--s-2)); padding: 0 var(--s-4);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nf-app__list li:last-child .nf-app__link { border-bottom: 0; }
.nf-app__link .icon { width: var(--s-4); height: var(--s-4); color: var(--color-text-muted); }
/* Fenster schneidet über overflow ab: Fokusring nach innen */
.nf-app__link:focus-visible { outline-offset: calc(var(--s-1) / -2); border-radius: 0; }
.nf-app__link:active { background: var(--color-ui-raised); }
@media (hover: hover) and (pointer: fine) {
  .nf-app__link:hover { background: var(--color-ui-overlay); }
}

@media (min-width: 768px) {
  .nf__cta, .nf__home { width: auto; }
  .nf__appcol { max-width: var(--measure-narrow); }
}
@media (min-width: 1024px) {
  .nf { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; }
  .nf__grid { align-items: center; }
  .nf__text { grid-column: 1 / span 6; }
  .nf__appcol { grid-column: 8 / span 5; max-width: none; }
}

/* Fensterleiste ab 768 mit --s-5 (bisher über 30-folgen.css der Startseite, seit der Seiten-Begrenzung hier; Folgeauftrag B-business-plattform). */
@media (min-width: 768px) {
  :where([data-wdf-page="404"]) .ui-window__bar { padding-inline: var(--s-5); }
}