/**
 * NEPTUN PORTAL — Anmeldung, Händlerbereich, Verwaltung
 *
 * Baut auf 00-tokens.css der Website auf (Farben, Schrift, Abstände, Radien)
 * und definiert keine eigenen Rohwerte, wo es einen Token gibt. Dadurch wirkt
 * das Portal wie ein Teil des Auftritts und ändert sich mit, wenn die Marke
 * einmal nachgeschärft wird.
 *
 * Bewusst NICHT geladen wird das Website-CSS (Header, Footer, Archiv) — das
 * Portal ist eine Anwendung, keine Unterseite.
 */

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

body.np-auth,
body.np-app {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body, 1rem);
  line-height: 1.55;
  color: var(--color-text-on-light);
  background: var(--neptun-surface-050);
  -webkit-font-smoothing: antialiased;
}

.np-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.np-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--neptun-graphite-950); color: #fff; padding: var(--space-s) var(--space-m);
}
.np-skip:focus { left: var(--space-s); top: var(--space-s); }

/* ============================================================ ANMELDUNG */

.np-auth__seite {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-l);
  padding: var(--space-xl) var(--space-m);
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(246,147,30,0.07), transparent 70%),
    var(--neptun-surface-050);
}

.np-auth__karte {
  width: 100%; max-width: 430px;
  background: var(--neptun-white);
  border: var(--line-hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  padding: clamp(1.75rem, 5vw, 2.75rem);
}

.np-auth__logo { display: block; margin-bottom: var(--space-xl); }
.np-auth__logo img { max-width: 150px; height: auto; display: block; }
.np-auth__logotext { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.25rem; color: var(--color-text-on-light); }

.np-auth__titel {
  font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1.2; font-weight: var(--fw-bold);
  margin: 0 0 var(--space-xs);
}
.np-auth__lead { margin: 0 0 var(--space-l); color: var(--color-text-on-light-muted); font-size: var(--fs-body-s); }
.np-auth__hilfe { margin: var(--space-l) 0 0; font-size: var(--fs-body-s); text-align: center; }
.np-auth__zurueck { margin: var(--space-l) 0 0; font-size: var(--fs-caption); text-align: center; }
.np-auth__zurueck a, .np-auth__hilfe a { color: var(--neptun-orange-hover); text-decoration: none; }
.np-auth__zurueck a:hover, .np-auth__hilfe a:hover { text-decoration: underline; }
.np-auth__fuss { font-size: var(--fs-caption); color: var(--neptun-steel-400); margin: 0; text-align: center; }

/* ============================================================ FORMULARE */

.np-form { display: flex; flex-direction: column; gap: var(--space-m); }
.np-form--gross { gap: var(--space-l); }

.np-feld { display: flex; flex-direction: column; gap: 0.4rem; }
.np-feld label { font-size: var(--fs-body-s); font-weight: var(--fw-medium); }
.np-optional { font-weight: 400; color: var(--color-text-on-light-muted); }
.np-pflicht { color: var(--neptun-orange-hover); }

.np-feld input[type="text"], .np-feld input[type="email"], .np-feld input[type="tel"],
.np-feld input[type="password"], .np-feld input[type="number"], .np-feld input[type="search"],
.np-feld select, .np-feld textarea,
.np-suchleiste select, .np-suchfeld input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--color-text-on-light);
  background: var(--neptun-white);
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-m);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-appearance: none; appearance: none;
}
.np-feld select, .np-suchleiste select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6D6D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 16px;
  padding-right: 2.2rem;
}
.np-feld textarea { resize: vertical; min-height: 90px; }

.np-feld input:focus, .np-feld select:focus, .np-feld textarea:focus,
.np-suchfeld input:focus, .np-suchleiste select:focus {
  outline: none;
  border-color: var(--neptun-orange);
  box-shadow: var(--shadow-focus);
}

.np-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.np-raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
@media (max-width: 720px) {
  .np-feldpaar, .np-raster3 { grid-template-columns: 1fr; }
}

.np-passwortfeld { position: relative; display: flex; }
.np-passwortfeld input { padding-right: 5.5rem; }
.np-passwortfeld__zeigen {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--neptun-orange-hover); padding: 0.3rem 0.5rem; border-radius: var(--radius-s);
}
.np-passwortfeld__zeigen:hover { background: var(--neptun-orange-tint-10); }

.np-checkbox { display: flex; align-items: center; gap: 0.55rem; font-size: var(--fs-body-s); cursor: pointer; }
.np-checkbox input { width: 16px; height: 16px; accent-color: var(--neptun-orange); }

.np-trenner { border: 0; border-top: var(--line-hairline); margin: var(--space-s) 0; }

/* ============================================================ BUTTONS */

.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: var(--fw-medium);
  border: 1px solid transparent; border-radius: var(--radius-m);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.np-btn:active { transform: translateY(1px); }
.np-btn--breit { width: 100%; }

.np-btn--primaer { background: var(--neptun-orange); color: var(--neptun-graphite-950); }
.np-btn--primaer:hover { background: var(--neptun-orange-hover); color: #fff; }

.np-btn--sekundaer { background: var(--neptun-white); color: var(--color-text-on-light); border-color: var(--neptun-steel-200); }
.np-btn--sekundaer:hover { border-color: var(--neptun-graphite-800); }

.np-btn--leise { background: transparent; color: var(--color-text-on-light-muted); }
.np-btn--leise:hover { color: var(--color-text-on-light); background: var(--neptun-surface-100); }

.np-link { color: var(--neptun-orange-hover); text-decoration: none; font-weight: var(--fw-medium); }
.np-link:hover { text-decoration: underline; }

.np-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-m);
  color: var(--color-text-on-light-muted); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.np-iconbtn:hover { background: var(--neptun-surface-100); color: var(--color-text-on-light); }
