/**
 * KONTOELEMENT IM WEBSITE-HEADER
 *
 * Wird auf jeder öffentlichen Seite geladen und ist deshalb bewusst winzig.
 * Verwendet ausschliesslich die Tokens der Website — keine eigenen Farbwerte.
 *
 * Gestaltung: kleiner Text in Neptun-Orange, rechts daneben das etwas grössere
 * Konto-Symbol. Beim Überfahren wandert das Symbol eine Spur nach oben und der
 * Ton wird dunkler; mehr Bewegung wäre auf einem Automotive-Auftritt unruhig.
 */

.np-konto,
.np-konto__ausloeser {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.15rem;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--neptun-orange-hover);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.np-konto__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.np-konto--link:hover,
.np-konto__ausloeser:hover,
.np-konto--menue.is-offen .np-konto__ausloeser {
  color: var(--neptun-orange-active);
}
.np-konto--link:hover .np-konto__icon,
.np-konto__ausloeser:hover .np-konto__icon {
  transform: translateY(-1px);
}

.np-konto--link:focus-visible,
.np-konto__ausloeser:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-s);
}

/* ---- Aufklappmenü für angemeldete Benutzer ---- */

.np-konto--menue { position: relative; }

.np-konto__klapp {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: var(--space-2xs);
  background: var(--neptun-white);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}
.np-konto__klapp[hidden] { display: none; }

.np-konto__klapp a {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular, 400);
  color: var(--color-text-on-light);
  text-decoration: none;
}
.np-konto__klapp a:hover {
  background: var(--neptun-surface-100);
  color: var(--neptun-orange-hover);
}

/* ---- Mobile Navigation ---- */

.np-konto-mobil {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-m);
  margin-top: var(--space-s);
  border-top: var(--line-hairline);
}
.np-konto-mobil__haupt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--neptun-orange-hover);
  text-decoration: none;
}
.np-konto-mobil__neben {
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
  text-decoration: none;
  padding-left: 1.85rem;
}
.np-konto-mobil__neben:hover { color: var(--neptun-orange-hover); }

/* ---- Breiterer Header ----
   Der Header nutzt jetzt mehr Fläche als der Textinhalt der Seiten. Der
   Seiteninhalt bleibt bei --content-max-width (1480px), damit Fliesstext
   lesbar breit bleibt; nur die Kopfzeile darf grosszügiger sein. Der
   Aussenabstand wächst mit der Fensterbreite von 24 px auf 48 px. */
.site-header__inner.u-container {
  max-width: var(--header-max-width, 1860px);
  padding-inline: var(--header-padding-inline, clamp(1.5rem, 2.6vw, 3rem));
}

/* ============================================================ PREISE
   Wird auf der öffentlichen Website geladen, greift aber nur, wenn
   überhaupt ein Preisblock ausgegeben wurde — für Gäste entsteht kein
   Markup, das CSS läuft dann ins Leere.

   Gestaltung bewusst sachlich: der Einkaufspreis wird durch Gewicht und
   einen feinen Akzentbalken hervorgehoben, nicht durch Rot, Durchstreichen
   oder Rabattbadges. Das hier ist B2B, kein Abverkauf. */

.np-preis {
  margin: var(--space-s) 0 var(--space-m);
  padding: var(--space-s) 0 0;
  border-top: var(--line-hairline);
  font-family: var(--font-body);
}
.np-preis__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.15rem 0;
}
.np-preis__label {
  font-size: var(--fs-caption);
  color: var(--color-text-on-light-muted);
}
.np-preis__wert {
  font-family: var(--font-data);
  font-size: var(--fs-body-s);
  white-space: nowrap;
}
.np-preis__netto {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--neptun-steel-400);
  margin-left: 0.15em;
}
.np-preis__zeile--ek .np-preis__label { color: var(--color-text-on-light); font-weight: var(--fw-medium); }
.np-preis__zeile--ek .np-preis__wert  { font-weight: var(--fw-semibold); font-size: var(--fs-body); }

/* Feiner Akzentbalken links am Einkaufspreis statt einer farbigen Fläche. */
.np-preis__zeile--ek {
  border-left: 2px solid var(--neptun-orange);
  padding-left: var(--space-xs);
  margin-left: -2px;
}

.np-preis__kondition {
  margin-top: 0.3rem;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--neptun-steel-400);
}
.np-preis__kondition--hinweis { font-family: var(--font-body); font-style: italic; }

/* Ausführlichere Variante auf der Produktdetailseite */
.np-preis--detail {
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
}
.np-preis--detail .np-preis__zeile--ek .np-preis__wert { font-size: var(--fs-body-l); }

/* Einzeilig, für Zubehörlisten innerhalb einer Karte */
.np-preis-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  margin-top: 0.2rem;
  font-family: var(--font-data);
  font-size: var(--fs-caption);
}
.np-preis-zeile__vk { color: var(--color-text-on-light-muted); }
.np-preis-zeile__ek { color: var(--color-text-on-light); font-weight: var(--fw-semibold); }

/* ---------- Leiste am Seitenfuß ---------- */

.np-leiste {
  position: sticky;
  bottom: 0;
  z-index: 45;
  background: var(--neptun-graphite-950);
  color: var(--color-text-on-dark);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.np-leiste__innen {
  max-width: var(--header-max-width, 1860px);
  margin-inline: auto;
  padding: 0.55rem var(--header-padding-inline, clamp(1.5rem, 2.6vw, 3rem));
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  font-size: var(--fs-caption);
}
.np-leiste__marke {
  font-family: var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neptun-orange);
  white-space: nowrap;
}
.np-leiste__werte { display: flex; gap: var(--space-m); flex-wrap: wrap; }
.np-leiste__werte strong { color: #fff; font-family: var(--font-data); }
.np-leiste__text { color: var(--neptun-steel-400); }
.np-leiste__link { margin-left: auto; color: var(--neptun-steel-300); text-decoration: none; white-space: nowrap; }
.np-leiste__link:hover { color: #fff; }
.np-leiste__form select {
  background: var(--neptun-graphite-800);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-s);
  padding: 0.3rem 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  max-width: min(420px, 60vw);
}
@media (max-width: 640px) {
  .np-leiste__link { margin-left: 0; }
  .np-leiste__text { display: none; }
}

/* ---- Schmale Geräte ----

   Auf 375 px passte die Kopfzeile nicht mehr: Wortmarke (125 px), Abstand
   (32 px) und der Aktionsbereich (204 px) ergaben 361 px bei 327 px
   verfügbarer Breite. Die Seite liess sich dadurch auf JEDER Ansicht um
   10 px seitlich schieben — der klassische, kaum sichtbare Wackler beim
   Scrollen auf dem Telefon.

   Die Ursache ist die Beschriftung neben dem Kontosymbol („Händler Login",
   angemeldet sogar „Admin Dashboard"). Unter 560 px entfällt sie; das Symbol
   allein ist als Konto-Einstieg etabliert und der Text bleibt für
   Screenreader erhalten. Das Ziel bleibt mit 44 px ausreichend gross. */

@media (max-width: 559px) {
  .np-konto__text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .np-konto,
  .np-konto__ausloeser,
  .np-konto--link {
    gap: 0;
    padding: 0.35rem;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .np-konto__icon { width: 24px; height: 24px; }
}