/* ==================================================================
   nextparty24 - Grundbausteine, EINMAL fuer alle Bereiche

   Knoepfe, Eingabefelder und Hinweise. Geladen direkt nach tokens.css
   von der Webseite (header.php), vom Admin (adminlayout.php) und vom
   Kundenbereich (accountlayout.php).

   Regel (Design.md, "Bausteine"): Diese Bausteine werden nur hier
   gestaltet. Braucht eine Stelle etwas anderes, bekommt der Baustein hier
   eine Variante (.btn-klein, .btn-merken ...). Keine Regeln je Ort in
   style.css oder admin.css, die einen Baustein umbauen.

   Seit dem 04.10.2026 flach fuer alle: Kanten statt Kissen, keine
   Schatten an Flaechen. Die eine Ausnahme ist der gelbe Hauptknopf: er
   hebt sich beim Ueberfahren leicht, ein Lichtstreifen wischt durch, und
   beim Klick sinkt er ein (auf Wunsch des Betreibers, wieder eingebaut
   am 04.10.2026). Er ist die Handlung der Seite - er darf antworten.

   Webseite und Admin benutzen fuer dasselbe noch verschiedene Klassen-
   namen (.input / .admin-eingabe, .notice / .admin-hinweis). Sie stehen
   hier in EINER Regel - ein Aussehen, zwei Namen.
   ================================================================== */


/* ==================================================================
   Knoepfe
   Drei Raenge, man sieht sie ihnen an: Hauptknopf gelbe Flaeche,
   Zweitknopf Kante, Gefahr rote Kante. Dazu der Merken-Knopf (Cyan),
   die zweite Handlung auf einer Artikelkarte.
   ================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-base);
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
/* Das Symbol im Knopf behaelt seine Groesse, auch wenn der Text umbricht. */
.btn > svg { flex: 0 0 auto; }

/* Auf dem Handy darf ein langer Knopf ("Auftrag bestaetigen und Mail
   senden") umbrechen, statt aus seinem Kasten zu ragen. Kurze Knoepfe
   bleiben einzeilig - sie passen ja. Seit 13.10.2026. */
@media (max-width: 520px) {
    .btn { white-space: normal; text-align: left; }
}
.btn:hover { text-decoration: none; }
/* display: inline-flex schlaegt die Browserregel fuer [hidden] - ohne
   diese Zeile bliebe ein versteckter Knopf sichtbar. */
.btn[hidden] { display: none; }

/* Tastatur: derselbe Ring wie an den Feldern. */
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; }

/* Hauptknopf: gelbe Flaeche, dunkle Schrift - in beiden Farbschemata,
   auf Gelb traegt Weiss nicht. Die eine Stelle, an der die Hausfarbe
   Flaeche sein darf. */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
/* Ueberfahren: etwas heller, 1 px hoch, ein weicher gelber Schein darunter. */
.btn-primary:hover {
    background: var(--color-accent-400);
    border-color: var(--color-accent-400);
    color: var(--color-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
/* Klick: sinkt ein und wird dunkler. */
.btn-primary:active {
    background: var(--color-accent-600);
    border-color: var(--color-accent-600);
    transform: translateY(1px);
    box-shadow: none;
}
/* Der Lichtstreifen, der beim Ueberfahren einmal durchwischt. */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform .7s ease; }

.btn-primary:disabled:hover {
    background: var(--color-accent);
    transform: none;
    box-shadow: none;
}
.btn-primary:disabled::after { content: none; }

/* Wer Bewegung reduziert haben will, bekommt nur den Farbwechsel. */
@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover,
    .btn-primary:active { transform: none; }
    .btn-primary::after { content: none; }
}

/* Zweitknopf: eine Kante. */
.btn-secondary {
    border-color: color-mix(in srgb, var(--color-text) 26%, transparent);
    color: var(--color-text);
    background: transparent;
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
    color: var(--color-text);
}
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* Gefahr: Rot nur als Kante und Schrift - gefuellt waere es lauter als
   alles andere auf der Seite. */
.btn-gefahr {
    border-color: color-mix(in srgb, var(--color-fehler) 45%, transparent);
    color: var(--color-fehler);
}
.btn-gefahr:hover {
    border-color: var(--color-fehler);
    background: color-mix(in srgb, var(--color-fehler) 10%, transparent);
}

/* Merken: Kante im zweiten Akzent. Die zweite Handlung auf einer
   Artikelkarte - neben "Ansehen" darf sie nicht genauso laut sein. */
.btn-merken {
    border-color: color-mix(in srgb, var(--color-accent2) 65%, transparent);
    color: var(--color-accent2-300);
    font-weight: 500;
}
.btn-merken:hover {
    background: color-mix(in srgb, var(--color-accent2) 14%, transparent);
    border-color: var(--color-accent2);
    color: var(--color-accent2-200);
}