.np-iconbtn--gefahr:hover { background: rgba(192,57,43,0.10); color: var(--neptun-error); }

/* ============================================================ HINWEISE */

.np-hinweis {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.8rem 1rem; margin-bottom: var(--space-m);
  border-radius: var(--radius-m); font-size: var(--fs-body-s);
  border: 1px solid;
}
.np-hinweis--erfolg { background: rgba(62,142,92,0.08); border-color: rgba(62,142,92,0.30); color: #24603D; }
.np-hinweis--fehler { background: rgba(192,57,43,0.07); border-color: rgba(192,57,43,0.28); color: #8E2A20; }
.np-hinweistext { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); margin: 0; }

/* ============================================================ APP-RAHMEN */

.np-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
@media (max-width: 1023px) { .np-shell { grid-template-columns: 1fr; } }

.np-topbar {
  display: none; align-items: center; gap: var(--space-m);
  padding: 0 var(--space-m); height: 60px;
  background: var(--neptun-white); border-bottom: var(--line-hairline);
  position: sticky; top: 0; z-index: 30;
}
@media (max-width: 1023px) { .np-topbar { display: flex; } }
.np-topbar__logo img { max-height: 26px; width: auto; display: block; }
.np-topbar__rolle { margin-left: auto; font-size: var(--fs-caption); color: var(--neptun-steel-400); text-transform: uppercase; letter-spacing: 0.08em; }
.np-topbar__toggle {
  width: 38px; height: 38px; border: 1px solid var(--neptun-steel-200); border-radius: var(--radius-m);
  background: var(--neptun-white); cursor: pointer; position: relative;
}
.np-topbar__balken, .np-topbar__balken::before, .np-topbar__balken::after {
  position: absolute; left: 50%; width: 16px; height: 1.5px; background: var(--color-text-on-light);
  transform: translateX(-50%); content: "";
}
.np-topbar__balken { top: 50%; transform: translate(-50%, -50%); }
.np-topbar__balken::before { top: -5px; }
.np-topbar__balken::after { top: 5px; }

.np-nav {
  display: flex; flex-direction: column; gap: var(--space-l);
  padding: var(--space-l) var(--space-m);
  background: var(--neptun-graphite-950); color: var(--color-text-on-dark);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.np-nav__marke a { display: block; text-decoration: none; color: inherit; }
.np-nav__marke img { max-width: 122px; height: auto; display: block; }
.np-nav__marke span { font-family: var(--font-display); font-weight: var(--fw-bold); }
.np-nav__kontext {
  display: block; margin-top: 0.45rem;
  font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--neptun-steel-400);
}

.np-nav__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.np-nav__link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0.7rem; border-radius: var(--radius-m);
  color: var(--neptun-steel-300); text-decoration: none;
  font-size: var(--fs-body-s);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.np-nav__link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.np-nav__link.is-aktiv { background: var(--neptun-orange); color: var(--neptun-graphite-950); font-weight: var(--fw-medium); }
.np-nav__link--leise { font-size: var(--fs-caption); }

.np-nav__fuss { border-top: 1px solid rgba(255,255,255,0.10); padding-top: var(--space-s); display: flex; flex-direction: column; gap: 2px; }
.np-nav__benutzer {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem; margin-top: var(--space-xs);
  font-size: var(--fs-caption); color: var(--neptun-steel-400);
  border-top: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 1023px) {
  .np-nav {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); height: 100vh;
    transform: translateX(-100%); transition: transform var(--duration-standard) var(--ease-standard);
    z-index: 45;
  }
  .np-nav.is-offen { transform: none; }
  .np-nav__scrim { position: fixed; inset: 0; background: rgba(18,18,20,0.5); z-index: 40; }
}

.np-inhalt { padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 1320px; }

/* ============================================================ SEITENKOPF */

.np-seitenkopf {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-m); margin-bottom: var(--space-xl);
}
.np-titel { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: var(--fw-bold); margin: 0; line-height: 1.2; }
.np-lead { margin: 0.35rem 0 0; color: var(--color-text-on-light-muted); font-size: var(--fs-body-s); }
.np-zurueck { display: inline-block; margin-bottom: 0.4rem; font-size: var(--fs-caption); color: var(--color-text-on-light-muted); text-decoration: none; }
.np-zurueck:hover { color: var(--neptun-orange-hover); }

/* ============================================================ KARTEN */

.np-karten { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); }
.np-karten--3 { grid-template-columns: repeat(3, 1fr); }
.np-karten--4 { grid-template-columns: repeat(4, 1fr); }
.np-karten--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .np-karten--5, .np-karten--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .np-karten--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .np-karten--5, .np-karten--4 { grid-template-columns: 1fr; } }

.np-karte {
  background: var(--neptun-white); border: var(--line-hairline); border-radius: var(--radius-l);
  padding: var(--space-l); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 0.2rem;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.np-karte--klick:hover { border-color: var(--neptun-graphite-500); box-shadow: var(--shadow-s); transform: translateY(-2px); }
.np-karte--akzent { border-color: var(--neptun-orange-tint-24); background: linear-gradient(180deg, rgba(246,147,30,0.06), transparent 60%), var(--neptun-white); }
.np-karte__icon { width: 20px; height: 20px; color: var(--neptun-steel-400); margin-bottom: var(--space-xs); }
.np-karte__zahl { font-family: var(--font-data); font-size: 1.85rem; font-weight: var(--fw-semibold); line-height: 1.1; }
.np-karte__label { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }
.np-karte__zusatz { font-size: var(--fs-caption); color: var(--neptun-steel-400); margin-top: 0.2rem; }

/* ============================================================ BLÖCKE */

.np-block {
  background: var(--neptun-white); border: var(--line-hairline); border-radius: var(--radius-l);
  padding: var(--space-l); margin-bottom: var(--space-l);
}
.np-block__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-m); flex-wrap: wrap; }
.np-block__titel { font-family: var(--font-body); font-size: var(--fs-body-l); font-weight: var(--fw-semibold); margin: 0 0 var(--space-m); }
.np-block__kopf .np-block__titel { margin: 0; }
.np-block--aktion { border-color: var(--neptun-steel-200); }

