/* ============================================================
   NO PIXELS - Grundlagen
   Reset, Typografie und die Bausteine, die auf jeder Seite gelten.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{
  /* clip statt hidden: 'hidden' erzeugt einen Scroll-Container und
     macht damit jedes position:sticky im Dokument wirkungslos -
     genau daran scheiterte der sticky Header auf der alten Seite. */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--np-bg);
  color:var(--np-text);
  font-family:var(--np-font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--np-2);
  font-family:var(--np-font-display);
  line-height:1.15;
  text-wrap:balance;
}
h1{font-size:var(--np-s-3xl);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--np-s-2xl);font-weight:700;letter-spacing:-.025em}
h3{font-size:var(--np-s-xl);font-weight:600;letter-spacing:-.015em}
h4{font-size:var(--np-s-lg);font-weight:600}

p{margin:0 0 var(--np-2)}
p:last-child{margin-bottom:0}

a{color:var(--np-akzent-text);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--np-gold)}

img,svg,video{max-width:100%;height:auto;display:block}

ul,ol{margin:0 0 var(--np-2);padding-left:1.35rem}
li{margin-bottom:.35rem}

/* Tabellen und Code duerfen scrollen, die Seite selbst nicht */
.npt-scrollbar{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%}
th,td{padding:.6rem .8rem;border-bottom:1px solid var(--np-rand);text-align:left}
th{font-weight:600;color:var(--np-akzent-text)}

pre{overflow-x:auto;padding:var(--np-2);background:var(--np-flaeche);border-radius:var(--np-r-md)}
code{font-family:ui-monospace,'SF Mono',monospace;font-size:.92em}

blockquote{
  margin:0 0 var(--np-2);padding-left:var(--np-2);
  border-left:3px solid var(--np-accent-3);color:var(--np-text-dim);
}

/* ---------- Grundraster ---------- */
.npt-wrap{width:min(100% - 3rem,var(--np-breite));margin-inline:auto}

/* ---------- Tastaturbedienung ---------- */
:focus-visible{outline:2px solid var(--np-gold);outline-offset:3px}

.npt-skip{
  position:absolute;left:-9999px;top:0;z-index:100000;
  padding:.8rem 1.2rem;background:var(--np-knopf);color:#fff;
  border-radius:0 0 var(--np-r-sm) 0;font-weight:600;
}
.npt-skip:focus{left:0}

/* Nur fuer Screenreader */
.npt-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---------- Knoepfe ---------- */
.npt-knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.3rem;border-radius:var(--np-r-pille);
  font-weight:700;font-size:var(--np-s-sm);text-decoration:none;
  border:1.5px solid var(--np-knopf-rand);
  background:var(--np-knopf);color:#fff;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s;
}
.npt-knopf:hover{background:var(--np-knopf-hover);border-color:var(--np-accent-3);color:#fff;transform:translateY(-1px)}
.npt-knopf--leer{background:none;color:var(--np-text)}
.npt-knopf--leer:hover{background:rgba(42,138,147,.16)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}