/* Gemerkt (Zustand, setzt main.js): leichte Cyan-Flaeche, gilt fuer den
   Merken-Knopf und fuer "Auswaehlen" bei Artikeln mit Ausfuehrungen. */
.btn.is-saved {
    background: color-mix(in srgb, var(--color-accent2) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-accent2) 75%, transparent);
    color: var(--color-accent2-200);
}
.btn.is-saved:hover {
    border-color: var(--color-accent2);
    background: color-mix(in srgb, var(--color-accent2) 24%, transparent);
}

/* Schlicht: nur Schrift in der Hausfarbe, Flaeche erst beim Ueberfahren. */
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* Groessen und Breite */
.btn-klein { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn-klein .admin-icon { width: 15px; height: 15px; }

.btn-icon { width: 36px; height: 36px; padding: 0; }
/* Kleiner Symbolknopf: Plus und Minus in engen Zeilen (Schublade). */
.btn-icon--klein { width: 30px; height: 30px; }

/* Block statt inline, sonst steht unter dem Knopf Zeilenluft. */
.btn-block { display: flex; width: 100%; }

/* Der Knopf, der ein Formular abschickt, ist kein weiteres Feld, sondern
   der Schritt danach. Mit dem blossen Feldabstand davor las er sich wie
   eine letzte Eingabe - deshalb hier mehr Luft nach oben. In einem
   .np-stack kommt dessen gap noch dazu, macht dort 36 px.

   Nur Knoepfe zum Abschicken: die gleich aussehenden Links im
   Burgermenue und in der Merklisten-Schublade tragen btn-block ebenfalls,
   stehen aber in ihrem eigenen Abstandsgefuege. Der Knopf der
   Newsletteranmeldung steht neben dem Eingabefeld statt darunter und
   traegt btn-block nicht - er bliebe sonst als einziger tiefer stehen.

   Steht hier und nicht in style.css, damit Kontakt, Registrierung und
   die Kontoseiten (Passwort vergessen, neues Passwort) gleich viel Luft
   haben. */
button.btn-block[type="submit"] { margin-top: var(--space-6); }


/* ==================================================================
   Eingabefelder
   Ein Rechteck mit einer Kante, die man immer sieht - sie sagt
   zuverlaessiger als eine Mulde, wo man tippen kann.

   display:block ist Voraussetzung fuer gleiche Abstaende: als
   inline-block bliebe darunter je nach Schrift unsichtbare Zeilenluft.
   16 px Schrift auch auf dem Telefon - darunter zoomt iOS beim Tippen.
   ================================================================== */
.input,
.admin-eingabe {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--linie-stark);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-base);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.input::placeholder,
.admin-eingabe::placeholder { color: var(--color-neutral-600); }

.input:hover,
.admin-eingabe:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }

/* Der Fokusrahmen: die Stelle, an der die Hausfarbe laut sein darf -
   er sagt der Tastatur, wo sie steht. */
.input:focus,
.input:focus-visible,
.admin-eingabe:focus,
.admin-eingabe:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--fokus-ring);
}

.input:disabled,
.admin-eingabe:disabled { opacity: .55; cursor: not-allowed; }

/* Fehler: Kante in der Fehlerfarbe. Das Formular setzt aria-invalid
   (Admin, Kundenbereich) bzw. .field--error (Webseite). */
.input[aria-invalid="true"],
.admin-eingabe[aria-invalid="true"],
.field--error .input { border-color: var(--color-fehler); }

textarea.input,
textarea.admin-eingabe { min-height: 90px; resize: vertical; font-family: var(--font-body); }


/* ==================================================================
   Mengenwahl: Minus, Zahl, Plus in einem Rahmen
   Webseite (Artikelseite, Anfrage, Schublade) und Admin (Miettage im
   Angebot). Seit 13.10.2026 hier statt in style.css, damit der Admin
   denselben Baustein bekommt. Auf dem Handy zeigt ein Zahlenfeld keine
   Pfeile - ohne die Knoepfe hiesse jede Aenderung: loeschen, neu tippen.
   Die Knoepfe sind type="button" mit data-menge="-1" bzw. "1"; das
   Rechnen macht main.js bzw. admin.js.
   ================================================================== */
.np-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}
.np-qty input {
    width: 40px;
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-base);
    text-align: center;
    -moz-appearance: textfield;
}
.np-qty input::-webkit-outer-spin-button,
.np-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Als Formularfeld: so breit wie die Spalte, Rahmen, Grund und Hoehe
   wie .admin-eingabe / .input, damit es in einer Reihe mit anderen
   Feldern sitzt. Der Fokusrahmen liegt am ganzen Feld, nicht an der Zahl. */