.np-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: start; }
@media (max-width: 900px) { .np-spalten { grid-template-columns: 1fr; } }

.np-fliesstext p { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); margin: 0 0 var(--space-s); }
.np-fliesstext p:last-child { margin-bottom: 0; }
.np-fliesstext strong { color: var(--color-text-on-light); }

/* ============================================================ TABELLEN */

.np-tabelle { background: var(--neptun-white); border: var(--line-hairline); border-radius: var(--radius-l); overflow: hidden; }
.np-tabelle__kopf, .np-tabelle__zeile {
  display: grid;
  grid-template-columns: 64px 2.2fr 1fr 1fr 1fr 118px;
  gap: var(--space-m); align-items: center;
  padding: 0.75rem var(--space-m);
}
.np-tabelle--haendler .np-tabelle__kopf, .np-tabelle--haendler .np-tabelle__zeile { grid-template-columns: 1.8fr 1fr 90px 1.3fr 1fr 90px 150px; }
.np-tabelle--downloads .np-tabelle__kopf, .np-tabelle--downloads .np-tabelle__zeile { grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 140px; }

.np-tabelle__kopf {
  background: var(--neptun-surface-050); border-bottom: var(--line-hairline);
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--neptun-steel-400);
}
.np-tabelle__zeile { border-bottom: var(--line-hairline); font-size: var(--fs-body-s); }
.np-tabelle__zeile:last-child { border-bottom: 0; }
.np-tabelle__zeile:hover { background: var(--neptun-surface-050); }

.np-tabelle__zelle { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.np-tabelle__zelle--bild img { width: 52px; height: 40px; object-fit: cover; border-radius: var(--radius-s); display: block; }
.np-tabelle__zelle--aktion { flex-direction: row; gap: 0.15rem; justify-content: flex-end; }
.np-tabelle__titel { color: var(--color-text-on-light); text-decoration: none; font-weight: var(--fw-medium); }
.np-tabelle__titel:hover { color: var(--neptun-orange-hover); }
.np-tabelle__sub { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); }

/* Auf schmalen Bildschirmen wird jede Zeile zur Karte — keine Querscrollerei. */
@media (max-width: 900px) {
  .np-tabelle__kopf { display: none; }
  .np-tabelle { border: 0; background: transparent; }
  .np-tabelle__zeile {
    display: block; background: var(--neptun-white); border: var(--line-hairline);
    border-radius: var(--radius-l); margin-bottom: var(--space-s); padding: var(--space-m);
  }
  .np-tabelle__zelle { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-m); padding: 0.3rem 0; }
  .np-tabelle__zelle[data-label]::before {
    content: attr(data-label); font-size: var(--fs-caption); color: var(--neptun-steel-400); flex: 0 0 auto;
  }
  .np-tabelle__zelle--bild { display: none; }
  .np-tabelle__zelle--aktion { justify-content: flex-start; padding-top: var(--space-s); border-top: var(--line-hairline); margin-top: var(--space-xs); }
}

/* ============================================================ MARKEN */

.np-marke {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: var(--radius-full);
  font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  background: var(--neptun-orange); color: var(--neptun-graphite-950);
}
.np-marke--grau { background: var(--neptun-surface-100); color: var(--color-text-on-light-muted); }
.np-marke--gruen { background: rgba(62,142,92,0.14); color: #24603D; }
.np-marke--warnung { background: rgba(192,57,43,0.10); color: #8E2A20; }

/* ============================================================ LISTEN */

.np-miniliste, .np-rangliste, .np-kategorien, .np-linkliste { list-style: none; margin: 0; padding: 0; }
.np-miniliste li { border-bottom: var(--line-hairline); }
.np-miniliste li:last-child { border-bottom: 0; }
.np-miniliste a { display: flex; align-items: center; gap: var(--space-s); padding: 0.6rem 0; text-decoration: none; color: inherit; }
.np-miniliste img { width: 46px; height: 36px; object-fit: cover; border-radius: var(--radius-s); flex: 0 0 auto; }
.np-miniliste__leer { width: 46px; height: 36px; border-radius: var(--radius-s); background: var(--neptun-surface-100); flex: 0 0 auto; }
.np-miniliste__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.np-miniliste__text strong { font-size: var(--fs-body-s); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-miniliste__text em { font-style: normal; font-size: var(--fs-caption); color: var(--neptun-steel-400); }
.np-miniliste a:hover .np-miniliste__text strong { color: var(--neptun-orange-hover); }

.np-rangliste li { display: flex; align-items: center; gap: var(--space-s); padding: 0.55rem 0; border-bottom: var(--line-hairline); }
.np-rangliste li:last-child { border-bottom: 0; }
.np-rangliste__nr { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); width: 18px; flex: 0 0 auto; }
.np-rangliste__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.np-rangliste__text strong { font-size: var(--fs-body-s); font-weight: var(--fw-medium); }
.np-rangliste__text em { font-style: normal; font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); }
.np-rangliste__wert { font-family: var(--font-data); font-weight: var(--fw-semibold); }

.np-kategorien li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: var(--line-hairline); font-size: var(--fs-body-s); }
.np-kategorien li:last-child { border-bottom: 0; }
.np-kategorien em { font-style: normal; color: var(--neptun-steel-400); font-size: var(--fs-caption); }

