/* ==========================================================================
   Die eine Kopfzeile · vier Huellen, ein Skelett.
   Diese Datei wird von BEIDEN Haelften geladen. Die hellen Regeln stehen in
   festen Hex-Werten (sie muessen auch ohne Nocturne stimmen), die dunklen
   ausschliesslich in Nocturne-Token. Beide greifen nur unter ihrer eigenen
   Huellen-Klasse, koennen sich also nicht in die Quere kommen.
   ========================================================================== */

/* Jede Seite reserviert den Platz der Bildlaufleiste · auch die, die keine
   braucht. Ohne das ist der nutzbare Bereich auf einer kurzen Seite rund 15px
   breiter als auf einer langen, und der mittig gesetzte 1180er-Kasten sitzt
   deshalb woanders. Man sieht es am Logo: auf /password/forgot, der einzigen
   kurzen Seite der hellen Haelfte, rueckt es nach innen. Die Kopfzeile ist auf
   allen Seiten exakt gleich breit · sie STAND nur nicht an derselben Stelle.

   Diese Regel steht bewusst hier: header.css ist die einzige Datei, die JEDE
   Huelle laedt. Ein Sprung zwischen Seiten laesst sich nur an einer Stelle
   abstellen, an der alle Seiten vorbeikommen. */
html { scrollbar-gutter: stable; }

.sh { position: sticky; top: 0; z-index: 60; }
.sh__inner {
  /* ============================================================= BREITE ==
     1280px, UEBERALL. Hell und dunkel, oeffentlich und Admin, Markt und
     Verkaeuferbereich. Das ist die eine Zahl der Anlage, und sie steht hier,
     weil header.css als einzige Datei von JEDER Huelle geladen wird.

     Wer sie aendert, aendert sie hier UND in den vier Container-Regeln, die
     sie wiederholen muessen, weil CSS-Dateien keine Variablen teilen:
       site.css   .container / .pl / .pg / .lib / .sd / .pl__mapInner
       admin.css  .op__headInner / .op__wrap / .sa__dirtyInner
       market.css .mp-nav / .mp-main / .mp-landed-inner
       seller.css .sl-main / .sl-unsaved-inner
       footer.css .ft__inner
     Pruefgriff:
       grep -rnE 'max-width: ?1[0-9]{3}px' public/assets/*.css | grep -v '@media'
     Erwartet: ausschliesslich 1280px, mit genau zwei bekannten Ausnahmen ·
     .pg__bigQuote (1080, ein Lesemass, kein Behaelter) und der tote
     .nav-Block in site.css, der unten als solcher gekennzeichnet ist.
     NICHT mit "grep -v ')'" filtern: das wirft die Admin-Zeilen mit weg,
     weil dort var(--space-8) im selben Ausdruck steht.

     WARUM UEBERALL DIESELBE: Skimi, 17.08. · "ich kann unterscheiden, ob ich
     im Admin bin oder nicht, aber das ist mir lieber als ein Hinundher-
     springen der Seitenbreite". Der Betriebs-Modus zeigt sich am dunklen
     Grund und am Farbschild in der Kopfzeile, nicht an der Kante.

     Vorgeschichte, damit niemand rueckwaerts repariert: bis zum
     Places-Audit v6 (17.08.) standen hier 1180. Jede Design-Vorlage rechnet
     mit 1280; die Abweichung war einmal begruendet und ist es nicht mehr.
     ===================================================================== */
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  height: 68px; display: flex; align-items: center;
  gap: var(--sh-gap); flex-wrap: wrap; row-gap: 0;
}
.sh__inner > * { flex: none; min-width: 0; }
.sh__gap { flex: 1 1 auto !important; }

.sh__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sh__word { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }

/* Regel 5: ein Schild, kein Knopf · deshalb ohne Hover und ohne Zeiger. */
.sh__label {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 8px; cursor: default;
}

/* Die drei Woerter und die Werkzeuge stecken je in einer eigenen Huelle, damit
   sie als Gruppe zusammenbleiben. Damit greift der Abstand der Zeile aber nicht
   mehr ZWISCHEN ihnen · deshalb tragen beide Huellen denselben Abstand, aus
   derselben Variablen. */
.sh__nav { display: flex; align-items: center; gap: var(--sh-gap); }
.sh__link { position: relative; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
/* Die Marke der aktuellen Seite sitzt am unteren Rand der Kopfzeile, nicht am
   Wort · deshalb der grosse negative Versatz. */
.sh__link.is-here::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -24px;
  height: 2px; border-radius: 1px; background: currentColor;
}
.sh__tools { display: flex; align-items: center; gap: var(--sh-gap); }