.np-qty--feld {
    display: flex;
    width: 100%;
    margin-top: var(--space-1);
    border: var(--linie-stark);
    background: var(--color-bg);
    transition: border-color .12s, box-shadow .12s;
}
.np-qty--feld:has(:focus-visible) {
    border-color: var(--color-accent);
    box-shadow: var(--fokus-ring);
}
.np-qty--feld input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-3) 0;
    outline: none;
}
.np-qty--feld .btn-icon { flex: 0 0 auto; }


/* ==================================================================
   Kontrollkaestchen
   Ein Kaestchen fuer alle Bereiche: Datenschutz in Anfrage und
   Registrierung, "Angemeldet bleiben", Cookie-Auswahl, Admin. Gleiche
   Groesse, gelber Haken, und ueber Kaestchen UND Beschriftung die Hand -
   der ganze Satz ist klickbar, also soll man das auch sehen.
   Wie Kaestchen und Text nebeneinander stehen, regelt das jeweilige
   Etikett (.np-row, .admin-haken, .np-cookie__wahl), nicht das Kaestchen.
   ================================================================== */
input[type="checkbox"] {
    width: var(--space-4);
    height: var(--space-4);
    flex: 0 0 auto;
    accent-color: var(--color-accent);
    cursor: pointer;
}
label:has(> input[type="checkbox"]) { cursor: pointer; }
input[type="checkbox"]:disabled,
label:has(> input[type="checkbox"]:disabled) { cursor: default; }

/* ==================================================================
   Hinweise und Meldungen
   Kasten mit Kante und Symbol, nicht nur Farbe - so bleibt der
   Unterschied auch ohne Farbsehen erkennbar. Dieselbe Form ueber einem
   Formular, unter einem Feld (.field__error), auf der Webseite und im
   Admin.

     ohne Zusatz    neutral (Flaeche, Kante)
     ok             gruen mit Haken
     Fehler         Orange-Rot mit Warnzeichen
   ================================================================== */
.notice,
.admin-hinweis,
.field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: var(--linie);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.notice::before,
.admin-hinweis::before,
.field__error::before {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    line-height: 1.35;
}

.notice--ok,
.admin-hinweis--ok {
    border-color: color-mix(in srgb, var(--color-ok) 45%, transparent);
    background: color-mix(in srgb, var(--color-ok) 12%, transparent);
    color: var(--color-ok);
}
.notice--ok::before,
.admin-hinweis--ok::before { content: "\2713"; }

.notice--error,
.admin-hinweis--fehler,
.field__error {
    border-color: color-mix(in srgb, var(--color-fehler) 45%, transparent);
    background: color-mix(in srgb, var(--color-fehler) 12%, transparent);
    color: var(--color-fehler);
}
.notice--error::before,
.admin-hinweis--fehler::before,
.field__error::before { content: "\26A0"; }


/* ==================================================================
   Aufklappknopf: Sprachumschalter (und auf der Webseite der Standort)
   Ein Knopf mit Kante, darunter eine schwebende Liste. Die Webseite
   nennt ihn .np-sprache, Admin und Kundenbereich .admin-sprache - ein
   Aussehen, zwei Namen. Zwei Fassungen: voll (Flagge und Name) und
   klein (nur Flagge, .admin-sprache--klein). Auf schmalen
   Bildschirmen ist im Admin jeder klein.
   ================================================================== */
.np-sprache,
.admin-sprache { position: relative; }

.np-sprache__knopf,
.admin-sprache__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--linie);
    border-radius: var(--radius-md);
    color: var(--color-neutral-300);
    font-size: var(--text-base);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;                /* Standard-Dreieck weg */
    transition: background-color .15s, border-color .15s, color .15s;
}
/* Safari zeigt das Dreieck ueber ein eigenes Pseudoelement. */
.np-sprache__knopf::-webkit-details-marker,
.admin-sprache__knopf::-webkit-details-marker { display: none; }

.np-sprache__knopf:hover,
.admin-sprache__knopf:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: var(--color-text);
}
.np-sprache[open] > .np-sprache__knopf,
.admin-sprache[open] > .admin-sprache__knopf {
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text);
}

.np-sprache__pfeil,
.admin-sprache__pfeil {
    width: 14px;
    height: 14px;
    opacity: .7;
    transition: transform .15s;
}
.np-sprache[open] .np-sprache__pfeil,
.admin-sprache[open] .admin-sprache__pfeil { transform: rotate(180deg); }

/* Kleine Fassung: nur Flagge und Pfeil, der Name steht im aria-label. */
.admin-sprache--klein .admin-sprache__text { display: none; }

/* Die aufgeklappte Liste - rechtsbuendig, weil der Knopf rechts sitzt. */
.np-sprache__liste,
.admin-sprache__liste {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: var(--linie);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--schatten-menue);
}
.np-sprache__liste li,
.admin-sprache__liste li { margin: 0; }