.np-linkliste li { border-bottom: var(--line-hairline); }
.np-linkliste li:last-child { border-bottom: 0; }
.np-linkliste a { display: flex; align-items: center; gap: var(--space-s); padding: 0.7rem 0; text-decoration: none; color: inherit; }
.np-linkliste a:hover strong { color: var(--neptun-orange-hover); }
.np-linkliste span { display: flex; flex-direction: column; }
.np-linkliste strong { font-size: var(--fs-body-s); font-weight: var(--fw-medium); }
.np-linkliste em { font-style: normal; font-size: var(--fs-caption); color: var(--neptun-steel-400); }

.np-datenliste { margin: 0 0 var(--space-m); }
.np-datenliste > div { display: flex; justify-content: space-between; gap: var(--space-m); padding: 0.5rem 0; border-bottom: var(--line-hairline); font-size: var(--fs-body-s); }
.np-datenliste > div:last-child { border-bottom: 0; }
.np-datenliste dt { color: var(--color-text-on-light-muted); margin: 0; }
.np-datenliste dd { margin: 0; font-weight: var(--fw-medium); text-align: right; }

/* ============================================================ DOWNLOADS */

.np-dateien { display: grid; gap: var(--space-s); }
.np-datei {
  display: grid; grid-template-columns: 78px 1fr auto; gap: var(--space-m); align-items: center;
  background: var(--neptun-white); border: var(--line-hairline); border-radius: var(--radius-l);
  padding: var(--space-m);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.np-datei:hover { border-color: var(--neptun-graphite-500); box-shadow: var(--shadow-s); }
.np-datei__bild { width: 78px; height: 58px; border-radius: var(--radius-m); overflow: hidden; background: var(--neptun-surface-100); display: flex; align-items: center; justify-content: center; }
.np-datei__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-datei__bild--leer { color: var(--neptun-steel-400); }
.np-datei__kopf { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.np-datei__titel { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin: 0; }
.np-datei__beschreibung { margin: 0.2rem 0 0; font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }
.np-datei__meta { margin: 0.35rem 0 0; font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); }
@media (max-width: 640px) {
  .np-datei { grid-template-columns: 1fr; }
  .np-datei__bild { width: 100%; height: 130px; }
  .np-datei__aktion .np-btn { width: 100%; }
}

/* ============================================================ FILTER */

.np-filterleiste { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-l); }
.np-filterleiste--klein { margin-bottom: 0; }
.np-chip {
  padding: 0.35rem 0.8rem; border-radius: var(--radius-full);
  border: 1px solid var(--neptun-steel-200); background: var(--neptun-white);
  font-size: var(--fs-caption); color: var(--color-text-on-light-muted); text-decoration: none;
}
.np-chip:hover { border-color: var(--neptun-graphite-800); color: var(--color-text-on-light); }
.np-chip.is-aktiv { background: var(--neptun-graphite-950); border-color: var(--neptun-graphite-950); color: #fff; }

.np-suchleiste { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; margin-bottom: var(--space-l); }
.np-suchfeld { position: relative; flex: 1 1 260px; min-width: 200px; }
.np-suchfeld__icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--neptun-steel-400); pointer-events: none; }
.np-suchfeld input { padding-left: 2.5rem; }
.np-suchleiste select { flex: 0 1 190px; }

/* ============================================================ GRAFIK */

.np-grafik__svg { width: 100%; height: 170px; display: block; }
.np-grafik__aufrufe { fill: var(--neptun-steel-200); }
.np-grafik__besucher { fill: var(--neptun-orange); }
.np-grafik__achse { stroke: var(--neptun-steel-200); stroke-width: 0.3; }
.np-grafik__skala { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); margin-top: 0.35rem; }
.np-legende { display: flex; align-items: center; gap: 0.4rem; margin-top: var(--space-s); font-size: var(--fs-caption); color: var(--color-text-on-light-muted); flex-wrap: wrap; }
.np-legende__punkt { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.np-legende__punkt--besucher { background: var(--neptun-orange); }
.np-legende__punkt--aufrufe { background: var(--neptun-steel-200); margin-left: var(--space-s); }
.np-legende__max { margin-left: auto; color: var(--neptun-steel-400); }
.np-grafik__leer { padding: var(--space-xl) 0; text-align: center; }

/* ============================================================ LEERZUSTAND */

.np-leer {
  background: var(--neptun-white); border: 1px dashed var(--neptun-steel-200); border-radius: var(--radius-l);
  padding: clamp(2rem, 6vw, 3.5rem); text-align: center;
}
.np-leer__icon { width: 30px; height: 30px; color: var(--neptun-steel-300); margin-bottom: var(--space-s); }
.np-leer h2 { font-family: var(--font-body); font-size: var(--fs-body-l); font-weight: var(--fw-semibold); margin: 0 0 0.35rem; }
.np-leer p { margin: 0 0 var(--space-m); color: var(--color-text-on-light-muted); font-size: var(--fs-body-s); }
.np-leer p:last-child { margin-bottom: 0; }

/* ============================================================ BILDER */

.np-bildwahl { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-m); align-items: start; }
@media (max-width: 640px) { .np-bildwahl { grid-template-columns: 1fr; } }
.np-bildwahl__vorschau {
  aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden;
  background: var(--neptun-surface-100); display: flex; align-items: center; justify-content: center;
}
.np-bildwahl__vorschau--klein { max-width: 190px; margin-bottom: var(--space-s); }
.np-bildwahl__vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-bildwahl__leer { font-size: var(--fs-caption); color: var(--neptun-steel-400); }
.np-bildwahl__steuerung { display: flex; flex-direction: column; gap: var(--space-s); }