.sh__balance {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-heading, inherit); font-size: 14px;
  border-radius: 999px; padding: 6px 14px; text-decoration: none;
}
.sh__acct { position: relative; display: flex; }
.sh__acctBtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 5px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; font-family: inherit;
}
.sh__avatar {
  position: relative; width: 26px; height: 26px; flex: none;
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; color: #fff;
}
.sh__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh__acctName { font-size: 14.5px; white-space: nowrap; }
.sh__caret { flex: none; opacity: .55; }

.sh__menu {
  position: absolute; right: 0; top: calc(100% + 12px); width: 238px; z-index: 70;
  border-radius: 14px; padding: 8px;
}
.sh__menu[hidden] { display: none; }
.sh__menuHead {
  display: block; padding: 8px 10px 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
}
.sh__menuItem {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  font-family: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.sh__menuRule { display: block; height: 1px; margin: 7px 10px; }
.sh__cta {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; padding: 10px 17px; border-radius: 11px;
  text-decoration: none;
}
.sh__ext { font-size: 11px; }

/* ------------------------------------------------------------------ hell -- */

.sh--light {
  background: rgba(250, 250, 251, .84);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid #EAE8EE;
}
.sh--light { --sh-gap: 28px; }
.sh--light .sh__brand { color: #23232B; }
.sh--light .sh__label { color: #9A9AA6; border: 1px solid #EAE8EE; }
.sh--light .sh__link { color: #5C5C67; font-weight: 500; }
.sh--light .sh__link:hover { color: #23232B; }
.sh--light .sh__link.is-here { color: #23232B; }
.sh--light .sh__link.is-here::after { background: #6E4BFF; }
.sh--light .sh__balance { color: #5B34EF; background: #F4F1FE; border: 1px solid #D8CFFB; font-weight: 600; }
.sh--light .sh__balance:hover { border-color: #B9A8F7; }
.sh--light .sh__avatar { background: linear-gradient(140deg, #8B6BFF, #5B34EF); }
.sh--light .sh__acctName { color: #23232B; font-weight: 500; }
.sh--light .sh__caret { color: #9A9AA6; }
.sh--light .sh__acctBtn:hover { background: #F1EFF5; }
.sh--light .sh__menu { background: #fff; border: 1px solid #EAE8EE; box-shadow: 0 8px 24px rgba(26, 43, 60, .08); }
.sh--light .sh__menuHead { color: #B7B7C2; }
.sh--light .sh__menuItem { color: #5C5C67; }
.sh--light .sh__menuItem:hover { background: #F1EFF5; color: #23232B; }
.sh--light .sh__menuItem.is-here { background: #F4F1FE; color: #23232B; }
.sh--light .sh__menuRule { background: linear-gradient(to right, #EAE8EE, #EAE8EE 72%, rgba(234, 232, 238, 0)); }
.sh--light .sh__cta { background: #6E4BFF; color: #fff; }
.sh--light .sh__cta:hover { background: #5B34EF; }
.sh--light :focus-visible { outline: 2px solid #6E4BFF; outline-offset: 2px; }

/* ---------------------------------------------------------------- dunkel -- */

.sh--dark {
  /* Kein Blur: auf der Admin-Seite klebt der Kassensturz darunter, und der
     darf nicht durchscheinen. Die Trennlinie ist Nocturnes auslaufende. */
  background: var(--color-bg);
  background-image: linear-gradient(to right, transparent, var(--color-divider) 48px,
                    var(--color-divider) calc(100% - 48px), transparent);
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 1px;
}
.sh--dark { --sh-gap: 22px; }
.sh--dark .sh__brand { color: var(--color-text); }
.sh--dark .sh__label {
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 16%, transparent);
}
/* Nur der Admin traegt ein getoentes Schild · Betreiber-Modus soll auf einen
   Blick unverwechselbar sein. */
.sh--dark .sh__label.is-accent {
  color: var(--color-accent-200);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.sh--dark .sh__link { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.sh--dark .sh__link:hover { color: var(--color-text); }
.sh--dark .sh__link.is-here { color: var(--color-text); }
.sh--dark .sh__link.is-here::after { background: var(--color-accent); }
.sh--dark .sh__balance {
  color: var(--color-accent-200);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.sh--dark .sh__balance:hover { border-color: color-mix(in srgb, var(--color-accent) 62%, transparent); }
.sh--dark .sh__avatar {
  background: linear-gradient(140deg, var(--color-accent-600), var(--color-accent-900));
  color: var(--color-accent-100);
}
.sh--dark .sh__acctName { color: var(--color-text); }
.sh--dark .sh__caret { color: var(--color-text); }
.sh--dark .sh__acctBtn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.sh--dark .sh__menu {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
.sh--dark .sh__menuHead { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.sh--dark .sh__menuItem { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.sh--dark .sh__menuItem:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.sh--dark .sh__menuItem.is-here {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent-200);
}
.sh--dark .sh__menuRule { background: var(--color-divider); }
.sh--dark :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ------------------------------------------------------- Einklapp-Leiter --
   Jedes Element ist flex:none und die Zeile scrollt nicht · ohne diese Leiter
   schoebe die Kopfzeile das Konto-Element aus dem Bild, und damit den einzigen
   Weg zu Admin und Log out. Geopfert wird von billig nach teuer. Die drei
   Woerter, der Betrag und der Avatar verschwinden NIE.                       */

@media (max-width: 1240px) {
  /* Ausnahme: der Admin behaelt sein Schild in jeder Breite. Er hat keine
     Werkzeuge, also den Platz · und das getoente Schild ist das Zeichen fuer
     den Betreiber-Modus, das als Letztes gehen darf. */
  .sh:not(.sh--admin) .sh__label { display: none; }
}
@media (max-width: 1120px) { .sh__tools .sh__search input { width: 128px; } }
@media (max-width: 1060px) { .sh__tools .sh__search { display: none; } }
@media (max-width: 980px)  { .sh__acctName { display: none; } }
@media (max-width: 900px)  { .sh__tools .sh__sell { display: none; } }
@media (max-width: 860px)  { .sh__cta { display: none; } }
@media (max-width: 700px)  { .sh { --sh-gap: 16px; } .sh__inner { padding: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  .sh *, .sh *::before, .sh *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------- Werkzeuge des Marktes
   Im Entwurf haengen diese Werte als Inline-Stile am Element (Header.dc.html
   Zeile 149-157). Beim Uebertragen ins Stylesheet hatte ich sie vergessen ·
   die Lupe lag deshalb neben dem Feld statt darin, und der Warenkorb hatte
   keinen Rahmen. */

.sh__search { position: relative; display: flex; align-items: center; margin: 0; }
/* Die Lupe liegt IM Feld, nicht daneben · und faengt keine Klicks ab, sonst
   trifft man beim Zielen auf das Symbol nicht das Eingabefeld darunter. */
.sh__search svg { position: absolute; left: 9px; opacity: .45; pointer-events: none; }
.sh__search .input { width: 150px; padding-left: 29px; }

/* Regel 5: der Warenkorb ist eine umrandete Pille mit derselben Geometrie wie
   die Betrag-Pille · gleiche Rolle, gleiche Form. */
.sh__cart {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-heading, inherit); font-size: 13.5px;
  border-radius: 999px; padding: 6px 13px; text-decoration: none;
}
.sh--dark .sh__cart {
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 18%, transparent);
}
.sh--dark .sh__cart:hover { border-color: color-mix(in srgb, var(--color-neutral-100) 36%, transparent); }
.sh--light .sh__cart { color: #23232B; border: 1px solid #EAE8EE; }
.sh--light .sh__cart:hover { border-color: #B7B7C2; }

/* Die Quittung des Warenkorbs. Vorher hing sie an .mp-badge, das absolut in
   der Ecke sass · der Entwurf setzt die Zahl in die Pille, also muss die
   Bewegung mitkommen. Beide Bilder (noc-bump, mp-got) stehen in market.css und
   werden hier nur wiederverwendet. */
.sh__cart { position: relative; }
.sh__cart [data-cart-badge] { font-variant-numeric: tabular-nums; }
.sh__cart [data-cart-badge].bump { animation: noc-bump .38s cubic-bezier(.2, .8, .25, 1); }

/* ------------------------------------------------------- Fangen im Korb ---
   Eine Farbe, der Akzent · nichts blinkt, nichts dreht sich, nichts kommt
   zweimal. Der Reiz kommt aus Bewegung und Zeitgefuehl, nicht aus Buntheit. */

/* Das fliegende Produkt. Liegt ueber allem, faengt keine Klicks ab. */
.sh__fly {
  position: fixed; z-index: 200; pointer-events: none;
  object-fit: cover; border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  will-change: transform, opacity;
}

/* Der Korb quittiert: der Rahmen zieht kurz an, der Grund wird waermer, und
   EIN Ring geht von ihm aus. Nach 620ms ist alles vorbei. */
.sh__cart.is-catch { animation: sh-catch .5s cubic-bezier(.2, .9, .25, 1); }
@keyframes sh-catch {
  0%   { border-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
         background: transparent; }
  35%  { border-color: color-mix(in srgb, var(--color-accent) 85%, transparent);
         background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
  100% { border-color: color-mix(in srgb, var(--color-neutral-100) 18%, transparent);
         background: transparent; }
}
.sh__cart.is-catch::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  border: 1.5px solid var(--color-accent); pointer-events: none;
  animation: sh-catchring .6s ease-out forwards;
}
@keyframes sh-catchring {
  from { transform: scale(.9); opacity: .65; }
  to   { transform: scale(1.5); opacity: 0; }
}
/* Das Korb-Symbol nickt einmal mit · so faengt der Korb, statt nur zu leuchten. */
.sh__cart.is-catch svg { animation: sh-catchicon .5s cubic-bezier(.2, .9, .25, 1); }
@keyframes sh-catchicon {
  0% { transform: translateY(0) }
  30% { transform: translateY(2.5px) scale(1.12) }
  60% { transform: translateY(-1px) }
  100% { transform: translateY(0) }
}

/* Die Zahl rollt: die alte Ziffer geht nach oben raus, die neue kommt von
   unten nach. Das ist der Unterschied zwischen "hat sich geaendert" und "ist
   dazugekommen". */
.sh__cart .sh__count {
  position: relative; display: inline-block; overflow: hidden;
  min-width: 1ch; height: 1.1em; line-height: 1.1; vertical-align: -.12em;
}
.sh__cart .sh__digit { position: absolute; left: 0; right: 0; font-style: normal; }
.sh__cart .sh__digit.is-out { animation: sh-rollout .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.sh__cart .sh__digit.is-in  { animation: sh-rollin .3s cubic-bezier(.2, .9, .25, 1) forwards; }
@keyframes sh-rollout { from { transform: translateY(0); opacity: 1 } to { transform: translateY(-110%); opacity: 0 } }
@keyframes sh-rollin  { from { transform: translateY(110%); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .sh__fly { display: none; }
  .sh__cart.is-catch, .sh__cart.is-catch::after, .sh__cart.is-catch svg,
  .sh__cart .sh__digit { animation: none !important; }
}

/* Der Satz vor dem Anmelde-Link, nur in der `bare`-Ausprägung. Er steht dort,
   wo während einer Anmeldung wirklich jemand fragt "und wenn ich schon eins
   habe?" · auf allen anderen Hüllen wäre er Füllmaterial. */
.sh--bare .sh__hint { font-size: 14.5px; color: #9A9AA6; white-space: nowrap; }
@media (max-width: 620px) { .sh--bare .sh__hint { display: none; } }

/* `hidden` muss gewinnen.
   Das Standard-Stylesheet des Browsers bringt nur [hidden]{display:none} mit ·
   jede eigene display-Angabe schlaegt das. Ein `display:flex` an einem
   Element, das per hidden verschwinden soll, macht das Attribut also still
   wirkungslos. Diese Zeile steht hier, weil header.css von JEDER Huelle
   geladen wird: die Regel gehoert dorthin, wo alle Seiten vorbeikommen. */
[hidden] { display: none !important; }


/* Die Werkzeug-Zeile eines Bereichs · abgesetzt von der Hauptzeile, weil sie
   eine andere Frage beantwortet: nicht "wo bin ich", sondern "was kann ich
   hier tun". Eng gefasst und nicht auf .sh__tools, denn dort haengen im
   Markt-Kopf auch Suche und Korb. */
.sh__toolset {
  display: flex; align-items: center; gap: var(--sh-gap);
  padding-left: var(--sh-gap); margin-left: calc(var(--sh-gap) / 2);
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.sh__toolset .sh__link { font-size: 13.5px; }
.sh--dark .sh__toolset .sh__link { color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.sh--dark .sh__toolset .sh__link:hover { color: var(--color-text); }
.sh--light .sh__toolset .sh__link { color: #7A7A85; }
.sh--light .sh__toolset .sh__link:hover { color: #23232B; }

@media (max-width: 860px) {
  .sh__toolset { border-left: 0; padding-left: 0; margin-left: 0; }
}