.np-sprache__eintrag,
.admin-sprache__eintrag {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-neutral-300);
    font-size: var(--text-base);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.np-sprache__eintrag:hover,
.admin-sprache__eintrag:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: var(--color-text);
    text-decoration: none;
}

/* Die aktuelle Sprache: markiert, kein Link, Akzent als Linie am Rand. */
.np-sprache__eintrag.on,
.admin-sprache__eintrag.on {
    position: relative;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
    cursor: default;
}
.np-sprache__eintrag.on::before,
.admin-sprache__eintrag.on::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: var(--radius-xs);
    background: var(--color-accent);
}

.np-flagge,
.admin-flagge {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: var(--radius-xs);
    opacity: .75;
}
.np-sprache__knopf:hover .np-flagge,
.np-sprache[open] .np-flagge,
.np-sprache__eintrag:hover .np-flagge,
.np-sprache__eintrag.on .np-flagge,
.admin-sprache__knopf:hover .admin-flagge,
.admin-sprache[open] .admin-flagge,
.admin-sprache__eintrag:hover .admin-flagge,
.admin-sprache__eintrag.on .admin-flagge { opacity: 1; }


/* ==================================================================
   Seitenbreite, Kopfleiste, Logo, Menuepunkt
   Die Kopfleiste der Webseite. Die Kundenanmeldung benutzt dieselbe -
   ohne Menue, aber mit demselben Logo in derselben Groesse, derselben
   Hoehe und denselben Menuepunkten.
   ================================================================== */
.np-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.np-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(10px);
}
.np-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 62px;
}

/* Das Logo darf schmaler werden, wenn rechts daneben die Knoepfe nicht
   mehr passen (schmales Telefon, groessere Systemschrift) - sonst ragt
   der letzte Knopf aus dem Bildschirm (Kundenanmeldung, 13.10.2026). */
.np-logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.np-logo > picture { display: block; min-width: 0; }
.np-logo img { width: 230px; max-width: 100%; height: auto; transition: filter .3s; }
/* Das Leuchten unter dem Logo traegt das Cyan, nicht das Gelb: die "24"
   im Logo hat genau diese Farbe. */
.np-nav:hover .np-logo img {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent2) 55%, transparent));
}

/* Menuepunkt: leise, beim Ueberfahren eine Flaeche, der aktuelle mit
   einem Hauch Gelb. Mit Symbol: Symbol und Text nebeneinander. */
.np-navlink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 0;
    color: var(--color-neutral-400);
    font: inherit;
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.np-navlink:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    text-decoration: none;
}
.np-navlink.on,
.np-navlink[aria-current="page"] {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

@media (max-width: 520px) {
    .np-logo img { width: 172px; }
    /* Menuepunkt mit Symbol: auf dem Telefon nur das Symbol, der Text
       steht im aria-label. */
    .np-navlink__text { display: none; }
}


/* ==================================================================
   Leerer Zustand: leere Merkliste (partials/empty-cart.php, in der
   Schublade und auf der Anfrageseite) und leere Artikelliste
   (partials/item-list.php, Filter ohne Treffer).
   Symbol in einer ruhigen Flaeche, darunter der Satz, darunter der Weg
   weiter - jedes in einer eigenen Zeile.
   ================================================================== */
.np-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
/* Linksbuendig und ohne seitlichen Innenabstand: fuer Stellen, an denen
   der Hinweis im Textfluss der Seite steht (leere Artikelliste) statt
   in einem eigenen Kasten. Die Zeilen fluchten mit dem Text darueber. */
.np-leer--links {
    align-items: flex-start;
    padding-inline: 0;
    text-align: left;
}
.np-leer__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-accent2) 12%, transparent);
    color: var(--color-accent2-300);
}
.np-leer__symbol .icon { width: 28px; height: 28px; }
.np-leer__text {
    margin: 0;
    color: var(--color-neutral-300);
    font-size: var(--text-base);
}
.np-leer__link {
    color: var(--color-accent-300);
    font-size: var(--text-base);
}

/* ==================================================================
   Lade-Kreis: "es kommt gleich". Ein Ring im Akzent, der sich dreht.
   Wo er sitzt und wann er sichtbar wird, entscheidet der Ort (z. B. das
   grosse Foto der Artikelseite, style.css) - Groesse und Aussehen nur
   hier. Immer aria-hidden: den Zustand traegt der Inhalt, nicht der
   Kreis. Bei reduzierter Bewegung dreht er langsamer, statt zu
   verschwinden - er ist eine Auskunft, kein Schmuck.
   ================================================================== */
.np-lader {
    display: block;
    width: var(--space-10);
    height: var(--space-10);
    border: 3px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-pill);
    animation: np-lader-dreh .8s linear infinite;
}
@keyframes np-lader-dreh {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .np-lader { animation-duration: 2.4s; }
}