.np-ablage {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-l); border: 1px dashed var(--neptun-steel-300); border-radius: var(--radius-m);
  background: var(--neptun-surface-050); cursor: pointer;
  font-size: var(--fs-body-s); color: var(--color-text-on-light-muted);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.np-ablage:hover, .np-ablage.is-ueber { border-color: var(--neptun-orange); background: var(--neptun-orange-tint-10); }
.np-ablage--klein { padding: var(--space-m); }
.np-ablage input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.np-ablage small { color: var(--neptun-steel-400); }

.np-galerie { list-style: none; margin: 0 0 var(--space-s); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.np-galerie__bild { position: relative; width: 92px; height: 70px; border-radius: var(--radius-s); overflow: hidden; cursor: grab; background: var(--neptun-surface-100); }
.np-galerie__bild.is-zieht { opacity: 0.4; }
.np-galerie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-galerie__weg {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border: 0; border-radius: var(--radius-full); background: rgba(18,18,20,0.72); color: #fff;
  cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.np-galerie__weg:hover { background: var(--neptun-error); }

/* ============================================================ AUSWAHLLISTE */

.np-auswahlliste__suche { width: 100%; margin-bottom: var(--space-xs); padding: 0.6rem 0.8rem; border: 1px solid var(--neptun-steel-200); border-radius: var(--radius-m); font-family: var(--font-body); font-size: var(--fs-body-s); }
.np-auswahlliste__box { max-height: 260px; overflow-y: auto; border: var(--line-hairline); border-radius: var(--radius-m); padding: var(--space-xs); }
.np-auswahlliste__zeile { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.4rem; border-radius: var(--radius-s); font-size: var(--fs-body-s); cursor: pointer; }
.np-auswahlliste__zeile:hover { background: var(--neptun-surface-050); }
.np-auswahlliste__zeile input { accent-color: var(--neptun-orange); }

/* ============================================================ SONSTIGES */

.np-seitenkopf__aktionen { display: flex; gap: var(--space-s); flex-wrap: wrap; }
.np-aktionsleiste { display: flex; gap: var(--space-s); flex-wrap: wrap; margin-top: var(--space-m); }
.np-blaettern { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: var(--space-m); }
.np-blaettern__seite {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--neptun-steel-200); border-radius: var(--radius-m);
  background: var(--neptun-white); color: var(--color-text-on-light); text-decoration: none; font-size: var(--fs-body-s);
}
.np-blaettern__seite:hover { border-color: var(--neptun-graphite-800); }
.np-blaettern__seite.is-aktiv { background: var(--neptun-graphite-950); border-color: var(--neptun-graphite-950); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================ PREISE
   Konditionsfelder, Kartenfelder und die Vorschau des Preisimports. */

/* Zusatzfelder für den Karteneintrag. Ohne JavaScript ist der Block sichtbar,
   sobald „Ja" gespeichert wurde — das hidden-Attribut kommt vom Server. */
.np-kartenfelder {
  margin-top: var(--space-m);
  padding: var(--space-m);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.np-kartenfelder[hidden] { display: none; }

/* Prozenteingabe mit nachgestelltem Zeichen. Das % steht daneben und nicht
   im Feld, damit der Wert selbst rein numerisch bleibt. */
.np-prozentfeld { position: relative; display: flex; align-items: center; gap: 0.4rem; }
.np-prozentfeld input { flex: 1 1 auto; font-family: var(--font-data); text-align: right; }
.np-prozentfeld__zeichen {
  flex: 0 0 auto;
  font-family: var(--font-data);
  font-size: var(--fs-body);
  color: var(--color-text-on-light-muted);
}

/* Liste nicht zugeordneter Nummern aus dem Import. Bewusst als Fließtext
   mit Trennern und nicht als Tabelle — es sind reine Nachschlagewerte. */
.np-nummernliste {
  margin: var(--space-s) 0 0;
  padding: var(--space-s);
  border-radius: var(--radius-s);
  background: var(--neptun-surface-100);
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  line-height: 1.9;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.np-nummernliste span { display: inline-block; margin-right: 0.75rem; }

.np-miniliste--schlicht { list-style: none; margin: 0; padding: 0; }
.np-miniliste--schlicht li {
  padding: 0.35rem 0;
  border-bottom: var(--line-hairline);
  font-size: var(--fs-body-s);
}
.np-miniliste--schlicht li:last-child { border-bottom: 0; }

/* Änderungstabelle der Vorschau */
.np-tabelle--preise .np-tabelle__kopf,
.np-tabelle--preise .np-tabelle__zeile { grid-template-columns: 1fr 2fr 120px 120px; }
.np-tabelle__zelle--zahl { font-family: var(--font-data); text-align: right; }
.np-tabelle__zelle--neu { font-family: var(--font-data); text-align: right; font-weight: var(--fw-semibold); }

/* ============================================== KONDITIONEN (Händlerstart)
   Zwei grosse Zahlen und eine Erklärung daneben. Der Händler soll auf einen
   Blick sehen, womit gerechnet wird — nicht suchen müssen. */

.np-konditionen {
  display: grid;
  grid-template-columns: 180px 180px 1fr;
  gap: var(--space-m);
  align-items: stretch;
}
.np-kondition {
  padding: var(--space-m);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
}
.np-kondition__label {
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-light-muted);
}
.np-kondition__wert {
  margin: 0.35rem 0 0.2rem;
  font-family: var(--font-data);
  font-size: 2rem;
  line-height: 1.1;
  font-weight: var(--fw-semibold);
}
.np-kondition__leer {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular, 400);
  font-style: italic;
  color: var(--color-text-on-light-muted);
}
.np-kondition__sub { font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }
.np-kondition--text { background: none; border: 0; padding: 0; }
.np-kondition--text p { margin: 0 0 var(--space-xs); font-size: var(--fs-body-s); }

@media (max-width: 860px) {
  .np-konditionen { grid-template-columns: 1fr 1fr; }
  .np-kondition--text { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .np-konditionen { grid-template-columns: 1fr; }
}

/* ============================================== BESTELLSOFTWARE
   Links Beschreibung und Download, rechts die Anleitung. Die Anleitung ist
   Text und kein Bildschirmfoto: durchsuchbar, vorlesbar, druckbar. */

.np-block--software { border-top: 3px solid var(--neptun-orange); }

.np-software {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
  gap: var(--space-l);
  align-items: start;
}
.np-software__lead { margin: 0 0 var(--space-m); font-size: var(--fs-body); }

.np-software__daten {
  margin: 0 0 var(--space-m);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-m);
}
.np-software__daten > div { border-bottom: var(--line-hairline); padding-bottom: 0.35rem; }
.np-software__daten dt {
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
}
.np-software__daten dd { margin: 0; font-family: var(--font-data); font-size: var(--fs-body-s); }

.np-btn--gross { padding: 0.85rem 1.4rem; font-size: var(--fs-body); }

.np-anleitung {
  padding: var(--space-m);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
}
.np-anleitung__titel { margin: 0 0 var(--space-m); font-size: var(--fs-body-l); }

.np-anleitung__schritte { list-style: none; margin: 0; padding: 0; }
.np-anleitung__schritte > li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-s);
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: var(--line-hairline);
}
.np-anleitung__schritte > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.np-anleitung__nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--neptun-graphite-950);
  color: #fff;
  font-family: var(--font-data);
  font-size: var(--fs-caption);
}
.np-anleitung__schritte strong { display: block; margin-bottom: 0.25rem; }
.np-anleitung__schritte p { margin: 0 0 0.4rem; font-size: var(--fs-body-s); }
.np-anleitung__schritte p:last-child { margin-bottom: 0; }

/* Der eine Punkt, an dem die meisten hängen bleiben — deshalb hervorgehoben. */
.np-anleitung__merke {
  margin-top: 0.5rem !important;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--neptun-orange);
  background: var(--neptun-white);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.np-anleitung__fuss {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: var(--line-hairline);
}
.np-anleitung__fuss h4 { margin: 0 0 var(--space-s); font-size: var(--fs-body-s); }
.np-anleitung__fuss ul { margin: 0 0 var(--space-s); padding-left: 1.1rem; }
.np-anleitung__fuss li { margin-bottom: 0.5rem; font-size: var(--fs-body-s); }

@media (max-width: 900px) {
  .np-software { grid-template-columns: 1fr; }
}

/* Sachlicher Hinweis ohne Alarmton — für „noch nichts hinterlegt". */
.np-hinweis--info {
  border-left: 3px solid var(--neptun-steel-400);
  background: var(--neptun-surface-100);
}

/* ============================================== SCHNELLZUGRIFF & HINWEISE */

.np-schnellzugriff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}
.np-schnell {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-white);
  color: var(--color-text-on-light);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.np-schnell:hover { border-color: var(--neptun-orange); transform: translateY(-1px); }
.np-schnell .np-icon { flex: 0 0 auto; color: var(--neptun-orange); }
.np-schnell span { display: flex; flex-direction: column; font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }
.np-schnell strong { font-size: var(--fs-body-s); color: var(--color-text-on-light); }

.np-hinweisliste { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-l); }
.np-hinweis--zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
}

@media (max-width: 1000px) { .np-schnellzugriff { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .np-schnellzugriff { grid-template-columns: 1fr; } }

/* ---------- Konditionen in der Händlerliste ---------- */
.np-kond { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.np-kond__werte { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--color-text-on-light-muted); }
.np-marke--akzent { background: rgba(230,110,30,0.12); color: #A34E12; }

/* Felder der Sonderkondition, wie die Kartenfelder aufgebaut */
.np-kondfelder {
  margin-top: var(--space-m);
  padding: var(--space-m);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
}
.np-kondfelder[hidden] { display: none; }

.np-block--konditionen { border-top: 3px solid var(--neptun-orange); }
.np-formfuss { margin-top: var(--space-m); padding-top: var(--space-m); border-top: var(--line-hairline); }

/* Warnung: ernster als ein Hinweis, aber kein harter Fehler. */
.np-hinweis--warnung {
  background: rgba(230,110,30,0.09);
  border-color: rgba(230,110,30,0.35);
  color: #8A4211;
}

/* Protokoll fehlgeschlagener Mailversände */
.np-mailfehler { list-style: none; margin: 0; padding: 0; }
.np-mailfehler li {
  display: grid;
  grid-template-columns: 150px 1fr 1.2fr;
  gap: var(--space-s);
  padding: 0.5rem 0;
  border-bottom: var(--line-hairline);
  font-size: var(--fs-caption);
}
.np-mailfehler li:last-child { border-bottom: 0; }
.np-mailfehler time { font-family: var(--font-data); color: var(--color-text-on-light-muted); }
.np-mailfehler em { font-style: normal; color: var(--color-text-on-light-muted); }
@media (max-width: 700px) { .np-mailfehler li { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ---- Portal auf schmalen Geräten ----

   Gemessen bei 375 px: die Kopfzeile des Portals ragte 22 px über den Rand
   hinaus, weil Logo, Rollenbezeichnung und Menüknopf zusammen mehr Platz
   brauchten als vorhanden war. Die Rollenbezeichnung („Administrator",
   „Händler") ist dabei die entbehrlichste Angabe — wer angemeldet ist, weiss,
   als was. Sie entfällt deshalb unter 480 px.

   Zusätzlich bekommt der Inhaltsbereich eine Klammer gegen waagrechtes
   Schieben: die Datentabellen des Portals sind bewusst breit und scrollen in
   sich selbst, dürfen dabei aber nicht die ganze Seite mitziehen. */

@media (max-width: 479px) {
  .np-topbar__rolle { display: none; }
  .np-topbar { gap: var(--space-s); }
}

.np-inhalt { max-width: 100%; overflow-x: clip; }

/* Breite Tabellen scrollen in sich selbst statt die Seite zu verbreitern. */
@media (max-width: 767px) {
  .np-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Rasterfelder der Portalhülle dürfen schrumpfen.

   Wie auf der Produktseite: ohne min-width: 0 wächst die Spalte auf die
   Mindestbreite ihres Inhalts. Die Datentabellen des Portals sind bewusst
   breit; ohne diese Zeile zogen sie auf dem Telefon die ganze Oberfläche
   mit und die Seite liess sich seitlich schieben. */
.np-shell > * { min-width: 0; }

/* ============================================================ ERSATZTEILE UND ZEICHNUNGEN
   Ergänzt 09/2026. Nutzt durchgehend die vorhandenen Bausteine
   (np-tabelle, np-chip, np-btn) — hier stehen nur die Spaltenmaße der beiden
   neuen Tabellen und die Kartenansicht für den Händlerbereich. */

.np-tabelle--zubehoer .np-tabelle__kopf,
.np-tabelle--zubehoer .np-tabelle__zeile { grid-template-columns: 64px 2fr 1fr 1fr 1.2fr 1fr 100px 130px; }

.np-tabelle--zeichnungen .np-tabelle__kopf,
.np-tabelle--zeichnungen .np-tabelle__zeile { grid-template-columns: 2.2fr 1fr 1.6fr 1fr 110px 150px; }

.np-tabelle__sub--warn { color: var(--neptun-error); }
.np-hinweistext--warn { color: var(--neptun-error); }

.np-btn--gefahr { color: var(--neptun-error); }
.np-btn--gefahr:hover { background: rgba(192,57,43,0.10); border-color: var(--neptun-error); color: var(--neptun-error); }

/* --- Suchzeile im Händlerbereich ------------------------------------- */

.np-zsuche { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: stretch; margin-bottom: var(--space-m); }
.np-suchfeld--gross { flex: 1 1 380px; }
.np-suchfeld--gross input { padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: var(--fs-body); }

.np-chip__zahl {
  margin-left: 0.4rem; font-family: var(--font-data); font-size: var(--fs-caption);
  color: var(--neptun-steel-400);
}
.np-chip.is-aktiv .np-chip__zahl { color: rgba(255,255,255,0.7); }

.np-ergebniszahl {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--neptun-steel-400); margin: 0 0 var(--space-s);
}

/* --- Zeichnungskarten ------------------------------------------------ */

.np-zkarten {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.np-zkarte {
  display: flex; flex-direction: column; gap: var(--space-s);
  background: var(--neptun-white); border: var(--line-hairline); border-radius: var(--radius-l);
  padding: var(--space-m);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-zkarte:hover { border-color: var(--neptun-steel-300); box-shadow: 0 2px 14px rgba(16,24,32,0.06); }

.np-zkarte__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.np-zkarte__serie {
  background: var(--neptun-graphite-950); color: #fff;
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-s);
}
.np-zkarte__typ { font-size: var(--fs-caption); color: var(--neptun-steel-400); }

.np-zkarte__titel {
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.35;
  color: var(--color-text-on-light); margin: 0;
  /* Der Dateiname kann sehr lang sein — er darf die Karte nicht sprengen. */
  overflow-wrap: anywhere;
}

.np-zkarte__daten { margin: 0; font-size: var(--fs-body-s); }
.np-zkarte__daten dt {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--neptun-steel-400); margin-bottom: 0.15rem;
}
.np-zkarte__daten dd { margin: 0; color: var(--color-text-on-light-muted); }

.np-zkarte__gn { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.np-gnmarke {
  font-family: var(--font-data); font-size: var(--fs-caption);
  background: var(--neptun-surface-100); color: var(--color-text-on-light);
  border-radius: var(--radius-s); padding: 0.15rem 0.45rem;
}

.np-zkarte__fuss {
  margin-top: auto; padding-top: var(--space-s); border-top: var(--line-hairline);
  display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: space-between;
}
.np-zkarte__datei { font-family: var(--font-data); font-size: var(--fs-caption); color: var(--neptun-steel-400); }
.np-zkarte__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.np-zkarte__aktionen .np-btn { padding: 0.45rem 0.8rem; font-size: var(--fs-body-s); }

@media (max-width: 600px) {
  .np-zkarten { grid-template-columns: 1fr; }
  .np-zkarte__fuss { flex-direction: column; align-items: flex-start; }
  .np-zkarte__aktionen { width: 100%; }
  .np-zkarte__aktionen .np-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================ PDF-ÜBERSICHTEN */

.np-pdfkarten {
  display: grid; gap: var(--space-m); margin-bottom: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.np-pdfkarte {
  display: flex; flex-direction: column; gap: var(--space-s);
  background: var(--neptun-white); border: var(--line-hairline); border-radius: var(--radius-l);
  padding: var(--space-l);
}

.np-pdfkarte__kopf { display: flex; align-items: center; gap: var(--space-s); }
.np-pdfkarte__icon { width: 34px; height: 34px; color: var(--neptun-orange-hover); flex: none; }
.np-pdfkarte__titel { margin: 0; font-size: var(--fs-body-l, 1.0625rem); font-weight: var(--fw-medium); color: var(--color-text-on-light); }
.np-pdfkarte__zahl {
  margin: 0; font-family: var(--font-data); font-size: var(--fs-caption);
  color: var(--neptun-steel-400); text-transform: uppercase; letter-spacing: 0.06em;
}

.np-pdfkarte__text { margin: 0; font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }

.np-pdfkarte__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.np-pdfkarte__filter { margin-top: auto; padding-top: var(--space-s); border-top: var(--line-hairline); }
.np-pdfkarte__filtertitel {
  margin: 0 0 var(--space-xs); font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--neptun-steel-400);
}
.np-pdfkarte__filterzeile { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.np-pdfkarte__filterzeile select { flex: 1 1 150px; min-width: 0; }

@media (max-width: 600px) {
  .np-pdfkarten { grid-template-columns: 1fr; }
  .np-pdfkarte { padding: var(--space-m); }
  .np-pdfkarte__aktionen .np-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================ PREISLISTEN (HÄNDLER)
   Zwei Karten im Downloadbereich. Bewusst kräftiger als die Dateikarten
   darunter: sie sind der Grund, weshalb die meisten Händler diese Seite
   überhaupt öffnen. */

.np-abschnitt {
  margin: var(--space-xl) 0 var(--space-m);
  font-size: var(--fs-body-l, 1.0625rem); font-weight: var(--fw-medium);
  color: var(--color-text-on-light);
}

.np-preiskarten {
  display: grid; gap: var(--space-m); margin-top: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.np-preiskarte {
  display: flex; flex-direction: column; gap: var(--space-s);
  background: var(--neptun-white);
  border: 1px solid var(--neptun-steel-200);
  border-top: 3px solid var(--neptun-orange);
  border-radius: var(--radius-l);
  padding: var(--space-l);
}

.np-preiskarte__kopf { display: flex; align-items: flex-start; gap: var(--space-s); }
.np-preiskarte__icon { width: 30px; height: 30px; color: var(--neptun-orange-hover); flex: none; }
.np-preiskarte__titel {
  margin: 0 0 0.15rem; font-size: var(--fs-body-l, 1.0625rem);
  font-weight: var(--fw-medium); color: var(--color-text-on-light);
}
.np-preiskarte__kondition {
  margin: 0; font-family: var(--font-data); font-size: var(--fs-caption);
  color: var(--neptun-orange-hover);
}

.np-preiskarte__text { margin: 0; font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }

.np-preiskarte__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-xs); }

.np-hinweistext--warn { color: var(--neptun-orange-hover); margin-top: var(--space-m); }

@media (max-width: 600px) {
  .np-preiskarten { grid-template-columns: 1fr; }
  .np-preiskarte { padding: var(--space-m); }
  .np-preiskarte__aktionen .np-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================ HÄNDLERZUGANG BEANTRAGEN */

/* Statusmarke „offen" — orange, weil hier etwas zu tun ist. */
.np-marke--orange { background: var(--neptun-orange-tint-24); color: var(--neptun-orange-hover); }

.np-tabelle--anfragen .np-tabelle__kopf,
.np-tabelle--anfragen .np-tabelle__zeile { grid-template-columns: 1.6fr 1.2fr 1.6fr 1.2fr 1fr 110px 100px; }

/* --- Antragsformular ------------------------------------------------- */

/* Die Antragskarte ist breiter als die Anmeldekarte: ein Formular mit
   zwölf Feldern in Login-Breite wäre eine endlose Spalte. */
.np-auth--antrag .np-auth__karte { max-width: 640px; }

.np-antrag__gruppe {
  margin: var(--space-l) 0 var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--line-hairline);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--neptun-steel-400);
}
.np-antrag__gruppe:first-of-type { margin-top: var(--space-s); }

.np-antrag__datenschutz { margin: var(--space-m) 0; align-items: flex-start; }
.np-antrag__datenschutz a { color: var(--neptun-orange-hover); }

.np-antrag__fuss { margin-top: var(--space-s); text-align: center; }

@media (max-width: 640px) {
  .np-feldpaar--plz { grid-template-columns: 1fr 2fr; }
}

/* Honigtopf: für Menschen unsichtbar, für Bildschirmleser als Feld
   gekennzeichnet und übersprungen (aria-hidden im Markup). Kein display:none —
   manche Automaten erkennen genau das. */
.np-honig {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Erfolgsmeldung nach dem Absenden -------------------------------- */

.np-antrag__erfolg { text-align: center; }
.np-antrag__haken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--space-m);
  border-radius: var(--radius-full);
  background: var(--neptun-orange-tint-24); color: var(--neptun-orange-hover);
}
.np-antrag__haken .np-icon { width: 28px; height: 28px; }

/* --- Weg zum Antrag auf der Anmeldeseite ----------------------------- */

.np-auth__antrag { margin-top: var(--space-l); }

.np-auth__trenner {
  display: flex; align-items: center; gap: var(--space-s);
  margin-bottom: var(--space-s);
  font-size: var(--fs-caption); color: var(--neptun-steel-400);
}
.np-auth__trenner::before,
.np-auth__trenner::after { content: ""; flex: 1; height: 1px; background: var(--neptun-steel-200); }

.np-auth__antragtext {
  margin: 0 0 var(--space-s);
  font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); text-align: center;
}

/* --- Datenliste in der Anfragedetailansicht --------------------------- */

.np-daten { margin: 0; display: grid; gap: var(--space-s); }
.np-daten > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-s); align-items: baseline; }
.np-daten dt { font-size: var(--fs-caption); color: var(--neptun-steel-400); }
.np-daten dd { margin: 0; color: var(--color-text-on-light); }
@media (max-width: 600px) {
  .np-daten > div { grid-template-columns: 1fr; gap: 0.1rem; }
}